@mindedge/vuetify-player 0.1.3 → 0.3.0

package/src/components/Media/PlaylistMenu.vue

@@ -0,0 +1,138 @@
+<template>
+    <v-card>
+        <v-card-title>{{ t(language, 'playlist.up_next') }}</v-card-title>
+        <v-card-text>
+            <v-list>
+                <v-list-item-group v-model="sourceIndex">
+                    <v-list-item
+                        v-for="(source, index) of playlist"
+                        :key="index + 'playlistSources'"
+                        @click="onPlaylistSelect(index)"
+                    >
+                        <v-list-item-icon>
+                            <v-avatar
+                                v-if="getPoster(source.poster, poster)"
+                                tile
+                            >
+                                <img :src="getPoster(source.poster, poster)" />
+                            </v-avatar>
+                            <v-skeleton-loader
+                                v-if="!getPoster(source.poster, poster)"
+                                class="ma-3"
+                                type="avatar"
+                                tile
+                            ></v-skeleton-loader>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-tooltip bottom>
+                                <template v-slot:activator="{ on, attrs }">
+                                    <div
+                                        v-bind="attrs"
+                                        v-on="on"
+                                        class="text-lg-subtitle-1 text-truncate"
+                                    >
+                                        {{
+                                            source.name ||
+                                            t(language, 'playlist.default_name')
+                                        }}
+                                    </div>
+                                </template>
+                                <span>
+                                    {{
+                                        source.name ||
+                                        t(language, 'playlist.default_name')
+                                    }}
+                                </span>
+                            </v-tooltip>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list-item-group>
+            </v-list>
+        </v-card-text>
+        <v-card-actions>
+            <v-col cols="6">
+                <v-btn
+                    block
+                    :disabled="playlist.length < 1 || sourceIndex === 0"
+                    @click="onPlaylistSelect(sourceIndex - 1)"
+                >
+                    <v-icon>mdi-skip-previous</v-icon>
+                    <span class="d-sr-only">{{
+                        t(language, 'playlist.previous')
+                    }}</span>
+                </v-btn>
+            </v-col>
+            <v-col cols="6">
+                <v-btn
+                    block
+                    :disabled="
+                        playlist.length < 1 ||
+                        sourceIndex === playlist.length - 1
+                    "
+                    @click="onPlaylistSelect(sourceIndex + 1)"
+                >
+                    <v-icon>mdi-skip-next</v-icon>
+                    <span class="d-sr-only">{{
+                        t(language, 'playlist.next')
+                    }}</span>
+                </v-btn>
+            </v-col>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script>
+import { t } from '../../i18n/i18n'
+
+export default {
+    props: {
+        value: { type: Number, required: true },
+        playlist: { type: Array, required: true },
+        poster: { type: String, required: false, default: '' },
+        language: { type: String, required: false, default: 'en-US' },
+    },
+    data() {
+        return {
+            t,
+            sourceIndex: this.value,
+        }
+    },
+    watch: {
+        value(newIndex) {
+            this.sourceIndex = newIndex
+        },
+    },
+    methods: {
+        onPlaylistSelect(index) {
+            this.sourceIndex = index
+            this.$emit('input', parseInt(this.sourceIndex))
+            this.$emit('click:select', index)
+        },
+        getPoster(...posters) {
+            for (const poster of posters) {
+                if (poster) {
+                    return poster
+                }
+            }
+            return null
+        },
+    },
+    mounted() {},
+}
+</script>
+
+<style scoped>
+.captions-list {
+    max-height: 10em;
+    overflow-y: scroll;
+    /* Fade the top/bottom 20% effect. The "red" mask is so the scrollbar doesn't get this effect*/
+    mask: linear-gradient(90deg, rgba(255, 0, 0, 0) 98%, rgba(255, 0, 0, 1) 98%),
+        linear-gradient(
+            0deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 20%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0) 100%
+        );
+}
+</style>

package/src/components/Media/YoutubePlayer.vue

@@ -0,0 +1,172 @@
+<template>
+    <v-container>
+        <v-responsive :aspect-ratio="16 / 9">
+            <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: 'YoutubePlayer',
+    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,
+        },
+    },
+    watch: {},
+    computed: {
+        playerClass() {
+            let classList = 'player-' + this.type
+            return classList
+        },
+    },
+    data() {
+        return {
+            player: {
+                id:
+                    'yt-player-' +
+                    Math.floor(Math.random() * 10000000) +
+                    1000000,
+                yt: {},
+                tag: {},
+                scriptTag: {},
+                loaded: false,
+                done: false,
+                ready: false,
+            },
+        }
+    },
+    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 =
+                    /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/
+                const idMatch = url.match(regexId)
+
+                if (idMatch && idMatch[2].length === 11) {
+                    result.videoId = idMatch[2]
+                }
+
+                const regexPlaylist = /[?&]list=([^#&?]+)/
+                const playlistMatch = url.match(regexPlaylist)
+
+                if (playlistMatch && playlistMatch[1]) {
+                    result.listId = playlistMatch[1]
+                }
+
+                return result
+            }
+        },
+        onPlayerReady() {
+            // Uncomment for auto-play
+            // e.target.playVideo();
+            this.player.ready = true
+
+            const source = this.parseVideoSource(this.src)
+
+            if (source.listId) {
+                this.ytPlayer.loadPlaylist(source.listId)
+            }
+        },
+        onPlayerStateChange(e) {
+            if (e.data == window.YT.PlayerState.PLAYING && !this.player.done) {
+                setTimeout(() => {
+                    this.player.yt.stopVideo()
+                }, 6000)
+                this.player.done = true
+            }
+        },
+        tagReady() {
+            const source = this.parseVideoSource(this.src)
+
+            this.player.yt = new window.YT.Player(this.player.id, {
+                width: '100%',
+                videoId: source.videoId,
+                playerVars: {
+                    playsinline: 1,
+                },
+                events: {
+                    onReady: this.onPlayerReady,
+                    onStateChange: this.onPlayerStateChange,
+                },
+            })
+        },
+        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)
+            }
+        },
+        init() {
+            if (this.player.loaded) {
+                this.tagReady()
+            } else {
+                this.player.tag = document.createElement('script')
+
+                this.player.tag.src = 'https://www.youtube.com/iframe_api'
+                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
+                }
+            }
+        },
+    },
+    mounted() {
+        this.init()
+    },
+}
+</script>
+
+<style scoped>
+.player-skeleton {
+    position: relative;
+    margin-bottom: -400px;
+    height: 400px;
+}
+</style>

package/src/components/VuetifyPlayer.vue

@@ -0,0 +1,313 @@
+<template>
+    <div>
+        <v-row>
+            <v-col :cols="playerCols">
+                <YoutubePlayer
+                    ref="youtubePlayer"
+                    v-if="parseSourceType(current.src.sources) === 'youtube'"
+                    :language="language"
+                    :type="current.type"
+                    :attributes="current.attributes"
+                    :src="current.src"
+                    @click:fullscreen="onFullscreen"
+                ></YoutubePlayer>
+                <Html5Player
+                    ref="html5Player"
+                    v-if="parseSourceType(current.src.sources) === 'html5'"
+                    :language="language"
+                    :type="current.type"
+                    :attributes="current.attributes"
+                    :src="current.src"
+                    @load="$emit('load', $event)"
+                    @ended="onEnded"
+                    @loadeddata="onLoadeddata"
+                    @loadedmetadata="$emit('loadedmetadata', $event)"
+                    @play="$emit('play', $event)"
+                    @pause="$emit('pause', $event)"
+                    @seeking="$emit('seeking', $event)"
+                    @timeupdate="$emit('timeupdate', $event)"
+                    @progress="$emit('progress', $event)"
+                    @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)"
+                    @click:fullscreen="onFullscreen"
+                    @click:pictureinpicture="onPictureInPicture"
+                    @click:remoteplayback="onRemoteplayback"
+                    @click:captions-expand="onClickCaptionsExpand"
+                    @click:captions-paragraph="onClickCaptionsParagraph"
+                ></Html5Player>
+            </v-col>
+
+            <!-- Playlist stuff -->
+            <v-col
+                v-if="playlistmenu && playlist.length > 1"
+                :cols="playlistCols"
+            >
+                <PlaylistMenu
+                    v-model="sourceIndex"
+                    :language="language"
+                    :playlist="playlist"
+                    :poster="poster"
+                    @click:select="onPlaylistSelect"
+                ></PlaylistMenu>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+import YoutubePlayer from './Media/YoutubePlayer.vue'
+import Html5Player from './Media/Html5Player.vue'
+import PlaylistMenu from './Media/PlaylistMenu.vue'
+
+export default {
+    name: 'VuetifyPlayer',
+    components: {
+        YoutubePlayer,
+        Html5Player,
+        PlaylistMenu,
+    },
+    props: {
+        language: { type: String, required: false, default: 'en-US' },
+        src: {
+            type: Object,
+            required: false,
+            default: () => {
+                return {}
+            },
+        },
+        playlist: {
+            type: Array,
+            required: false,
+            default: () => {
+                return []
+            },
+        },
+        type: { type: String, required: false, default: 'video' }, // Allowed video|audio. In audio mode the player has a max-height of 40px
+        autoplay: { type: Boolean, required: false, default: false }, // Autoplay on load. It's in the spec but DON'T USE THIS
+        autopictureinpicture: {
+            type: Boolean,
+            required: false,
+            default: false,
+        }, // Start with picture in picture mode
+        controls: { type: Boolean, required: false, default: true }, // Show video controls. When false only play/pause allowed but clicking on the video itself
+        controlslist: {
+            type: String,
+            required: false,
+            default: 'nodownload noremoteplayback',
+        }, // Space separated string per <video>. Allowed 'nodownload nofullscreen noremoteplayback'
+        crossorigin: { type: String, required: false, default: 'anonymous' },
+        disablepictureinpicture: {
+            type: Boolean,
+            required: false,
+            default: true,
+        }, // Shows the picture in picture button
+        disableremoteplayback: {
+            type: Boolean,
+            required: false,
+            default: true,
+        }, // Shows the remote playback button but functionality does not exist when clicked
+        height: { type: String, required: false, default: 'auto' },
+        width: { type: String, required: false, default: '100%' },
+        rewind: { type: Boolean, required: false, default: false }, // Enabled the rewind 10s button
+        loop: { type: Boolean, required: false, default: false }, // Loop the video on completion
+        muted: { type: Boolean, required: false, default: false }, // Start the video muted
+        playsinline: { Boolean: String, required: false, default: false }, // Force inline & disable fullscreen
+        poster: { type: String, required: false, default: '' }, // Overridden with the playlist.poster if one is set there
+        preload: { type: String, required: false, default: '' },
+        captionsmenu: { type: Boolean, required: false, default: true }, // Show the captions below the video
+        playlistmenu: { type: Boolean, required: false, default: true }, // Show the playlist menu if there's multiple videos
+        playlistautoadvance: { type: Boolean, required: false, default: true }, // Play the next source group
+        playbackrates: {
+            type: Array,
+            required: false,
+            default: () => {
+                return [0.5, 1, 1.5, 2]
+            },
+        }, // Default playback speeds
+    },
+    watch: {},
+    computed: {
+        player() {
+            if (this.parseSourceType(this.current.src.sources) === 'youtube') {
+                return this.$refs.youtubePlayer
+            } else if (
+                this.parseSourceType(this.current.src.sources) === 'html5'
+            ) {
+                return this.$refs.html5Player
+            } else {
+                return null
+            }
+        },
+        current() {
+            const c = {
+                type: this.type,
+                attributes: this.attributes,
+                src: {},
+            }
+
+            if (this.src && this.src.sources && this.src.sources.length) {
+                c.src = this.src
+                return c
+            } else if (
+                this.playlist &&
+                this.playlist.length &&
+                typeof this.playlist[this.sourceIndex] !== 'undefined'
+            ) {
+                c.src = this.playlist[this.sourceIndex]
+                return c
+            } else {
+                return c
+            }
+        },
+        attributes() {
+            const attrs = {}
+
+            // Loop over all available props and get the value / default value
+            for (let i = 0; i < this.$options._propKeys.length; i++) {
+                let key = this.$options._propKeys[i]
+                attrs[key] = this[key]
+            }
+
+            return attrs
+        },
+        playlistCols() {
+            // Captions collapsed, playlist will appear on the right
+            if (
+                !this.captionsExpanded &&
+                this.playlistmenu &&
+                this.playlist.length > 1
+            ) {
+                return 4
+            } else if (
+                this.captionsExpanded &&
+                this.playlistmenu &&
+                this.playlist.length > 1
+            ) {
+                // Captions expanded, playlist will appear as a new row on the bottom of everything
+                return 12
+            } else {
+                return 0
+            }
+        },
+        playerCols() {
+            if (
+                this.captionsExpanded ||
+                !this.playlistmenu ||
+                this.playlist.length <= 1
+            ) {
+                return 12
+            } else {
+                return 8
+            }
+        },
+    },
+    data() {
+        return {
+            sourceIndex: 0,
+            captionsExpanded: false,
+        }
+    },
+    methods: {
+        onEnded(e) {
+            if (
+                this.playlistautoadvance &&
+                this.sourceIndex < this.playlist.length - 1
+            ) {
+                this.onPlaylistSelect(this.sourceIndex + 1)
+                this.$emit('ended', e)
+            }
+        },
+        onLoadeddata(e) {
+            // Loaded a new video
+            this.$emit('loadeddata', e)
+        },
+        onRemoteplayback(el) {
+            // Make sure the browser supports remote playback
+            if (!el.remote || !el.remote.watchAvailability) {
+                return false
+            }
+
+            el.remote
+                .prompt()
+                .then(() => {
+                    alert('Remote playback not implemented on this player')
+                })
+                .catch((e) => {
+                    //if(e.name == 'NotSupportedError') {}
+                    alert(e.message)
+                })
+        },
+        onPictureInPicture(el) {
+            // Make sure the browser supports HTMLVideoElement.requestPictureInPicture()
+            if (!el.requestPictureInPicture) {
+                return false
+            }
+
+            if (!document.pictureInPictureElement) {
+                el.requestPictureInPicture()
+                this.$emit('click:pictureinpicture', true)
+            } else {
+                document.exitPictureInPicture()
+                this.$emit('click:pictureinpicture', false)
+            }
+        },
+        onFullscreen(el) {
+            // Make sure the browser supports document.fullscreenEnabled
+            if (!document.fullscreenEnabled) {
+                return false
+            }
+            if (!document.fullscreenElement) {
+                el.requestFullscreen()
+                this.$emit('click:fullscreen', true)
+            } else {
+                document.exitFullscreen()
+                this.$emit('click:fullscreen', false)
+            }
+        },
+        onClickCaptionsExpand(expanded) {
+            this.captionsExpanded = expanded
+            this.$emit('click:captions-expand', expanded)
+        },
+        onClickCaptionsParagraph(isParagraph) {
+            this.$emit('click:captions-paragraph', isParagraph)
+        },
+        onPlaylistSelect(index) {
+            this.sourceIndex = parseInt(index)
+            this.player.load()
+            this.player.play()
+        },
+        parseSourceType(sources) {
+            const ytRegex =
+                /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/
+
+            if (!sources || !sources.length || !sources[0].src) {
+                return null
+            }
+
+            // Parse the first src since any additional should be fallbacks of the same type
+            const src = sources[0].src
+            const type = sources[0].type
+
+            if (typeof type !== 'string') {
+                return null
+            } else if (src.match(ytRegex) || type === 'video/youtube') {
+                return 'youtube'
+            } else {
+                return 'html5'
+            }
+        },
+    },
+    beforeCreate() {},
+    beforeMount() {},
+    mounted() {},
+    beforeDestroy() {},
+}
+</script>

package/src/components/filters.js

@@ -0,0 +1,31 @@
+/**
+ * Converts a number of seconds to a short duration format. Eg hh:mm:ss
+ *
+ * @param Integer seconds
+ *
+ * @param String The duration in "hh:mm:ss" format
+ */
+const playerShortDuration = function (secondsParam) {
+    let ret = '--:--:--'
+
+    if (!isNaN(secondsParam) && secondsParam !== null) {
+        ret = ''
+        let seconds = parseInt(secondsParam, 10)
+
+        const hour = Math.floor(seconds / 60 / 60)
+        seconds = seconds - hour * 60 * 60 // Subtract it from seconds
+
+        const minute = Math.floor(seconds / 60)
+        seconds = Math.floor(seconds - minute * 60) // Subtract it from seconds
+
+        if (hour > 0) {
+            ret += String(hour).padStart(2, '0') + ':'
+        }
+
+        ret += String(minute).padStart(2, '0') + ':'
+        ret += String(seconds).padStart(2, '0')
+    }
+    return ret
+}
+
+export default { playerShortDuration }

package/src/i18n/en-US.js

@@ -0,0 +1,34 @@
+export default {
+    locales: {
+        'en-US': 'English',
+        'sv-SE': 'Swedish',
+    },
+    playlist: {
+        up_next: 'Up Next',
+        default_name: 'Media',
+        previous: 'Play previous item in playlist',
+        next: 'Play next item in playlist',
+    },
+    player: {
+        playback_speed: 'Playback Speed',
+        playback_decrease: 'Decrease playback speed',
+        playback_increase: 'Increase playback speed',
+        toggle_settings: 'Toggle Settings',
+        download: 'Download',
+        toggle_remote_playback: 'Toggle Remote Playback',
+        toggle_picture_in_picture: 'Toggle Picture in Picture',
+        toggle_fullscreen: 'Toggle Fullscreen',
+        toggle_cc: 'Toggle closed captions',
+        volume_slider: 'Volume Slider',
+        rewind_10: 'Rewind 10 seconds',
+        play: 'Click to play',
+        pause: 'Click to pause',
+        no_support: "Sorry, your browser doesn't support embedded videos.",
+    },
+    captions: {
+        expand: 'Expand',
+        collapse: 'Collapse',
+        view_as_paragraph: 'View as paragraph',
+        view_as_captions: 'View as captions',
+    },
+}