Enable time query param in embed URL (#858)

* Add checkUrlTimeParam method to embed setup * Check that 'matches' array is valid before reading from it * Refactor * Revert "Refactor" This reverts commit 0986559. Co-authored-by: Rowan Krishnan <rowan.krishnan@vimeo.com>
vimeo · Oct 4, 2022 · e1beda4 · e1beda4
1 parent ccc4d67
commit e1beda4
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 4 deletions.
diff --git a/dist/player.es.js b/dist/player.es.js
@@ -1070,6 +1070,66 @@ function initAppendVideoMetadata() {
 
   window.addEventListener('message', onMessage);
 }
+/**
+ * Seek to time indicated by vimeo_t query parameter if present in URL
+ *
+ * @param {HTMLElement} [parent=document] The parent element.
+ * @return {void}
+ */
+
+function checkUrlTimeParam() {
+  var parent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+
+  //  Prevent execution if users include the player.js script multiple times.
+  if (window.VimeoCheckedUrlTimeParam) {
+    return;
+  }
+
+  window.VimeoCheckedUrlTimeParam = true;
+
+  var handleError = function handleError(error) {
+    if ('console' in window && console.error) {
+      console.error("There was an error getting video Id: ".concat(error));
+    }
+  };
+
+  var onMessage = function onMessage(event) {
+    if (!isVimeoUrl(event.origin)) {
+      return;
+    }
+
+    var data = parseMessageData(event.data);
+
+    if (!data || data.event !== 'ready') {
+      return;
+    }
+
+    var iframes = parent.querySelectorAll('iframe');
+
+    for (var i = 0; i < iframes.length; i++) {
+      var iframe = iframes[i];
+      var isValidMessageSource = iframe.contentWindow === event.source;
+
+      if (isVimeoEmbed(iframe.src) && isValidMessageSource) {
+        (function () {
+          var player = new Player(iframe);
+          player.getVideoId().then(function (videoId) {
+            var matches = new RegExp("[?&]vimeo_t_".concat(videoId, "=([^&#]*)")).exec(window.location.href);
+
+            if (matches && matches[1]) {
+              var sec = decodeURI(matches[1]);
+              player.setCurrentTime(sec);
+            }
+
+            return;
+          }).catch(handleError);
+        })();
+      }
+    }
+  };
+
+  window.addEventListener('message', onMessage);
+}
 
 /* MIT License
 
@@ -2570,6 +2630,7 @@ if (!isNode) {
   initializeEmbeds();
   resizeEmbeds();
   initAppendVideoMetadata();
+  checkUrlTimeParam();
 }
 
 export default Player;
diff --git a/dist/player.js b/dist/player.js
diff --git a/dist/player.js.map b/dist/player.js.map
diff --git a/dist/player.min.js b/dist/player.min.js
diff --git a/dist/player.min.js.map b/dist/player.min.js.map
diff --git a/src/lib/embed.js b/src/lib/embed.js
@@ -254,3 +254,57 @@ export function initAppendVideoMetadata(parent = document) {
 
     window.addEventListener('message', onMessage);
 }
+
+/**
+ * Seek to time indicated by vimeo_t query parameter if present in URL
+ *
+ * @param {HTMLElement} [parent=document] The parent element.
+ * @return {void}
+ */
+export function checkUrlTimeParam(parent = document) {
+    //  Prevent execution if users include the player.js script multiple times.
+    if (window.VimeoCheckedUrlTimeParam) {
+        return;
+    }
+    window.VimeoCheckedUrlTimeParam = true;
+
+    const handleError = (error) => {
+        if ('console' in window && console.error) {
+            console.error(`There was an error getting video Id: ${error}`);
+        }
+    };
+
+    const onMessage = (event) => {
+        if (!isVimeoUrl(event.origin)) {
+            return;
+        }
+
+        const data = parseMessageData(event.data);
+        if (!data || data.event !== 'ready') {
+            return;
+        }
+
+        const iframes = parent.querySelectorAll('iframe');
+        for (let i = 0; i < iframes.length; i++) {
+            const iframe = iframes[i];
+            const isValidMessageSource = iframe.contentWindow === event.source;
+
+            if (isVimeoEmbed(iframe.src) && isValidMessageSource) {
+                const player = new Player(iframe);
+                player
+                    .getVideoId()
+                    .then((videoId) => {
+                        const matches = new RegExp(`[?&]vimeo_t_${videoId}=([^&#]*)`).exec(window.location.href);
+                        if (matches && matches[1]) {
+                            const sec = decodeURI(matches[1]);
+                            player.setCurrentTime(sec);
+                        }
+                        return;
+                    })
+                    .catch(handleError);
+            }
+        }
+    };
+
+    window.addEventListener('message', onMessage);
+}
diff --git a/src/player.js b/src/player.js
@@ -5,7 +5,15 @@ import Promise from 'native-promise-only';
 
 import { storeCallback, getCallbacks, removeCallback, swapCallbacks } from './lib/callbacks';
 import { getMethodName, isDomElement, isVimeoUrl, getVimeoUrl, isNode } from './lib/functions';
-import { getOEmbedParameters, getOEmbedData, createEmbed, initializeEmbeds, resizeEmbeds, initAppendVideoMetadata } from './lib/embed';
+import {
+    getOEmbedParameters,
+    getOEmbedData,
+    createEmbed,
+    initializeEmbeds,
+    resizeEmbeds,
+    initAppendVideoMetadata,
+    checkUrlTimeParam
+} from './lib/embed';
 import { parseMessageData, postMessage, processData } from './lib/postmessage';
 import { initializeScreenfull } from './lib/screenfull.js';
 
@@ -1213,6 +1221,7 @@ if (!isNode) {
     initializeEmbeds();
     resizeEmbeds();
     initAppendVideoMetadata();
+    checkUrlTimeParam();
 }
 
 export default Player;