@windward/core 0.6.0 → 0.8.0

package/components/Settings/VideoSettings.vue

@@ -3,19 +3,21 @@
         <v-row>
             <v-col cols="12">
                 <v-text-field
+                    id="block-settings-title"
                     v-model="block.metadata.config.title"
-                    :counter="50"
+                    :rules="$Validation.getRule('block.title')"
+                    :counter="$Validation.getLimit('block.title')"
                     outlined
-                    :rules="validation.shortInputRules"
                     :label="$t('windward.core.components.settings.video.title')"
                     :disabled="render"
                 ></v-text-field>
                 <v-textarea
+                    id="block-settings-instructions"
                     v-model="block.metadata.config.description"
                     outlined
                     auto-grow
-                    :rules="validation.instructionRule"
-                    :counter="255"
+                    :rules="$Validation.getRule('block.instructions')"
+                    :counter="$Validation.getLimit('block.instructions')"
                     :label="
                         $t(
                             'components.content.settings.base.description_optional'
@@ -31,83 +33,48 @@
                     <v-tab>
                         {{
                             $t(
-                                'windward.core.components.content.blocks.video.tabs.video'
+                                'windward.core.components.settings.video.tabs.source'
                             )
                         }}
                     </v-tab>
                     <v-tab>
                         {{
                             $t(
-                                'windward.core.components.content.blocks.video.tabs.poster'
+                                'windward.core.components.settings.video.tabs.poster'
                             )
                         }}
                     </v-tab>
-                    <v-tab>
+                    <v-tab v-if="showPreRoll">
                         {{
                             $t(
-                                'windward.core.components.content.blocks.video.tabs.preroll'
+                                'windward.core.components.settings.video.tabs.preroll'
                             )
                         }}
                     </v-tab>
-                    <v-tab>
+                    <v-tab v-if="showPostRoll">
                         {{
                             $t(
-                                'windward.core.components.content.blocks.video.tabs.postroll'
+                                'windward.core.components.settings.video.tabs.postroll'
                             )
                         }}
                     </v-tab>
                 </v-tabs>
 
-                <v-tabs-items v-model="fileTab">
+                <v-tabs-items v-model="fileTab" class="mt-2">
                     <v-tab-item class="mb-1">
-                        <ContentBlockAsset
-                            v-model="media.source"
+                        <SourcePicker
+                            :source.sync="media.source"
+                            :track.sync="media.track"
                             :assets.sync="block.assets"
-                            mimes="video/mp4,audio/mpeg,video/webm,video/youtube"
-                            allow-url
-                            class="mb-4"
+                            :source-label="
+                                $t(
+                                    'windward.core.components.settings.video.place_source'
+                                )
+                            "
                             :disabled="render"
-                            @change="onSourceSelect"
-                        >
-                            <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"
-                            :assets.sync="block.assets"
-                            mimes="text/vtt,text/xml"
-                            allow-url
-                            class="mb-4"
-                            :disabled="render"
-                            @change="onTrackSelect"
-                        >
-                            <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>
+                            @change:source="onSourceSelect"
+                            @change:track="onTrackSelect"
+                        ></SourcePicker>
                     </v-tab-item>
 
                     <v-tab-item class="mb-1">
@@ -122,120 +89,67 @@
                             <template #title>
                                 {{
                                     $t(
-                                        'windward.core.components.content.blocks.video.poster.title'
+                                        'windward.core.components.settings.video.poster.title'
                                     )
                                 }}
                             </template>
                             <template #description>
                                 {{
                                     $t(
-                                        'windward.core.components.content.blocks.video.poster.configure_blurb'
+                                        'windward.core.components.settings.video.poster.configure_blurb'
                                     )
                                 }}
                             </template>
                         </ContentBlockAsset>
                     </v-tab-item>
 
-                    <v-tab-item class="mb-1">
-                        <ContentBlockAsset
-                            v-model="media.ads.preroll.source"
+                    <v-tab-item v-if="showPreRoll" class="mb-1">
+                        <SourcePicker
+                            :source.sync="media.ads[0].source"
+                            :track.sync="media.ads[0].track"
                             :assets.sync="block.assets"
-                            mimes="video/mp4,video/webm"
-                            allow-url
-                            class="mb-4"
-                            :disabled="render"
-                            @change="onAdSourceSelect($event, 0)"
-                        >
-                            <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"
-                            :assets.sync="block.assets"
-                            mimes="text/vtt,text/xml"
-                            allow-url
+                            :source-label="
+                                $t(
+                                    'windward.core.components.settings.video.preroll.title'
+                                )
+                            "
+                            :source-description="
+                                $t(
+                                    'windward.core.components.settings.video.preroll.configure_blurb'
+                                )
+                            "
                             :disabled="render"
-                            @change="onAdTrackSelect($event, 0)"
-                        >
-                            <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>
+                            @change:source="
+                                (file, rawFile) =>
+                                    onAdSourceSelect(file, rawFile, 0)
+                            "
+                            @change:track="onAdTrackSelect($event, 0)"
+                        ></SourcePicker>
                     </v-tab-item>
 
                     <v-tab-item class="mb-1">
-                        <ContentBlockAsset
-                            v-model="media.ads.postroll.source"
+                        <SourcePicker
+                            v-if="showPostRoll"
+                            :source.sync="media.ads[100].source"
+                            :track.sync="media.ads[100].track"
                             :assets.sync="block.assets"
-                            mimes="video/mp4,video/webm"
-                            allow-url
-                            class="mb-4"
+                            :source-label="
+                                $t(
+                                    'windward.core.components.settings.video.postroll.title'
+                                )
+                            "
+                            :source-description="
+                                $t(
+                                    'windward.core.components.settings.video.postroll.configure_blurb'
+                                )
+                            "
                             :disabled="render"
-                            @change="onAdSourceSelect($event, 100)"
-                        >
-                            <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"
-                            :assets.sync="block.assets"
-                            mimes="text/vtt,text/xml"
-                            allow-url
-                            :disabled="render"
-                            @change="onAdTrackSelect($event, 100)"
-                        >
-                            <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>
+                            @change:source="
+                                (file, rawFile) =>
+                                    onAdSourceSelect(file, rawFile, 0)
+                            "
+                            @change:track="onAdTrackSelect($event, 0)"
+                        ></SourcePicker>
                     </v-tab-item>
                 </v-tabs-items>
             </v-col>
@@ -363,7 +277,7 @@
                                     :items="playbackRateOptions"
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.playback_rates'
+                                            'windward.core.components.settings.video.video.playback_rates'
                                         )
                                     "
                                     multiple
@@ -385,7 +299,7 @@
                                     "
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.controls'
+                                            'windward.core.components.settings.video.video.controls'
                                         )
                                     "
                                     :disabled="render"
@@ -396,7 +310,7 @@
                                     "
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.rewind'
+                                            'windward.core.components.settings.video.video.rewind'
                                         )
                                     "
                                     :disabled="render"
@@ -408,7 +322,7 @@
                                     "
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.captionsmenu'
+                                            'windward.core.components.settings.video.video.captionsmenu'
                                         )
                                     "
                                     :disabled="render"
@@ -420,7 +334,7 @@
                                     "
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.disablepictureinpicture'
+                                            'windward.core.components.settings.video.video.disablepictureinpicture'
                                         )
                                     "
                                     :disabled="render"
@@ -428,11 +342,11 @@
                                 <!--
                                             <v-switch
                                             v-model="block.metadata.config.attributes.playlistmenu"
-                                            :label="$t('windward.core.components.content.blocks.video.video.attributes.playlistmenu')"
+                                            :label="$t('windward.core.components.settings.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')"
+                                            :label="$t('windward.core.components.settings.video.video.attributes.playlistautoadvance')"
                                         ></v-switch>
                                         -->
                             </v-col>
@@ -443,7 +357,7 @@
                                     "
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.muted'
+                                            'windward.core.components.settings.video.video.muted'
                                         )
                                     "
                                     :disabled="render"
@@ -454,7 +368,7 @@
                                     "
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.loop'
+                                            'windward.core.components.settings.video.video.loop'
                                         )
                                     "
                                     :disabled="render"
@@ -466,7 +380,7 @@
                                     "
                                     :label="
                                         $t(
-                                            'windward.core.components.content.blocks.video.video.playsinline'
+                                            'windward.core.components.settings.video.video.playsinline'
                                         )
                                     "
                                     :disabled="render"
@@ -482,11 +396,13 @@
 <script>
 import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import SourcePicker from './VideoSettings/SourcePicker.vue'
 
 export default {
     name: 'VideoSettings',
     extends: BaseContentSettings,
-    components: {},
+    components: { ContentBlockAsset, SourcePicker },
     data() {
         return {
             fileTab: null,
@@ -494,45 +410,26 @@ export default {
             playlistPaginator: 1,
             media: {
                 source: null,
+                sourceInherit: true,
                 track: null,
                 poster: null,
                 ads: {
-                    preroll: {
+                    // preroll
+                    0: {
                         source: null,
                         track: null,
+                        inherit: true,
                     },
-                    postroll: {
+                    // postroll
+                    100: {
                         source: null,
                         track: null,
+                        inherit: true,
                     },
                 },
             },
-            validation: {
-                shortInputRules: [
-                    (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]
-                        ),
-                ],
-                clueRule: [
-                    (v) =>
-                        v.length <= 155 ||
-                        this.$t(
-                            'windward.core.shared.settings.errors.input_limitations',
-                            [155]
-                        ),
-                ],
-            },
+            showPreRoll: false,
+            showPostRoll: false,
         }
     },
     computed: {
@@ -578,7 +475,7 @@ export default {
             )
 
             this.media.ads = {
-                preroll: {
+                0: {
                     source: this.resolveAsset(
                         _.get(
                             this.block,
@@ -602,7 +499,7 @@ export default {
                         )
                     ),
                 },
-                postroll: {
+                100: {
                     source: this.resolveAsset(
                         _.get(
                             this.block,
@@ -640,6 +537,17 @@ export default {
                 delete self.block.metadata.config.__isDirty
             }, 500)
         },
+        getLinkedCaptions(file) {
+            // 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
+        },
         /**
          * Returns the next array index for an ad slot
          * If a slot is already defined then return that index
@@ -713,7 +621,7 @@ export default {
 
             this.reloadVideo()
         },
-        onSourceSelect(file) {
+        onSourceSelect(file, rawFile) {
             // No file, clear the selection
             if (_.isEmpty(file)) {
                 delete this.block.metadata.config.playlist[this.playlistIndex]
@@ -722,6 +630,10 @@ export default {
                     this.playlistIndex
                 ].sources = []
 
+                // Clear out any associated captions
+                this.media.track = null
+                this.onTrackSelect(null)
+
                 this.showVideo = false
             } else {
                 // Apply an updated name
@@ -737,6 +649,10 @@ export default {
                 ].sources = [file]
 
                 this.showVideo = true
+
+                // Clear the tracks. it will either be inherited via linked captions or be hard-set by the user
+                this.media.track = null
+                this.onTrackSelect(null)
             }
             this.reloadVideo()
         },
@@ -751,7 +667,7 @@ export default {
             }
             this.reloadVideo()
         },
-        onAdSourceSelect(file, playAtPercent) {
+        onAdSourceSelect(file, rawFile, playAtPercent) {
             const adIndex = this.getAdSlot(playAtPercent)
 
             // Prep in case the ad slot isn't setup yet
@@ -769,6 +685,10 @@ export default {
                 this.block.metadata.config.playlist[this.playlistIndex].ads[
                     adIndex
                 ].sources = [file]
+
+                // Clear the tracks. it will either be inherited via linked captions or be hard-set by the user
+                this.media.ads[playAtPercent].track = null
+                this.onAdTrackSelect(null, playAtPercent)
             }
             this.reloadVideo()
         },

package/components/utils/TinyMCEWrapper.vue

@@ -7,8 +7,9 @@
             "
             :data-cy="dataCy"
         >
-            <label v-if="label" class="editor-label">{{ label }}</label>
-
+            <slot name="label" :render="render">
+                <label v-if="label" class="editor-label">{{ label }}</label>
+            </slot>
             <Editor
                 :id="id"
                 :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
@@ -26,7 +27,9 @@
             >
             </Editor>
 
-            <label v-if="hint" class="editor-hint">{{ hint }}</label>
+            <slot name="hint" :render="render">
+                <label v-if="hint" class="editor-hint">{{ hint }}</label>
+            </slot>
         </div>
 
         <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
@@ -145,7 +148,7 @@ export default {
             type: String,
             required: false,
             default:
-                'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | glossaryButton fibFormatButton mathButton ',
+                'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table tablerowprops tablecellprops |bullist numlist outdent indent |glossaryButton fibFormatButton mathButton a11yButton',
         },
         root_block: { type: String, required: false, default: 'div' },
         label: { type: String, required: false, default: '' },
@@ -238,7 +241,7 @@ export default {
                     },
                     format: {
                         title: 'Format',
-                        items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | forecolor backcolor | language | removeformat',
+                        items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | language | removeformat',
                     },
                 },
                 plugins: [
@@ -263,6 +266,7 @@ export default {
                 table_advtab: false,
                 table_cell_advtab: false,
                 table_row_advtab: false,
+                table_header_type: 'auto',
                 table_default_attributes: {
                     class: 'default',
                 },

package/components/utils/assets/tinymce/content/global.scss

@@ -206,3 +206,17 @@ html:has(body.editor--theme-light) {
 html:has(body.editor--theme-dark) {
     @import './dark/content.scss';
 }
+
+.a11y-error{
+    background-color: #cf3f3f;
+    border-color: #cf3f3f;
+    color: #fff;
+    padding: 4px;
+    font-size: 0.8333rem;
+    border-radius: 4px;
+    &--highlight{
+        text-decoration-line: underline;
+        text-decoration-style: wavy;
+        text-decoration-color: #cf3f3f;
+    }
+}