@windward/core 0.6.0 → 0.8.0

package/components/Content/Blocks/Video.vue

@@ -1,18 +1,23 @@
 <template>
     <div>
+        <h2 v-if="block.metadata.config.title" tabindex="0">
+            {{ block.metadata.config.title }}
+        </h2>
+        <p v-if="block.metadata.config.description" tabindex="0" class="pt-3">
+            {{ block.metadata.config.description }}
+        </p>
+
         <v-card v-if="render && !hasSource">
             <v-card-title>
                 <v-icon class="mr-2">mdi-cloud-question</v-icon>
                 {{
                     $t(
-                        'windward.core.components.content.blocks.video.video.not_configured_title'
+                        'windward.core.components.content.blocks.video.not_configured_title'
                     )
                 }}
             </v-card-title>
             <v-card-text>{{
-                $t(
-                    'windward.core.components.content.blocks.video.video.edit_prompt'
-                )
+                $t('windward.core.components.content.blocks.video.edit_prompt')
             }}</v-card-text>
         </v-card>
 
@@ -21,12 +26,7 @@
             type="image, image, list-item-avatar"
             class="reload-skeleton"
         ></v-skeleton-loader>
-        <h2 v-if="block.metadata.config.title">
-            {{ block.metadata.config.title }}
-        </h2>
-        <p v-if="block.metadata.config.description" class="pb-0 mb-0">
-            {{ block.metadata.config.description }}
-        </p>
+
         <VuetifyPlayer
             v-if="hasSource"
             :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
@@ -59,7 +59,20 @@
                 block.metadata.config.attributes.playlistautoadvance
             "
             :playbackrates="block.metadata.config.attributes.playbackrates"
+            @seeking="onSeeking"
+            @timeupdate="onTimeupdate"
         />
+        <!--    display first note in the playlist for now    -->
+        <v-alert
+            v-if="notes.length > 0"
+            :color="
+                $vuetify.theme.isDark
+                    ? 'v-navigation-drawer'
+                    : 'blue-grey lighten-5'
+            "
+        >
+            <TextViewer v-model="notes[0]"></TextViewer>
+        </v-alert>
     </div>
 </template>
 
@@ -67,10 +80,13 @@
 import _ from 'lodash'
 import VuetifyPlayer from '@mindedge/vuetify-player'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import TextViewer from '~/components/Text/TextViewer'
+import he from 'he'
 
 export default {
     name: 'ContentBlockVideo',
     components: {
+        TextViewer,
         VuetifyPlayer,
     },
     extends: BaseContentBlock,
@@ -96,12 +112,30 @@ export default {
             )
             return _.get(file, 'asset.public_url')
         },
+        notes() {
+            const playlist = this.block.metadata.config.playlist
+            let result = []
+            for (const index in playlist) {
+                for (const sourceIndex in playlist[index].sources) {
+                    let file = this.resolveAsset(
+                        playlist[index].sources[sourceIndex]
+                    )
+                    if (
+                        !_.isEmpty(_.get(file, 'asset.metadata.notes')) &&
+                        //check the file notes are actually text and not an empty div
+                        this.hasWords(_.get(file, 'asset.metadata.notes'))
+                    ) {
+                        result.push(_.get(file, 'asset.metadata.notes'))
+                    }
+                }
+            }
+            return result
+        },
         /**
          * Resolve assets to their playlist items
          */
         linkedPlaylist() {
             const playlist = _.cloneDeep(this.block.metadata.config.playlist)
-
             for (const index in playlist) {
                 for (const sourceIndex in playlist[index].sources) {
                     let file = this.resolveAsset(
@@ -112,6 +146,13 @@ export default {
                         src: _.get(file, 'asset.public_url', ''),
                         type: _.get(file, 'asset.metadata.mime', ''),
                     }
+
+                    // If there's linked captions and there's no hard-set captions
+                    // Fallback to the linked captions
+                    const linkedCaptions = this.getLinkedCaptions(file)
+                    if (playlist[index].tracks.length === 0 && linkedCaptions) {
+                        playlist[index].tracks.push(linkedCaptions)
+                    }
                 }
 
                 for (const trackIndex in playlist[index].tracks) {
@@ -126,7 +167,6 @@ export default {
                         default: true,
                     }
                 }
-
                 for (const adIndex in playlist[index].ads) {
                     for (const adSourceIndex in playlist[index].ads[adIndex]
                         .sources) {
@@ -138,7 +178,20 @@ export default {
                             src: _.get(file, 'asset.public_url', ''),
                             type: _.get(file, 'asset.metadata.mime', ''),
                         }
+
+                        // If there's linked captions and there's no hard-set captions
+                        // Fallback to the linked captions
+                        const linkedCaptions = this.getLinkedCaptions(file)
+                        if (
+                            playlist[index].ads[adIndex].tracks.length === 0 &&
+                            linkedCaptions
+                        ) {
+                            playlist[index].ads[adIndex].tracks.push(
+                                linkedCaptions
+                            )
+                        }
                     }
+
                     for (const adTrackIndex in playlist[index].ads[adIndex]
                         .tracks) {
                         let file = this.resolveAsset(
@@ -154,13 +207,16 @@ export default {
                     }
                 }
             }
-
+            // reset adds to empty array as we aren't using these right now
+            // left code above in case we want to implement later
+            playlist.forEach((element) => {
+                element.ads = []
+            })
             return playlist
         },
     },
     data() {
         return {
-            saveState: false,
             fileTab: null,
             // Default config settings
             defaultConfig: {
@@ -230,6 +286,10 @@ export default {
                     },*/
                 ],
             },
+            tracking: {
+                hasSkipped: false,
+                percentComplete: 0,
+            },
         }
     },
     beforeMount() {
@@ -249,11 +309,65 @@ export default {
             this.$set(this.block, 'assets', [])
         }
     },
-    mounted() {},
     methods: {
+        onSeeking(e) {
+            this.tracking.hasSkipped = true
+        },
+        onTimeupdate(e) {
+            // If you were seeking / skipped parts only "resume" if you start back from where you left off
+            if (e.current_percent <= this.tracking.percentComplete) {
+                this.tracking.hasSkipped = false
+            }
+
+            if (!this.tracking.hasSkipped) {
+                if (e.current_percent >= this.tracking.percentComplete) {
+                    this.tracking.percentComplete = e.current_percent
+                }
+
+                if (!this.completed && this.tracking.percentComplete >= 90) {
+                    this.emitCompleted()
+                }
+            }
+        },
         async onBeforeSave() {
             this.block.body = 'video'
         },
+        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'
+                }
+            )
+
+            if (linkedCaption) {
+                const foundAsset = this.block.assets.find((a) => {
+                    return a.file_asset_id === linkedCaption.file_asset_id
+                })
+
+                // The linked captions aren't part of the block.assets
+                // Add it so the block knows how to properly load it
+                if (!foundAsset) {
+                    this.block.assets.push(_.cloneDeep(linkedCaption))
+                }
+            }
+
+            return linkedCaption || null
+        },
+
+        /**
+         * Check if the given text has words, omitting HTML tags and HTML entities
+         * @param {string} text - The text to check
+         * @returns {boolean} - True if the text has words, false otherwise
+         */
+        hasWords(text) {
+            const strippedText = he
+                .decode(text)
+                .replace(/<\/?[^>]+(>|$)/g, '') // Remove HTML tags
+                .trim()
+            return /\b\w+\b/.test(strippedText) // Check if there are any words
+        },
     },
 }
 </script>

package/components/Settings/AccordionSettings.vue

@@ -1,6 +1,31 @@
 <template>
     <div>
         <v-container class="pa-0">
+            <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"
+                ></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.accordion.items') }}
@@ -22,8 +47,8 @@
                         <v-text-field
                             v-model="block.metadata.config.items[index].header"
                             :autofocus="true"
-                            :counter="50"
-                            :rules="validation.titleRule"
+                            :rules="$Validation.getRule('shortInput')"
+                            :counter="$Validation.getLimit('shortInput')"
                             outlined
                             :label="
                                 $t('components.content.settings.base.title')
@@ -86,6 +111,7 @@
                                         'windward.core.shared.settings.alt_image'
                                     )
                                 "
+                                :disabled="render"
                             ></v-text-field>
                             <v-text-field
                                 v-model="
@@ -101,6 +127,7 @@
                                         'windward.core.shared.settings.aria_described'
                                     )
                                 "
+                                :disabled="render"
                             ></v-text-field>
                             <ContentBlockAsset
                                 v-model="
@@ -108,7 +135,16 @@
                                 "
                                 mimes="image/png,image/jpeg"
                                 :assets.sync="block.assets"
-                            ></ContentBlockAsset>
+                                outlined
+                            >
+                                <template #title>
+                                    {{
+                                        $t(
+                                            'windward.core.components.settings.image.place_image'
+                                        )
+                                    }}
+                                </template>
+                            </ContentBlockAsset>
                         </v-container>
                     </v-container>
                 </template>
@@ -144,6 +180,7 @@ import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'AccordionSettings',
@@ -162,6 +199,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.accordion.instructions'
+            )
+        }
         if (_.isEmpty(this.block.metadata.config.editOnContentItem)) {
             this.block.metadata.config.editOnContentItem = false
         }
@@ -185,16 +234,6 @@ export default {
         return {
             expansionPanelKey: '0',
             loading: false,
-            validation: {
-                titleRule: [
-                    (v) =>
-                        v.length <= 50 ||
-                        this.$t(
-                            'windward.core.shared.settings.errors.input_limitations',
-                            [50]
-                        ),
-                ],
-            },
         }
     },
     beforeDestroy() {

package/components/Settings/BlockQuoteSettings.vue

@@ -2,21 +2,23 @@
     <div>
         <v-container class="pa-0">
             <v-text-field
+                id="block-settings-title"
+                ref="title"
                 v-model="block.metadata.config.title"
                 :autofocus="true"
                 outlined
-                :counter="50"
-                :rules="validation.shortInputRules"
+                :counter="$Validation.getLimit('block.title')"
+                :rules="$Validation.getRule('block.title')"
                 :label="$t('components.content.settings.base.title')"
-                ref="title"
                 :disabled="render"
             ></v-text-field>
             <v-textarea
+                id="block-settings-instructions"
                 v-model="block.metadata.config.instructions"
                 outlined
                 auto-grow
-                :rules="validation.longInputRules"
-                :counter="255"
+                :rules="$Validation.getRule('block.instructions')"
+                :counter="$Validation.getLimit('block.instructions')"
                 :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
             ></v-textarea>
@@ -25,10 +27,10 @@
         <v-container class="pa-0">
             <TextEditor
                 v-model="block.metadata.config.block_quote.quote"
-                :rules="validation.longInputRules"
+                :rules="$Validation.getRule('longInput')"
+                :counter="$Validation.getLimit('longInput')"
                 outlined
                 auto-grow
-                :counter="255"
                 :height="200"
                 :label="
                     $t('windward.core.components.settings.block_quote.body')
@@ -40,8 +42,8 @@
         <v-container class="pa-0">
             <v-text-field
                 v-model="block.metadata.config.block_quote.author"
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 outlined
                 auto-grow
                 :label="
@@ -52,8 +54,8 @@
             <v-text-field
                 v-model="block.metadata.config.block_quote.author_title"
                 outlined
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 auto-grow
                 :label="
                     $t('windward.core.components.settings.block_quote.title')
@@ -62,8 +64,8 @@
             ></v-text-field>
             <v-text-field
                 v-model="block.metadata.config.block_quote.organization"
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 outlined
                 auto-grow
                 :label="$t('windward.core.components.settings.block_quote.org')"
@@ -72,8 +74,8 @@
             <v-text-field
                 v-model="block.metadata.config.block_quote.source_title"
                 outlined
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 auto-grow
                 :label="
                     $t(
@@ -182,24 +184,6 @@ export default {
                     value: 'online_journal',
                 },
             ],
-            validation: {
-                shortInputRules: [
-                    (v) =>
-                        v.length <= 50 ||
-                        this.$t(
-                            'windward.core.shared.settings.errors.input_limitations',
-                            [50]
-                        ),
-                ],
-                longInputRules: [
-                    (v) =>
-                        v.length <= 255 ||
-                        this.$t(
-                            'windward.core.shared.settings.errors.input_limitations',
-                            [255]
-                        ),
-                ],
-            },
         }
     },
     methods: {},

package/components/Settings/ClickableIconsSettings.vue

@@ -3,12 +3,12 @@
         <v-container class="pa-0">
             <v-col class="pa-0">
                 <v-text-field
+                    id="block-settings-title"
                     v-model="block.metadata.config.title"
                     :autofocus="true"
-                    :rules="validation.shortInputRules"
-                    :counter="50"
+                    :rules="$Validation.getRule('block.title')"
+                    :counter="$Validation.getLimit('block.title')"
                     outlined
-                    id="title"
                     :label="
                         $t(
                             'windward.core.components.settings.clickable_icon.title'
@@ -17,9 +17,10 @@
                     :disabled="render"
                 ></v-text-field>
                 <v-textarea
+                    id="block-settings-instructions"
                     v-model="block.metadata.config.description"
-                    :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"
@@ -142,6 +143,7 @@
                                         [index + 1]
                                     )
                                 "
+                                :rules="validation.iconRules"
                                 :disabled="render"
                             ></TextIconPicker>
 
@@ -156,16 +158,25 @@
                                 class="mb-4"
                                 mimes="image/jpeg,image/png,image/gif"
                                 :disabled="render"
+                                outlined
                                 @click:file="onFileSelect($event, index)"
-                            ></ContentBlockAsset>
+                            >
+                                <template #title>
+                                    {{
+                                        $t(
+                                            'windward.core.components.settings.image.place_image'
+                                        )
+                                    }}
+                                </template>
+                            </ContentBlockAsset>
                             <v-text-field
                                 v-model="
                                     block.metadata.config.items[index].title
                                 "
                                 :id="'item-' + index + '-title'"
                                 outlined
-                                :counter="50"
-                                :rules="validation.shortInputRules"
+                                :rules="$Validation.getRule('shortInput')"
+                                :counter="$Validation.getLimit('shortInput')"
                                 :label="
                                     $t(
                                         'windward.core.components.settings.clickable_icon.item_title'
@@ -237,21 +248,24 @@ export default {
     data() {
         return {
             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]
-                        ),
+                iconRules: [
+                    (v) => {
+                        if (v) {
+                            const isMDI = v.startsWith('mdi')
+                            if (isMDI) {
+                                return true
+                            } else if (v.length >= 5) {
+                                return this.$t(
+                                    'shared.forms.errors.number_lt',
+                                    [4]
+                                )
+                            } else {
+                                return true
+                            }
+                        } else {
+                            return true
+                        }
+                    },
                 ],
             },
         }

package/components/Settings/EmailSettings.vue

@@ -6,17 +6,17 @@
                 :autofocus="true"
                 ref="title"
                 outlined
-                :counter="50"
-                :rules="validation.shortInputRules"
+                :rules="$Validation.getRule('block.title')"
+                :counter="$Validation.getLimit('block.title')"
                 :label="$t('components.content.settings.base.title')"
                 :disabled="render"
             ></v-text-field>
             <v-textarea
                 v-model="block.metadata.config.instructions"
                 outlined
-                :rules="validation.instructionRule"
+                :rules="$Validation.getRule('block.instructions')"
+                :counter="$Validation.getLimit('block.instructions')"
                 auto-grow
-                :counter="255"
                 :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
             ></v-textarea>
@@ -42,8 +42,8 @@
                     <v-container :key="expansionPanelKey">
                         <v-text-field
                             v-model="block.metadata.config.emails[index].from"
-                            :rules="validation.shortInputRules"
-                            :counter="50"
+                            :rules="$Validation.getRule('shortInput')"
+                            :counter="$Validation.getLimit('shortInput')"
                             outlined
                             :label="
                                 $t(
@@ -54,8 +54,8 @@
                         ></v-text-field>
                         <v-text-field
                             v-model="block.metadata.config.emails[index].to"
-                            :rules="validation.shortInputRules"
-                            :counter="50"
+                            :rules="$Validation.getRule('shortInput')"
+                            :counter="$Validation.getLimit('shortInput')"
                             outlined
                             :label="
                                 $t('windward.core.components.settings.email.to')
@@ -64,8 +64,8 @@
                         ></v-text-field>
                         <v-text-field
                             v-model="block.metadata.config.emails[index].cc"
-                            :rules="validation.shortInputRules"
-                            :counter="50"
+                            :rules="$Validation.getRule('shortInput')"
+                            :counter="$Validation.getLimit('shortInput')"
                             outlined
                             :label="
                                 $t('windward.core.components.settings.email.cc')
@@ -76,8 +76,8 @@
                             v-model="
                                 block.metadata.config.emails[index].subject
                             "
-                            :rules="validation.shortInputRules"
-                            :counter="50"
+                            :rules="$Validation.getRule('shortInput')"
+                            :counter="$Validation.getLimit('shortInput')"
                             outlined
                             :label="
                                 $t(
@@ -213,24 +213,6 @@ export default {
             loading: false,
             expansionPanelKey: 0,
             editingPanel: 0,
-            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]
-                        ),
-                ],
-            },
         }
     },
     beforeDestroy() {