@windward/core 0.2.3 → 0.4.0

package/components/Settings/UserUploadSettings.vue

@@ -7,6 +7,7 @@
                     'windward.core.components.settings.user_upload.accept_multiple'
                 )
             "
+            :disabled="render"
         ></v-switch>
         <v-select
             v-model="block.metadata.config.uploadSettings.accept"
@@ -19,8 +20,9 @@
             :label="
                 $t('windward.core.components.settings.user_upload.accept_types')
             "
+            :disabled="render"
         ></v-select>
-        <v-btn @click="onToggleExpand()" text class="mt-4">
+        <v-btn text class="mt-4" :disabled="render" @click="onToggleExpand()">
             <v-icon v-if="!block.metadata.config.expand" color="primary"
                 >mdi-arrow-expand-all</v-icon
             >
@@ -37,7 +39,10 @@
                         )
                     }}
                 </h4>
-                <TextEditor v-model="block.metadata.config.instructions" />
+                <TextEditor
+                    v-model="block.metadata.config.instructions"
+                    :disabled="render"
+                />
             </v-col>
         </v-row>
         <v-skeleton-loader
@@ -48,7 +53,7 @@
     </div>
 </template>
 <script>
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
 import _ from 'lodash'
@@ -62,7 +67,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = this.$t('windward.core.shared.content_blocks.title.user_upload')
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.user_upload'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/VideoSettings.vue

@@ -5,6 +5,7 @@
                 <v-text-field
                     v-model="block.metadata.config.title"
                     :label="$t('windward.core.components.settings.video.title')"
+                    :disabled="render"
                 ></v-text-field>
                 <h4 class="mb-3">
                     {{ $t('windward.core.components.settings.video.sources') }}
@@ -44,10 +45,12 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.source"
-                            mimes="video/mp4,audio/mpeg,video/webm"
-                            @click:file="onSourceSelect"
+                            :assets.sync="block.assets"
+                            mimes="video/mp4,audio/mpeg,video/webm,video/youtube"
                             allow-url
                             class="mb-4"
+                            :disabled="render"
+                            @change="onSourceSelect"
                         >
                             <template #title>
                                 {{
@@ -64,13 +67,14 @@
                                 }}
                             </template>
                         </ContentBlockAsset>
-
                         <ContentBlockAsset
                             v-model="media.track"
+                            :assets.sync="block.assets"
                             mimes="text/vtt,text/xml"
-                            @click:file="onTrackSelect"
                             allow-url
                             class="mb-4"
+                            :disabled="render"
+                            @change="onTrackSelect"
                         >
                             <template #title>
                                 {{
@@ -92,9 +96,11 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.poster"
+                            :assets.sync="block.assets"
                             mimes="image/png,image/jpeg"
-                            @click:file="onPosterSelect"
                             allow-url
+                            :disabled="render"
+                            @change="onPosterSelect"
                         >
                             <template #title>
                                 {{
@@ -116,10 +122,12 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.ads.preroll.source"
+                            :assets.sync="block.assets"
                             mimes="video/mp4,video/webm"
-                            @click:file="onAdSourceSelect($event, 0)"
                             allow-url
                             class="mb-4"
+                            :disabled="render"
+                            @change="onAdSourceSelect($event, 0)"
                         >
                             <template #title>
                                 {{
@@ -139,9 +147,11 @@
 
                         <ContentBlockAsset
                             v-model="media.ads.preroll.track"
+                            :assets.sync="block.assets"
                             mimes="text/vtt,text/xml"
-                            @click:file="onAdTrackSelect($event, 0)"
                             allow-url
+                            :disabled="render"
+                            @change="onAdTrackSelect($event, 0)"
                         >
                             <template #title>
                                 {{
@@ -163,10 +173,12 @@
                     <v-tab-item class="mb-1">
                         <ContentBlockAsset
                             v-model="media.ads.postroll.source"
+                            :assets.sync="block.assets"
                             mimes="video/mp4,video/webm"
-                            @click:file="onAdSourceSelect($event, 100)"
                             allow-url
                             class="mb-4"
+                            :disabled="render"
+                            @change="onAdSourceSelect($event, 100)"
                         >
                             <template #title>
                                 {{
@@ -186,9 +198,11 @@
 
                         <ContentBlockAsset
                             v-model="media.ads.postroll.track"
+                            :assets.sync="block.assets"
                             mimes="text/vtt,text/xml"
-                            @click:file="onAdTrackSelect($event, 100)"
                             allow-url
+                            :disabled="render"
+                            @change="onAdTrackSelect($event, 100)"
                         >
                             <template #title>
                                 {{
@@ -239,6 +253,7 @@
                             )
                         "
                         :disabled="
+                            render ||
                             !block.metadata.config.playlist[playlistIndex]
                                 .sources ||
                             !block.metadata.config.playlist[playlistIndex]
@@ -260,6 +275,7 @@
                                 text
                                 color="error"
                                 :disabled="
+                                    render ||
                                     block.metadata.config.playlist.length <= 1
                                 "
                                 @click="onRemovePlaylistItem"
@@ -288,6 +304,7 @@
                                 v-on="on"
                                 color="primary"
                                 text
+                                :disabled="render"
                                 @click="onAddPlaylistItem"
                             >
                                 <v-icon>mdi-plus</v-icon>
@@ -319,6 +336,7 @@
                         <v-row>
                             <v-col cols="12">
                                 <v-select
+                                    id="video-playback-rates"
                                     v-model="
                                         block.metadata.config.attributes
                                             .playbackrates
@@ -330,6 +348,7 @@
                                         )
                                     "
                                     multiple
+                                    :disabled="render"
                                     @change="onPlaybackChange"
                                 >
                                     <template #selection="{ item }">
@@ -350,6 +369,7 @@
                                             'windward.core.components.content.blocks.video.video.controls'
                                         )
                                     "
+                                    :disabled="render"
                                 ></v-switch>
                                 <v-switch
                                     v-model="
@@ -360,6 +380,7 @@
                                             'windward.core.components.content.blocks.video.video.rewind'
                                         )
                                     "
+                                    :disabled="render"
                                 ></v-switch>
                                 <v-switch
                                     v-model="
@@ -371,6 +392,7 @@
                                             'windward.core.components.content.blocks.video.video.captionsmenu'
                                         )
                                     "
+                                    :disabled="render"
                                 ></v-switch>
                                 <v-switch
                                     v-model="
@@ -382,6 +404,7 @@
                                             'windward.core.components.content.blocks.video.video.disablepictureinpicture'
                                         )
                                     "
+                                    :disabled="render"
                                 ></v-switch>
                                 <!--
                                             <v-switch
@@ -404,6 +427,7 @@
                                             'windward.core.components.content.blocks.video.video.muted'
                                         )
                                     "
+                                    :disabled="render"
                                 ></v-switch>
                                 <v-switch
                                     v-model="
@@ -414,6 +438,7 @@
                                             'windward.core.components.content.blocks.video.video.loop'
                                         )
                                     "
+                                    :disabled="render"
                                 ></v-switch>
                                 <v-switch
                                     v-model="
@@ -425,6 +450,7 @@
                                             'windward.core.components.content.blocks.video.video.playsinline'
                                         )
                                     "
+                                    :disabled="render"
                                 ></v-switch>
                             </v-col>
                         </v-row>
@@ -435,9 +461,9 @@
     </div>
 </template>
 <script>
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import Vue from 'vue'
-
+import _ from 'lodash'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import Uuid from '~/helpers/Uuid'
 export default {
     name: 'VideoSettings',
     extends: BaseContentSettings,
@@ -477,20 +503,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
+                        )
+                    ),
                 },
             }
         },
@@ -553,7 +642,7 @@ export default {
                     ]
                 )
             ) {
-                Vue.set(
+                this.$set(
                     this.block.metadata.config.playlist[this.playlistIndex].ads,
                     adIndex,
                     { sources: [], tracks: [] }
@@ -575,19 +664,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]
@@ -608,37 +689,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)
 
@@ -656,14 +723,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)
@@ -679,16 +741,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/MathExpressionEditor.vue

@@ -41,9 +41,12 @@
                                     :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>
@@ -131,7 +134,7 @@ export default {
             spokenText: '',
             spokenTextChanged: false,
             options: {
-                smartFence: true,
+                smartFence: false,
                 smartMode: false,
                 virtualKeyboardMode: 'none',
                 keypressSound: 'none',
@@ -250,7 +253,9 @@ export default {
         },
         insert(latex) {
             this.$refs.mathfield.insert(this.getBtnCode(latex), {
-                selectionMode: 'placeholder',
+                selectionMode: 'item',
+                insertionMode: 'replaceSelection',
+                focus: true,
             })
         },