@windward/core 0.3.0 → 0.4.0

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>
                                 {{
@@ -330,6 +336,7 @@
                         <v-row>
                             <v-col cols="12">
                                 <v-select
+                                    id="video-playback-rates"
                                     v-model="
                                         block.metadata.config.attributes
                                             .playbackrates
@@ -454,8 +461,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 +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
+                        )
+                    ),
                 },
             }
         },
@@ -593,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]
@@ -626,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)
 
@@ -674,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)
@@ -697,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,
             })
         },
 

package/components/utils/TinyMCEWrapper.vue

@@ -1,11 +1,15 @@
 <template>
     <div :class="'tinymce-included-' + seed">
-        <div>
-            <editor
-                :key="seed + config.skin"
+        <div
+            :class="
+                'windward-tinymce-wrapper windward-tinymce-wrapper' +
+                (isDarkTheme ? '--theme-dark' : '--theme-light')
+            "
+        >
+            <Editor
+                :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
                 v-model="text"
                 initial-value=""
-                :api-key="api_key"
                 :init="config"
                 tag-name="div"
                 model-events="change keydown blur focus mouseDown paste input submit SetContent"
@@ -16,7 +20,7 @@
                     include,
                 }"
             >
-            </editor>
+            </Editor>
         </div>
 
         <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
@@ -41,14 +45,66 @@
 
 <script>
 import _ from 'lodash'
+import 'tinymce'
 import Editor from '@tinymce/tinymce-vue'
+
+/* Required TinyMCE components */
+import 'tinymce/icons/default/icons.min.js'
+import 'tinymce/themes/silver/theme.min.js'
+import 'tinymce/models/dom/model.min.js'
+
+/* Import a skin (can be a custom skin instead of the default) */
+import 'tinymce/skins/ui/oxide/skin.js'
+import 'tinymce/skins/ui/oxide-dark/skin.js'
+
+/* Import plugins */
+import 'tinymce/plugins/accordion'
+import 'tinymce/plugins/advlist'
+import 'tinymce/plugins/anchor'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/autoresize'
+import 'tinymce/plugins/autosave'
+import 'tinymce/plugins/charmap'
+import 'tinymce/plugins/code'
+import 'tinymce/plugins/codesample'
+import 'tinymce/plugins/directionality'
+import 'tinymce/plugins/emoticons'
+import 'tinymce/plugins/fullscreen'
+import 'tinymce/plugins/help'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/importcss'
+import 'tinymce/plugins/insertdatetime'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/media'
+import 'tinymce/plugins/nonbreaking'
+import 'tinymce/plugins/pagebreak'
+import 'tinymce/plugins/preview'
+import 'tinymce/plugins/quickbars'
+import 'tinymce/plugins/save'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/visualblocks'
+import 'tinymce/plugins/visualchars'
+import 'tinymce/plugins/wordcount'
+
+/* content UI CSS is required */
+import 'tinymce/skins/ui/oxide/content.js'
+import 'tinymce/skins/ui/oxide-dark/content.js'
+
+/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
+import 'tinymce/skins/content/default/content.js'
+import 'tinymce/skins/content/dark/content.js'
+
 import { WindwardPlugins } from '../../helpers/tinymce/plugin'
-import contentCss from '!raw-loader!sass-loader!./assets/tinymce/css/content.scss'
+import ContentCss from '!raw-loader!sass-loader!./assets/tinymce/content/global.scss'
+import EditorCss from '!raw-loader!sass-loader!./assets/tinymce/ui/global.scss'
 import Crypto from '~/helpers/Crypto'
+import MathHelper from '../../helpers/MathHelper'
 export default {
     name: 'ContentEditorRichText',
     components: {
-        editor: Editor,
+        Editor,
     },
     props: {
         value: { type: String, required: true, default: '' },
@@ -69,7 +125,11 @@ export default {
         label: { type: String, required: true, default: '' },
     },
     beforeMount() {
-        this.text = this.value
+        if (MathHelper.containsLatex(this.value)) {
+            this.text = MathHelper.wrapMathContentForTinyMCE(this.value)
+        } else {
+            this.text = this.value
+        }
     },
     data() {
         return {
@@ -84,6 +144,9 @@ export default {
         },
     },
     computed: {
+        isDarkTheme() {
+            return this.$vuetify.theme.isDark
+        },
         filteredMenubar() {
             if (this.render) {
                 return this.menubar
@@ -117,6 +180,15 @@ export default {
                 browser_spellcheck: true,
                 contextmenu: false,
                 statusbar: false,
+                promotion: false,
+                license_key: 'gpl',
+                ui_mode: 'split',
+                dialog_type: 'modal',
+                body_class: this.isDarkTheme
+                    ? 'editor--theme-dark'
+                    : 'editor--theme-light',
+                block_formats:
+                    'Paragraph=p; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6;',
                 menu: {
                     insert: {
                         title: 'Insert',
@@ -132,10 +204,21 @@ export default {
                     },
                 },
                 plugins: [
-                    'advlist autolink lists link  charmap',
-                    'searchreplace visualblocks code fullscreen',
-                    'anchor insertdatetime ',
-                    'paste code wordcount table WindwardToolKit',
+                    'advlist',
+                    'autolink',
+                    'lists',
+                    'link',
+                    'charmap',
+                    'searchreplace',
+                    'visualblocks',
+                    'code',
+                    'fullscreen',
+                    'anchor',
+                    'insertdatetime',
+                    'code',
+                    'wordcount',
+                    'table',
+                    'WindwardToolKit',
                 ],
                 toolbar: this.filteredToolbar,
                 table_advtab: false,
@@ -289,12 +372,13 @@ export default {
                           'windward.core.shared.settings.title.placeholder'
                       ),
                 //required as it will be displayed as inline style in tinymce renderer
-
-                skin: this.$vuetify.theme.isDark ? 'oxide-dark' : 'oxide',
+                skin: false,
                 content_css: this.$vuetify.theme.isDark ? 'dark' : 'default',
+
                 //we need to inject the glossary style directly
                 content_style:
-                    contentCss +
+                    ContentCss +
+                    EditorCss +
                     ' .glossary-word {\n' +
                     '    display: inline-block;\n' +
                     '    border-radius: 12px;\n' +
@@ -345,10 +429,11 @@ export default {
             }
 
             if (
-                parentNode.closest('.tinymce-included-' + this.seed) ||
+                (parentNode &&
+                    (parentNode.closest('.tinymce-included-' + this.seed) ||
+                        _.includes(parentNode.className, 'tox'))) ||
                 _.includes(targetClass, 'tinymce-included-' + this.seed) ||
-                _.includes(targetClass, 'tox') ||
-                _.includes(parentNode.className, 'tox')
+                _.includes(targetClass, 'tox')
             ) {
                 return false
             } else {
@@ -359,3 +444,14 @@ export default {
     },
 }
 </script>
+
+<style lang="scss">
+html:has(body.theme--light) {
+    @import './assets/tinymce/ui/light/content.scss';
+    @import './assets/tinymce/ui/light/skin.scss';
+}
+html:has(body.theme--dark) {
+    @import './assets/tinymce/ui/dark/content.scss';
+    @import './assets/tinymce/ui/dark/skin.scss';
+}
+</style>

package/components/utils/assets/tinymce/content/dark/content.scss

@@ -0,0 +1,4 @@
+body {
+    background-color: #24292a;
+    color: #fff;
+}