@mindedge/vuetify-player 0.4.9 → 0.5.0

package/README.md

@@ -26,6 +26,7 @@ An accessible, localized, full featured media player with Vuetifyjs
 | webm        | wav   | jpg              |
 | ogg         | ogg   | gif (+ animated) |
 | YouTube URL |       |                  |
+| Vimeo URL   |       |                  |
 
 ## Quick Start
 
@@ -244,9 +245,11 @@ See [Full media `src` structure for where the ads array is placed](#full-media-s
 | `loadeddata`                     | `Event`           | When the frame at the current playback position of the media has finished loading; often the first frame             |
 | `loadedmetadata`                 | `Event`           | When the metadata has been loaded                                                                                    |
 | `play`                           | `Event`           | The media has received a request to start playing                                                                    |
+| `playing`                        | `Event`           | The media playback is first started, and whenever it is restarted                                                    |
 | `pause`                          | `Event`           | Playback has been suspended                                                                                          |
 | `progress`                       | `Event`           | The progress event is fired periodically as the browser loads a resource.                                            |
-| `seeking`                        | `Event`           | Playback has moved to a new location                                                                                 |
+| `seeking`                        | `Event`           | Playback is currently beeing seeked                                                                                  |
+| `seeked`                         | `Event`           | Playback has moved to a new location                                                                                 |
 | `timeupdate`                     | `Object`          | The current time was changed. Object contains { event: Event, current_percent: Number }                              |
 | `ratechange`                     | `Number`          | The playback speed multiplier                                                                                        |
 | `stalled`                        | `Event`           | The browser tried to download but has not received data yet                                                          |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mindedge/vuetify-player",
-    "version": "0.4.9",
+    "version": "0.5.0",
     "private": false,
     "description": "Accessible, localized, full featured media player with Vuetifyjs",
     "author": "Jacob Rogaishio",

package/src/components/Media/Html5Player.vue

@@ -20,13 +20,32 @@
                 <div
                     v-if="resolvedType === 'video' && state.replay"
                     class="player-overlay"
+                    role="button"
+                    @click="play"
                 >
                     <div class="player-overlay--icon">
-                        <v-icon class="player-overlay--replay-icon">
+                        <v-icon class="player-overlay--play-icon">
                             mdi-replay
                         </v-icon>
                     </div>
                 </div>
+                <div
+                    v-if="
+                        resolvedType === 'video' &&
+                        state.paused &&
+                        !state.replay &&
+                        player.currentTime === 0
+                    "
+                    class="player-overlay"
+                    role="button"
+                    @click="play"
+                >
+                    <div class="player-overlay--icon">
+                        <v-icon class="player-overlay--play-icon">
+                            mdi-play
+                        </v-icon>
+                    </div>
+                </div>
                 <video
                     ref="player"
                     tabindex="0"
@@ -48,6 +67,7 @@
                     :preload="attributes.preload"
                     @click="playToggle"
                     @seeking="onSeeking"
+                    @seeked="onSeeked"
                     @timeupdate="onTimeupdate"
                     @progress="onMediaProgress"
                     @loadedmetadata="onLoadedmetadata"
@@ -630,6 +650,7 @@ export default {
         'ratechange',
         'timeupdate',
         'seeking',
+        'seeked',
         'progress',
         'volumechange',
         'cuechange',
@@ -1053,6 +1074,9 @@ export default {
         onSeeking(e) {
             this.$emit('seeking', e)
         },
+        onSeeked(e) {
+            this.$emit('seeked', e)
+        },
         onMediaProgress(e) {
             this.$emit('progress', e)
         },
@@ -1437,7 +1461,7 @@ export default {
     height: 0;
     text-align: center;
 }
-.player-overlay--replay-icon {
+.player-overlay--play-icon {
     color: #fff;
     font-size: 5rem;
 }

package/src/components/Media/VimeoPlayer.vue

@@ -0,0 +1,219 @@
+<template>
+    <v-container>
+        <v-responsive :aspect-ratio="aspectRatio">
+            <v-skeleton-loader
+                v-if="!player.ready"
+                class="mx-auto player-skeleton"
+                type="image"
+            ></v-skeleton-loader>
+
+            <div :id="player.id" :class="playerClass"></div>
+        </v-responsive>
+    </v-container>
+</template>
+
+<script>
+export default {
+    name: 'VimeoPlayer',
+    props: {
+        language: { type: String, required: false, default: 'en-US' },
+        type: {
+            type: String,
+            required: false,
+            default: 'video',
+        },
+        attributes: {
+            type: Object,
+            required: true,
+        },
+        src: {
+            type: Object,
+            required: true,
+        },
+    },
+    emits: [
+        'loadeddata',
+        'play',
+        'pause',
+        'progress',
+        'volumechange',
+        'ended',
+        'seeking',
+        'seeked',
+        'timeupdate',
+    ],
+    watch: {},
+    computed: {
+        playerClass() {
+            let classList = 'player-' + this.resolvedType
+            return classList
+        },
+        resolvedType() {
+            // vimeo is always a video
+            return 'video'
+        },
+        aspectRatio() {
+            if (this.player.height === 0 || this.player.width === 0) {
+                return 16 / 9
+            } else {
+                return this.player.width / this.player.height
+            }
+        },
+    },
+    data() {
+        return {
+            player: {
+                id:
+                    'vimeo-player-' +
+                    Math.floor(Math.random() * 10000000) +
+                    1000000,
+                vimeo: {},
+                tag: {},
+                scriptTag: {},
+                loaded: false,
+                done: false,
+                ready: false,
+                height: 0,
+                width: 0,
+            },
+        }
+    },
+    mounted() {
+        this.loadAPI()
+    },
+    beforeDestroy() {
+        if (this.player.loaded) {
+            this.player.vimeo.off('seeked')
+            this.player.vimeo.off('timeupdate')
+        }
+    },
+    methods: {
+        parseVideoSource(src) {
+            const result = {
+                videoId: null,
+                listId: null,
+            }
+
+            if (!src.sources || !src.sources.length || !src.sources[0].src) {
+                return result
+            } else {
+                let url = src.sources[0].src
+                const regexId =
+                    /(http|https)?:\/\/(www\.|player\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|video\/|)(\d+)(?:|\/\?)/
+                const idMatch = url.match(regexId)
+
+                if (idMatch[4]) {
+                    result.videoId = idMatch[4]
+                }
+
+                const regexPlaylist = /[?&]list=([^#&?]+)/
+                const playlistMatch = url.match(regexPlaylist)
+
+                if (playlistMatch && playlistMatch[1]) {
+                    result.listId = playlistMatch[1]
+                }
+
+                return result
+            }
+        },
+        onreadystatechange() {
+            if (
+                !this.player.loaded &&
+                (this.player.tag.readyState === 'complete' ||
+                    this.player.tag.readyState === 'loaded')
+            ) {
+                this.player.loaded = true
+                setTimeout(this.tagReady, 500)
+            }
+        },
+        onload() {
+            if (!this.player.loaded) {
+                this.player.loaded = true
+                setTimeout(this.tagReady, 500)
+            }
+        },
+        async tagReady() {
+            const source = this.parseVideoSource(this.src)
+            this.player.vimeo = new window.Vimeo.Player(this.player.id, {
+                id: source.videoId,
+                responsive: true,
+            })
+            this.player.vimeo.on('seeked', this.onSeek)
+            this.player.vimeo.on('timeupdate', this.onTimeupdate)
+
+            this.player.vimeo.on('ended', this.onEnded)
+            this.player.vimeo.on('loaded', this.onLoaded)
+            this.player.vimeo.on('play', this.onPlay)
+            this.player.vimeo.on('pause', this.onPause)
+            this.player.vimeo.on('progress', this.onProgress)
+            this.player.vimeo.on('volumechange', this.onVolumechange)
+            this.player.vimeo.on('error', this.onError)
+
+            this.player.ready = true
+        },
+        loadAPI() {
+            if (this.player.loaded) {
+                this.tagReady()
+            } else {
+                this.player.tag = document.createElement('script')
+
+                this.player.tag.src = 'https://player.vimeo.com/api/player.js'
+                this.player.scriptTag =
+                    document.getElementsByTagName('script')[0]
+
+                // Make sure script tag was successfully created
+                if (this.player.scriptTag) {
+                    this.player.scriptTag.parentNode.insertBefore(
+                        this.player.tag,
+                        this.player.scriptTag
+                    )
+
+                    this.player.done = false
+                    this.player.tag.onload = this.onload
+                    this.player.tag.onreadystatechange = this.onreadystatechange
+                }
+            }
+        },
+        onTimeupdate(e) {
+            this.$emit('timeupdate', {
+                event: e,
+                current_percent: e.percent,
+            })
+        },
+        onLoaded(e) {
+            this.$emit('loadeddata', e)
+        },
+        onPlay(e) {
+            this.$emit('play', e)
+        },
+        onPause(e) {
+            this.$emit('pause', e)
+        },
+        onProgress(e) {
+            this.$emit('progress', e)
+        },
+        onVolumechange(e) {
+            this.$emit('volumechange', e)
+        },
+        onError(e) {
+            this.$emit('error', e)
+        },
+        onEnded(e) {
+            this.$emit('ended', e)
+        },
+        onSeek(e) {
+            this.$emit('seeking', e)
+            this.$emit('seeked', e)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.player-skeleton {
+    position: relative;
+    margin-bottom: -400px;
+    height: 400px;
+    aspect-ratio: 16/9;
+}
+</style>

package/src/components/Media/YoutubePlayer.vue

@@ -1,12 +1,11 @@
 <template>
     <v-container>
-        <v-responsive :aspect-ratio="16 / 9">
+        <v-responsive>
             <v-skeleton-loader
                 v-if="!player.ready"
                 class="mx-auto player-skeleton"
                 type="image"
             ></v-skeleton-loader>
-
             <div :id="player.id" :class="playerClass"></div>
         </v-responsive>
     </v-container>
@@ -31,6 +30,18 @@ export default {
             required: true,
         },
     },
+    emits: [
+        'loadeddata',
+        'play',
+        'pause',
+        'progress',
+        'playing',
+        'ended',
+        'seeking',
+        'seeked',
+        'timeupdate',
+        'error',
+    ],
     watch: {},
     computed: {
         playerClass() {
@@ -55,9 +66,19 @@ export default {
                 loaded: false,
                 done: false,
                 ready: false,
+                currentTime: 0,
+                currentPercent: 0,
             },
         }
     },
+    mounted() {
+        this.init()
+    },
+    beforeDestroy() {
+        if (this.player.ready) {
+            window.removeEventListener('message', this.onPostmessage)
+        }
+    },
     methods: {
         parseVideoSource(src) {
             const result = {
@@ -71,6 +92,7 @@ export default {
                 let url = src.sources[0].src
                 const regexId =
                     /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/
+
                 const idMatch = url.match(regexId)
 
                 if (idMatch && idMatch[2].length === 11) {
@@ -87,7 +109,8 @@ export default {
                 return result
             }
         },
-        onPlayerReady() {
+        onPlayerReady(e) {
+            this.$emit('loadeddata', e)
             // Uncomment for auto-play
             // e.target.playVideo();
             this.player.ready = true
@@ -95,10 +118,31 @@ export default {
             const source = this.parseVideoSource(this.src)
 
             if (source.listId) {
-                this.ytPlayer.loadPlaylist(source.listId)
+                this.player.yt.loadPlaylist(source.listId)
             }
+            window.addEventListener('message', this.onPostmessage)
         },
         onPlayerStateChange(e) {
+            if (e && e.data) {
+                switch (e.data) {
+                    case window.YT.PlayerState.UNSTARTED:
+                        this.$emit('play', e)
+                        break
+                    case window.YT.PlayerState.PAUSED:
+                        this.$emit('pause', e)
+                        break
+                    case window.YT.PlayerState.BUFFERING:
+                        this.$emit('progress', e)
+                        break
+                    case window.YT.PlayerState.PLAYING:
+                        this.$emit('playing', e)
+                        break
+                    case window.YT.PlayerState.ENDED:
+                        this.$emit('ended', e)
+                        break
+                }
+            }
+
             if (e.data == window.YT.PlayerState.PLAYING && !this.player.done) {
                 setTimeout(() => {
                     this.player.yt.stopVideo()
@@ -106,6 +150,9 @@ export default {
                 this.player.done = true
             }
         },
+        onError(e) {
+            this.$emit('error', e)
+        },
         tagReady() {
             const source = this.parseVideoSource(this.src)
 
@@ -118,6 +165,7 @@ export default {
                 events: {
                     onReady: this.onPlayerReady,
                     onStateChange: this.onPlayerStateChange,
+                    onError: this.onError,
                 },
             })
         },
@@ -160,9 +208,54 @@ export default {
                 }
             }
         },
-    },
-    mounted() {
-        this.init()
+        onPostmessage(event) {
+            // Check that the event was sent from the YouTube IFrame.
+            if (event.source === this.player.yt.getIframe().contentWindow) {
+                const data = JSON.parse(event.data)
+
+                // The "infoDelivery" event is used by YT to transmit any
+                // kind of information change in the player,
+                // such as the current time or a playback quality change.
+                if (
+                    data.event === 'infoDelivery' &&
+                    data.info &&
+                    data.info.currentTime
+                ) {
+                    // currentTime is emitted very frequently (milliseconds),
+                    // but we only care about whole second changes.
+                    const time = Math.floor(data.info.currentTime)
+
+                    if (time !== this.player.currentTime) {
+                        // Since this postmessage sends multiple times per second there's no reason the
+                        // current time should be more than a second or two off. If it is then you scrubbed the video
+                        if (Math.abs(time - this.player.currentTime) > 2) {
+                            this.$emit('seeking', data)
+                            this.$emit('seeked', data)
+                        }
+
+                        this.player.currentTime = time
+
+                        const totalDuration = Math.floor(
+                            data.info.progressState &&
+                                data.info.progressState.duration
+                                ? data.info.progressState.duration
+                                : this.player.yt.getDuration()
+                        )
+
+                        this.player.currentPercent =
+                            totalDuration > 0
+                                ? (this.player.currentTime / totalDuration) *
+                                  100
+                                : 0
+
+                        this.$emit('timeupdate', {
+                            event: data,
+                            current_percent: this.player.currentPercent,
+                        })
+                    }
+                }
+            }
+        },
     },
 }
 </script>
@@ -172,5 +265,9 @@ export default {
     position: relative;
     margin-bottom: -400px;
     height: 400px;
+    aspect-ratio: 16/9;
+}
+.player-video {
+    min-height: 300px;
 }
 </style>

package/src/components/VuetifyPlayer.vue

@@ -52,11 +52,70 @@
                     :attributes="current.attributes"
                     :src="current.src"
                     :elevation="flat ? 0 : elevation"
+                    @load="$emit('load', $event)"
+                    @ended="onEnded"
+                    @loadeddata="onLoadeddata"
+                    @loadedmetadata="$emit('loadedmetadata', $event)"
+                    @play="$emit('play', $event)"
+                    @playing="$emit('playing', $event)"
+                    @pause="$emit('pause', $event)"
+                    @seeking="$emit('seeking', $event)"
+                    @seeked="$emit('seeked', $event)"
+                    @timeupdate="$emit('timeupdate', $event)"
+                    @progress="$emit('progress', $event)"
+                    @volumechange="onVolumeChange"
+                    @canplay="$emit('canplay', $event)"
+                    @waiting="$emit('waiting', $event)"
+                    @canplaythrough="$emit('canplaythrough', $event)"
+                    @error="$emit('error', $event)"
+                    @emptied="$emit('emptied', $event)"
+                    @ratechange="$emit('ratechange', $event)"
+                    @stalled="$emit('stalled', $event)"
+                    @abort="$emit('abort', $event)"
+                    @mouseover="$emit('mouseover', $event)"
+                    @mouseout="$emit('mouseout', $event)"
                     @focusin="onFocusin"
                     @focusout="onFocusout"
                     @click:fullscreen="onFullscreen"
                 ></YoutubePlayer>
 
+                <VimeoPlayer
+                    ref="vimeoPlayer"
+                    v-if="
+                        !loading &&
+                        parseSourceType(current.src.sources) === 'vimeo'
+                    "
+                    :language="language"
+                    :type="current.type"
+                    :attributes="current.attributes"
+                    :src="current.src"
+                    :elevation="flat ? 0 : elevation"
+                    @ended="onEnded"
+                    @loadeddata="onLoadeddata"
+                    @loadedmetadata="$emit('loadedmetadata', $event)"
+                    @play="$emit('play', $event)"
+                    @playing="$emit('playing', $event)"
+                    @pause="$emit('pause', $event)"
+                    @seeking="$emit('seeking', $event)"
+                    @seeked="$emit('seeked', $event)"
+                    @timeupdate="$emit('timeupdate', $event)"
+                    @progress="$emit('progress', $event)"
+                    @volumechange="onVolumeChange"
+                    @canplay="$emit('canplay', $event)"
+                    @waiting="$emit('waiting', $event)"
+                    @canplaythrough="$emit('canplaythrough', $event)"
+                    @error="$emit('error', $event)"
+                    @emptied="$emit('emptied', $event)"
+                    @ratechange="$emit('ratechange', $event)"
+                    @stalled="$emit('stalled', $event)"
+                    @abort="$emit('abort', $event)"
+                    @mouseover="$emit('mouseover', $event)"
+                    @mouseout="$emit('mouseout', $event)"
+                    @focusin="onFocusin"
+                    @focusout="onFocusout"
+                    @click:fullscreen="onFullscreen"
+                ></VimeoPlayer>
+
                 <Html5Player
                     ref="html5Player"
                     v-if="
@@ -82,8 +141,10 @@
                     @loadeddata="onLoadeddata"
                     @loadedmetadata="$emit('loadedmetadata', $event)"
                     @play="$emit('play', $event)"
+                    @playing="$emit('playing', $event)"
                     @pause="$emit('pause', $event)"
                     @seeking="$emit('seeking', $event)"
+                    @seeked="$emit('seeked', $event)"
                     @timeupdate="$emit('timeupdate', $event)"
                     @progress="$emit('progress', $event)"
                     @volumechange="onVolumeChange"
@@ -135,6 +196,7 @@
 <script>
 import { t } from '../i18n/i18n'
 import YoutubePlayer from './Media/YoutubePlayer.vue'
+import VimeoPlayer from './Media/VimeoPlayer.vue'
 import Html5Player from './Media/Html5Player.vue'
 import PlaylistMenu from './Media/PlaylistMenu.vue'
 
@@ -142,6 +204,7 @@ export default {
     name: 'VuetifyPlayer',
     components: {
         YoutubePlayer,
+        VimeoPlayer,
         Html5Player,
         PlaylistMenu,
     },
@@ -249,8 +312,10 @@ export default {
         'loadeddata',
         'loadedmetadata',
         'play',
+        'playing',
         'pause',
         'seeking',
+        'seeked',
         'timeupdate',
         'progress',
         'volumechange',
@@ -293,6 +358,10 @@ export default {
         player() {
             if (this.parseSourceType(this.current.src.sources) === 'youtube') {
                 return this.$refs.youtubePlayer
+            } else if (
+                this.parseSourceType(this.current.src.sources) === 'vimeo'
+            ) {
+                return this.$refs.vimeoPlayer
             } else if (
                 this.parseSourceType(this.current.src.sources) === 'html5'
             ) {
@@ -514,6 +583,9 @@ export default {
             const ytRegex =
                 /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/
 
+            const vimeoRegex =
+                /(http|https)?:\/\/(www\.|player\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|video\/|)(\d+)(?:|\/\?)/
+
             if (!sources || !sources.length || !sources[0].src) {
                 return null
             }
@@ -526,6 +598,8 @@ export default {
                 return null
             } else if (src.match(ytRegex) || type === 'video/youtube') {
                 return 'youtube'
+            } else if (src.match(vimeoRegex) || type === 'video/vimeo') {
+                return 'vimeo'
             } else {
                 return 'html5'
             }