@windward/core 0.6.0 → 0.8.0

package/components/Settings/TabSettings.vue

@@ -1,78 +1,93 @@
 <template>
     <div>
-            <v-divider class="my-4 primary"></v-divider>
-            <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
-            <SortableExpansionPanel
-                v-model="block.metadata.config.items"
-                v-bind:currentPanel.sync="block.metadata.config.currentTab"
+        <v-row class="pl-3 pr-3">
+            <v-text-field
+                id="block-settings-title"
+                v-model="block.metadata.config.title"
+                :autofocus="true"
+                :rules="$Validation.getRule('block.title')"
+                :counter="$Validation.getLimit('block.title')"
+                outlined
+                :label="
+                    $t('windward.core.components.settings.clickable_icon.title')
+                "
                 :disabled="render"
-                @change="onDragged"
-                @click:close="onRemoveElement($event)"
-            >
-                <template #header="{ item }">
-                    {{ item.tabHeader !== '' ? item.tabHeader : 'No Header' }}
-                </template>
-                <template #body="{ item, index }">
-                    <v-container :key="expansionPanelKey">
-                        <p class="p-label">
-                            {{
-                                $t(
-                                    'windward.core.components.settings.tab.header'
-                                )
-                            }}
-                        </p>
-                        <v-text-field
-                            outlined
-                            :autofocus="true"
-                            v-model="
-                                block.metadata.config.items[index].tabHeader
-                            "
-                            :counter="50"
-                            :rules="validation.headerRule"
-                            :label="'item ' + (index + 1)"
-                            :disabled="render"
-                        ></v-text-field>
-                        <v-btn
-                            @click="onToggleExpand(index)"
-                            text
-                            elevation="0"
-                            class="mb-3"
-                            :disabled="render"
+            ></v-text-field>
+            <v-textarea
+                id="block-settings-instructions"
+                v-model="block.metadata.config.instructions"
+                :rules="$Validation.getRule('block.instructions')"
+                :counter="$Validation.getLimit('block.instructions')"
+                outlined
+                :label="$t('components.content.settings.base.instructions')"
+                :disabled="render"
+            ></v-textarea>
+        </v-row>
+        <v-divider class="my-4 primary"></v-divider>
+        <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
+        <SortableExpansionPanel
+            v-model="block.metadata.config.items"
+            v-bind:currentPanel.sync="block.metadata.config.currentTab"
+            :disabled="render"
+            @change="onDragged"
+            @click:close="onRemoveElement($event)"
+        >
+            <template #header="{ item }">
+                {{ item.tabHeader !== '' ? item.tabHeader : 'No Header' }}
+            </template>
+            <template #body="{ item, index }">
+                <v-container :key="expansionPanelKey">
+                    <p class="p-label">
+                        {{ $t('windward.core.components.settings.tab.header') }}
+                    </p>
+                    <v-text-field
+                        outlined
+                        :autofocus="true"
+                        v-model="block.metadata.config.items[index].tabHeader"
+                        :rules="$Validation.getRule('shortInput')"
+                        :counter="$Validation.getLimit('shortInput')"
+                        :label="'item ' + (index + 1)"
+                        :disabled="render"
+                    ></v-text-field>
+                    <v-btn
+                        @click="onToggleExpand(index)"
+                        text
+                        elevation="0"
+                        class="mb-3"
+                        :disabled="render"
+                    >
+                        <v-icon
+                            v-if="!block.metadata.config.items[index].expand"
+                            color="primary"
+                            >mdi-arrow-expand-all</v-icon
+                        >
+                        <v-icon
+                            v-if="block.metadata.config.items[index].expand"
+                            color="primary"
                         >
-                            <v-icon
-                                v-if="
-                                    !block.metadata.config.items[index].expand
-                                "
-                                color="primary"
-                                >mdi-arrow-expand-all</v-icon
-                            >
-                            <v-icon
-                                v-if="block.metadata.config.items[index].expand"
-                                color="primary"
-                            >
-                                mdi-arrow-collapse-all
-                            </v-icon>
-                        </v-btn>
-                        <TextEditor
-                            v-model="block.metadata.config.items[index].content"
-                            v-if="!item.expand"
-                            :key="textEditorUpdateKey"
-                            :disabled="render"
-                        ></TextEditor>
-                    </v-container>
-                </template>
-            </SortableExpansionPanel>
-            <v-row justify="center" class="my-4">
-                <v-btn
-                    color="primary"
-                    elevation="0"
-                    :disabled="render"
-                    @click="onAddElement"
-                >
-                    <v-icon>mdi-plus</v-icon>
-                    {{ $t('windward.core.components.settings.tab.add_tab') }}
-                </v-btn>
-            </v-row>
+                            mdi-arrow-collapse-all
+                        </v-icon>
+                    </v-btn>
+                    <TextEditor
+                        v-model="block.metadata.config.items[index].content"
+                        v-if="!item.expand"
+                        :key="textEditorUpdateKey"
+                        :disabled="render"
+                    ></TextEditor>
+                </v-container>
+            </template>
+        </SortableExpansionPanel>
+        <v-row justify="center" class="my-4">
+            <v-btn
+                color="primary"
+                elevation="0"
+                :disabled="render"
+                @click="onAddElement"
+            >
+                <v-icon>mdi-plus</v-icon>
+                {{ $t('windward.core.components.settings.tab.add_tab') }}
+            </v-btn>
+        </v-row>
         <div v-if="loading" class="text-center">
             <v-progress-circular
                 :size="70"
@@ -90,6 +105,7 @@ import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'TabSettings',
@@ -110,6 +126,18 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (
+            _.isEmpty(this.block.metadata.config.instructions) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.settings.tab.instructions'
+            )
+        }
         if (_.isEmpty(this.block.metadata.config.currentTab)) {
             this.block.metadata.config.currentTab = 0
         }
@@ -129,16 +157,6 @@ export default {
             textEditorUpdateKey: Crypto.id(),
             valid: true,
             loading: false,
-            validation: {
-                headerRule: [
-                    (v) =>
-                        v.length <= 50 ||
-                        this.$t(
-                            'windward.core.shared.settings.errors.input_limitations',
-                            [50]
-                        ),
-                ],
-            },
         }
     },
     mounted() {

package/components/Settings/UserUploadSettings.vue

@@ -1,32 +1,20 @@
 <template>
     <div>
         <v-text-field
+            id="block-settings-title"
             v-model="block.metadata.config.title"
             outlined
-            :rules="validation.titleRules"
-            :counter="50"
+            :rules="$Validation.getRule('block.title')"
+            :counter="$Validation.getLimit('block.title')"
             :autofocus="true"
-            :label="$t('components.content.settings.base.title_optional')"
+            :label="$t('components.content.settings.base.title')"
             :disabled="render"
         ></v-text-field>
-        <v-btn
-            elevation="0"
-            text
-            class="mb-4"
-            :disabled="render"
-            @click="block.__expandInstructions = !block.__expandInstructions"
-        >
-            <v-icon v-if="!block.__expandInstructions" color="primary"
-                >mdi-arrow-expand-all</v-icon
-            >
-            <v-icon v-if="block.__expandInstructions" color="primary">
-                mdi-arrow-collapse-all
-            </v-icon>
-        </v-btn>
         <v-textarea
+            id="block-settings-instructions"
             v-model="block.metadata.config.instructions"
-            :rules="validation.instructionRule"
-            :counter="255"
+            :rules="$Validation.getRule('block.instructions')"
+            :counter="$Validation.getLimit('block.instructions')"
             outlined
             :label="$t('components.content.settings.base.instructions')"
             :disabled="render"
@@ -60,6 +48,7 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
 import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
 import _ from 'lodash'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'UserUploadSettings',
@@ -70,9 +59,6 @@ export default {
             this.block = {}
         }
 
-        // Default the instructions to collapsed
-        this.block.__expandInstructions = false
-
         if (_.isEmpty(this.block.body)) {
             this.block.body = this.$t(
                 'windward.core.shared.content_blocks.title.user_upload'
@@ -87,8 +73,14 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
-        if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.instructions = ''
+        if (
+            _.isEmpty(this.block.metadata.config.instructions) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.settings.user_upload.instructions'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.uploadSettings)) {
             this.block.metadata.config.uploadSettings = {
@@ -139,24 +131,6 @@ export default {
                 boilerplate: true,
                 elevation: 0,
             },
-            validation: {
-                titleRules: [
-                    (v) =>
-                        v.length <= 50 ||
-                        this.$t(
-                            'windward.core.shared.settings.errors.input_limitations',
-                            [50]
-                        ),
-                ],
-                instructionRule: [
-                    (v) =>
-                        v.length <= 255 ||
-                        this.$t(
-                            'windward.core.shared.settings.errors.input_limitations',
-                            [255]
-                        ),
-                ],
-            },
         }
     },
     mounted() {},

package/components/Settings/VideoSettings/SourcePicker.vue

@@ -0,0 +1,223 @@
+<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
+            outlined
+            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>