apostrophe 3.29.1 → 3.31.0

package/CHANGELOG.md

@@ -1,11 +1,31 @@
 # Changelog
 
+## 3.31.0 (2022-10-27)
+
+### Adds
+
+* Adds `placeholder: true` and `initialModal: false` features to improve the user experience of adding widgets to the page. Checkout the [Widget Placeholders documentation](https://v3.docs.apostrophecms.org/guide/areas-and-widgets.html#adding-placeholder-content-to-widgets) for more detail. 
+
+## 3.30.0 (2022-10-12)
+
+### Adds
+
+* New `APOS_LOG_ALL_ROUTES` environment variable. If set, Apostrophe logs information about all middleware functions and routes that are executed on behalf of a particular URL.
+* Adds the `addFileGroups` option to the `attachment` module. Additionally it exposes a new method, `addFileGroup(group)`. These allow easier addition of new file groups or extension of the existing groups.
+
+### Fixes
+
+* Vue 3 may now be used in a separate webpack build at project level without causing problems for the admin UI Vue 2 build.
+* Fixes `cache` module `clear-cache` CLI task message
+* Fixes help message for `express` module `list-routes` CLI task
+
 ## 3.29.1 (2022-10-03)
 
 ### Fixes
 
 * Hotfix to restore Node 14 support. Of course Node 16 is also supported.
 
+
 ## 3.29.0 (2022-10-03)
 
 ### Adds

package/modules/@apostrophecms/area/index.js

@@ -575,6 +575,8 @@ module.exports = {
         const widgetEditors = {};
         const widgetManagers = {};
         const widgetIsContextual = {};
+        const widgetHasPlaceholder = {};
+        const widgetHasInitialModal = {};
         const contextualWidgetDefaultData = {};
 
         _.each(self.widgetManagers, function (manager, name) {
@@ -584,6 +586,8 @@ module.exports = {
           widgetEditors[name] = (browserData && browserData.components && browserData.components.widgetEditor) || 'AposWidgetEditor';
           widgetManagers[name] = manager.__meta.name;
           widgetIsContextual[name] = manager.options.contextual;
+          widgetHasPlaceholder[name] = manager.options.placeholder;
+          widgetHasInitialModal[name] = !manager.options.placeholder && manager.options.initialModal !== false;
           contextualWidgetDefaultData[name] = manager.options.defaultData;
         });
 
@@ -594,6 +598,8 @@ module.exports = {
             widgetEditors
           },
           widgetIsContextual,
+          widgetHasPlaceholder,
+          widgetHasInitialModal,
           contextualWidgetDefaultData,
           widgetManagers,
           action: self.action

package/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -404,6 +404,8 @@ export default {
       }
     },
     async update(widget) {
+      widget.aposPlaceholder = false;
+
       if (this.docId === window.apos.adminBar.contextId) {
         apos.bus.$emit('context-edited', {
           [`@${widget._id}`]: widget
@@ -434,9 +436,17 @@ export default {
       } else if (this.widgetIsContextual(name)) {
         return this.insert({
           widget: {
-            _id: cuid(),
             type: name,
-            ...this.contextualWidgetDefaultData(name)
+            ...this.contextualWidgetDefaultData(name),
+            aposPlaceholder: this.widgetHasPlaceholder(name)
+          },
+          index
+        });
+      } else if (!this.widgetHasInitialModal(name)) {
+        return this.insert({
+          widget: {
+            type: name,
+            aposPlaceholder: this.widgetHasPlaceholder(name)
           },
           index
         });
@@ -502,6 +512,12 @@ export default {
     widgetIsContextual(type) {
       return this.moduleOptions.widgetIsContextual[type];
     },
+    widgetHasPlaceholder(type) {
+      return this.moduleOptions.widgetHasPlaceholder[type];
+    },
+    widgetHasInitialModal(type) {
+      return this.moduleOptions.widgetHasInitialModal[type];
+    },
     widgetEditorComponent(type) {
       return this.moduleOptions.components.widgetEditors[type];
     },

package/modules/@apostrophecms/asset/lib/webpack/apos/webpack.config.js

@@ -24,6 +24,8 @@ module.exports = ({
 
   const config = {
     entry: importFile,
+    // Ensure that the correct version of vue-loader is found
+    context: __dirname,
     mode: process.env.NODE_ENV || 'development',
     optimization: {
       minimize: process.env.NODE_ENV === 'production'

package/modules/@apostrophecms/attachment/index.js

@@ -87,6 +87,12 @@ module.exports = {
       }
     ];
 
+    if (self.options.addFileGroups) {
+      self.options.addFileGroups.forEach(newGroup => {
+        self.addFileGroup(newGroup);
+      });
+    };
+
     // Do NOT add keys here unless they have the value `true`
     self.croppable = {
       gif: true,
@@ -1183,6 +1189,23 @@ module.exports = {
           });
         });
       },
+
+      addFileGroup(newGroup) {
+        if (self.fileGroups.some(existingGroup => existingGroup.name === newGroup.name)) {
+          const existingGroup = self.fileGroups.find(existingGroup => existingGroup.name === newGroup.name);
+          if (newGroup.extensions) {
+            existingGroup.extensions = [ ...existingGroup.extensions, ...newGroup.extensions ];
+          };
+          if (newGroup.extensionMaps) {
+            existingGroup.extensionMaps = {
+              ...existingGroup.extensionMaps,
+              ...newGroup.extensionMaps
+            };
+          }
+        } else {
+          self.fileGroups.push(newGroup);
+        }
+      },
       ...require('./lib/legacy-migrations')(self)
     };
   },

package/modules/@apostrophecms/cache/index.js

@@ -97,7 +97,7 @@ module.exports = {
   tasks(self) {
     return {
       'clear-cache': {
-        help: 'Usage: node app @apostrophecms/cache:clear namespace1 namespace2...\n\nClears all values stored in a given namespace or namespaces. If you are using apos.cache in your own code you will\nknow the namespace name. Standard caches include "@apostrophecms/oembed". Normally it is not necessary to clear them.',
+        usage: 'usage: node app @apostrophecms/cache:clear-cache namespace1 namespace2...\n\nClears all values stored in a given namespace or namespaces. If you are using apos.cache in your own code you will\nknow the namespace name. Standard caches include "@apostrophecms/oembed". Normally it is not necessary to clear them.',
         task: async (argv) => {
           const namespaces = argv._.slice(1);
           if (!namespaces.length) {

package/modules/@apostrophecms/express/index.js

@@ -171,7 +171,7 @@ module.exports = {
   tasks(self) {
     return {
       'list-routes': {
-        help: 'List all Express routes registered via routes(), apiRoutes(), etc. (not directly via apos.app)',
+        usage: 'Usage: node app @apostrophecms/express:list-routes \n\n List all Express routes registered via routes(), apiRoutes(), etc. (not directly via apos.app)',
         async task(argv) {
           for (const info of self.finalModuleMiddlewareAndRoutes) {
             if (info.route) {
@@ -214,14 +214,23 @@ module.exports = {
           await self.findModuleMiddlewareAndRoutes();
           for (const item of self.finalModuleMiddlewareAndRoutes) {
             if (item.method) {
+              if (process.env.APOS_LOG_ALL_ROUTES) {
+                item.route._aposItem = item;
+              }
               self.apos.app[item.method](item.url, item.route);
             } else if (item.middleware) {
+              if (process.env.APOS_LOG_ALL_ROUTES) {
+                item.middleware._aposItem = item;
+              }
               if (item.url) {
                 self.apos.app.use(item.url, item.middleware);
               } else {
                 self.apos.app.use(item.middleware);
               }
             } else if ((typeof item) === 'function') {
+              if (process.env.APOS_LOG_ALL_ROUTES) {
+                item._aposItem = item;
+              }
               // Simple middleware
               self.apos.app.use(item);
             } else {
@@ -378,6 +387,42 @@ module.exports = {
             strictNullHandling: true
           });
         });
+        if (process.env.APOS_LOG_ALL_ROUTES) {
+          self.logAllRoutes();
+        }
+      },
+
+      logAllRoutes() {
+        const superUse = self.apos.app.use.bind(self.apos.app);
+        const methods = [ 'get', 'post', 'put', 'delete', 'patch', 'options', 'head', 'all' ];
+        self.apos.app.use = function (path, middleware) {
+          if (typeof path === 'function') {
+            middleware = path;
+            path = '';
+          }
+          superUse(path, (req, ...args) => {
+            const moduleName = middleware._aposItem && middleware._aposItem.moduleName;
+            const name = moduleName && middleware._aposItem.name;
+            self.apos.util.log(`${req.url} invokes middleware ${path ? `for path ${path} ` : ''}${moduleName && `found at ${moduleName}:${name}`}`);
+            return middleware(req, ...args);
+          });
+        };
+        for (const method of methods) {
+          const superMethod = self.apos.app[method].bind(self.apos.app);
+          self.apos.app[method] = (path, ...args) => {
+            if ((method === 'get') && (!args.length)) {
+              // Handle app.get in its configuration getter form
+              return superMethod(path);
+            }
+            const middleware = args.slice(0, args.length - 1);
+            const fn = args[args.length - 1];
+            superMethod(path, ...middleware, (req, ...args) => {
+              const moduleName = (fn === self.apos.page.serve) ? '@apostrophecms/page' : (fn._aposItem && fn._aposItem.moduleName);
+              self.apos.util.log(`${req.url} invokes ${method.toUpperCase()} route for path ${path} ${moduleName ? `in the module ${moduleName}` : ''}`);
+              return fn(req, ...args);
+            });
+          };
+        }
       },
 
       // Patch Express so that all calls to `res.redirect` honor
@@ -650,6 +695,11 @@ module.exports = {
         const moduleNames = Array.from(new Set([ self.__meta.name, ...Object.keys(self.apos.modules) ]));
         for (const name of moduleNames) {
           const middleware = self.apos.modules[name].middleware || {};
+          if (process.env.APOS_LOG_ALL_ROUTES) {
+            for (const [ name, item ] of Object.entries(middleware)) {
+              item.name = name;
+            }
+          }
           labeledList.push({
             name: `middleware:${name}`,
             middleware: Object.values(middleware).filter(middleware => !middleware.before)
@@ -657,6 +707,11 @@ module.exports = {
         }
         for (const name of Object.keys(self.apos.modules)) {
           const _routes = self.apos.modules[name]._routes;
+          if (process.env.APOS_LOG_ALL_ROUTES) {
+            for (const [ name, item ] of Object.entries(_routes)) {
+              item.name = name;
+            }
+          }
           labeledList.push({
             name: `routes:${name}`,
             routes: _routes.filter(route => !route.before)
@@ -682,8 +737,12 @@ module.exports = {
               before.prepending = before.prepending || [];
               before.prepending.push(item);
             }
+            if (process.env.APOS_LOG_ALL_ROUTES) {
+              item.moduleName = name;
+            }
           }
         }
+
         self.finalModuleMiddlewareAndRoutes = labeledList.map(item => (item.prepending || []).concat(item.middleware || item.routes)).flat();
       }
     };

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -161,6 +161,7 @@
   "home": "Home",
   "image": "Image",
   "imageFile": "Image File",
+  "imagePlaceholder": "Image placeholder",
   "imageTag": "Image Tag",
   "imageTags": "Image Tags",
   "images": "Images",
@@ -263,6 +264,7 @@
   "richTextItalic": "Italic",
   "richTextLink": "Link",
   "richTextParagraph": "Paragraph (P)",
+  "richTextPlaceholder": "Start Typing Here...",
   "richTextH2": "Heading 2 (H2)",
   "richTextH3": "Heading 3 (H3)",
   "richTextH4": "Heading 4 (H4)",

package/modules/@apostrophecms/i18n/i18n/es.json

@@ -150,6 +150,7 @@
   "home": "Inicio",
   "image": "Imagen",
   "imageFile": "Archivo de Imagen",
+  "imagePlaceholder": "Marcador de posición de imagen",
   "imageTag": "Etiqueta de Imagen",
   "imageTags": "Etiquetas de Imágenes",
   "images": "Imágenes",
@@ -242,6 +243,7 @@
   "richTextItalic": "Cursiva",
   "richTextLink": "Liga",
   "richTextParagraph": "Párrafo (P)",
+  "richTextPlaceholder": "Comience a escribir aquí...",
   "richTextH2": "Título 2 (H2)",
   "richTextH3": "Título 3 (H3)",
   "richTextH4": "Título 4 (H4)",

package/modules/@apostrophecms/i18n/i18n/fr.json

@@ -148,6 +148,7 @@
   "home": "Accueil",
   "image": "Image",
   "imageFile": "Fichier d'image",
+  "imagePlaceholder": "Espace réservé pour l'image",
   "imageTag": "Tag d'image",
   "imageTags": "Tags d'image",
   "images": "Images",
@@ -249,6 +250,7 @@
   "richTextItalic": "Italique",
   "richTextLink": "Lien",
   "richTextParagraph": "Paragraphe (P)",
+  "richTextPlaceholder": "Commencez à écrire ici...",
   "richTextH2": "Titre de niveau 2 (H2)",
   "richTextH3": "Titre de niveau 3 (H3)",
   "richTextH4": "Titre de niveau 4 (H4)",

package/modules/@apostrophecms/i18n/i18n/pt-BR.json

@@ -150,6 +150,7 @@
   "home": "Home",
   "image": "Imagem",
   "imageFile": "Arquivo de Imagem",
+  "imagePlaceholder": "Espaço reservado para imagem",
   "imageTag": "Tag de Imagem",
   "imageTags": "Tags de Imagem",
   "images": "Imagens",
@@ -240,6 +241,7 @@
   "richTextItalic": "Itálico",
   "richTextLink": "Link",
   "richTextParagraph": "Parágrafo (P)",
+  "richTextPlaceholder": "Comece a digitar aqui...",
   "richTextH2": "Título 2 (H2)",
   "richTextH3": "Título 3 (H3)",
   "richTextH4": "Título 4 (H4)",

package/modules/@apostrophecms/i18n/i18n/sk.json

@@ -154,6 +154,7 @@
   "home": "Domovská stránka",
   "image": "Obrázok",
   "imageFile": "Súbor s obrázkom",
+  "imagePlaceholder": "Zástupný symbol obrázka",
   "imageTag": "Značku obrázku",
   "imageTags": "Značky obrázkov",
   "images": "Obrázky",
@@ -252,6 +253,7 @@
   "richTextItalic": "Kurzíva",
   "richTextLink": "Link",
   "richTextParagraph": "Odstavec (P)",
+  "richTextPlaceholder": "Začnite písať tu...",
   "richTextH2": "Nadpis 2 (H2)",
   "richTextH3": "Nadpis 3 (H3)",
   "richTextH4": "Nadpis 4 (H4)",

package/modules/@apostrophecms/image-widget/index.js

@@ -4,7 +4,10 @@ module.exports = {
     label: 'apostrophe:image',
     className: false,
     icon: 'image-icon',
-    dimensionAttrs: false
+    dimensionAttrs: false,
+    placeholder: true,
+    placeholderClass: false,
+    placeholderUrl: '/modules/@apostrophecms/image-widget/placeholder.jpg'
   },
   fields: {
     add: {

package/modules/@apostrophecms/image-widget/ui/src/index.scss

@@ -0,0 +1,3 @@
+.image-widget-placeholder {
+  width: 100%;
+}

package/modules/@apostrophecms/image-widget/views/widget.html

@@ -1,31 +1,39 @@
-{% if data.options.className %}
-  {% set className = data.options.className %}
-{% elif data.manager.options.className %}
-  {% set className = data.manager.options.className %}
-{% endif %}
+{% if data.widget.aposPlaceholder and data.manager.options.placeholderUrl %}
+  <img
+    src="{{ apos.asset.url(data.manager.options.placeholderUrl) }}"
+    alt="{{ __t('apostrophe:imagePlaceholder') }}"
+    class="image-widget-placeholder"
+  />
+{% else %}
+  {% if data.options.className %}
+    {% set className = data.options.className %}
+  {% elif data.manager.options.className %}
+    {% set className = data.manager.options.className %}
+  {% endif %}
 
-{% if data.options.dimensionAttrs %}
-  {% set dimensionAttrs = data.options.dimensionAttrs %}
-{% elif data.manager.options.dimensionAttrs  %}
-  {% set dimensionAttrs = data.manager.options.dimensionAttrs  %}
-{% endif %}
+  {% if data.options.dimensionAttrs %}
+    {% set dimensionAttrs = data.options.dimensionAttrs %}
+  {% elif data.manager.options.dimensionAttrs %}
+    {% set dimensionAttrs = data.manager.options.dimensionAttrs  %}
+  {% endif %}
 
-{% set attachment = apos.image.first(data.widget._image) %}
+  {% set attachment = apos.image.first(data.widget._image) %}
 
-{% if attachment %}
-  <img {% if className %} class="{{ className }}"{% endif %}
-    srcset="{{ apos.image.srcset(attachment) }}"
-    src="{{ apos.attachment.url(attachment, { size: data.options.size or 'full' }) }}"
-    alt="{{ attachment._alt or '' }}"
-    {% if dimensionAttrs %}
-      {% if attachment.width %} width="{{ apos.attachment.getWidth(attachment) }}" {% endif %}
-      {% if attachment.height %} height="{{ apos.attachment.getHeight(attachment) }}" {% endif %}
-    {% endif %}
-    {% if data.contextOptions and data.contextOptions.sizes %}
-      sizes="{{ data.contextOptions.sizes }}"
-    {% endif %}
-    {% if apos.attachment.hasFocalPoint(attachment) %}
-      style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}"
-    {%- endif -%}
-  />
+  {% if attachment %}
+    <img {% if className %} class="{{ className }}"{% endif %}
+      srcset="{{ apos.image.srcset(attachment) }}"
+      src="{{ apos.attachment.url(attachment, { size: data.options.size or 'full' }) }}"
+      alt="{{ attachment._alt or '' }}"
+      {% if dimensionAttrs %}
+        {% if attachment.width %} width="{{ apos.attachment.getWidth(attachment) }}" {% endif %}
+        {% if attachment.height %} height="{{ apos.attachment.getHeight(attachment) }}" {% endif %}
+      {% endif %}
+      {% if data.contextOptions and data.contextOptions.sizes %}
+        sizes="{{ data.contextOptions.sizes }}"
+      {% endif %}
+      {% if apos.attachment.hasFocalPoint(attachment) %}
+        style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}"
+      {%- endif -%}
+    />
+  {% endif %}
 {% endif %}

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -9,6 +9,8 @@ module.exports = {
     icon: 'format-text-icon',
     label: 'apostrophe:richText',
     contextual: true,
+    placeholder: true,
+    placeholderText: 'apostrophe:richTextPlaceholder',
     defaultData: { content: '' },
     className: false,
     minimumDefaultOptions: {
@@ -417,7 +419,8 @@ module.exports = {
           tools: self.options.editorTools,
           defaultOptions: self.options.defaultOptions,
           tiptapTextCommands: self.options.tiptapTextCommands,
-          tiptapTypes: self.options.tiptapTypes
+          tiptapTypes: self.options.tiptapTypes,
+          placeholderText: self.options.placeholder && self.options.placeholderText
         };
         return finalData;
       }

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -28,7 +28,10 @@
     <div class="apos-rich-text-editor__editor" :class="editorModifiers">
       <editor-content :editor="editor" :class="editorOptions.className" />
     </div>
-    <div class="apos-rich-text-editor__editor_after" :class="editorModifiers">
+    <div
+      v-if="showPlaceholder !== null && (!placeholderText || !isFocused)"
+      class="apos-rich-text-editor__editor_after" :class="editorModifiers"
+    >
       {{ $t('apostrophe:emptyRichTextWidget') }}
     </div>
   </div>
@@ -45,6 +48,8 @@ import TextAlign from '@tiptap/extension-text-align';
 import Highlight from '@tiptap/extension-highlight';
 import TextStyle from '@tiptap/extension-text-style';
 import Underline from '@tiptap/extension-underline';
+import Placeholder from '@tiptap/extension-placeholder';
+
 export default {
   name: 'AposRichTextWidgetEditor',
   components: {
@@ -88,7 +93,9 @@ export default {
         },
         hasErrors: false
       },
-      pending: null
+      pending: null,
+      isFocused: null,
+      showPlaceholder: null
     };
   },
   computed: {
@@ -158,6 +165,9 @@ export default {
     tiptapTypes() {
       return this.moduleOptions.tiptapTypes;
     },
+    placeholderText() {
+      return this.moduleOptions.placeholderText;
+    },
     aposTiptapExtensions() {
       return (apos.tiptapExtensions || [])
         .map(extension => extension({
@@ -176,19 +186,63 @@ export default {
     }
   },
   mounted() {
+    const extensions = [
+      StarterKit,
+      TextAlign.configure({
+        types: [ 'heading', 'paragraph' ]
+      }),
+      Highlight,
+      TextStyle,
+      Underline,
+
+      // For this contextual widget, no need to check `widget.aposPlaceholder` value
+      // since `placeholderText` option is enough to decide whether to display it or not.
+      this.placeholderText && Placeholder.configure({
+        placeholder: () => {
+          // Avoid brief display of the placeholder when loading the page.
+          if (this.isFocused === null) {
+            return '';
+          }
+
+          // Display placeholder after loading the page.
+          if (this.showPlaceholder === null) {
+            return this.$t(this.placeholderText);
+          }
+
+          return this.showPlaceholder ? this.$t(this.placeholderText) : '';
+        }
+      })
+    ]
+      .filter(Boolean)
+      .concat(this.aposTiptapExtensions);
+
     this.editor = new Editor({
       content: this.initialContent,
       autofocus: this.autofocus,
       onUpdate: this.editorUpdate,
-      extensions: [
-        StarterKit,
-        TextAlign.configure({
-          types: [ 'heading', 'paragraph' ]
-        }),
-        Highlight,
-        TextStyle,
-        Underline
-      ].concat(this.aposTiptapExtensions)
+      extensions,
+
+      // The following events are triggered:
+      //  - before the placeholder configuration function, when loading the page
+      //  - after it, once the page is loaded and we interact with the editors
+      // To solve this issue, use another `this.showPlaceholder` variable
+      // and toggle it after the placeholder configuration function is called,
+      // thanks to nextTick.
+      // The proper thing would be to call nextTick inside the placeholder
+      // function so that it can rely on the focus state set by these event
+      // listeners, but the placeholder function is called synchronously...
+      onFocus: () => {
+        this.isFocused = true;
+        this.$nextTick(() => {
+          this.showPlaceholder = false;
+        });
+      },
+      onBlur: () => {
+        this.isFocused = false;
+        this.$nextTick(() => {
+          this.showPlaceholder = true;
+        });
+      }
     });
   },
 
@@ -336,6 +390,14 @@ export default {
     outline: none;
   }
 
+  .apos-rich-text-editor__editor ::v-deep .ProseMirror p.is-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    pointer-events: none;
+    height: 0;
+    color: var(--a-base-4);
+  }
+
   .apos-rich-text-editor__editor {
     @include apos-transition();
     position: relative;

package/modules/@apostrophecms/video-widget/index.js

@@ -14,7 +14,10 @@ module.exports = {
   options: {
     label: 'apostrophe:video',
     className: false,
-    icon: 'play-box-icon'
+    icon: 'play-box-icon',
+    placeholder: true,
+    placeholderClass: false,
+    placeholderUrl: 'https://youtu.be/Q5UX9yexEyM'
   },
   fields: {
     add: {

package/modules/@apostrophecms/video-widget/views/widget.html

@@ -1,20 +1,28 @@
-{% if data.options.className %}
-  {% set className = data.options.className %}
-{% elif data.manager.options.className %}
-  {% set className = data.manager.options.className %}
-{% endif %}
-
-{# oembed repopulates me #}
-{% if data.widget.video %}
+{% if data.widget.aposPlaceholder and data.manager.options.placeholderUrl %}
   <div
-    {% if className %} class="{{ className }}"{% endif %}
     data-apos-video-widget
-    data-apos-video-url={{ data.widget.video.url }}
+    data-apos-video-url="{{ data.manager.options.placeholderUrl }}"
   >
-    {% if data.widget.video.thumbnail %}
-    <img src="{{ data.widget.video.thumbnail }}" alt="{{ data.widget.video.thumbnail }}"/>
-    {% endif %}
   </div>
-{% elif data.user %}
-  <p {% if data.manager.options.className %} class="{{ data.manager.options.className }} {{ data.manager.options.className }}--error"{% endif %}>No video selected</p>
-{% endif %}
+{% else %}
+  {% if data.options.className %}
+    {% set className = data.options.className %}
+  {% elif data.manager.options.className %}
+    {% set className = data.manager.options.className %}
+  {% endif %}
+
+  {# oembed repopulates me #}
+  {% if data.widget.video %}
+    <div
+      {% if className %} class="{{ className }}"{% endif %}
+      data-apos-video-widget
+      data-apos-video-url={{ data.widget.video.url }}
+    >
+      {% if data.widget.video.thumbnail %}
+      <img src="{{ data.widget.video.thumbnail }}" alt="{{ data.widget.video.thumbnail }}"/>
+      {% endif %}
+    </div>
+  {% elif data.user %}
+    <p {% if data.manager.options.className %} class="{{ data.manager.options.className }} {{ data.manager.options.className }}--error"{% endif %}>No video selected</p>
+  {% endif %}
+{% endif %}