1277 - Bug fix: Kaltura video player has various issues

templates/vue/src/components/Lightbox/media/MultiContentMedia/MultiContentRow.vue

@@ -69,12 +69,13 @@
         <div v-if="node.mediaType !== 'multi-content'">
           <tapestry-media
             :node-id="node.id"
-            :dimensions="dimensions"
+            :dimensions="tapestryMediaDimensions"
             context="multi-content"
             :hide-title="presentationStyle === 'accordion'"
             style="margin-bottom: 24px;"
             @complete="complete"
             @load="handleLoad(null)"
+            @change:dimensions="updateDimensions"
           />
           <multi-content-rows
             v-if="children.length > 0"
@@ -166,6 +167,7 @@ export default {
   data() {
     return {
       isVisible: this.presentationStyle === "page",
+      tapestryMediaDimensions: this.dimensions,
     }
   },
   computed: {
@@ -217,6 +219,11 @@ export default {
     handleAutoClose() {
       this.$emit("close")
     },
+    updateDimensions(newDimensions) {
+      if (typeof newDimensions.height === "undefined" || newDimensions.height > 0) {
+        this.tapestryMediaDimensions = { ...this.dimensions, ...newDimensions }
+      }
+    },
   },
 }
 </script>

templates/vue/src/components/Lightbox/media/VideoMedia/H5PVideoMedia.vue

@@ -24,16 +24,18 @@
 </template>
 
 <script>
+import videoMediaMixins from "./_mixins.js"
 import { mapGetters, mapActions, mapState } from "vuex"
 import client from "@/services/TapestryAPI"
-import { SEEK_THRESHOLD } from "./video.config"
+import { SEEK_THRESHOLD } from "./_config"
 import Helpers from "@/utils/Helpers"
 
 // How often to update the H5P settings (in seconds)
 const updateSettingsInterval = 10
 
 export default {
   name: "h5p-video-media",
+  mixins: [videoMediaMixins],
   props: {
     node: {
       type: Object,
@@ -140,33 +142,31 @@ export default {
     setFrameDimensions() {
       const h5pDimensions = this.instance.parent.$container[0].getBoundingClientRect()
       // default
-      this.frameHeight = h5pDimensions.height
       this.frameWidth = 0
-      if (this.node.fitWindow || this.hasMultiContentContext) {
+      this.frameHeight = h5pDimensions.height
+      if (
+        (this.node.fullscreen && this.node.fitWindow) ||
+        this.hasMultiContentContext
+      ) {
         // Video should fit within the smaller of the viewport or the container it's in
-        let fitHeight = window.innerHeight
+        let containerDimensions = {
+          height: window.innerHeight,
+        }
         if (this.hasMultiContentContext) {
           // Count for the header
-          // TODO: Find a better way of doing this without hardcoding the heigh value
-          fitHeight -= 100
-        }
-        // Proportionally make the frame smaller
-        let scaleFactor = fitHeight / h5pDimensions.height
-        this.frameHeight = h5pDimensions.height * scaleFactor
-        this.frameWidth = h5pDimensions.width * scaleFactor
-        // if the width is bigger than the available space, we need to scale based on the width
-        let fitWidth = this.$refs.h5pIframeContainer.clientWidth
-        if (this.frameWidth > fitWidth) {
-          scaleFactor = fitWidth / h5pDimensions.width
-          this.frameWidth = h5pDimensions.width * scaleFactor
-          this.frameHeight = h5pDimensions.height * scaleFactor
+          // TODO: Find a better way of doing this without hardcoding the height value
+          containerDimensions.height -= 100
         }
+        ;[this.frameWidth, this.frameHeight] = this.fitMediaInContainer(
+          h5pDimensions,
+          containerDimensions
+        )
       }
       // Fix for unknown issue where H5P height is just a bit short
       if (this.frameHeight) {
         this.frameHeight += 2
       }
-      let updatedDimensions = { height: this.frameHeight }
+      const updatedDimensions = { height: this.frameHeight }
       if (this.frameWidth) {
         updatedDimensions.width = this.frameWidth
       }
@@ -302,23 +302,14 @@ export default {
     handleLoad() {
       const h5pObj = this.$refs.h5p.contentWindow.H5P
       const h5pInstance = h5pObj.instances[0]
-      const loadedH5PId = h5pInstance.contentId
-      this.library = h5pInstance.libraryInfo.machineName
-
-      this.frameHeight = this.dimensions.height
-      // Check to see whether this is an H5P recorder
-      // If it is, we can emit an event to load the recorded audio (if exists)
-      // and terminate
-      if (h5pInstance.recorder && loadedH5PId) {
-        this.loadedH5PRecorderId = loadedH5PId
-        this.h5pRecorderSaverIsLoaded()
-        return
-      }
       const mediaProgress = this.node.progress
+
       this.frameHeight = this.$refs.h5p.contentWindow.document.activeElement.children[0].clientHeight
       this.$emit("change:dimensions", { height: this.frameHeight })
+
       const h5pVideo = h5pInstance.video
       const h5pIframeComponent = this
+
       const handleH5pAfterLoad = () => {
         h5pIframeComponent.instance = h5pVideo
         window.addEventListener("resize", h5pIframeComponent.setFrameDimensions)

templates/vue/src/components/Lightbox/media/VideoMedia/KalturaMedia.vue

@@ -10,10 +10,13 @@
 // Prevent linter warning on use of kWidget variable
 /*global kWidget*/
 
+import videoMediaMixins from "./_mixins.js"
 import client from "@/services/TapestryAPI"
+import { mapState, mapMutations } from "vuex"
 
 export default {
-  name: "kaltura-video-media",
+  name: "kaltura-media",
+  mixins: [videoMediaMixins],
   props: {
     node: {
       type: Object,
@@ -26,6 +29,11 @@ export default {
         return ["width", "height"].every(prop => val.hasOwnProperty(prop))
       },
     },
+    context: {
+      type: String,
+      required: false,
+      default: "lightbox",
+    },
     playing: {
       type: Boolean,
       required: true,
@@ -37,46 +45,49 @@ export default {
   },
   data() {
     return {
-      onLoad: true,
       playerId: "",
       amountViewed: 0,
     }
   },
   computed: {
+    ...mapState(["kalturaScriptsLoaded"]),
     kalturaId() {
       return this.node.typeData.kalturaId
     },
   },
-  watch: {
-    playing() {
-      if (this.playing && this.playerId) {
-        const kalturaVideo = document.getElementById(this.playerId)
-        if (this.onLoad) {
-          const videoDuration = kalturaVideo.evaluate("{duration}")
-          const currentTime = this.node.progress * videoDuration
-
-          this.$emit("timeupdate", {
-            amountViewed: this.node.progress,
-            currentTime,
-          })
-
-          kalturaVideo.sendNotification("doSeek", currentTime)
-          this.lastTime = currentTime
-          this.onLoad = false
-        }
-      }
-    },
-  },
-  created() {
-    const kalturaScript = document.createElement("script")
+  mounted() {
     const partnerId = this.node.typeData.kalturaData.partnerId
     const serviceUrl = this.node.typeData.kalturaData.serviceUrl
     const uniqueConfiguration = this.node.typeData.kalturaData.uniqueConfiguration
-    kalturaScript.src = `${serviceUrl}/p/${partnerId}/sp/${partnerId}00/embedIframeJs/uiconf_id/${uniqueConfiguration}/partner_id/${partnerId}`
 
-    kalturaScript.id = "kaltura-script"
+    const kalturaScriptId = `tapestry-kaltura-script-${serviceUrl}-${partnerId}-${uniqueConfiguration}`
 
-    kalturaScript.addEventListener("load", () => {
+    let kalturaScript = document.getElementById(kalturaScriptId)
+
+    if (this.kalturaScriptsLoaded.includes(kalturaScriptId)) {
+      this.handleScriptLoaded(partnerId, uniqueConfiguration)
+    } else if (kalturaScript) {
+      kalturaScript.addEventListener("load", () => {
+        this.addKalturaScriptLoaded(kalturaScriptId)
+        this.handleScriptLoaded(partnerId, uniqueConfiguration)
+      })
+    } else {
+      kalturaScript = document.createElement("script")
+      kalturaScript.src = `${serviceUrl}/p/${partnerId}/sp/${partnerId}00/embedIframeJs/uiconf_id/${uniqueConfiguration}/partner_id/${partnerId}`
+      kalturaScript.id = kalturaScriptId
+      kalturaScript.addEventListener("load", () => {
+        this.addKalturaScriptLoaded(kalturaScriptId)
+        this.handleScriptLoaded(partnerId, uniqueConfiguration)
+      })
+      document.head.appendChild(kalturaScript)
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.setFrameDimensions)
+  },
+  methods: {
+    ...mapMutations(["addKalturaScriptLoaded"]),
+    handleScriptLoaded(partnerId, uniqueConfiguration) {
       kWidget.embed({
         targetId: `kaltura-container-${this.node.id}`,
         wid: `_${partnerId}`,
@@ -96,8 +107,16 @@ export default {
 
       kalturaIframe.onload = () => {
         kWidget.addReadyCallback(playerId => {
-          this.playerId = playerId
           const kalturaVideo = document.getElementById(playerId)
+          if (!kalturaVideo.contains(kalturaIframe)) {
+            return
+          }
+          this.playerId = playerId
+
+          if (this.context === "multi-content") {
+            this.setFrameDimensions()
+            window.addEventListener("resize", this.setFrameDimensions)
+          }
 
           kalturaVideo.kBind("playerUpdatePlayhead", currentTime => {
             const videoDuration = kalturaVideo.evaluate("{duration}")
@@ -137,7 +156,7 @@ export default {
             )
           })
 
-          kalturaVideo.kBind("seeked", seekedTime => {
+          kalturaVideo.kBind("userInitiatedSeek", seekedTime => {
             this.$emit("seeked", { currentTime: seekedTime })
           })
 
@@ -150,23 +169,46 @@ export default {
           const nodeProgress = this.node.progress
           const videoDuration = kalturaVideo.evaluate("{duration}")
           const currentTime = nodeProgress * videoDuration
+
+          try {
+            kalturaVideo.sendNotification("doSeek", currentTime)
+          } catch (e) {
+            try {
+              kalturaVideo.kBind("mediaReady", function() {
+                kalturaVideo.sendNotification("doSeek", currentTime)
+              })
+            } catch (e) {
+              console.error("Kaltura player could not seek to its saved position", e)
+            }
+          }
+
           this.$emit("load", { currentTime, type: "kaltura-video" })
         })
       }
-    })
-
-    document.head.appendChild(kalturaScript)
-  },
-  beforeDestroy() {
-    const kalturaScript = document.getElementById("kaltura-script")
-    document.head.removeChild(kalturaScript)
-  },
-  methods: {
+    },
     updateVideoProgress(currentTime, duration) {
       this.amountViewed = currentTime / duration
       this.$emit("timeupdate", { amountViewed: this.amountViewed, currentTime })
       this.lastTime = currentTime
     },
+    setFrameDimensions() {
+      const kalturaVideo = document.getElementById(this.playerId)
+      const media = kalturaVideo.evaluate("{mediaProxy.entry}")
+
+      if (media) {
+        const containerDimensions = {
+          width: kalturaVideo.evaluate("{video.player.width}"),
+          height: window.innerHeight,
+        }
+        const updatedDimensions = this.fitMediaInContainer(
+          media,
+          containerDimensions
+        )
+        // Account for the height of the kaltura player bar
+        updatedDimensions.height += 36
+        this.$emit("change:dimensions", updatedDimensions)
+      }
+    },
     playVideo() {
       if (this.playerId) {
         const kalturaVideo = document.getElementById(this.playerId)
@@ -180,11 +222,12 @@ export default {
       }
     },
     reset() {
-      this.onLoad = false
-      const kalturaVideo = document.getElementById(this.playerId)
-      this.updateVideoProgress(0, kalturaVideo.evaluate("{duration}"))
-      kalturaVideo.sendNotification("doSeek", 0)
-      this.$emit("timeupdate", { amountViewed: this.amountViewed, currentTime: 0 })
+      if (this.playerId) {
+        const kalturaVideo = document.getElementById(this.playerId)
+        this.updateVideoProgress(0, kalturaVideo.evaluate("{duration}"))
+        kalturaVideo.sendNotification("doSeek", 0)
+        this.$emit("timeupdate", { amountViewed: this.amountViewed, currentTime: 0 })
+      }
     },
   },
 }

templates/vue/src/components/Lightbox/media/VideoMedia/UrlVideoMedia.vue

@@ -34,7 +34,7 @@
 import ISO6391 from "iso-639-1"
 import { mapMutations } from "vuex"
 import client from "@/services/TapestryAPI"
-import { SEEK_THRESHOLD } from "./video.config"
+import { SEEK_THRESHOLD } from "./_config"
 import PlayScreen from "./PlayScreen"
 
 export default {

templates/vue/src/components/Lightbox/media/VideoMedia/YouTubeMedia.vue

@@ -26,7 +26,7 @@
 import { mapState, mapActions } from "vuex"
 import Helpers from "@/utils/Helpers"
 import client from "@/services/TapestryAPI"
-import { SEEK_THRESHOLD } from "./video.config"
+import { SEEK_THRESHOLD } from "./_config"
 import { data as wpData } from "@/services/wp"
 
 // Set as per https://developers.google.com/youtube/iframe_api_reference#Playback_status

templates/vue/src/components/Lightbox/media/VideoMedia/_mixins.js

@@ -0,0 +1,20 @@
+export default {
+  methods: {
+    fitMediaInContainer(media, container) {
+      // First, we scale the media based on height
+      let scaleFactor = container.height / media.height
+      const updatedDimensions = {
+        width: media.width * scaleFactor,
+        height: media.height * scaleFactor, // equals == container.height
+      }
+
+      // if the width is bigger than the available space, we need to scale based on the width
+      if (updatedDimensions.width > container.width) {
+        scaleFactor = container.width / media.width
+        updatedDimensions.width = media.width * scaleFactor
+        updatedDimensions.height = media.height * scaleFactor
+      }
+      return updatedDimensions
+    },
+  },
+}