@windward/core 0.5.2 → 0.7.0

package/components/Settings/VideoSettings/SourcePicker.vue

@@ -0,0 +1,222 @@
+<template>
+    <div>
+        <ContentBlockAsset
+            :value="source"
+            :assets="assets"
+            mimes="video/mp4,video/webm,video/youtube,audio/mpeg,audio/ogg,audio/webm,audio/wav"
+            allow-url
+            class="mb-4"
+            :disabled="disabled"
+            @input="$emit('update:source', $event)"
+            @change="onSourceChange"
+            @update:assets="onUpdateAssets"
+        >
+            <template #title>
+                {{
+                    sourceLabel ||
+                    $t('windward.core.components.settings.video.place_source')
+                }}
+            </template>
+            <template #description>
+                {{
+                    sourceDescription ||
+                    $t(
+                        'windward.core.components.settings.video.video.configure_blurb'
+                    )
+                }}
+            </template>
+        </ContentBlockAsset>
+
+        <v-tooltip
+            v-if="
+                $PermissionService.userHasAccessTo(
+                    'windward.global.file',
+                    'writable'
+                )
+            "
+            top
+            color="primary"
+        >
+            <template #activator="{ on, attrs }">
+                <v-switch
+                    v-model="sourceInherit"
+                    :disabled="disabled || !source"
+                >
+                    <template #label>
+                        <span v-bind="attrs" v-on="on">
+                            {{
+                                $t(
+                                    'windward.core.components.settings.video.inherit_captions'
+                                )
+                            }}
+                            <v-icon x-small class="help-offset-icon">
+                                mdi-help
+                            </v-icon>
+                        </span>
+                    </template>
+                </v-switch>
+            </template>
+            <span class="span-description">{{
+                $t(
+                    'windward.core.components.settings.video.inherit_global_toggle_description'
+                )
+            }}</span>
+        </v-tooltip>
+
+        <v-alert v-if="sourceInherit && !hasLinkedCaptions" type="warning">
+            {{
+                $t(
+                    'windward.core.components.settings.video.inherit_missing_captions'
+                )
+            }}
+        </v-alert>
+
+        <ContentBlockAsset
+            v-if="sourceInherit && hasLinkedCaptions"
+            :value="linkedCaptions"
+            :assets="assets"
+            disabled
+        ></ContentBlockAsset>
+
+        <ContentBlockAsset
+            v-if="!sourceInherit"
+            :value="track"
+            :assets="assets"
+            mimes="text/vtt,text/xml"
+            allow-url
+            class="mb-4"
+            :disabled="disabled || sourceInherit || !source"
+            @input="$emit('update:track', $event)"
+            @change="onTrackChange"
+            @update:assets="$emit('update:assets', $event)"
+        >
+            <template #title>
+                {{
+                    trackLabel ||
+                    $t('windward.core.components.settings.video.caption.title')
+                }}
+            </template>
+            <template #description>
+                {{
+                    trackDescription ||
+                    $t(
+                        'windward.core.components.settings.video.caption.configure_blurb'
+                    )
+                }}
+            </template>
+        </ContentBlockAsset>
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+
+export default {
+    name: 'VideoSettingsSourcePicker',
+    components: { ContentBlockAsset },
+    props: {
+        source: {
+            type: Object,
+            required: false,
+            default: () => {
+                return {}
+            },
+        },
+        track: {
+            type: Object,
+            required: false,
+            default: () => {
+                return {}
+            },
+        },
+        assets: {
+            type: Array,
+            required: false,
+            default: () => {
+                return []
+            },
+        },
+        sourceLabel: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        trackLabel: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        sourceDescription: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        trackDescription: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            sourceInherit: true,
+            linkedCaptions: null,
+        }
+    },
+    computed: {
+        hasLinkedCaptions() {
+            return this.linkedCaptions !== null
+        },
+        linkedCaptionsName() {
+            return _.get(
+                this.linkedCaptions,
+                'asset.name',
+                _.get(this.linkedCaptions, 'asset.public_url', '???')
+            )
+        },
+    },
+    watch: {},
+    beforeMount() {},
+    mounted() {
+        this.linkedCaptions = this.getLinkedCaptions(this.source)
+        // Turn inherit switch on if there's a source and no tracks are enabled
+        this.sourceInherit = this.source && !this.track
+    },
+    methods: {
+        onSourceChange(file, rawFile) {
+            this.linkedCaptions = this.getLinkedCaptions(rawFile)
+            this.sourceInherit = this.linkedCaptions !== null
+
+            this.$emit('change:source', file, rawFile)
+        },
+        onTrackChange(file, rawFile) {
+            if (!file && this.hasLinkedCaptions) {
+                this.sourceInherit = true
+            }
+            this.$emit('change:track', file, rawFile)
+        },
+        onUpdateAssets(assets) {
+            this.$emit('update:assets', assets)
+        },
+        getLinkedCaptions(file) {
+            if (!file) {
+                return null
+            }
+            // Check to see if the video source has a linked asset and it's a vtt file
+            const linkedCaption = _.find(
+                _.get(file, 'asset.linked_assets', []),
+                function (f) {
+                    return _.get(f, 'asset.metadata.extension', '') === 'vtt'
+                }
+            )
+
+            return linkedCaption || null
+        },
+    },
+}
+</script>