@windward/core 0.0.1

package/components/Settings/VideoSettings.vue

@@ -0,0 +1,699 @@
+<template>
+    <div>
+        <v-row>
+            <v-col cols="12">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    :label="$t('windward.core.components.settings.video.title')"
+                ></v-text-field>
+                <h1 class="mb-3">
+                    {{ $t('windward.core.components.settings.video.sources') }}
+                </h1>
+                <v-tabs v-model="fileTab" fixed-tabs background-color="accent">
+                    <v-tab>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.video.tabs.video'
+                            )
+                        }}
+                    </v-tab>
+                    <v-tab>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.video.tabs.poster'
+                            )
+                        }}
+                    </v-tab>
+                    <v-tab>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.video.tabs.preroll'
+                            )
+                        }}
+                    </v-tab>
+                    <v-tab>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.video.tabs.postroll'
+                            )
+                        }}
+                    </v-tab>
+                </v-tabs>
+
+                <v-tabs-items v-model="fileTab">
+                    <v-tab-item class="mb-1">
+                        <ContentBlockAsset
+                            v-model="media.source"
+                            mimes="video/mp4,audio/mpeg,video/webm"
+                            @click:file="onSourceSelect"
+                            allow-url
+                            class="mb-4"
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.video.title'
+                                    )
+                                }}
+                            </template>
+                            <template #description>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.video.configure_blurb'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+
+                        <ContentBlockAsset
+                            v-model="media.track"
+                            mimes="text/vtt,text/xml"
+                            @click:file="onTrackSelect"
+                            allow-url
+                            class="mb-4"
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.caption.title'
+                                    )
+                                }}
+                            </template>
+                            <template #description>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.caption.configure_blurb'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+                    </v-tab-item>
+
+                    <v-tab-item class="mb-1">
+                        <ContentBlockAsset
+                            v-model="media.poster"
+                            mimes="image/png,image/jpeg"
+                            @click:file="onPosterSelect"
+                            allow-url
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.poster.title'
+                                    )
+                                }}
+                            </template>
+                            <template #description>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.poster.configure_blurb'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+                    </v-tab-item>
+
+                    <v-tab-item class="mb-1">
+                        <ContentBlockAsset
+                            v-model="media.ads.preroll.source"
+                            mimes="video/mp4,video/webm"
+                            @click:file="onAdSourceSelect($event, 0)"
+                            allow-url
+                            class="mb-4"
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.preroll.title'
+                                    )
+                                }}
+                            </template>
+                            <template #description>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.preroll.configure_blurb'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+
+                        <ContentBlockAsset
+                            v-model="media.ads.preroll.track"
+                            mimes="text/vtt,text/xml"
+                            @click:file="onAdTrackSelect($event, 0)"
+                            allow-url
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.caption.title'
+                                    )
+                                }}
+                            </template>
+                            <template #description>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.caption.configure_blurb'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+                    </v-tab-item>
+
+                    <v-tab-item class="mb-1">
+                        <ContentBlockAsset
+                            v-model="media.ads.postroll.source"
+                            mimes="video/mp4,video/webm"
+                            @click:file="onAdSourceSelect($event, 100)"
+                            allow-url
+                            class="mb-4"
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.postroll.title'
+                                    )
+                                }}
+                            </template>
+                            <template #description>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.postroll.configure_blurb'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+
+                        <ContentBlockAsset
+                            v-model="media.ads.postroll.track"
+                            mimes="text/vtt,text/xml"
+                            @click:file="onAdTrackSelect($event, 100)"
+                            allow-url
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.caption.title'
+                                    )
+                                }}
+                            </template>
+                            <template #description>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.video.caption.configure_blurb'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+                    </v-tab-item>
+                </v-tabs-items>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="12">
+                <h1 class="mb-3">
+                    {{ $t('windward.core.components.settings.video.playlist') }}
+                </h1>
+                <div>
+                    <strong
+                        v-if="
+                            !block.metadata.config.playlist[playlistIndex]
+                                .sources ||
+                            !block.metadata.config.playlist[playlistIndex]
+                                .sources.length > 0
+                        "
+                    >
+                        {{
+                            $t(
+                                'windward.core.components.settings.video.playlist_name_source_required'
+                            )
+                        }}
+                    </strong>
+                    <v-text-field
+                        v-model="
+                            block.metadata.config.playlist[playlistIndex].name
+                        "
+                        :label="
+                            $t(
+                                'windward.core.components.settings.video.playlist_name'
+                            )
+                        "
+                        :disabled="
+                            !block.metadata.config.playlist[playlistIndex]
+                                .sources ||
+                            !block.metadata.config.playlist[playlistIndex]
+                                .sources.length > 0
+                        "
+                    />
+                </div>
+                <v-pagination
+                    v-model="playlistPaginator"
+                    :length="block.metadata.config.playlist.length"
+                    @input="reloadMedia"
+                ></v-pagination>
+                <div class="d-flex justify-center">
+                    <v-tooltip top>
+                        <template #activator="{ on, attrs }">
+                            <v-btn
+                                v-bind="attrs"
+                                v-on="on"
+                                outlined
+                                color="error"
+                                :disabled="
+                                    block.metadata.config.playlist.length <= 1
+                                "
+                                @click="onRemovePlaylistItem"
+                            >
+                                <v-icon>mdi-delete</v-icon>
+                                <span class="sr-only">
+                                    {{
+                                        $t(
+                                            'windward.core.components.settings.video.playlist_remove'
+                                        )
+                                    }}
+                                </span>
+                            </v-btn>
+                        </template>
+                        <span>{{
+                            $t(
+                                'windward.core.components.settings.video.playlist_remove'
+                            )
+                        }}</span>
+                    </v-tooltip>
+
+                    <v-tooltip top>
+                        <template #activator="{ on, attrs }">
+                            <v-btn
+                                v-bind="attrs"
+                                v-on="on"
+                                color="primary"
+                                outlined
+                                @click="onAddPlaylistItem"
+                            >
+                                <v-icon>mdi-plus</v-icon>
+                                <span class="sr-only">
+                                    {{
+                                        $t(
+                                            'windward.core.components.settings.video.playlist_add'
+                                        )
+                                    }}
+                                </span>
+                            </v-btn>
+                        </template>
+                        <span>{{
+                            $t(
+                                'windward.core.components.settings.video.playlist_add'
+                            )
+                        }}</span>
+                    </v-tooltip>
+                </div>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="12">
+                <h1 class="mb-3">
+                    {{ $t('windward.core.components.settings.video.playback') }}
+                </h1>
+                <v-card elevation="0">
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12">
+                                <v-select
+                                    v-model="
+                                        block.metadata.config.attributes
+                                            .playbackrates
+                                    "
+                                    :items="playbackRateOptions"
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.playback_rates'
+                                        )
+                                    "
+                                    multiple
+                                    @change="onPlaybackChange"
+                                >
+                                    <template #selection="{ item }">
+                                        <v-chip>
+                                            <span>{{ item }}x</span>
+                                        </v-chip>
+                                    </template>
+                                </v-select>
+                            </v-col>
+                            <v-col cols="6">
+                                <v-switch
+                                    v-model="
+                                        block.metadata.config.attributes
+                                            .controls
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.controls'
+                                        )
+                                    "
+                                ></v-switch>
+                                <v-switch
+                                    v-model="
+                                        block.metadata.config.attributes.rewind
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.rewind'
+                                        )
+                                    "
+                                ></v-switch>
+                                <v-switch
+                                    v-model="
+                                        block.metadata.config.attributes
+                                            .captionsmenu
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.captionsmenu'
+                                        )
+                                    "
+                                ></v-switch>
+                                <v-switch
+                                    v-model="
+                                        block.metadata.config.attributes
+                                            .disablepictureinpicture
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.disablepictureinpicture'
+                                        )
+                                    "
+                                ></v-switch>
+                                <!--
+                                            <v-switch
+                                            v-model="block.metadata.config.attributes.playlistmenu"
+                                            :label="$t('windward.core.components.content.blocks.video.video.attributes.playlistmenu')"
+                                        ></v-switch>
+                                        <v-switch
+                                            v-model="block.metadata.config.attributes.playlistautoadvance"
+                                            :label="$t('windward.core.components.content.blocks.video.video.attributes.playlistautoadvance')"
+                                        ></v-switch>
+                                        -->
+                            </v-col>
+                            <v-col cols="6">
+                                <v-switch
+                                    v-model="
+                                        block.metadata.config.attributes.muted
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.muted'
+                                        )
+                                    "
+                                ></v-switch>
+                                <v-switch
+                                    v-model="
+                                        block.metadata.config.attributes.loop
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.loop'
+                                        )
+                                    "
+                                ></v-switch>
+                                <v-switch
+                                    v-model="
+                                        block.metadata.config.attributes
+                                            .playsinline
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.core.components.content.blocks.video.video.playsinline'
+                                        )
+                                    "
+                                ></v-switch>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+<script>
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import Vue from 'vue'
+
+export default {
+    name: 'VideoSettings',
+    extends: BaseContentSettings,
+    components: {},
+    data() {
+        return {
+            fileTab: null,
+            playbackRateOptions: [0.25, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4],
+            playlistPaginator: 1,
+            media: {
+                source: null,
+                track: null,
+                poster: null,
+                ads: {
+                    preroll: {
+                        source: null,
+                        track: null,
+                    },
+                    postroll: {
+                        source: null,
+                        track: null,
+                    },
+                },
+            },
+        }
+    },
+    computed: {
+        playlistIndex() {
+            return this.playlistPaginator - 1
+        },
+    },
+    watch: {},
+    beforeMount() {
+        // Create structure for first playlist source
+        if (_.isEmpty(_.get(this.block.metadata.config, `playlist`, null))) {
+            this.onAddPlaylistItem()
+            this.playlistPaginator = 1
+        }
+    },
+    mounted() {},
+    methods: {
+        reloadMedia() {
+            this.media.source = null
+            this.media.track = null
+            this.media.poster = null
+            this.media.ads = {
+                preroll: {
+                    source: null,
+                    track: null,
+                },
+                postroll: {
+                    source: null,
+                    track: null,
+                },
+            }
+        },
+        reloadVideo() {
+            const self = this
+
+            // Set the config __isDirty so the video component can pick it up on a computed prop
+            this.block.metadata.config.__isDirty = true
+
+            // After .5s delete __isDirty
+            setTimeout(() => {
+                self.block.metadata.config.__isDirty = false
+                delete self.block.metadata.config.__isDirty
+            }, 500)
+        },
+        /**
+         * Returns the next array index for an ad slot
+         * If a slot is already defined then return that index
+         * Eg with array [0: {}, 50: {}, 100: {}]
+         * this.getAdSlot(100) -> returns 2
+         * this.getAdSlot(75) -> returns 3
+         *
+         * @param Number|Int Where the ad slot should be placed
+         *
+         * @return Number the available array slot in this.playlist[0].ads
+         */
+        getAdSlot(playAtPercent) {
+            const ads = _.get(this.block.metadata.config, 'playlist[0].ads', [])
+            // No ads defined, 0 slot
+            if (ads.length === 0) {
+                return 0
+            }
+            // See if it already exists
+            for (let i = 0; i < ads.length; i++) {
+                if (ads[i].play_at_percent === playAtPercent) {
+                    return i
+                }
+            }
+            // Return the length since it's the "next" slot
+            return ads.length
+        },
+        onRemovePlaylistItem() {
+            if (this.block.metadata.config.playlist.length > 1) {
+                this.block.metadata.config.playlist.splice(
+                    this.playlistIndex,
+                    1
+                )
+            }
+            // Select the first item if we deleted down to the first one
+            if (this.block.metadata.config.playlist.length === 1) {
+                this.playlistPaginator = 1
+            }
+        },
+        onFirstOrCreateAd(adIndex) {
+            // If the ad slot isn't setup yet
+            if (
+                _.isEmpty(
+                    this.block.metadata.config.playlist[this.playlistIndex].ads[
+                        adIndex
+                    ]
+                )
+            ) {
+                Vue.set(
+                    this.block.metadata.config.playlist[this.playlistIndex].ads,
+                    adIndex,
+                    { sources: [], tracks: [] }
+                )
+            }
+
+            return this.block.metadata.config.playlist[this.playlistIndex].ads[
+                adIndex
+            ]
+        },
+        onAddPlaylistItem() {
+            this.block.metadata.config.playlist.push({
+                name: '',
+                sources: [],
+                tracks: [],
+                ads: [],
+            })
+
+            return this.block.metadata.config.playlist.length - 1
+        },
+        onPosterSelect(file) {
+            if (file === null) {
+                delete this.block.metadata.config.attributes
+                    .poster_file_asset_id
+                this.block.metadata.config.attributes.poster = ''
+            } else {
+                this.block.metadata.config.attributes.poster_file_asset_id =
+                    file.file_asset_id
+                this.block.metadata.config.attributes.poster =
+                    file.asset.public_url
+            }
+        },
+        onSourceSelect(file) {
+            this.reloadVideo()
+            // No file, clear the selection
+            if (_.isEmpty(file)) {
+                delete this.block.metadata.config.playlist[this.playlistIndex]
+                    .name
+                this.block.metadata.config.playlist[
+                    this.playlistIndex
+                ].sources = []
+
+                this.showVideo = false
+            } else {
+                // Apply an updated name
+                this.block.metadata.config.playlist[this.playlistIndex].name =
+                    file.name ||
+                    this.$t(
+                        'windward.core.components.settings.video.default_filename'
+                    )
+
+                // Apply the playlist source video(s)
+                this.block.metadata.config.playlist[
+                    this.playlistIndex
+                ].sources = [
+                    {
+                        file_asset_id: file.file_asset_id,
+                        src: file.asset.public_url,
+                        type: file.asset.metadata.mime,
+                    },
+                ]
+
+                this.showVideo = true
+            }
+        },
+        onTrackSelect(file) {
+            this.reloadVideo()
+            if (_.isEmpty(file)) {
+                this.block.metadata.config.playlist[this.playlistIndex].tracks =
+                    []
+                this.showVideo = false
+            } else {
+                this.block.metadata.config.playlist[this.playlistIndex].tracks =
+                    [
+                        {
+                            file_asset_id: file.file_asset_id,
+                            src: file.asset.public_url,
+                            kind: 'captions',
+                            srclang: 'en-US',
+                            default: true,
+                        },
+                    ]
+            }
+        },
+
+        onAdSourceSelect(file, playAtPercent) {
+            const adIndex = this.getAdSlot(playAtPercent)
+
+            // Prep in case the ad slot isn't setup yet
+            this.onFirstOrCreateAd(adIndex)
+
+            if (_.isEmpty(file)) {
+                this.block.metadata.config.playlist[this.playlistIndex].ads[
+                    adIndex
+                ].sources = []
+            } else {
+                this.block.metadata.config.playlist[this.playlistIndex].ads[
+                    adIndex
+                ].play_at_percent = playAtPercent
+
+                this.block.metadata.config.playlist[this.playlistIndex].ads[
+                    adIndex
+                ].sources = [
+                    {
+                        file_asset_id: file.file_asset_id,
+                        src: file.asset.public_url,
+                        type: file.asset.metadata.mime,
+                    },
+                ]
+            }
+        },
+        onAdTrackSelect(file, playAtPercent) {
+            const adIndex = this.getAdSlot(playAtPercent)
+
+            if (_.isEmpty(file)) {
+                this.block.metadata.config.playlist[this.playlistIndex].ads[
+                    adIndex
+                ].tracks = []
+            } else {
+                this.block.metadata.config.playlist[this.playlistIndex].ads[
+                    adIndex
+                ].play_at_percent = playAtPercent
+
+                this.block.metadata.config.playlist[this.playlistIndex].ads[
+                    adIndex
+                ].tracks = [
+                    {
+                        file_asset_id: file.file_asset_id,
+                        src: file.asset.public_url,
+                        kind: 'captions',
+                        srclang: 'en-US',
+                        default: true,
+                    },
+                ]
+            }
+        },
+        onPlaybackChange(e) {
+            // Sort the list so we don't get instances of 2, 1, 0.25, 3
+            this.block.metadata.config.attributes.playbackrates.sort()
+        },
+    },
+}
+</script>