@windward/core 0.3.0 → 0.4.1

package/components/Settings/VideoSettings.vue

@@ -45,11 +45,12 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.source"
-                            mimes="video/mp4,audio/mpeg,video/webm"
+                            :assets.sync="block.assets"
+                            mimes="video/mp4,audio/mpeg,video/webm,video/youtube"
                             allow-url
                             class="mb-4"
                             :disabled="render"
-                            @click:file="onSourceSelect"
+                            @change="onSourceSelect"
                         >
                             <template #title>
                                 {{
@@ -66,14 +67,14 @@
                                 }}
                             </template>
                         </ContentBlockAsset>
-
                         <ContentBlockAsset
                             v-model="media.track"
+                            :assets.sync="block.assets"
                             mimes="text/vtt,text/xml"
                             allow-url
                             class="mb-4"
                             :disabled="render"
-                            @click:file="onTrackSelect"
+                            @change="onTrackSelect"
                         >
                             <template #title>
                                 {{
@@ -95,10 +96,11 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.poster"
+                            :assets.sync="block.assets"
                             mimes="image/png,image/jpeg"
                             allow-url
                             :disabled="render"
-                            @click:file="onPosterSelect"
+                            @change="onPosterSelect"
                         >
                             <template #title>
                                 {{
@@ -120,11 +122,12 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.ads.preroll.source"
+                            :assets.sync="block.assets"
                             mimes="video/mp4,video/webm"
                             allow-url
                             class="mb-4"
                             :disabled="render"
-                            @click:file="onAdSourceSelect($event, 0)"
+                            @change="onAdSourceSelect($event, 0)"
                         >
                             <template #title>
                                 {{
@@ -144,10 +147,11 @@
 
                         <ContentBlockAsset
                             v-model="media.ads.preroll.track"
+                            :assets.sync="block.assets"
                             mimes="text/vtt,text/xml"
                             allow-url
                             :disabled="render"
-                            @click:file="onAdTrackSelect($event, 0)"
+                            @change="onAdTrackSelect($event, 0)"
                         >
                             <template #title>
                                 {{
@@ -169,11 +173,12 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.ads.postroll.source"
+                            :assets.sync="block.assets"
                             mimes="video/mp4,video/webm"
                             allow-url
                             class="mb-4"
                             :disabled="render"
-                            @click:file="onAdSourceSelect($event, 100)"
+                            @change="onAdSourceSelect($event, 100)"
                         >
                             <template #title>
                                 {{
@@ -193,10 +198,11 @@
 
                         <ContentBlockAsset
                             v-model="media.ads.postroll.track"
+                            :assets.sync="block.assets"
                             mimes="text/vtt,text/xml"
                             allow-url
                             :disabled="render"
-                            @click:file="onAdTrackSelect($event, 100)"
+                            @change="onAdTrackSelect($event, 100)"
                         >
                             <template #title>
                                 {{
@@ -267,6 +273,7 @@
                                 v-bind="attrs"
                                 v-on="on"
                                 text
+                                elevation="0"
                                 color="error"
                                 :disabled="
                                     render ||
@@ -296,6 +303,7 @@
                             <v-btn
                                 v-bind="attrs"
                                 v-on="on"
+                                elevation="0"
                                 color="primary"
                                 text
                                 :disabled="render"
@@ -330,6 +338,7 @@
                         <v-row>
                             <v-col cols="12">
                                 <v-select
+                                    id="video-playback-rates"
                                     v-model="
                                         block.metadata.config.attributes
                                             .playbackrates
@@ -454,8 +463,9 @@
     </div>
 </template>
 <script>
+import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-
+import Uuid from '~/helpers/Uuid'
 export default {
     name: 'VideoSettings',
     extends: BaseContentSettings,
@@ -495,20 +505,83 @@ export default {
             this.playlistPaginator = 1
         }
     },
-    mounted() {},
+    mounted() {
+        this.reloadMedia()
+    },
     methods: {
         reloadMedia() {
-            this.media.source = null
-            this.media.track = null
-            this.media.poster = null
+            // Prefill the media sources with the related file asset
+            // If the source is empty then it will just return null
+            this.media.source = this.resolveAsset(
+                _.get(
+                    this.block,
+                    'metadata.config.playlist[' +
+                        this.playlistIndex +
+                        '].sources[0]',
+                    null
+                )
+            )
+            this.media.track = this.resolveAsset(
+                _.get(
+                    this.block,
+                    'metadata.config.playlist[' +
+                        this.playlistIndex +
+                        '].tracks[0]',
+                    null
+                )
+            )
+            this.media.poster = this.resolveAsset(
+                _.get(this.block, 'metadata.config.attributes.poster', null)
+            )
+
             this.media.ads = {
                 preroll: {
-                    source: null,
-                    track: null,
+                    source: this.resolveAsset(
+                        _.get(
+                            this.block,
+                            'metadata.config.playlist[' +
+                                this.playlistIndex +
+                                '].ads[' +
+                                this.getAdSlot(0) +
+                                '].sources[0]',
+                            null
+                        )
+                    ),
+                    track: this.resolveAsset(
+                        _.get(
+                            this.block,
+                            'metadata.config.playlist[' +
+                                this.playlistIndex +
+                                '].ads[' +
+                                this.getAdSlot(0) +
+                                '].tracks[0]',
+                            null
+                        )
+                    ),
                 },
                 postroll: {
-                    source: null,
-                    track: null,
+                    source: this.resolveAsset(
+                        _.get(
+                            this.block,
+                            'metadata.config.playlist[' +
+                                this.playlistIndex +
+                                '].ads[' +
+                                this.getAdSlot(100) +
+                                '].sources[0]',
+                            null
+                        )
+                    ),
+                    track: this.resolveAsset(
+                        _.get(
+                            this.block,
+                            'metadata.config.playlist[' +
+                                this.playlistIndex +
+                                '].ads[' +
+                                this.getAdSlot(100) +
+                                '].tracks[0]',
+                            null
+                        )
+                    ),
                 },
             }
         },
@@ -593,19 +666,11 @@ export default {
             return this.block.metadata.config.playlist.length - 1
         },
         onPosterSelect(file) {
-            if (file === null) {
-                delete this.block.metadata.config.attributes
-                    .poster_file_asset_id
-                this.block.metadata.config.attributes.poster = ''
-            } else {
-                this.block.metadata.config.attributes.poster_file_asset_id =
-                    file.file_asset_id
-                this.block.metadata.config.attributes.poster =
-                    file.asset.public_url
-            }
+            this.block.metadata.config.attributes.poster = file
+
+            this.reloadVideo()
         },
         onSourceSelect(file) {
-            this.reloadVideo()
             // No file, clear the selection
             if (_.isEmpty(file)) {
                 delete this.block.metadata.config.playlist[this.playlistIndex]
@@ -626,37 +691,23 @@ export default {
                 // Apply the playlist source video(s)
                 this.block.metadata.config.playlist[
                     this.playlistIndex
-                ].sources = [
-                    {
-                        file_asset_id: file.file_asset_id,
-                        src: file.asset.public_url,
-                        type: file.asset.metadata.mime,
-                    },
-                ]
+                ].sources = [file]
 
                 this.showVideo = true
             }
+            this.reloadVideo()
         },
         onTrackSelect(file) {
-            this.reloadVideo()
             if (_.isEmpty(file)) {
                 this.block.metadata.config.playlist[this.playlistIndex].tracks =
                     []
                 this.showVideo = false
             } else {
                 this.block.metadata.config.playlist[this.playlistIndex].tracks =
-                    [
-                        {
-                            file_asset_id: file.file_asset_id,
-                            src: file.asset.public_url,
-                            kind: 'captions',
-                            srclang: 'en-US',
-                            default: true,
-                        },
-                    ]
+                    [file]
             }
+            this.reloadVideo()
         },
-
         onAdSourceSelect(file, playAtPercent) {
             const adIndex = this.getAdSlot(playAtPercent)
 
@@ -674,14 +725,9 @@ export default {
 
                 this.block.metadata.config.playlist[this.playlistIndex].ads[
                     adIndex
-                ].sources = [
-                    {
-                        file_asset_id: file.file_asset_id,
-                        src: file.asset.public_url,
-                        type: file.asset.metadata.mime,
-                    },
-                ]
+                ].sources = [file]
             }
+            this.reloadVideo()
         },
         onAdTrackSelect(file, playAtPercent) {
             const adIndex = this.getAdSlot(playAtPercent)
@@ -697,16 +743,9 @@ export default {
 
                 this.block.metadata.config.playlist[this.playlistIndex].ads[
                     adIndex
-                ].tracks = [
-                    {
-                        file_asset_id: file.file_asset_id,
-                        src: file.asset.public_url,
-                        kind: 'captions',
-                        srclang: 'en-US',
-                        default: true,
-                    },
-                ]
+                ].tracks = [file]
             }
+            this.reloadVideo()
         },
         onPlaybackChange(e) {
             // Sort the list so we don't get instances of 2, 1, 0.25, 3

package/components/utils/ContentViewer.vue

@@ -79,6 +79,11 @@ img {
     width: 100% !important;
 }
 .text-viewer {
-    @import './assets/tinymce/css/content';
+    @import './assets/tinymce/content/global';
+}
+.ML__text {
+    font-family: 'Roboto', sans-serif !important;
+    font-size: 1rem;
+    line-height: 1.75em;
 }
 </style>

package/components/utils/FillInBlank/FillInBlankInput.vue

@@ -34,6 +34,7 @@
                             ><v-btn
                                 ref="action_button_1"
                                 color="primary"
+                                elevation="0"
                                 outlined
                                 @click="show = false"
                             >
@@ -50,6 +51,7 @@
                             <v-btn
                                 color="primary"
                                 outlined
+                                elevation="0"
                                 @click="displayAnswer"
                                 v-if="!answerIsCorrect"
                             >
@@ -92,6 +94,7 @@
             <v-btn
                 v-if="userInput && userInput.length > 0"
                 @click="toggleToolTip"
+                elevation="0"
                 color="primary"
                 outlined
                 :aria-label="

package/components/utils/MathExpressionEditor.vue

@@ -41,14 +41,17 @@
                                     :key="buttonIndex"
                                     class="btn"
                                     @click="insert(button)"
-                                    v-html="'<strong>'+convertLatexToMarkup(button.text)+'</strong>'"
-                                >
-                                </button>
+                                    v-html="
+                                        '<strong>' +
+                                        convertLatexToMarkup(button.text) +
+                                        '</strong>'
+                                    "
+                                ></button>
                             </div>
                         </v-container>
                     </v-tab-item>
                 </v-tabs-items>
-
+                <br />
                 <math-live-wrapper
                     ref="mathfield"
                     v-model="formula"
@@ -89,6 +92,7 @@
                     <v-btn
                         primary
                         color="success"
+                        elevation="0"
                         @click="setSRText"
                         :class="fontSize"
                         >{{
@@ -98,7 +102,7 @@
                         }}
                     </v-btn>
                     &nbsp;
-                    <v-btn color="primary" :class="fontSize" @click="readSRText"
+                    <v-btn color="primary" elevation="0" :class="fontSize" @click="readSRText"
                         >{{
                             $t(
                                 'windward.core.components.utils.math_expression_editor.read_text_aloud'
@@ -131,7 +135,7 @@ export default {
             spokenText: '',
             spokenTextChanged: false,
             options: {
-                smartFence: true,
+                smartFence: false,
                 smartMode: false,
                 virtualKeyboardMode: 'none',
                 keypressSound: 'none',
@@ -242,16 +246,38 @@ export default {
                 this.$emit('input', latex)
             }
         },
-        getBtnCode(button) {
-            if (button.cmd) {
+        getBtnCode(button, isAlpha) {
+            if (button.cmd && isAlpha) {
                 return button.latex
             }
             return button.text
         },
+
+        isLastCharValid(str, pos = 0) {
+            const lastChar = str.slice(pos, pos + 1)
+            const alphanumericRegex = /^[a-z0-9]$/i
+            const validSymbols = [')', '}', '|']
+            return (
+                alphanumericRegex.test(lastChar) ||
+                validSymbols.includes(lastChar)
+            )
+        },
         insert(latex) {
-            this.$refs.mathfield.insert(this.getBtnCode(latex), {
-                selectionMode: 'placeholder',
-            })
+            const existingText = this.$refs.mathfield.getValue()
+            this.$refs.mathfield.insert(
+                this.getBtnCode(
+                    latex,
+                    this.isLastCharValid(
+                        existingText,
+                        this.$refs.mathfield.$el.position - 1
+                    )
+                ),
+                {
+                    selectionMode: 'placeholder',
+                    insertionMode: 'replaceSelection',
+                    focus: true,
+                }
+            )
         },
 
         setSRText() {

package/components/utils/MathLiveWrapper.vue

@@ -1,5 +1,9 @@
 <template>
-    <math-field :id="id" style="font-size: 1.5rem; display: block"
+    <math-field
+        :id="id"
+        style="font-size: 1.5rem; display: block"
+        @change="onInput"
+        @input="onInput"
         ><slot></slot
     ></math-field>
 </template>
@@ -21,6 +25,13 @@ export default {
         }
     },
     watch: {
+        value(newVal) {
+            let current = this.$el.getValue()
+            newVal !== current &&
+                this.$el.setValue(newVal, {
+                    silenceNotifications: !0,
+                })
+        },
         options: {
             deep: true,
             handler(newValue) {
@@ -29,30 +40,27 @@ export default {
         },
     },
     mounted() {
-        this.$nextTick(() => {
-            this.$el.setOptions({
-                ...this.options,
-                macros: {
-                    ...this.$el.getOptions('macros'),
-                    smallfrac: '{}^{#1}\\!\\!/\\!{}_{#2}',
-                },
-                onContentDidChange: () => {
-                    this.$emit('input', this.$el.getValue())
-                    this.$emit('change')
-                },
-                onFocus: () => {
-                    this.$emit('focus')
-                },
-                onBlur: () => {
-                    this.$emit('blur')
-                },
-                onUndoStateDidChange: (t, e) => {
-                    this.$emit('undo-state-did-change', e)
-                },
-                onReadAloudStatus: (t, e) => {
-                    this.$emit('read-aloud-status-change', e)
-                },
-            })
+        //this.$nextTick(() => this.$el.setOptions(this.options))
+        this.$el.mathVirtualKeyboardPolicy = 'manual'
+
+        this.$el.menuItems = this.$el.menuItems.filter((item) => {
+            const itemIdPrefix = item.id ? item.id.split('-')[0] : null
+
+            if (itemIdPrefix === 'color' || itemIdPrefix === 'background') {
+                return false
+            }
+
+            if (
+                !_.isEmpty(item.submenu) &&
+                typeof item.submenu !== 'undefined'
+            ) {
+                item.submenu = item.submenu.filter((subItem) => {
+                    return subItem.id
+                        ? !subItem.id.startsWith('mode-latex')
+                        : true
+                })
+            }
+            return true
         })
         if (this.value !== '') {
             this.$el.setValue(this.value)
@@ -83,6 +91,20 @@ export default {
         setValue(value) {
             this.$el.setValue(value)
         },
+        onInput() {
+            this.$emit('input', this.$el.getValue())
+            this.$emit('change')
+        },
     },
 }
 </script>
+<style>
+@media not (pointer: coarse) {
+    math-field::part(virtual-keyboard-toggle) {
+        display: none;
+    }
+    math-field::part(menu-toggle) {
+        display: none;
+    }
+}
+</style>