Html5 video player

components/lab-guidance-buttons.js

@@ -33,35 +33,31 @@ function LabGuidanceButtons() {
 
   return html`
     <link rel="stylesheet" href=${getComponentStyleSheetURL(this)} />
-    
+
     <div id="leftButtons">${leftButtons}</div>
-    <div id="rightButtons">${rightButtons}</div>      
-      
+    <div id="rightButtons">${rightButtons}</div>
+
     <antidote-modal show=${modalContentType !== null}>
       ${modalContentType === 'diagram' ? html`
         <h1>${l8n('lab.guidance.modal.diagram.title')}</h1>
         <img src=${lessonRequest.data.Diagram} alt="${l8n('lab.guidance.modal.diagram.title')}"/>
       ` : ''}
-      
+
       ${modalContentType === 'video' ? html`
         <h1>${l8n('lab.guidance.modal.video.title')}</h1>
-        <div class="video-wrapper">
-          <iframe src=${lessonRequest.data.Video} frameborder="0" class="video-embed"></iframe>
-        </div>
+        <video-player source-url=${lessonRequest.data.Video}></video-player>
       ` : ''}
 
       ${modalContentType === 'stagevideo' ? html`
         <h1>${l8n('lab.guidance.modal.video.title')}</h1>
-        <div class="video-wrapper">
-          <iframe src=${lessonRequest.data.Stages[lessonStage].StageVideo} frameborder="0" class="video-embed"></iframe>
-        </div>
+        <video-player source-url=${lessonRequest.data.Stages[lessonStage].StageVideo}></video-player>
       ` : ''}
 
       ${modalContentType === 'objective' ? html`
         <h1>${l8n('lab.guidance.modal.objective.title')}</h1>
         <p>${lessonRequest.data.Stages[lessonStage].VerifyObjective}</p>
       ` : ''}
-      
+
       <button id="exit" class="btn primary" @click=${() => setModalContentType(null)}>
         ${l8n('lab.guidance.modal.close.button.label')}
       </button>

components/video-player.js

@@ -0,0 +1,75 @@
+import { html } from 'lit-html';
+import {
+  component,
+  useState,
+  useEffect
+} from "haunted";
+
+import getComponentStyleSheetURL from '../helpers/stylesheet';
+
+export function getPlayerType (sourceUrl) {
+  if (!sourceUrl) {
+    console.error('No video url set in lesson')
+    return
+  }
+
+  const isYouTubeVideo = sourceUrl.indexOf('youtube.com') !== -1
+    || sourceUrl.indexOf('youtu.be') !== -1
+
+  return isYouTubeVideo ? 'youtube' : 'native'
+}
+
+export function getVideoType (sourceUrl) {
+  const regex = /\.\w{3,4}($|\?)/
+  const match = sourceUrl && sourceUrl.match(regex)
+  const videoExtension = match && match[0]
+  const videoType = (typeof videoExtension === 'string')
+    ? videoExtension.replace('.', '')
+    : ''
+
+  return videoType
+}
+
+export function getVideoPlayer({ sourceUrl, videoType, playerType }) {
+  playerType = playerType || getPlayerType(sourceUrl)
+  videoType = videoType || getVideoType(sourceUrl)
+
+  if (playerType === 'youtube') {
+    return html`
+      <div class="video-wrapper">
+        <iframe
+          src=${sourceUrl}
+          frameborder="0"
+          class="video-embed">
+        </iframe>
+      </div>
+    `
+  } else {
+    return html`
+      <div class="native-video-wrapper">
+        <video class="native-video-embed" controls>
+          <source src=${sourceUrl} type="video/${getVideoType(sourceUrl)}">
+        </video>
+      </div>
+    `
+  }
+}
+
+function VideoPlayer({ sourceUrl }) {
+  return html`
+    <link rel="stylesheet" href=${getComponentStyleSheetURL(this)} />
+    ${sourceUrl && sourceUrl.length
+    ?
+      html`
+        ${getVideoPlayer({ sourceUrl })}
+      `
+    : html``
+    }
+  `;
+}
+
+VideoPlayer.observedAttributes = ['source-url'];
+
+customElements.define("video-player", component(VideoPlayer));
+
+export default VideoPlayer;

index.js

@@ -28,3 +28,4 @@ export * from './components/course-plan-name-field.js';
 export * from './components/ptr-banner.js';
 export * from './components/promoted-lessons.js';
 export * from './components/progress-links';
+export * from './components/video-player.js';