@windward/core 0.26.0 → 0.28.0

package/components/Content/Blocks/UserUpload.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-container class="pa-0">
+    <v-container :class="['pa-0', blockDirectionClasses]" :dir="blockTextDirection">
         <div>
             <h2
                 v-if="
@@ -17,7 +17,7 @@
                     </p>
                 </v-col>
                 <v-col v-if="!blockExists" cols="12">
-                    <v-alert color="warning">
+                    <v-alert type="warning">
                         <p>
                             {{
                                 $t(
@@ -28,44 +28,47 @@
                     </v-alert>
                 </v-col>
             </v-row>
-            <v-row>
+            <v-row v-if="render">
                 <v-col cols="12">
-                    <DisplayUserFilesTable
-                        v-model="userFileAsset"
-                        :enrollment="enrollment"
-                    ></DisplayUserFilesTable>
-                </v-col>
-                <v-col v-if="showUpload" cols="12">
-                    <div v-if="blockExists">
-                        <v-form
-                            ref="form"
-                            v-model="valid"
-                            lazy-validation
-                            class="pb-0"
-                        >
-                            <FileDropZone
-                                v-model="uploadFiles"
-                                :accept="
-                                    block.metadata.config.uploadSettings.accept
-                                "
-                                :multiple="
-                                    block.metadata.config.uploadSettings
-                                        .multiple
-                                "
-                            ></FileDropZone>
-
-                            <v-container class="text-center">
-                                <v-btn
-                                    :disabled="!canUpload || loading"
-                                    color="primary"
-                                    elevation="0"
-                                    class="text-center"
-                                    @click="handleUpload"
+                    <div class="upload-container" :class="uploadContainerClass">
+                        <DisplayUserFilesTable
+                            v-model="userFileAsset"
+                            :enrollment="enrollment"
+                        ></DisplayUserFilesTable>
+                        <div v-if="showUpload">
+                            <div v-if="blockExists">
+                                <v-form
+                                    ref="form"
+                                    v-model="valid"
+                                    lazy-validation
+                                    class="pb-0"
                                 >
-                                    {{ $t('shared.forms.upload') }}
-                                </v-btn>
-                            </v-container>
-                        </v-form>
+                                    <FileDropZone
+                                        v-model="uploadFiles"
+                                        :accept="
+                                            block.metadata.config.uploadSettings
+                                                .accept
+                                        "
+                                        :multiple="
+                                            block.metadata.config.uploadSettings
+                                                .multiple
+                                        "
+                                    ></FileDropZone>
+
+                                    <v-container class="text-center">
+                                        <v-btn
+                                            :disabled="!canUpload || loading"
+                                            color="primary"
+                                            elevation="0"
+                                            class="text-center"
+                                            @click="handleUpload"
+                                        >
+                                            {{ $t('shared.forms.upload') }}
+                                        </v-btn>
+                                    </v-container>
+                                </v-form>
+                            </div>
+                        </div>
                     </div>
                 </v-col>
             </v-row>
@@ -109,6 +112,11 @@ export default {
         ...mapGetters({
             enrollment: 'enrollment/get',
         }),
+        uploadContainerClass() {
+            return this.$vuetify.theme.dark
+                ? 'upload-container--dark'
+                : 'upload-container--light'
+        },
         blockExists() {
             return Uuid.test(this.block.id)
         },
@@ -255,3 +263,23 @@ export default {
     },
 }
 </script>
+
+<style scoped>
+.upload-container {
+    padding: 16px;
+    border-radius: 4px;
+    border: 1px solid;
+}
+
+.upload-container--light {
+    background-color: #ffffff;
+    border-color: #e0e0e0;
+    color: #000000;
+}
+
+.upload-container--dark {
+    background-color: #424242;
+    border-color: #616161;
+    color: #ffffff;
+}
+</style>

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 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'"
@@ -74,6 +74,9 @@
                 </template>
             </VuetifyPlayer>
         </div>
+        <v-alert v-else type="warning">
+            {{ $t('windward.core.components.settings.video.no_video_alert') }}
+        </v-alert>
         <!--    display first note in the playlist for now    -->
         <v-alert
             v-if="notes.length > 0"
@@ -143,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
@@ -172,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)
                     }
                 }
             }
@@ -189,36 +336,123 @@ 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: course source language first
+                allTracks.sort((a, b) => {
+                    if (a.srclang === this.courseSourceLocale) return -1
+                    if (b.srclang === this.courseSourceLocale) return 1
+                    return 0
+                })
+
+                // 5. Set default on first track (should be source language)
+                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) {
@@ -351,6 +585,9 @@ export default {
             },
         },
     },
+    mounted() {
+        // Video block mounted - locale filtering applied via isTranslatedCourse check
+    },
     beforeMount() {
         // Apply the default config
         if (_.isEmpty(this.block.metadata.config)) {
@@ -397,15 +634,64 @@ export default {
         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 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', []),
-                function (f) {
-                    return _.get(f, 'asset.metadata.extension', '') === 'vtt'
-                }
+                (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.
+            const linkedAssets = _.get(file, 'asset.linked_assets', [])
+            const linkedCaption = _.findLast(linkedAssets, function (f) {
+                const ext = _.get(f, 'asset.metadata.extension', '').toLowerCase()
+                const mime = _.get(f, 'asset.metadata.mime', '').toLowerCase()
+                const name = _.get(f, 'asset.name', '').toLowerCase()
+
+                return (
+                    ext === 'vtt' ||
+                    mime === 'text/vtt' ||
+                    name.endsWith('.vtt')
+                )
+            })
+
             if (linkedCaption) {
                 const foundAsset = this.block.assets.find((a) => {
                     return a.file_asset_id === linkedCaption.file_asset_id
@@ -421,6 +707,69 @@ 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 if the given text has words, omitting HTML tags and HTML entities
          * @param {string} text - The text to check

package/components/Settings/AccordionSettings.vue

@@ -165,7 +165,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.settings.accordion.accordion'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -183,21 +185,7 @@ export default {
             this.block.metadata.config.editOnContentItem = false
         }
         if (_.isEmpty(this.block.metadata.config.items)) {
-            const defaultObject = {
-                header: '',
-                expand: false,
-                content: '',
-                fileConfig: {
-                    display: {
-                        width: 100,
-                        margin: '',
-                        padding: '',
-                    },
-                    hideBackground: true,
-                },
-            }
             this.block.metadata.config.items = []
-            this.block.metadata.config.items.push(defaultObject)
         }
         this.block.body = this.$t(
             'windward.core.shared.content_blocks.title.accordion'