Add ability to dynamically change posters

zcuric · Dec 14, 2020 · 427e843 · 427e843
1 parent 9c88451
commit 427e843
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git a/src/components/Plyrue.vue b/src/components/Plyrue.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="plyrue">
-    <component :is="component" v-bind="$attrs">
-      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
+    <component :is="`plyrue-${type}`" v-bind="$attrs">
+      <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope"></slot>
       </template>
     </component>
   </div>
@@ -21,22 +21,32 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'default',
+      default: 'default'
     },
     options: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     poster: {
       type: String,
-      default: null,
-    },
+      default: null
+    }
+  },
+  methods: {
+    emitPlayerEvent(event) {
+      this.$emit(event.type, event);
+    }
+  },
+  watch: {
+    poster() {
+      this.player.poster = this.poster;
+    }
   },
   mounted() {
     const { $el, options, emitPlayerEvent } = this;
-    const poster = this.poster || options.poster
+    const poster = this.poster || options.poster;
     this.player = new Plyr($el.firstChild, options);
-    if(poster) this.player.poster = poster;
+    if (poster) this.player.poster = poster;
     this.$emit('player', this.player);
     const events = Object.keys(this.$listeners);
     events.forEach(event => {
@@ -54,21 +64,11 @@ export default {
       console.warn(e.message);
     }
   },
-  methods: {
-    emitPlayerEvent(event) {
-      this.$emit(event.type, event);
-    },
-  },
-  computed: {
-    component() {
-      return `plyrue-${this.type}`;
-    },
-  },
   components: {
     'plyrue-audio': Audio,
     'plyrue-default': Default,
     'plyrue-video': Video,
-    'plyrue-embed': VideoEmbed,
-  },
+    'plyrue-embed': VideoEmbed
+  }
 };
 </script>
diff --git a/tests/video.spec.js b/tests/video.spec.js
@@ -96,7 +96,7 @@ describe('Plyrue video type', () => {
     expect(wrapper.emitted().play).toBeTruthy();
   });
 
-  it.only('sets video player attributes', () => {
+  it('sets video player attributes', () => {
     const wrapper = mount(Plyrue, {
       attrs: {
         type: 'video',
@@ -121,6 +121,28 @@ describe('Plyrue video type', () => {
     wrapper.destroy();
   });
 
+  it('dynamically changes player poster', async () => {
+    const wrapper = mount(Plyrue, {
+      attrs: {
+        type: 'video',
+        sources,
+        captions,
+        poster,
+        src,
+        controls: false,
+        autoplay: true
+      }
+    });
+
+    expect(wrapper.vm.player.poster).toBe(poster);
+    const newPoster = 'https://via.placeholder.com/300/09f/fff.png';
+    await wrapper.setProps({
+      poster: newPoster
+    });
+    expect(wrapper.vm.player.poster).toBe(newPoster);
+    wrapper.destroy();
+  });
+
   it('renders html5 video with source slot', () => {
     const wrapper = mount(Plyrue, {
       slots: {