@windward/core 0.9.2 → 0.11.0

package/CHANGELOG.md

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

package/components/Content/Blocks/Accordion.vue

@@ -46,7 +46,10 @@
                     class="expansion-panel-body"
                     :key="expansionPanelKey"
                 >
-                    <v-container>
+                    <v-container
+                        class="px-0 d-flex"
+                        :class="getTextImageContainerClass(item)"
+                    >
                         <TextViewer
                             v-if="!item.expand"
                             v-model="item.content"
@@ -58,27 +61,19 @@
                                 block.metadata.config.items[itemIndex].content
                             "
                         ></TextEditor>
-                    </v-container>
-                    <v-container>
-                        <v-img
-                            v-if="block.metadata.config.items[itemIndex].file"
-                            :aria-describedby="
+                        <ImageAssetViewer
+                            v-if="
                                 block.metadata.config.items[itemIndex]
-                                    .ariaDescribedBy
-                            "
-                            :alt="
-                                getImageAlt(
-                                    block.metadata.config.items[itemIndex].file,
-                                    block.metadata.config.items[itemIndex]
-                                        .altText
-                                )
+                                    .fileConfig.asset
                             "
-                            :src="
-                                getImagePublicUrl(
-                                    block.metadata.config.items[itemIndex].file
-                                )
+                            v-model="
+                                block.metadata.config.items[itemIndex]
+                                    .fileConfig
                             "
-                        ></v-img>
+                            :class="getImageOrder(item)"
+                            :assets="block.assets"
+                            :max-width="getImageWidth(item)"
+                        ></ImageAssetViewer>
                     </v-container>
                 </v-expansion-panel-content>
             </v-expansion-panel>
@@ -89,6 +84,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 +94,7 @@ export default {
     components: {
         TextEditor,
         TextViewer,
+        ImageAssetViewer,
     },
     extends: BaseContentBlock,
     beforeMount() {
@@ -118,9 +115,14 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
-                file: null,
-                altText: '',
-                ariaDescribedBy: '',
+                fileConfig: {
+                    display: {
+                        width: 100,
+                        margin: '',
+                        padding: '',
+                    },
+                    hideBackground: true,
+                },
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -134,36 +136,42 @@ export default {
             expansionPanelKey: '0',
             editingInContentItem: false,
             selectedPanels: null,
+            fullWidth: true,
         }
     },
     watch: {
-        value(newValue) {
-            if (
-                !this.render &&
-                this.selectedPanels !== newValue.metadata.config.selectedPanels
-            ) {
-                // update editing content block
-                this.selectedPanels = newValue.metadata.config.selectedPanels
-                this.expansionPanelKey = Crypto.id()
-            }
-
-            const length = newValue.metadata.config.items.length
-            let counter = 0
-            newValue.metadata.config.items.forEach((element) => {
+        value: {
+            deep: true,
+            handler(newValue) {
                 if (
-                    element.expand === true &&
-                    this.editingInContentItem !== true
+                    !this.render &&
+                    this.selectedPanels !==
+                        newValue.metadata.config.selectedPanels
                 ) {
-                    this.editingInContentItem = true
+                    // update editing content block
+                    this.selectedPanels =
+                        newValue.metadata.config.selectedPanels
                     this.expansionPanelKey = Crypto.id()
                 }
-                if (element.expand === false) {
-                    counter = counter + 1
-                }
-                if (counter === length) {
-                    this.editingInContentItem = false
-                }
-            })
+
+                const length = newValue.metadata.config.items.length
+                let counter = 0
+                newValue.metadata.config.items.forEach((element) => {
+                    if (
+                        element.expand === true &&
+                        this.editingInContentItem !== true
+                    ) {
+                        this.editingInContentItem = true
+                        this.expansionPanelKey = Crypto.id()
+                    }
+                    if (element.expand === false) {
+                        counter = counter + 1
+                    }
+                    if (counter === length) {
+                        this.editingInContentItem = false
+                    }
+                })
+            },
         },
         render() {
             if (this.render === true) {
@@ -206,6 +214,55 @@ export default {
             const foundAsset = this.resolveAsset(asset)
             return _.get(foundAsset, 'asset.metadata.props.alt', null)
         },
+        getImageWidth(item) {
+            if (item.fileConfig.display) {
+                return String(item.fileConfig.display.width) + '%'
+            }
+        },
+        getTextImageContainerClass(item) {
+            const { margin, width } = item.fileConfig.display
+
+            if (width === 100) {
+                return margin === 'top'
+                    ? 'flex-column-reverse '
+                    : 'flex-column '
+            }
+
+            // If no display items have been set, keep the image in its own row
+            if (!margin) {
+                return 'flex-column '
+            }
+
+            switch (margin) {
+                case 'top':
+                    return 'flex-column-reverse '
+                case 'right':
+                    return _.isEmpty(item.content)
+                        ? 'justify-end'
+                        : 'justify-space-between'
+                case 'left':
+                    return ''
+                default:
+                    return 'flex-column '
+            }
+
+        },
+        getImageOrder(item) {
+            const margin = item.fileConfig.display?.margin
+            if (margin) {
+                switch (margin) {
+                    case 'left':
+                        return 'order-first pr-1 '
+                    case 'right':
+                        return ''
+                    default:
+                        return 'align-self-center '
+                }
+            } else {
+                // if adjusting size and margin hasn't been set yet keep centered here
+                return 'align-self-center '
+            }
+        },
         async onBeforeSave() {
             this.block.metadata.config.items.forEach((element) => {
                 element.expand = false

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/FileDownload.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-container>
+    <v-container class="pa-0">
         <h2>
             {{
                 block.metadata.config.title ||

package/components/Content/Blocks/GenerateAIQuestionButton.vue

@@ -10,19 +10,10 @@
                     :disabled="isLoading"
                     @click="generateAIQuestion"
                 >
-                    <v-icon class="pr-1" v-if="!isLoading"
-                        >mdi-magic-staff</v-icon
-                    >
-                    {{
-                        this.$t(
-                            'windward.core.components.content.blocks.generate_questions.button_label'
-                        )
-                    }}
+                    <v-icon class="pr-1" v-if="!isLoading">mdi-magic-staff</v-icon>
+                    {{ $t('windward.core.components.content.blocks.generate_questions.button_label') }}
                     <template v-slot:loader>
-                        <v-progress-circular
-                            indeterminate
-                            size="23"
-                        ></v-progress-circular>
+                        <v-progress-circular indeterminate size="23"></v-progress-circular>
                     </template>
                 </v-btn>
             </v-col>
@@ -34,11 +25,7 @@
                     outlined
                     hide-details
                     dense
-                    :label="
-                        $t(
-                            'windward.core.components.content.blocks.generate_questions.selected_pages'
-                        )
-                    "
+                    :label="$t('windward.core.components.content.blocks.generate_questions.selected_pages')"
                     item-text="content.name"
                     return-object
                 ></v-select>
@@ -116,11 +103,18 @@ export default {
                     this.$emit('click:generate', generatedQuestion)
                 }
             } catch (error) {
-                console.error(error)
+                const errorType = error.response?.data?.errors?.detail?.split('.').pop() || 'default'
+                const basePath = 'windward.core.components.content.blocks.generate_questions.error'
+
                 this.$dialog.error(
-                    this.$t(
-                        'windward.core.components.content.blocks.generate_questions.error'
-                    )
+                    this.$t(`${basePath}.${errorType}`) + '\n\n' + 
+                    this.$t(`${basePath}.${errorType}_support`),
+                    {
+                        duration: 5000,
+                        keepOnHover: true,
+                        singleton: true,
+                        type: 'error'
+                    }
                 )
             } finally {
                 this.isLoading = false
@@ -129,8 +123,9 @@ export default {
     },
 }
 </script>
+
 <style scoped>
 .btn-selector {
     width: 100%;
 }
-</style>
+</style>

package/components/Content/Blocks/OpenResponse.vue

@@ -27,7 +27,7 @@
                     :height="200"
                     menubar=""
                 ></TextEditor>
-                <p class="pa-3 text-center blue-grey lighten-5">
+                <p class="pa-3 text-center">
                     <v-btn
                         color="primary"
                         elevation="0"
@@ -66,7 +66,7 @@
                         ></TextViewer>
                     </v-alert>
                 </div>
-                <p class="pa-3 text-center blue-grey lighten-5">
+                <p class="pa-3 text-center">
                     <v-btn
                         elevation="0"
                         color="primary"

package/components/Content/Blocks/Tab.vue

@@ -37,7 +37,10 @@
                         .config.items"
                     :key="'tabContent ' + tabContentIndex"
                 >
-                    <v-container>
+                    <v-container
+                        class="d-flex"
+                        :class="getTextImageContainerClass(tabContent)"
+                    >
                         <TextViewer
                             v-if="!tabContent.expand"
                             v-model="tabContent.content"
@@ -54,6 +57,8 @@
                             "
                             v-model="tabContent.imageAsset"
                             :assets="block.assets"
+                            :class="getImageOrder(tabContent)"
+                            :max-width="getImageWidth(tabContent)"
                         ></ImageAssetViewer>
                     </v-container>
                 </v-tab-item>
@@ -86,6 +91,14 @@ export default {
                 tabHeader: '',
                 expand: false,
                 content: '',
+                imageAsset: {
+                    display: {
+                        width: 100,
+                        margin: '',
+                        padding: '',
+                    },
+                    hideBackground: true,
+                },
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -113,6 +126,57 @@ export default {
             })
             this.block.metadata.config.currentTab = null
         },
+        getImageWidth(item) {
+            if (item.imageAsset?.display) {
+                return String(item.imageAsset.display.width) + '%'
+            }
+        },
+        getTextImageContainerClass(item) {
+            const { margin, width } = item.imageAsset.display
+            // if full width set container to column
+            if (width === 100) {
+                return margin === 'top'
+                    ? 'flex-column-reverse '
+                    : 'flex-column '
+            }
+
+            // If no display items have been set, keep the image in its own row
+            if (!margin) {
+                return 'flex-column '
+            }
+
+            switch (margin) {
+                case 'top':
+                    return 'flex-column-reverse '
+                case 'right':
+                    return _.isEmpty(item.content)
+                        ? 'justify-end'
+                        : 'justify-space-between'
+                case 'left':
+                    return ''
+                default:
+                    return 'flex-column '
+            }
+        },
+        getImageOrder(item) {
+            const margin = item.imageAsset.display?.margin
+            // filter out tab blocks that were created before custom
+            // spacing was added to image asset settings
+            if (margin) {
+                // if top or bottom image will always be centered
+                switch (margin) {
+                    case 'left':
+                        return 'order-first pr-1 '
+                    case 'right':
+                        return ''
+                    default:
+                        return 'align-self-center '
+                }
+            } else {
+                // if adjusting size and margin hasn't been set yet keep centered here
+                return 'align-self-center '
+            }
+        },
     },
 }
 </script>

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="
@@ -50,6 +29,8 @@
             :rewind="block.metadata.config.attributes.rewind"
             :loop="block.metadata.config.attributes.loop"
             :muted="block.metadata.config.attributes.muted"
+            :volume.sync="volume"
+            :cc.sync="ccVisible"
             :playsinline="block.metadata.config.attributes.playsinline"
             :poster="linkedPosterPublicUrl"
             :preload="block.metadata.config.attributes.preload"
@@ -59,9 +40,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 +81,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 +218,90 @@ 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)
+                }
+            },
+        },
+        ccVisible: {
+            get() {
+                const user = new AuthUserRepository(this.$nuxt)
+                return user.getPreference('video.cc-visible', false)
+            },
+            set(v) {
+                try {
+                    const user = new AuthUserRepository(this.$nuxt)
+                    user.setPreference('video.cc-visible', v)
+                    user.save()
+                } catch (e) {
+                    console.error('Could not save user video preference!')
+                    console.error(e)
+                }
+            },
+        },
+        volume: {
+            get() {
+                const user = new AuthUserRepository(this.$nuxt)
+                return user.getPreference('video.volume', 0.5)
+            },
+            set(v) {
+                try {
+                    const user = new AuthUserRepository(this.$nuxt)
+                    user.setPreference('video.volume', v)
+                    user.save()
+                } catch (e) {
+                    console.error('Could not save user video preference!')
+                    console.error(e)
+                }
+            },
+        },
     },
     data() {
         return {
@@ -224,7 +312,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/Navigation/Items/CourseGlossaryToolNav.vue

@@ -9,7 +9,21 @@
                 <template #title>{{ $t(config.i18n) }}</template>
                 <template #form="{ on, attrs }">
                     <div v-bind="attrs" v-on="on">
-                        <CourseGlossary />
+                        <v-alert
+                            v-if="!$ContextService.courseInSourceOrganization()"
+                            type="warning"
+                        >
+                            {{
+                                $t(
+                                    'shared.forms.source_organization_course_lock'
+                                )
+                            }}
+                        </v-alert>
+                        <CourseGlossary
+                            :disabled="
+                                !$ContextService.courseInSourceOrganization()
+                            "
+                        />
                     </div>
                 </template>
             </DialogBox>

package/components/Navigation/Items/GlossaryNav.vue

@@ -3,12 +3,12 @@
         <template #activator="{ on, attrs }">
             <v-list-item
                 :class="color"
-                v-on="on"
-                v-bind="attrs"
                 :to="'/course/' + course.id + '/glossary'"
+                v-bind="attrs"
+                v-on="on"
             >
                 <v-list-item-action>
-                    <v-icon v-on="on" v-bind="attrs"
+                    <v-icon v-bind="attrs" v-on="on"
                         >mdi-comment-text-multiple</v-icon
                     >
                 </v-list-item-action>