fix: make videoID not required anymore.

Properly update video when videoID, videoURL or controls change.
dobromir-hristov · Feb 18, 2021 · 0c21bad · 0c21bad
1 parent f34f367
commit 0c21bad
Show file tree

Hide file tree

Showing 15 changed files with 741 additions and 76 deletions.
diff --git a/dist/index.es.js b/dist/index.es.js
@@ -1,4 +1,4 @@
-import { ref, toRefs, onMounted, onBeforeUnmount, watch, openBlock, createBlock } from 'vue';
+import { ref, toRefs, onMounted, onBeforeUnmount, watch, toRef, unref, openBlock, createBlock } from 'vue';
 import Player from '@vimeo/player';
 
 function emitVueEvent(_ref) {
@@ -30,11 +30,11 @@ var script = {
     },
     videoId: {
       type: String,
-      required: true
+      "default": ''
     },
     videoUrl: {
       type: String,
-      "default": undefined
+      "default": ''
     },
     loop: {
       type: Boolean,
@@ -58,21 +58,30 @@ var script = {
         videoId = _toRefs.videoId,
         videoUrl = _toRefs.videoUrl;
 
-    var options = {
-      id: props.videoId,
-      width: props.playerWidth,
-      height: props.playerHeight,
-      loop: props.loop,
-      autoplay: props.autoplay,
-      controls: props.controls
-    };
-
-    if (videoUrl.value) {
-      options.url = videoUrl.value;
+    if (!props.videoId && !props.videoUrl) {
+      console.warn('[VueVimeoPlayer: You mist provide at least a videoId or a videoUrl prop]');
     }
 
-    var update = function update(videoId) {
-      return player.loadVideo(videoId);
+    var mergeOptions = function mergeOptions(_ref3) {
+      var id = _ref3.id,
+          url = _ref3.url;
+      var opts = {
+        width: props.playerWidth,
+        height: props.playerHeight,
+        loop: props.loop,
+        autoplay: props.autoplay,
+        controls: props.controls
+      };
+
+      if (unref(url)) {
+        opts.url = unref(url);
+      }
+
+      if (unref(id)) {
+        opts.id = unref(id);
+      }
+
+      return opts;
     };
 
     var play = function play() {
@@ -108,14 +117,38 @@ var script = {
     };
 
     onMounted(function () {
-      player = new Player(elementRef.value, Object.assign(options, props.options));
+      player = new Player(elementRef.value, mergeOptions({
+        id: props.videoId,
+        url: props.videoUrl
+      }));
       setEvents();
     });
     onBeforeUnmount(function () {
       return player.unload();
     });
-    watch(videoId, update);
-    watch(videoUrl, update);
+    watch(videoId, function (id) {
+      return player.loadVideo(mergeOptions({
+        id: id
+      }));
+    });
+    watch(videoUrl, function (url) {
+      return player.loadVideo(mergeOptions({
+        url: url
+      }));
+    });
+    watch(toRef(props, 'controls'), function () {
+      return player.loadVideo(mergeOptions({
+        url: videoUrl,
+        id: videoId
+      }));
+    });
+
+    var update = function update(id) {
+      return player.loadVideo(mergeOptions({
+        id: id
+      }));
+    };
+
     return {
       update: update,
       play: play,

diff --git a/dist/index.iife.js b/dist/index.iife.js
@@ -34,11 +34,11 @@ var VueVimeoPlayer = (function (exports, vue, Player) {
       },
       videoId: {
         type: String,
-        required: true
+        "default": ''
       },
       videoUrl: {
         type: String,
-        "default": undefined
+        "default": ''
       },
       loop: {
         type: Boolean,
@@ -62,21 +62,30 @@ var VueVimeoPlayer = (function (exports, vue, Player) {
           videoId = _toRefs.videoId,
           videoUrl = _toRefs.videoUrl;
 
-      var options = {
-        id: props.videoId,
-        width: props.playerWidth,
-        height: props.playerHeight,
-        loop: props.loop,
-        autoplay: props.autoplay,
-        controls: props.controls
-      };
-
-      if (videoUrl.value) {
-        options.url = videoUrl.value;
+      if (!props.videoId && !props.videoUrl) {
+        console.warn('[VueVimeoPlayer: You mist provide at least a videoId or a videoUrl prop]');
       }
 
-      var update = function update(videoId) {
-        return player.loadVideo(videoId);
+      var mergeOptions = function mergeOptions(_ref3) {
+        var id = _ref3.id,
+            url = _ref3.url;
+        var opts = {
+          width: props.playerWidth,
+          height: props.playerHeight,
+          loop: props.loop,
+          autoplay: props.autoplay,
+          controls: props.controls
+        };
+
+        if (vue.unref(url)) {
+          opts.url = vue.unref(url);
+        }
+
+        if (vue.unref(id)) {
+          opts.id = vue.unref(id);
+        }
+
+        return opts;
       };
 
       var play = function play() {
@@ -112,14 +121,38 @@ var VueVimeoPlayer = (function (exports, vue, Player) {
       };
 
       vue.onMounted(function () {
-        player = new Player__default['default'](elementRef.value, Object.assign(options, props.options));
+        player = new Player__default['default'](elementRef.value, mergeOptions({
+          id: props.videoId,
+          url: props.videoUrl
+        }));
         setEvents();
       });
       vue.onBeforeUnmount(function () {
         return player.unload();
       });
-      vue.watch(videoId, update);
-      vue.watch(videoUrl, update);
+      vue.watch(videoId, function (id) {
+        return player.loadVideo(mergeOptions({
+          id: id
+        }));
+      });
+      vue.watch(videoUrl, function (url) {
+        return player.loadVideo(mergeOptions({
+          url: url
+        }));
+      });
+      vue.watch(vue.toRef(props, 'controls'), function () {
+        return player.loadVideo(mergeOptions({
+          url: videoUrl,
+          id: videoId
+        }));
+      });
+
+      var update = function update(id) {
+        return player.loadVideo(mergeOptions({
+          id: id
+        }));
+      };
+
       return {
         update: update,
         play: play,

diff --git a/dist/index.js b/dist/index.js
@@ -38,11 +38,11 @@ var script = {
     },
     videoId: {
       type: String,
-      required: true
+      "default": ''
     },
     videoUrl: {
       type: String,
-      "default": undefined
+      "default": ''
     },
     loop: {
       type: Boolean,
@@ -66,21 +66,30 @@ var script = {
         videoId = _toRefs.videoId,
         videoUrl = _toRefs.videoUrl;
 
-    var options = {
-      id: props.videoId,
-      width: props.playerWidth,
-      height: props.playerHeight,
-      loop: props.loop,
-      autoplay: props.autoplay,
-      controls: props.controls
-    };
-
-    if (videoUrl.value) {
-      options.url = videoUrl.value;
+    if (!props.videoId && !props.videoUrl) {
+      console.warn('[VueVimeoPlayer: You mist provide at least a videoId or a videoUrl prop]');
     }
 
-    var update = function update(videoId) {
-      return player.loadVideo(videoId);
+    var mergeOptions = function mergeOptions(_ref3) {
+      var id = _ref3.id,
+          url = _ref3.url;
+      var opts = {
+        width: props.playerWidth,
+        height: props.playerHeight,
+        loop: props.loop,
+        autoplay: props.autoplay,
+        controls: props.controls
+      };
+
+      if (vue.unref(url)) {
+        opts.url = vue.unref(url);
+      }
+
+      if (vue.unref(id)) {
+        opts.id = vue.unref(id);
+      }
+
+      return opts;
     };
 
     var play = function play() {
@@ -116,14 +125,38 @@ var script = {
     };
 
     vue.onMounted(function () {
-      player = new Player__default['default'](elementRef.value, Object.assign(options, props.options));
+      player = new Player__default['default'](elementRef.value, mergeOptions({
+        id: props.videoId,
+        url: props.videoUrl
+      }));
       setEvents();
     });
     vue.onBeforeUnmount(function () {
       return player.unload();
     });
-    vue.watch(videoId, update);
-    vue.watch(videoUrl, update);
+    vue.watch(videoId, function (id) {
+      return player.loadVideo(mergeOptions({
+        id: id
+      }));
+    });
+    vue.watch(videoUrl, function (url) {
+      return player.loadVideo(mergeOptions({
+        url: url
+      }));
+    });
+    vue.watch(vue.toRef(props, 'controls'), function () {
+      return player.loadVideo(mergeOptions({
+        url: videoUrl,
+        id: videoId
+      }));
+    });
+
+    var update = function update(id) {
+      return player.loadVideo(mergeOptions({
+        id: id
+      }));
+    };
+
     return {
       update: update,
       play: play,

diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "standard-version": "^9.0.0"
   },
   "dependencies": {
-    "@vimeo/player": "^2.14.1",
+    "@vimeo/player": "^2.15.0",
     "@vue/compiler-sfc": "^3.0.3",
     "vue": "^3.0.3"
   },

diff --git a/src/VimeoPlayer.vue b/src/VimeoPlayer.vue
@@ -2,7 +2,7 @@
   <div ref="elementRef" />
 </template>
 <script>
-import { watch, toRefs, onMounted, onBeforeUnmount, ref } from 'vue'
+import { watch, toRefs, onMounted, onBeforeUnmount, ref, unref, toRef } from 'vue'
 import Player from '@vimeo/player'
 
 function emitVueEvent ({ player, event, emit }) {
@@ -52,11 +52,11 @@ export default {
     },
     videoId: {
       type: String,
-      required: true
+      default: ''
     },
     videoUrl: {
       type: String,
-      default: undefined
+      default: ''
     },
     loop: {
       type: Boolean,
@@ -75,19 +75,26 @@ export default {
     let player
     const elementRef = ref(null)
     const { videoId, videoUrl } = toRefs(props)
-    const options = {
-      id: props.videoId,
-      width: props.playerWidth,
-      height: props.playerHeight,
-      loop: props.loop,
-      autoplay: props.autoplay,
-      controls: props.controls
+    if (!props.videoId && !props.videoUrl) {
+      console.warn('[VueVimeoPlayer: You mist provide at least a videoId or a videoUrl prop]')
     }
-    if (videoUrl.value) {
-      options.url = videoUrl.value
+    const mergeOptions = ({ id, url }) => {
+      const opts = {
+        width: props.playerWidth,
+        height: props.playerHeight,
+        loop: props.loop,
+        autoplay: props.autoplay,
+        controls: props.controls
+      }
+      if (unref(url)) {
+        opts.url = unref(url)
+      }
+      if (unref(id)) {
+        opts.id = unref(id)
+      }
+      return opts
     }
 
-    const update = videoId => player.loadVideo(videoId)
     const play = () => player.play()
     const pause = () => player.pause()
     const mute = () => player.setVolume(0)
@@ -104,15 +111,18 @@ export default {
     }
 
     onMounted(() => {
-      player = new Player(elementRef.value, Object.assign(options, props.options))
+      player = new Player(elementRef.value, mergeOptions({ id: props.videoId, url: props.videoUrl }))
 
       setEvents()
     })
 
     onBeforeUnmount(() => player.unload())
 
-    watch(videoId, update)
-    watch(videoUrl, update)
+    watch(videoId, (id) => player.loadVideo(mergeOptions({ id })))
+    watch(videoUrl, (url) => player.loadVideo(mergeOptions({ url })))
+    watch(toRef(props, 'controls'), () => player.loadVideo(mergeOptions({ url: videoUrl, id: videoId })))
+
+    const update = (id) => player.loadVideo(mergeOptions({ id }))
 
     return {
       update, play, pause, mute, unmute, elementRef