diff --git a/dist/index.es.js b/dist/index.es.js index b710868..fdc9591 100644 --- 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 index 23881fb..eb3a75a 100644 --- 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 index 30d534e..a978dd0 100644 --- 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 index 0a4ae39..71b78ba 100644 --- 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 index a461ccd..a88c562 100644 --- a/src/VimeoPlayer.vue +++ b/src/VimeoPlayer.vue @@ -2,7 +2,7 @@
+