@windward/core 0.5.2 → 0.7.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## Release [0.7.0] - 2024-08-29
+
+* Version bump to 0.7.0
+
+
+### Release [0.7.0] created - 2024-08-29
+
+
+### Release [0.6.0] created - 2024-07-30

package/components/Content/Blocks/Accordion.vue

@@ -1,5 +1,16 @@
 <template>
     <div>
+        <v-container
+            class="pa-0"
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+        >
+            <h2>{{ block.metadata.config.title }}</h2>
+
+            <p>{{ block.metadata.config.instructions }}</p>
+        </v-container>
         <v-expansion-panels
             :value="selectedPanels"
             flat
@@ -14,6 +25,8 @@
                 <v-expansion-panel-header
                     class="expansion-panel-header"
                     color="primary"
+                    :ref="'expansion-panel-' + itemIndex"
+                    @click="onOpenAccordion(itemIndex)"
                 >
                     {{
                         item.header === '' || item.header === null
@@ -89,6 +102,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
         if (_.isEmpty(this.block.metadata.config.items)) {
             const defaultObject = {
                 header: '',
@@ -157,6 +173,18 @@ export default {
         }
     },
     methods: {
+        onOpenAccordion(value) {
+            const indexString = value.toString()
+            const referenceString = 'expansion-panel-' + indexString
+            if (
+                this.$refs[referenceString] &&
+                this.$refs[referenceString][0].$el
+            ) {
+                setTimeout(() => {
+                    this.$vuetify.goTo(this.$refs[referenceString][0].$el)
+                }, 300)
+            }
+        },
         getImagePublicUrl(asset) {
             const foundAsset = this.resolveAsset(asset)
 

package/components/Content/Blocks/ClickableIcons.vue

@@ -3,7 +3,7 @@
         <v-container class="pa-0">
             <h2>{{ block.metadata.config.title }}</h2>
 
-            <h4>{{ block.metadata.config.description }}</h4>
+            <p>{{ block.metadata.config.description }}</p>
 
             <p>
                 {{
@@ -23,6 +23,7 @@
             >
                 <v-col cols="12" v-bind="iconColumnAttrs">
                     <button
+                        class="mr-1"
                         :class="activatorButtonClass(itemIndex)"
                         @click="item.active = !item.active"
                     >
@@ -49,23 +50,24 @@
                     </button>
                 </v-col>
                 <v-col cols="12" v-bind="bodyColumnAttrs">
-                    <h4
-                        v-if="
-                            block.metadata.config.display.show_title ||
-                            item.active
-                        "
-                        class="mt-4"
-                        role="button"
-                        @click="item.active = !item.active"
-                    >
-                        {{ item.title }}
-                    </h4>
-                    <v-expand-transition>
-                        <div v-if="item.active">
-                            <v-divider light class="my-4" />
-                            <TextViewer v-model="item.body"></TextViewer>
-                        </div>
-                    </v-expand-transition>
+                    <v-container :class="bodyClass">
+                        <h4
+                            v-if="
+                                block.metadata.config.display.show_title ||
+                                item.active
+                            "
+                            role="button"
+                            @click="item.active = !item.active"
+                        >
+                            {{ item.title }}
+                        </h4>
+                        <v-expand-transition>
+                            <div v-if="item.active">
+                                <v-divider light class="my-4" />
+                                <TextViewer v-model="item.body"></TextViewer>
+                            </div>
+                        </v-expand-transition>
+                    </v-container>
                 </v-col>
             </v-row>
         </v-container>
@@ -74,7 +76,6 @@
 <script>
 import _ from 'lodash'
 import he from 'he'
-import Uuid from '~/helpers/Uuid'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer'
 
@@ -114,7 +115,9 @@ export default {
         }
     },
     data() {
-        return {}
+        return {
+            saveState: false,
+        }
     },
     computed: {
         decode() {
@@ -152,7 +155,7 @@ export default {
             } else {
                 return {
                     xl: '2',
-                    lg: '2',
+                    lg: '3',
                     md: '3',
                     sm: '3',
                 }
@@ -237,6 +240,13 @@ export default {
                 }
             }
         },
+        bodyClass() {
+            if (window.innerWidth <= 665) {
+                return ''
+            } else {
+                return 'ml-4'
+            }
+        },
     },
     methods: {
         isIcon(str) {

package/components/Content/Blocks/Email.vue

@@ -25,7 +25,7 @@
                     class="pa-0 primary container-subject d-flex justify-center align-center"
                 >
                     <v-row class="d-flex ma-5">
-                        <v-col cols="6">
+                        <v-col cols="12">
                             {{
                                 $t(
                                     'windward.core.components.content.blocks.email.email'
@@ -33,6 +33,7 @@
                             }}
                         </v-col>
                         <v-col
+                            v-if="false"
                             cols="6"
                             class="d-flex justify-end column-simulation"
                         >
@@ -170,7 +171,11 @@
                         >
                             <v-row class="pt-4">
                                 <v-col cols="10" class="pa-0">
-                                    <v-btn elevation="0" color="primary" text>
+                                    <v-btn
+                                        elevation="0"
+                                        color="primary"
+                                        text
+                                    >
                                         <v-icon>mdi-reply</v-icon>
                                         {{
                                             $t(
@@ -197,6 +202,7 @@
                                 </v-col>
                                 <v-col cols="2" class="pa-0 d-flex justify-end">
                                     <v-btn
+                                        v-show="false"
                                         elevation="0"
                                         color="primary"
                                         outlined
@@ -350,4 +356,7 @@ export default {
 .v-expansion-panels {
     z-index: 0 !important;
 }
+.v-btn:before {
+    background-color: transparent !important;
+}
 </style>

package/components/Content/Blocks/FileDownload.vue

@@ -8,17 +8,15 @@
                 )
             }}
         </h2>
-        <p v-if="!block.metadata.config.instructions">
+        <p>
             {{
-                $t(
-                    'windward.core.components.content.blocks.file_download.default_instructions'
-                )
+                block.metadata.config.instructions
+                    ? block.metadata.config.instructions
+                    : $t(
+                          'windward.core.components.content.blocks.file_download.default_instructions'
+                      )
             }}
         </p>
-        <TextViewer
-            v-if="block.metadata.config.instructions"
-            :value="block.metadata.config.instructions"
-        />
         <v-alert
             v-if="
                 !block.metadata.config.items ||

package/components/Content/Blocks/GenerateAIQuestionButton.vue

@@ -1,13 +1,17 @@
 <template>
     <v-btn
         elevation="0"
-        color="primary"
-        icon
+        color="secondary"
         @click="generateAIQuestion"
         :loading="isLoading"
         :disabled="isLoading"
     >
-        <v-icon v-if="!isLoading">mdi-magic-staff</v-icon>
+        <v-icon class="pr-1" v-if="!isLoading">mdi-magic-staff</v-icon>
+        {{
+            this.$t(
+                'windward.core.components.content.blocks.generate_questions.button_label'
+            )
+        }}
         <template v-slot:loader>
             <v-progress-circular indeterminate size="23"></v-progress-circular>
         </template>
@@ -42,7 +46,7 @@ export default {
                     new Content(this.content),
                     new Assessment({ id: this.block.id }),
                     new AssessmentQuestion(),
-					`suggest/${this.questionType}`
+                    `suggest/${this.questionType}`
                 ).get()
 
                 if (response && response.length > 0) {
@@ -51,11 +55,15 @@ export default {
                 }
             } catch (error) {
                 console.error(error)
-                this.$dialog.error(this.$t('windward.core.components.content.blocks.generate_questions.error'))
+                this.$dialog.error(
+                    this.$t(
+                        'windward.core.components.content.blocks.generate_questions.error'
+                    )
+                )
             } finally {
                 this.isLoading = false
             }
         },
     },
 }
-</script>
+</script>

package/components/Content/Blocks/HorizontalRule.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <hr :class="isDashed" />
+        <hr :class="isDashed" class="mt-2 mb-2" />
     </div>
 </template>
 <script>
@@ -19,9 +19,6 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config)) {
-            this.block.metadata.config = {}
-        }
         if (_.isEmpty(this.block.metadata.config.dashed)) {
             this.block.metadata.config.dashed = false
         }

package/components/Content/Blocks/ScenarioChoice.vue

@@ -2,19 +2,17 @@
     <div>
         <v-container class="pa-0">
             <h2>{{ block.metadata.config.title }}</h2>
-            <h4>{{ block.metadata.config.description }}</h4>
-            <p>
-                {{
-                    $t(
-                        'windward.core.components.content.blocks.scenario_choice.information'
-                    )
-                }}
-            </p>
+            <p>{{ block.metadata.config.description }}</p>
             <div
                 v-if="choiceIndex !== null && block.metadata.config.show_reset"
                 class="text-right"
             >
-                <v-btn elevation="0" color="primary" outlined @click="onClickReset">
+                <v-btn
+                    elevation="0"
+                    color="primary"
+                    outlined
+                    @click="onClickReset"
+                >
                     {{
                         $t(
                             'windward.core.components.content.blocks.scenario_choice.try_again'
@@ -30,7 +28,7 @@
                 no-gutters
                 :class="rowClass(item, itemIndex)"
             >
-                <v-col cols="2" class="text-center">
+                <v-col cols="12" v-bind="iconColumnAttrs" class="text-center">
                     <div
                         class="pt-8 pb-8 text-icon-container mb-4 mx-auto"
                         role="button"
@@ -48,30 +46,34 @@
                         }}
                     </strong>
                 </v-col>
-                <v-col cols="10">
-                    <h4
-                        role="button"
-                        class="mt-4"
-                        @click="onClickItem(itemIndex)"
-                    >
-                        {{ item.title }}
-                    </h4>
+                <v-col cols="12" v-bind="bodyColumnAttrs">
+                    <v-container :class="bodyClass">
+                        <h4
+                            role="button"
+                            class="mt-4"
+                            @click="onClickItem(itemIndex)"
+                        >
+                            {{ item.title }}
+                        </h4>
 
-                    <v-expand-transition>
-                        <div v-if="choiceIndex !== null">
-                            <v-divider light class="my-4" />
-                            <TextViewer v-model="item.body"></TextViewer>
-                            <a
-                                v-if="linkedPage !== null"
-                                class="white--text text-decoration-underline"
-                                @click="
-                                    onClickLink(linkedPage.course_content_id)
-                                "
-                            >
-                                {{ linkedPage.text }}
-                            </a>
-                        </div>
-                    </v-expand-transition>
+                        <v-expand-transition>
+                            <div v-if="choiceIndex !== null">
+                                <v-divider light class="my-4" />
+                                <TextViewer v-model="item.body"></TextViewer>
+                                <a
+                                    v-if="linkedPage !== null"
+                                    class="white--text text-decoration-underline"
+                                    @click="
+                                        onClickLink(
+                                            linkedPage.course_content_id
+                                        )
+                                    "
+                                >
+                                    {{ linkedPage.text }}
+                                </a>
+                            </div>
+                        </v-expand-transition>
+                    </v-container>
                 </v-col>
             </v-row>
         </v-container>
@@ -199,6 +201,29 @@ export default {
                 return null
             }
         },
+        iconColumnAttrs() {
+            return {
+                xl: '2',
+                lg: '3',
+                md: '3',
+                sm: '3',
+            }
+        },
+        bodyColumnAttrs() {
+            return {
+                xl: '10',
+                lg: '9',
+                md: '9',
+                sm: '9',
+            }
+        },
+        bodyClass() {
+            if (window.innerWidth <= 665) {
+                return ''
+            } else {
+                return 'ml-4'
+            }
+        },
     },
     beforeMount() {
         // Apply the default config

package/components/Content/Blocks/Tab.vue

@@ -1,5 +1,10 @@
 <template>
     <div>
+        <v-container class="pa-0">
+            <h2>{{ block.metadata.config.title }}</h2>
+
+            <p>{{ block.metadata.config.instructions }}</p>
+        </v-container>
         <v-container class="pa-0">
             <v-tabs dark v-model="block.metadata.config.currentTab" show-arrows>
                 <v-tabs-slider></v-tabs-slider>

package/components/Content/Blocks/UserUpload.vue

@@ -6,14 +6,7 @@
             </h2>
             <v-row>
                 <v-col cols="12">
-                    <TextViewer
-                        v-if="render || !block.__expandInstructions"
-                        v-model="block.metadata.config.instructions"
-                    ></TextViewer>
-                    <TextEditor
-                        v-if="!render && block.__expandInstructions"
-                        v-model="block.metadata.config.instructions"
-                    />
+                  <p>{{ block.metadata.config.instructions }}</p>
                 </v-col>
                 <v-col v-if="!blockExists" cols="12">
                     <v-alert color="warning">

package/components/Content/Blocks/Video.vue

@@ -5,14 +5,12 @@
                 <v-icon class="mr-2">mdi-cloud-question</v-icon>
                 {{
                     $t(
-                        'windward.core.components.content.blocks.video.video.not_configured_title'
+                        'windward.core.components.content.blocks.video.not_configured_title'
                     )
                 }}
             </v-card-title>
             <v-card-text>{{
-                $t(
-                    'windward.core.components.content.blocks.video.video.edit_prompt'
-                )
+                $t('windward.core.components.content.blocks.video.edit_prompt')
             }}</v-card-text>
         </v-card>
 
@@ -60,6 +58,17 @@
             "
             :playbackrates="block.metadata.config.attributes.playbackrates"
         />
+        <!--    display first note in the playlist for now    -->
+        <v-alert
+            v-if="notes.length > 0"
+            :color="
+                $vuetify.theme.isDark
+                    ? 'v-navigation-drawer'
+                    : 'blue-grey lighten-5'
+            "
+        >
+            <TextViewer v-model="notes[0]"></TextViewer>
+        </v-alert>
     </div>
 </template>
 
@@ -67,10 +76,13 @@
 import _ from 'lodash'
 import VuetifyPlayer from '@mindedge/vuetify-player'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import TextViewer from '~/components/Text/TextViewer'
+import he from 'he'
 
 export default {
     name: 'ContentBlockVideo',
     components: {
+        TextViewer,
         VuetifyPlayer,
     },
     extends: BaseContentBlock,
@@ -96,12 +108,30 @@ export default {
             )
             return _.get(file, 'asset.public_url')
         },
+        notes() {
+            const playlist = this.block.metadata.config.playlist
+            let result = []
+            for (const index in playlist) {
+                for (const sourceIndex in playlist[index].sources) {
+                    let file = this.resolveAsset(
+                        playlist[index].sources[sourceIndex]
+                    )
+                    if (
+                        !_.isEmpty(_.get(file, 'asset.metadata.notes')) &&
+                        //check the file notes are actually text and not an empty div
+                        this.hasWords(_.get(file, 'asset.metadata.notes'))
+                    ) {
+                        result.push(_.get(file, 'asset.metadata.notes'))
+                    }
+                }
+            }
+            return result
+        },
         /**
          * Resolve assets to their playlist items
          */
         linkedPlaylist() {
             const playlist = _.cloneDeep(this.block.metadata.config.playlist)
-
             for (const index in playlist) {
                 for (const sourceIndex in playlist[index].sources) {
                     let file = this.resolveAsset(
@@ -112,6 +142,13 @@ export default {
                         src: _.get(file, 'asset.public_url', ''),
                         type: _.get(file, 'asset.metadata.mime', ''),
                     }
+
+                    // If there's linked captions and there's no hard-set captions
+                    // Fallback to the linked captions
+                    const linkedCaptions = this.getLinkedCaptions(file)
+                    if (playlist[index].tracks.length === 0 && linkedCaptions) {
+                        playlist[index].tracks.push(linkedCaptions)
+                    }
                 }
 
                 for (const trackIndex in playlist[index].tracks) {
@@ -126,7 +163,6 @@ export default {
                         default: true,
                     }
                 }
-
                 for (const adIndex in playlist[index].ads) {
                     for (const adSourceIndex in playlist[index].ads[adIndex]
                         .sources) {
@@ -138,7 +174,20 @@ export default {
                             src: _.get(file, 'asset.public_url', ''),
                             type: _.get(file, 'asset.metadata.mime', ''),
                         }
+
+                        // If there's linked captions and there's no hard-set captions
+                        // Fallback to the linked captions
+                        const linkedCaptions = this.getLinkedCaptions(file)
+                        if (
+                            playlist[index].ads[adIndex].tracks.length === 0 &&
+                            linkedCaptions
+                        ) {
+                            playlist[index].ads[adIndex].tracks.push(
+                                linkedCaptions
+                            )
+                        }
                     }
+
                     for (const adTrackIndex in playlist[index].ads[adIndex]
                         .tracks) {
                         let file = this.resolveAsset(
@@ -154,7 +203,11 @@ export default {
                     }
                 }
             }
-
+            // reset adds to empty array as we aren't using these right now
+            // left code above in case we want to implement later
+            playlist.forEach((element) => {
+                element.ads = []
+            })
             return playlist
         },
     },
@@ -249,11 +302,46 @@ export default {
             this.$set(this.block, 'assets', [])
         }
     },
-    mounted() {},
     methods: {
         async onBeforeSave() {
             this.block.body = 'video'
         },
+        getLinkedCaptions(file) {
+            // Check to see if the video source has a linked asset and it's a vtt file
+            const linkedCaption = _.find(
+                _.get(file, 'asset.linked_assets', []),
+                function (f) {
+                    return _.get(f, 'asset.metadata.extension', '') === 'vtt'
+                }
+            )
+
+            if (linkedCaption) {
+                const foundAsset = this.block.assets.find((a) => {
+                    return a.file_asset_id === linkedCaption.file_asset_id
+                })
+
+                // The linked captions aren't part of the block.assets
+                // Add it so the block knows how to properly load it
+                if (!foundAsset) {
+                    this.block.assets.push(_.cloneDeep(linkedCaption))
+                }
+            }
+
+            return linkedCaption || null
+        },
+
+        /**
+         * Check if the given text has words, omitting HTML tags and HTML entities
+         * @param {string} text - The text to check
+         * @returns {boolean} - True if the text has words, false otherwise
+         */
+        hasWords(text) {
+            const strippedText = he
+                .decode(text)
+                .replace(/<\/?[^>]+(>|$)/g, '') // Remove HTML tags
+                .trim()
+            return /\b\w+\b/.test(strippedText) // Check if there are any words
+        },
     },
 }
 </script>