@windward/core 0.27.0 → 0.29.0

package/components/Content/Blocks/Video.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="blockDirectionClasses" :dir="blockTextDirection">
         <h2
             v-if="
                 block.metadata.config.title &&
@@ -13,7 +13,7 @@
             {{ block.metadata.config.instructions }}
         </p>
 
-        <div v-if="hasSource" class="video-wrapper">
+        <div v-if="hasSource" class="video-wrapper" dir="ltr">
             <VuetifyPlayer
                 class="no-border-player"
                 :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
@@ -146,6 +146,124 @@ export default {
         }
     },
     computed: {
+        courseSourceLocale() {
+            // Get the source language from translation metadata
+            // This is the original language the course was translated FROM
+            // For translated courses: metadata.translation.source_language (e.g., "EN")
+            // For non-translated courses: falls back to locale code
+            
+            // First check translation metadata for source_language (e.g., "EN", "ES")
+            const translationSourceLang = _.get(this.block, 'course.metadata.translation.source_language') ||
+                this.$store?.getters?.['course/get']?.metadata?.translation?.source_language
+            if (translationSourceLang) {
+                return translationSourceLang.toLowerCase()
+            }
+            
+            // Try source_locale_id lookup
+            const translationSourceLocale = _.get(this.block, 'course.metadata.translation.source_locale_id')
+            if (translationSourceLocale) {
+                const sourceLocale = this.$store?.getters?.['locales/getById']?.(translationSourceLocale)
+                if (sourceLocale?.code) {
+                    return sourceLocale.code.toLowerCase()
+                }
+            }
+            
+            return (
+                _.get(this.block, 'course.locale.code')?.toLowerCase() ||
+                this.$store?.getters?.['course/sourceLocale']?.code?.toLowerCase() ||
+                'en-us'
+            )
+        },
+        courseTargetLocale() {
+            // Get the target language from translation metadata
+            // This is the language the course was translated INTO
+            // For translated courses: metadata.translation.target_language (e.g., "PT-BR", "ES")
+            
+            const translationTargetLang = _.get(this.block, 'course.metadata.translation.target_language') ||
+                this.$store?.getters?.['course/get']?.metadata?.translation?.target_language
+            if (translationTargetLang) {
+                return translationTargetLang.toLowerCase()
+            }
+            
+            // Try target_locale_id lookup
+            const translationTargetLocale = _.get(this.block, 'course.metadata.translation.target_locale_id')
+            if (translationTargetLocale) {
+                const targetLocale = this.$store?.getters?.['locales/getById']?.(translationTargetLocale)
+                if (targetLocale?.code) {
+                    return targetLocale.code.toLowerCase()
+                }
+            }
+            
+            // No target language - course is not translated
+            return null
+        },
+        courseCurrentLocale() {
+            // Get the current course's locale code (the language this course is in)
+            // For a translated course, this is the target language
+            // Priority: translation target_language > block.course.locale > store getters > fallback
+            
+            // For translated courses, use target_language directly
+            if (this.courseTargetLocale) {
+                return this.courseTargetLocale
+            }
+            
+            const localeCode = 
+                _.get(this.block, 'course.locale.code')?.toLowerCase() ||
+                _.get(this.block, 'course.locale.name')?.toLowerCase() ||
+                this.$store?.getters?.['course/localeCode']?.toLowerCase() ||
+                this.$store?.getters?.['course/locale']?.code?.toLowerCase() ||
+                this.$store?.getters?.['course/locale']?.name?.toLowerCase() ||
+                this.$store?.state?.course?.course?.locale?.code?.toLowerCase() ||
+                this.$store?.state?.course?.course?.locale?.name?.toLowerCase()
+            
+            return localeCode || this.courseSourceLocale
+        },
+        isTranslatedCourse() {
+            // Check if this course is a translated course (has translation metadata)
+            return !!(
+                _.get(this.block, 'course.metadata.translation') ||
+                this.$store?.getters?.['course/get']?.metadata?.translation
+            )
+        },
+        courseTargetLocaleId() {
+            // Get the target_locale_id from translation metadata (UUID)
+            // This is used to match VTT files which are linked by locale_id
+            return _.get(this.block, 'course.metadata.translation.target_locale_id') ||
+                this.$store?.getters?.['course/get']?.metadata?.translation?.target_locale_id ||
+                _.get(this.block, 'course.locale_id') ||
+                this.$store?.getters?.['course/get']?.locale_id ||
+                null
+        },
+        allowedCaptionLocales() {
+            // Only show captions for the source language and the current course's language
+            // This prevents showing all translated captions (FR, ES, DE, etc.) when viewing a specific course
+            const locales = new Set()
+            
+            // Helper to add both full locale and base language code
+            const addLocale = (locale) => {
+                if (!locale) return
+                locales.add(locale)
+                locales.add(locale.toLowerCase())
+                // Also add base language code (e.g., "en" from "en-US", "fr" from "fr-FR")
+                const base = locale.split('-')[0]?.toLowerCase()
+                if (base) {
+                    locales.add(base)
+                }
+            }
+            
+            // Always include the source language (original English captions)
+            addLocale(this.courseSourceLocale)
+            
+            // Include the current course's language
+            addLocale(this.courseCurrentLocale)
+            
+            // Also include tracks with no locale (legacy/default tracks)
+            locales.add(null)
+            locales.add(undefined)
+            locales.add('')
+            
+            return locales
+        },
         hasSource() {
             // __isDirty is used to communicate from the settings panel that a source / caption
             // has changed and to reload the video player
@@ -175,12 +293,38 @@ export default {
                     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'))
+                    
+                    // Try to get translated notes from VTT file (for translated courses)
+                    let notes = null
+                    if (this.isTranslatedCourse) {
+                        const linkedCaptions = this.getAllLinkedCaptions(file)
+                        // Find VTT matching by locale_id (UUID) or locale.code (language code)
+                        const currentVtt = _.find(linkedCaptions, vtt => {
+                            // First try matching by locale_id (most reliable)
+                            if (this.courseTargetLocaleId && vtt.locale_id === this.courseTargetLocaleId) {
+                                return true
+                            }
+                            // Also try matching by locale.code
+                            const vttLocale = _.get(vtt, 'locale.code', '').toLowerCase()
+                            return vttLocale && this.isAllowedCaptionLanguage(vttLocale) && 
+                                   vttLocale === this.courseCurrentLocale
+                        })
+                        // Notes can be in different locations:
+                        // - vtt.metadata.notes (FileAssetMap metadata)
+                        // - vtt.notes (FileAssetMapResource exposes this)
+                        // - vtt.asset.metadata.notes (FileAsset metadata - where translation stores them)
+                        notes = _.get(currentVtt, 'metadata.notes') || 
+                                _.get(currentVtt, 'notes') || 
+                                _.get(currentVtt, 'asset.metadata.notes')
+                    }
+                    
+                    // Fallback to video asset notes
+                    if (!notes || !this.hasWords(notes)) {
+                        notes = _.get(file, 'asset.metadata.notes')
+                    }
+                    
+                    if (notes && this.hasWords(notes)) {
+                        result.push(notes)
                     }
                 }
             }
@@ -192,36 +336,124 @@ export default {
         linkedPlaylist() {
             const playlist = _.cloneDeep(this.block.metadata.config.playlist)
             for (const index in playlist) {
+                // Build comprehensive track list from multiple sources
+                const allTracks = []
+                const addedSrcs = new Set() // Track added URLs to avoid duplicates
+                const addedLangs = new Set() // Track added languages to avoid duplicate srclang keys
+
+                // 1. FIRST: Resolve video files and get linked captions BEFORE transforming sources
+                const resolvedVideoFiles = []
                 for (const sourceIndex in playlist[index].sources) {
-                    let file = this.resolveAsset(
+                    let videoFile = this.resolveAsset(
                         playlist[index].sources[sourceIndex]
                     )
+                    resolvedVideoFiles.push(videoFile)
 
-                    playlist[index].sources[sourceIndex] = {
-                        src: _.get(file, 'asset.public_url', ''),
-                        type: _.get(file, 'asset.metadata.mime', ''),
-                    }
+                    // Get ALL linked captions from this video file (adds to block.assets)
+                    const linkedCaptions = this.getAllLinkedCaptions(videoFile)
 
-                    // 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 vtt of linkedCaptions) {
+                        // Get the src - may be directly available or need to extract from asset
+                        const src = _.get(vtt, 'asset.public_url', '')
+                        
+                        // Skip if no src or already added
+                        if (!src || addedSrcs.has(src)) {
+                            continue
+                        }
+                        
+                        const srclang = _.get(vtt, 'locale.code') || this.courseSourceLocale
+                        
+                        // Skip if this language was already added (avoid duplicate keys)
+                        if (addedLangs.has(srclang)) {
+                            continue
+                        }
+                        
+                        // FILTER: Only include tracks that match the course's language(s)
+                        // - Original courses: show only the course's own language
+                        // - Translated courses: show source language + target language
+                        if (!this.isAllowedCaptionLanguage(srclang)) {
+                            continue
+                        }
+                        
+                        const label = this.getLabelForLanguage(srclang) || _.get(vtt, 'locale.name') || srclang
+
+                        allTracks.push({
+                            src: src,
+                            kind: 'captions',
+                            srclang: srclang,
+                            label: label,
+                            default: false,
+                        })
+                        addedSrcs.add(src)
+                        addedLangs.add(srclang)
                     }
                 }
 
+                // 2. Process manually-added tracks from playlist[x].tracks[]
                 for (const trackIndex in playlist[index].tracks) {
                     let file = this.resolveAsset(
                         playlist[index].tracks[trackIndex]
                     )
 
-                    playlist[index].tracks[trackIndex] = {
-                        src: _.get(file, 'asset.public_url', ''),
+                    const trackObj = playlist[index].tracks[trackIndex]
+                    const src = _.get(file, 'asset.public_url', '')
+                    
+                    // Skip if no src or already added
+                    if (!src || addedSrcs.has(src)) {
+                        continue
+                    }
+                    
+                    const srclang = trackObj.srclang || this.courseSourceLocale
+                    
+                    // Skip if this language was already added (avoid duplicate keys)
+                    if (addedLangs.has(srclang)) {
+                        continue
+                    }
+                    
+                    // FILTER: Only include tracks that match source or target language
+                    // For translated courses, only show source language and target language tracks
+                    // For non-translated courses, this filter is skipped and all tracks are shown
+                    if (this.isTranslatedCourse && !this.isAllowedCaptionLanguage(srclang)) {
+                        continue
+                    }
+                    
+                    const label = trackObj.label || this.getLabelForLanguage(srclang)
+
+                    allTracks.push({
+                        src: src,
                         kind: 'captions',
-                        srclang: 'en-US',
-                        default: true,
+                        srclang: srclang,
+                        label: label,
+                        default: false,
+                    })
+                    addedSrcs.add(src)
+                    addedLangs.add(srclang)
+                }
+
+                // 3. NOW transform video sources to player format
+                for (const sourceIndex in playlist[index].sources) {
+                    const file = resolvedVideoFiles[sourceIndex]
+                    playlist[index].sources[sourceIndex] = {
+                        src: _.get(file, 'asset.public_url', ''),
+                        type: _.get(file, 'asset.metadata.mime', ''),
                     }
                 }
+
+                // 4. Sort tracks: current course locale first (target language on translated
+                //    courses, source language on non-translated courses).
+                allTracks.sort((a, b) => {
+                    if (this.srclangMatchesLocale(a.srclang, this.courseCurrentLocale)) return -1
+                    if (this.srclangMatchesLocale(b.srclang, this.courseCurrentLocale)) return 1
+                    return 0
+                })
+
+                // 5. Set default on first track (target language for translated courses)
+                if (allTracks.length > 0) {
+                    allTracks[0].default = true
+                }
+
+                // 6. Replace tracks array with processed tracks
+                playlist[index].tracks = allTracks
                 for (const adIndex in playlist[index].ads) {
                     for (const adSourceIndex in playlist[index].ads[adIndex]
                         .sources) {
@@ -354,6 +586,9 @@ export default {
             },
         },
     },
+    mounted() {
+        // Video block mounted - locale filtering applied via isTranslatedCourse check
+    },
     beforeMount() {
         // Apply the default config
         if (_.isEmpty(this.block.metadata.config)) {
@@ -400,6 +635,48 @@ export default {
         async onBeforeSave() {
             this.block.body = 'video'
         },
+        /**
+         * Get ALL linked VTT caption files (supports multiple languages)
+         * @param {Object} file - The video file object with linked_assets
+         * @returns {Array} Array of VTT files with locale information
+         */
+        getAllLinkedCaptions(file) {
+            // Get ALL VTT files from linked_assets (not just first one)
+            const linkedCaptions = _.filter(
+                _.get(file, 'asset.linked_assets', []),
+                (f) => _.get(f, 'asset.metadata.extension', '') === 'vtt'
+            )
+
+            // Add locale information to each VTT AND add to block.assets
+            return linkedCaptions.map(vtt => {
+                // CRITICAL: Add to block.assets so resolveAsset can find it
+                const foundAsset = this.block.assets.find((a) => {
+                    return a.file_asset_id === vtt.file_asset_id
+                })
+                if (!foundAsset) {
+                    this.block.assets.push(_.cloneDeep(vtt))
+                }
+
+                // Try to get locale - priority: API response > store lookup > null
+                let locale = vtt.locale || null
+                
+                // If no locale from API but we have locale_id, try store lookup
+                if (!locale && vtt.locale_id && this.$store?.getters?.['locales/getById']) {
+                    locale = this.$store.getters['locales/getById'](vtt.locale_id)
+                }
+                
+                return {
+                    ...vtt,
+                    locale: locale
+                }
+            })
+        },
+
+        /**
+         * Get single linked caption (backward compatibility)
+         * @param {Object} file - The video file object
+         * @returns {Object|null} First VTT file found
+         */
         getLinkedCaptions(file) {
             // Check to see if the video source has a linked asset and it's a vtt file
             // Prefer the most recently linked VTT (last match), not the oldest.
@@ -431,6 +708,84 @@ export default {
             return linkedCaption || null
         },
 
+        /**
+         * TODO:find a better place for this to live
+         * Get human-readable language label for a language code
+         * @param {string} langCode - ISO language code (e.g., 'en-US')
+         * @returns {string} Language name
+         */
+        getLabelForLanguage(langCode) {
+            // Map common language codes to display names
+            const labels = {
+                'en': 'English',
+                'en-US': 'English',
+                'en-GB': 'English (UK)',
+                'es': 'Spanish',
+                'es-ES': 'Spanish',
+                'es-MX': 'Spanish (Mexico)',
+                'fr': 'French',
+                'fr-FR': 'French',
+                'fr-CA': 'French (Canada)',
+                'de': 'German',
+                'de-DE': 'German',
+                'it': 'Italian',
+                'it-IT': 'Italian',
+                'pt': 'Portuguese',
+                'pt-BR': 'Portuguese (Brazil)',
+                'pt-PT': 'Portuguese (Portugal)',
+                'zh': 'Chinese',
+                'zh-CN': 'Chinese (Simplified)',
+                'zh-TW': 'Chinese (Traditional)',
+                'ja': 'Japanese',
+                'ja-JP': 'Japanese',
+                'ko': 'Korean',
+                'ko-KR': 'Korean',
+                'ru': 'Russian',
+                'ru-RU': 'Russian',
+                'ar': 'Arabic',
+                'ar-SA': 'Arabic',
+                'hi': 'Hindi',
+                'hi-IN': 'Hindi',
+            }
+            return labels[langCode] || langCode
+        },
+
+        /**
+         * Check if a caption language is allowed based on course source/target languages
+         * Since allowedCaptionLocales already contains both full codes (en-us) and base codes (en),
+         * we just need to check if the language or its base is in the Set.
+         * @param {string} lang - The language code to check (e.g., 'en-US', 'PT-BR')
+         * @returns {boolean} - True if the language is allowed
+         */
+        isAllowedCaptionLanguage(lang) {
+            if (!lang) {
+                // Allow tracks with no language set (legacy/default tracks)
+                return true
+            }
+            
+            const langLower = lang.toLowerCase()
+            const langBase = langLower.split('-')[0]
+            
+            // Check if the full language code or its base is in allowedCaptionLocales
+            return this.allowedCaptionLocales.has(langLower) ||
+                   this.allowedCaptionLocales.has(langBase)
+        },
+
+        /**
+         * Check whether a srclang code refers to the same language as a locale code.
+         * Handles case differences ("PT-BR" vs "pt-br") and DeepL short codes
+         * ("ES" matching "es-ES").
+         * @param {string} srclang - Track srclang (e.g. "PT-BR", "ES")
+         * @param {string} locale - Locale code to match against (e.g. "pt-br", "es-es")
+         * @returns {boolean}
+         */
+        srclangMatchesLocale(srclang, locale) {
+            if (!srclang || !locale) return false
+            const a = srclang.toLowerCase()
+            const b = locale.toLowerCase()
+            return a === b || a.split('-')[0] === b.split('-')[0]
+        },
+
         /**
          * Check if the given text has words, omitting HTML tags and HTML entities
          * @param {string} text - The text to check

package/components/Settings/ClickableIconsSettings.vue

@@ -300,18 +300,23 @@ export default {
                 'windward.core.components.settings.clickable_icon.clickable_icon_title'
             )
         }
-        if (_.isEmpty(this.block.metadata.config.instructions)) {
+        if (
+            _.isEmpty(this.block.metadata.config.instructions) &&
+            !this.block.metadata.config.__isInitialized
+        ) {
             this.block.metadata.config.instructions = this.$t(
                 'windward.core.components.settings.clickable_icon.instructions'
             )
+            // save state of initialization so we can allow user to set inputs to empty
+            this.$set(this.block.metadata.config, '__isInitialized', true)
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
         }
         if (_.isEmpty(this.block.metadata.config.display)) {
             this.block.metadata.config.display = {
-                show_title: false,
-                show_background: false,
+                show_title: true,
+                show_background: true,
                 round_icon: false,
                 italic_icon: false,
                 large_icon: false,
@@ -326,7 +331,7 @@ export default {
     methods: {
         onAddElement() {
             const defaultObject = {
-                icon: '',
+                icon: 'mdi-star',
                 fileConfig: {},
                 iconImage: false,
                 title: '',

package/components/Settings/ImageSettings.vue

@@ -1,5 +1,10 @@
 <template>
     <v-container>
+        <BaseContentBlockSettings
+            v-model="block.metadata.config"
+            :disabled="render"
+        ></BaseContentBlockSettings>
+        <v-divider class="my-4 primary"></v-divider>
         <ImageAssetSettings
             v-model="block.metadata.config"
             :assets.sync="block.assets"
@@ -13,11 +18,14 @@
 import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'ImageSettings',
     components: {
         ImageAssetSettings,
+        BaseContentBlockSettings,
     },
     extends: BaseContentSettings,
     props: {
@@ -40,6 +48,24 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        // If the block is brand new and the title is missing then pre-set the word 'Image' to it
+        if (
+            !Uuid.test(this.block.id) &&
+            _.isEmpty(this.block.metadata.config.title)
+        ) {
+            this.block.metadata.config.title = this.$t(
+                'windward.core.shared.content_blocks.title.image'
+            )
+        } else if (_.isEmpty(this.block.metadata.config.title)) {
+            // Otherwise make sure the title key at least exists
+            this.block.metadata.config.title = ''
+        }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
         if (_.isEmpty(this.block.metadata.config.asset)) {
             this.block.metadata.config.asset = null
         }

package/components/Settings/OpenResponseSettings.vue

@@ -24,10 +24,25 @@
         </p>
         <TextEditor
             id="block-settings-sample-response"
+            ref="sampleResponseEditor"
             v-model="block.metadata.config.sample_response"
             :height="200"
+            :rules="sampleResponseRules"
             :disabled="render"
         ></TextEditor>
+        <v-row class="pt-4">
+            <v-col cols="12">
+                <v-switch
+                    v-model="block.metadata.config.ai_mode_for_student"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.open_response.ai_mode_for_student'
+                        )
+                    "
+                    :disabled="render"
+                ></v-switch>
+            </v-col>
+        </v-row>
         <p class="pt-4">
             {{
                 $t(
@@ -84,6 +99,34 @@ export default {
             course: 'course/get',
             currentContent: 'content/get',
         }),
+        sampleResponseRules() {
+            return [
+                (value) => {
+                    if (!this.block?.metadata?.config?.ai_mode_for_student) {
+                        return true
+                    }
+
+                    const text = this.stripHtmlTags(value)
+                    return (
+                        !_.isEmpty(text) ||
+                        this.$t(
+                            'windward.core.components.settings.open_response.validation.sample_response_required_ai_mode'
+                        )
+                    )
+                },
+            ]
+        },
+    },
+    watch: {
+        'block.metadata.config.ai_mode_for_student'(newValue, oldValue) {
+            if (newValue === oldValue) {
+                return
+            }
+
+            this.$nextTick(() => {
+                this.$refs.sampleResponseEditor?.validate?.()
+            })
+        },
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -117,9 +160,21 @@ export default {
         if (_.isEmpty(this.block.metadata.config.starting_text)) {
             this.block.metadata.config.starting_text = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.ai_mode_for_student)) {
+            this.$set(this.block.metadata.config, 'ai_mode_for_student', false)
+        }
     },
     mounted() {},
     methods: {
+        stripHtmlTags(body) {
+            if (typeof body !== 'string') {
+                return ''
+            }
+
+            let text = body.replace(/&nbsp;/gi, ' ')
+            text = text.replace(/\u00A0/g, ' ')
+            return text.replace(/(<([^>]+)>)/gi, '').trim()
+        },
         onApplyGeneratedBlock(payload = {}) {
             if (_.isEmpty(payload)) {
                 return
@@ -136,6 +191,10 @@ export default {
                 _.get(config, 'sample_response', '') ?? ''
             this.block.metadata.config.starting_text =
                 _.get(config, 'starting_text', '') ?? ''
+            if (_.has(config, 'ai_mode_for_student')) {
+                this.block.metadata.config.ai_mode_for_student =
+                    config.ai_mode_for_student
+            }
 
             if (_.has(config, 'display_title')) {
                 this.block.metadata.config.display_title = config.display_title