@windward/core 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### Release [0.10.0] created - 2025-01-03
+
+
 ### Hotfix [0.9.1] created - 2024-12-10
 
 

package/components/Content/Blocks/Accordion.vue

@@ -59,26 +59,19 @@
                             "
                         ></TextEditor>
                     </v-container>
-                    <v-container>
-                        <v-img
-                            v-if="block.metadata.config.items[itemIndex].file"
-                            :aria-describedby="
+                    <v-container
+                        v-if="
+                            block.metadata.config.items[itemIndex].fileConfig
+                                .asset
+                        "
+                    >
+                        <ImageAssetViewer
+                            v-model="
                                 block.metadata.config.items[itemIndex]
-                                    .ariaDescribedBy
-                            "
-                            :alt="
-                                getImageAlt(
-                                    block.metadata.config.items[itemIndex].file,
-                                    block.metadata.config.items[itemIndex]
-                                        .altText
-                                )
-                            "
-                            :src="
-                                getImagePublicUrl(
-                                    block.metadata.config.items[itemIndex].file
-                                )
+                                    .fileConfig
                             "
-                        ></v-img>
+                            :assets="block.assets"
+                        ></ImageAssetViewer>
                     </v-container>
                 </v-expansion-panel-content>
             </v-expansion-panel>
@@ -89,6 +82,7 @@
 <script>
 import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
+import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
 import TextEditor from '~/components/Text/TextEditor'
 import TextViewer from '~/components/Text/TextViewer'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
@@ -98,6 +92,7 @@ export default {
     components: {
         TextEditor,
         TextViewer,
+        ImageAssetViewer,
     },
     extends: BaseContentBlock,
     beforeMount() {
@@ -118,9 +113,7 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
-                file: null,
-                altText: '',
-                ariaDescribedBy: '',
+                fileConfig: {},
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)

package/components/Content/Blocks/ClickableIcons.vue

@@ -27,7 +27,7 @@
                         @click="item.active = !item.active"
                     >
                         <v-avatar
-                            v-if="item.iconImage && item.icon"
+                            v-if="item.iconImage && item.fileConfig"
                             class="clickable--image"
                             :rounded="
                                 block.metadata.config.display.round_icon
@@ -36,7 +36,12 @@
                             "
                             size="100%"
                         >
-                            <v-img :src="getImagePublicUrl(item.iconAsset)" />
+                            <ImageAssetViewer
+                                v-model="item.fileConfig"
+                                :assets="block.assets"
+                                class="image-asset-viewer"
+                                :inherit-sizing="true"
+                            ></ImageAssetViewer>
                         </v-avatar>
                         <v-icon
                             v-else-if="isIcon(item.icon)"
@@ -77,11 +82,13 @@ import _ from 'lodash'
 import he from 'he'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer'
+import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
 
 export default {
     name: 'ClickableIcons',
     components: {
         TextViewer,
+        ImageAssetViewer,
     },
     extends: BaseContentBlock,
     beforeMount() {
@@ -295,4 +302,8 @@ button.button-icon.button-icon--rounded {
         font-size: 2.5rem;
     }
 }
+.image-asset-viewer {
+    height: inherit;
+    width: inherit;
+}
 </style>

package/components/Content/Blocks/Video.vue

@@ -7,30 +7,9 @@
             {{ 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.not_configured_title'
-                    )
-                }}
-            </v-card-title>
-            <v-card-text>{{
-                $t('windward.core.components.content.blocks.video.edit_prompt')
-            }}</v-card-text>
-        </v-card>
-
-        <v-skeleton-loader
-            v-if="!render && !hasSource"
-            type="image, image, list-item-avatar"
-            class="reload-skeleton"
-        ></v-skeleton-loader>
-
         <VuetifyPlayer
-            v-if="hasSource"
             :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
-            :type="block.metadata.config.type"
+            type="auto"
             :playlist="linkedPlaylist"
             :autoplay="block.metadata.config.attributes.autoplay"
             :autopictureinpicture="
@@ -59,9 +38,31 @@
                 block.metadata.config.attributes.playlistautoadvance
             "
             :playbackrates="block.metadata.config.attributes.playbackrates"
+            :captions-autoscroll.sync="captionsAutoscroll"
+            :captions-paragraph-view.sync="captionsParagraphView"
+            :captions-visible.sync="captionsVisible"
+            flat
             @seeking="onSeeking"
             @timeupdate="onTimeupdate"
-        />
+        >
+            <template #no-source>
+                <v-card>
+                    <v-card-title class="justify-center">
+                        <v-icon class="mr-2">mdi-cloud-question</v-icon>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.video.not_configured_title'
+                            )
+                        }}
+                    </v-card-title>
+                    <v-card-text>{{
+                        $t(
+                            'windward.core.components.content.blocks.video.edit_prompt'
+                        )
+                    }}</v-card-text>
+                </v-card>
+            </template>
+        </VuetifyPlayer>
         <!--    display first note in the playlist for now    -->
         <v-alert
             v-if="notes.length > 0"
@@ -78,10 +79,11 @@
 
 <script>
 import _ from 'lodash'
+import he from 'he'
 import VuetifyPlayer from '@mindedge/vuetify-player'
+import AuthUserRepository from '~/models/repositories/AuthUserRepository'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer'
-import he from 'he'
 
 export default {
     name: 'ContentBlockVideo',
@@ -214,6 +216,58 @@ export default {
             })
             return playlist
         },
+        captionsAutoscroll: {
+            get() {
+                const user = new AuthUserRepository(this.$nuxt)
+
+                return user.getPreference('video.captions-autoscroll', true)
+            },
+            set(v) {
+                try {
+                    const user = new AuthUserRepository(this.$nuxt)
+                    user.setPreference('video.captions-autoscroll', v)
+                    user.save()
+                } catch (e) {
+                    console.error('Could not save user video preference!')
+                    console.error(e)
+                }
+            },
+        },
+        captionsParagraphView: {
+            get() {
+                const user = new AuthUserRepository(this.$nuxt)
+                return user.getPreference(
+                    'video.captions-paragraph-view',
+                    false
+                )
+            },
+            set(v) {
+                try {
+                    const user = new AuthUserRepository(this.$nuxt)
+                    user.setPreference('video.captions-paragraph-view', v)
+                    user.save()
+                } catch (e) {
+                    console.error('Could not save user video preference!')
+                    console.error(e)
+                }
+            },
+        },
+        captionsVisible: {
+            get() {
+                const user = new AuthUserRepository(this.$nuxt)
+                return user.getPreference('video.captions-visible', false)
+            },
+            set(v) {
+                try {
+                    const user = new AuthUserRepository(this.$nuxt)
+                    user.setPreference('video.captions-visible', v)
+                    user.save()
+                } catch (e) {
+                    console.error('Could not save user video preference!')
+                    console.error(e)
+                }
+            },
+        },
     },
     data() {
         return {
@@ -224,7 +278,7 @@ export default {
                 description: '',
                 // Default settings for new blocks
                 // This will be overridden in beforeMount()
-                type: 'video', // Allowed video|audio. In audio mode the player has a max-height of 40px
+                type: 'auto', // Allowed auto|video|audio. In audio mode the player has a max-height of 40px. Auto will switch between the other types when needed
                 attributes: {
                     autoplay: false, // Autoplay on load. It's in the spec but DON'T USE THIS
                     autopictureinpicture: false, // Start with picture in picture mode

package/components/Settings/AccordionSettings.vue

@@ -98,53 +98,16 @@
                                     )
                                 }}
                             </h4>
-                            <v-text-field
-                                v-model="
-                                    block.metadata.config.items[index].altText
-                                "
-                                class="pt-3 pb-3"
-                                :hide-details="true"
-                                dense
-                                outlined
-                                :label="
-                                    $t(
-                                        'windward.core.shared.settings.alt_image'
-                                    )
-                                "
-                                :disabled="render"
-                            ></v-text-field>
-                            <v-text-field
+                            <ImageAssetSettings
                                 v-model="
                                     block.metadata.config.items[index]
-                                        .ariaDescribedBy
+                                        .fileConfig
                                 "
-                                class="pt-3 pb-3"
-                                :hide-details="true"
-                                dense
-                                outlined
-                                :label="
-                                    $t(
-                                        'windward.core.shared.settings.aria_described'
-                                    )
-                                "
-                                :disabled="render"
-                            ></v-text-field>
-                            <ContentBlockAsset
-                                v-model="
-                                    block.metadata.config.items[index].file
-                                "
-                                mimes="image/png,image/jpeg"
                                 :assets.sync="block.assets"
-                                outlined
-                            >
-                                <template #title>
-                                    {{
-                                        $t(
-                                            'windward.core.components.settings.image.place_image'
-                                        )
-                                    }}
-                                </template>
-                            </ContentBlockAsset>
+                                hide-background
+                                hide-decorative
+                                hide-modal
+                            ></ImageAssetSettings>
                         </v-container>
                     </v-container>
                 </template>
@@ -181,12 +144,14 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
 import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
     name: 'AccordionSettings',
     components: {
         TextEditor,
         SortableExpansionPanel,
+        ImageAssetSettings,
     },
     extends: BaseContentSettings,
     beforeMount() {
@@ -219,9 +184,7 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
-                file: null,
-                altText: '',
-                ariaDescribedBy: '',
+                fileConfig: {},
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -260,9 +223,7 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
-                file: null,
-                altText: '',
-                ariaDescribedBy: '',
+                fileConfig: {},
             }
             this.block.metadata.config.items.push(default_item)
             this.block.metadata.config.selectedPanels =

package/components/Settings/ClickableIconsSettings.vue

@@ -87,8 +87,8 @@
                     @click:close="onRemoveElement"
                 >
                     <template #header="{ item }">
-                        <v-avatar v-if="item.iconImage && item.iconAsset">
-                            <v-img :src="getImagePublicUrl(item.iconAsset)" />
+                        <v-avatar v-if="item.iconImage && item.fileConfig">
+                            <v-img :src="getImagePublicUrl(item.fileConfig.asset)" />
                         </v-avatar>
                         <v-icon
                             v-else-if="
@@ -146,29 +146,19 @@
                                 :rules="validation.iconRules"
                                 :disabled="render"
                             ></TextIconPicker>
-
-                            <ContentBlockAsset
+                            <ImageAssetSettings
                                 v-if="
                                     block.metadata.config.items[index].iconImage
                                 "
                                 v-model="
-                                    block.metadata.config.items[index].iconAsset
+                                    block.metadata.config.items[index]
+                                        .fileConfig
                                 "
                                 :assets.sync="block.assets"
-                                class="mb-4"
-                                mimes="image/jpeg,image/png,image/gif"
-                                :disabled="render"
-                                outlined
-                                @click:file="onFileSelect($event, index)"
-                            >
-                                <template #title>
-                                    {{
-                                        $t(
-                                            'windward.core.components.settings.image.place_image'
-                                        )
-                                    }}
-                                </template>
-                            </ContentBlockAsset>
+                                hide-background
+                                hide-decorative
+                                hide-modal
+                            ></ImageAssetSettings>
                             <v-text-field
                                 v-model="
                                     block.metadata.config.items[index].title
@@ -234,6 +224,7 @@ import TextIconPicker from '~/components/Core/TextIconPicker.vue'
 import ColorPicker from '~/components/Core/ColorPicker.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
     name: 'ClickableIconsSettings',
@@ -243,6 +234,7 @@ export default {
         TextIconPicker,
         ColorPicker,
         ContentBlockAsset,
+        ImageAssetSettings,
     },
     extends: BaseContentSettings,
     data() {
@@ -311,7 +303,7 @@ export default {
         onAddElement() {
             const defaultObject = {
                 icon: '',
-                iconAsset: null,
+                fileConfig: {},
                 iconImage: false,
                 title: '',
                 body: '<p></p>',
@@ -336,7 +328,7 @@ export default {
         onClickToggleIconImage(index) {
             // We're switching between images / text. Clear the relevant fields
             this.block.metadata.config.items[index].icon = ''
-            this.block.metadata.config.items[index].iconAsset = null
+            this.block.metadata.config.items[index].fileConfig = null
         },
         onFileSelect(file, index) {
             // file = null when you remove a file

package/components/Settings/VideoSettings/SourcePicker.vue

@@ -21,7 +21,7 @@
                 {{
                     sourceDescription ||
                     $t(
-                        'windward.core.components.settings.video.video.configure_blurb'
+                        'windward.core.components.settings.video.media.configure_blurb'
                     )
                 }}
             </template>

package/components/Settings/VideoSettings.vue

@@ -146,9 +146,9 @@
                             :disabled="render"
                             @change:source="
                                 (file, rawFile) =>
-                                    onAdSourceSelect(file, rawFile, 0)
+                                    onAdSourceSelect(file, rawFile, 100)
                             "
-                            @change:track="onAdTrackSelect($event, 0)"
+                            @change:track="onAdTrackSelect($event, 100)"
                         ></SourcePicker>
                     </v-tab-item>
                 </v-tabs-items>
@@ -575,6 +575,11 @@ export default {
             return ads.length
         },
         onRemovePlaylistItem() {
+            // If there's still items in the playlist then decrement it down to the previous item
+            if (this.playlistIndex > 0) {
+                this.playlistPaginator--
+            }
+
             if (this.block.metadata.config.playlist.length > 1) {
                 this.block.metadata.config.playlist.splice(
                     this.playlistIndex,

package/components/utils/TinyMCEWrapper.vue

@@ -11,7 +11,7 @@
                 <label v-if="label" class="editor-label">{{ label }}</label>
             </slot>
             <Editor
-                :id="id"
+                :id="editorId"
                 :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
                 v-model="text"
                 initial-value=""
@@ -121,6 +121,7 @@ export default {
     props: {
         value: { type: String, required: true, default: '' },
         id: { type: String, required: false, default: '' },
+        dataKey: { type: String, required: false, default: '' }, // used as a unique key for testing
         height: { type: Number, required: false, default: null },
         menubar: {
             type: String,
@@ -152,12 +153,26 @@ export default {
     computed: {
         dataCy() {
             return (
+                this.dataKey ||
                 this.id ||
                 this.label.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
                 this.hint.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
                 _.get(this, '$parent.$parent.$options.name', '')
             )
         },
+        editorId() {
+            // If the id is not empty then make sure it's unique
+            // TinyMCE fails to load if an id is duplicated. Also duplicate ids are just bad in general
+            if (this.id) {
+                const duplicates = document.querySelectorAll(`#${this.id}`)
+
+                return duplicates.length === 0
+                    ? this.id
+                    : this.id + '-' + this.seed
+            } else {
+                return ''
+            }
+        },
         isDarkTheme() {
             return this.$vuetify.theme.isDark
         },
@@ -194,7 +209,7 @@ export default {
                 },
                 autoresize_min_height: 100,
                 autoresize_max_height: 1000,
-                autoresize_bottom_margin: 0,
+                autoresize_bottom_margin: 1,
                 plugins: [
                     'autoresize',
                     'advlist',

package/components/utils/glossary/GlossaryToolTip.vue

@@ -1,25 +1,25 @@
 <template>
     <div
+        v-click-outside="onClickOutside"
         class="glossary-word"
         :class="{ active: show }"
-        v-click-outside="onClickOutside"
         @click="show = !show"
     >
         <v-tooltip
-            top
             v-model="show"
+            top
             :open-on-hover="false"
             color="primary"
             max-width="768px"
             z-index="10"
         >
             <template #activator="{ on }">
-                <span v-on="on">
+                <span tabindex="0" v-on="on">
                     <slot name="term"></slot>
                 </span>
             </template>
             <div>
-                <div v-if="this.$slots['definition']">
+                <div v-if="$slots['definition']">
                     <h6 class="text-capitalize">
                         <slot name="term"></slot>
                         {{
@@ -33,7 +33,7 @@
                         <slot name="definition"></slot>
                     </p>
                 </div>
-                <div v-if="this.$slots['alternate_forms']">
+                <div v-if="$slots['alternate_forms']">
                     <h4 class="text-capitalize">
                         <slot name="term"></slot>
                         {{
@@ -46,7 +46,7 @@
                     <p><slot name="alternate_forms"></slot></p>
                 </div>
 
-                <div v-if="this.$slots['related_terms']">
+                <div v-if="$slots['related_terms']">
                     <h4 class="text-capitalize">
                         {{
                             $t(

package/i18n/en-US/components/content/blocks/video.ts

@@ -1,4 +1,4 @@
 export default {
-    not_configured_title: 'Video not configured',
+    not_configured_title: 'Media not configured',
     edit_prompt: 'Edit this block to get started',
 }

package/i18n/en-US/components/settings/video.ts

@@ -1,11 +1,11 @@
 export default {
-    title: 'Video Title',
+    title: 'Media Title',
     sources: 'Sources',
     place_source: 'Place Video or Audio',
     playback: 'Playback',
     no_sources: 'No Sources Configured',
-    default_filename: 'Video',
-    playlist: 'Videos in Playlist',
+    default_filename: 'Media',
+    playlist: 'Media in Playlist',
     playlist_name: 'Name in Playlist',
     playlist_name_source_required:
         'Select a source before naming this playlist item',
@@ -16,6 +16,10 @@ export default {
         'When enabled, the selected media will use captions linked on the file, managed in the file manager. When disabled, the selected media will have its own unique captions that is not shared globally on the file.',
     inherit_missing_captions:
         'No global captions are available for this source. Please set them in the file settings',
+    media: {
+        configure_blurb:
+            'Upload a media file (.mp4, .webm, .mp3, .ogg), pick one from the file manager, or add via the public URL',
+    },
     video: {
         title: 'Video File',
         configure_blurb:
@@ -29,7 +33,7 @@ export default {
         playback_rates: 'Playback Rates',
         rewind: 'Allow 10 Second Rewind',
         playsinline: 'Disable fullscreen and force inline viewing',
-        captionsmenu: 'Show the interactive captions menu',
+        captionsmenu: 'Show the transcript menu',
         playlistmenu:
             'Show playlist menu (Requires more than 1 video selected to show)',
         playlistautoadvance: 'Auto-advance the playlist on media end',

package/i18n/en-US/shared/settings.ts

@@ -11,7 +11,7 @@ export default {
         clickable_icons: 'Clickable Icons Settings',
         scenario_choice: 'Scenario Choice',
         accordion: 'Accordion Settings',
-        video: 'Video Settings',
+        video: 'Video / Audio Settings',
         table: 'Table Settings',
         math: 'Math Settings',
         feedback: 'Feedback Settings',

package/i18n/es-ES/components/content/blocks/video.ts

@@ -1,5 +1,5 @@
 export default {
-    not_configured_title: 'Video no configurado',
+    not_configured_title: 'Medios no configurados',
     edit_prompt:
         "Para comenzar a manipular el bloque,haga clic en el botón 'Editar'.",
 }