Add Lottie animation content element

app/assets/stylesheets/pageflow/editor/file_thumbnails.scss

@@ -1,6 +1,14 @@
 .file_thumbnail {
+  position: relative;
   background-size: cover;
 
+  // Fills the box just like the background image would, so file types
+  // can render a thumbnail of their own.
+  &-custom {
+    position: absolute;
+    inset: 0;
+  }
+
   .pictogram {
     width: 100%;
     height: 100%;

app/models/concerns/pageflow/reusable_file.rb

@@ -4,7 +4,7 @@ module ReusableFile # rubocop:todo Style/Documentation
 
     included do
       belongs_to :uploader, class_name: 'User', optional: true
-      belongs_to :entry, optional: true
+      belongs_to :entry, class_name: 'Pageflow::Entry', optional: true
       belongs_to :parent_file, polymorphic: true, foreign_type: :parent_file_model_type,
                                optional: true
 

app/models/concerns/pageflow/uploadable_file.rb

@@ -20,7 +20,7 @@ module UploadableFile # rubocop:todo Style/Documentation
                           ))
 
       validates_attachment_presence :attachment_on_s3
-      validates_attachment_file_name :attachment_on_s3, matches: %r{^[^/\\]+\.\w{3,4}$}
+      validates_attachment_file_name :attachment_on_s3, matches: %r{^[^/\\]+\.\w{3,6}$}
       do_not_validate_attachment_file_type :attachment_on_s3
 
       state_machine initial: 'uploading' do

db/migrate/20260810000000_create_pageflow_scrolled_lottie_files.rb

@@ -0,0 +1,24 @@
+class CreatePageflowScrolledLottieFiles < ActiveRecord::Migration[7.1]
+  def change
+    create_table :pageflow_scrolled_lottie_files do |t|
+      t.belongs_to :entry, index: true
+      t.belongs_to :uploader, index: true
+
+      t.bigint 'parent_file_id'
+      t.string 'parent_file_model_type'
+
+      t.string 'state'
+      t.string 'rights'
+
+      t.string 'attachment_on_s3_file_name'
+      t.string 'attachment_on_s3_content_type'
+      t.bigint 'attachment_on_s3_file_size'
+      t.datetime 'attachment_on_s3_updated_at'
+
+      t.timestamps
+
+      t.index ['parent_file_id', 'parent_file_model_type'],
+              name: 'index_lottie_files_on_parent_id_and_parent_model_type'
+    end
+  end
+end

entry_types/scrolled/app/models/pageflow_scrolled/lottie_file.rb

@@ -0,0 +1,6 @@
+module PageflowScrolled
+  # @api private
+  class LottieFile < Pageflow::ApplicationRecord
+    include Pageflow::UploadableFile
+  end
+end

entry_types/scrolled/app/models/pageflow_scrolled/lottie_file_url_templates.rb

@@ -0,0 +1,16 @@
+module PageflowScrolled
+  # @api private
+  class LottieFileUrlTemplates
+    def call
+      {
+        original: Pageflow::UrlTemplate.from_attachment(example_file.attachment, :original)
+      }
+    end
+
+    private
+
+    def example_file
+      @example_file ||= LottieFile.new(id: 0, file_name: ':basename.:extension')
+    end
+  end
+end

entry_types/scrolled/config/locales/de.yml

@@ -18,6 +18,10 @@ de:
           name:
             one: Bild
             other: Bilder
+        lottie_files:
+          name:
+            one: Lottie-Animation
+            other: Lottie-Animationen
         other_files:
           name:
             one: Andere
@@ -26,6 +30,9 @@ de:
           name:
             one: Video
             other: Videos
+      files:
+        tabs:
+          lottie_files: Lottie
       widgets:
         attributes:
           defaultNavigation:
@@ -77,6 +84,8 @@ de:
       feature_name: iframe-Embed Inhaltselement
     legacy_social_embed_content_elements:
       feature_name: Legacy Twitter und TikTok Inhaltselemente
+    lottie_animation_content_element:
+      feature_name: Lottie-Animation-Inhaltselement
     scrolled_entry_fragment_caching:
       feature_name: Pageflow-Next-Fragment-Caching
     social_embed_content_element:
@@ -761,6 +770,20 @@ de:
           name: Video
           tabs:
             general: Video
+        lottieAnimation:
+          attributes:
+            id:
+              label: Animation
+            playbackMode:
+              inline_help_html: Bestimmt, wie die Animation abgespielt wird, sobald sie sichtbar wird:<ul><li><strong>Endlosschleife:</strong> Immer wieder, solange sie sichtbar ist.</li><li><strong>Einmal abspielen:</strong> Einmal von Anfang bis Ende.</li></ul>
+              label: Wiedergabe-Modus
+              values:
+                loop: Endlosschleife
+                playOnce: Einmal abspielen
+          description: Eine als dotLottie-Datei exportierte Animation einbinden
+          name: Lottie-Animation
+          tabs:
+            general: Lottie-Animation
         question:
           attributes:
             expandByDefault:

entry_types/scrolled/config/locales/en.yml

@@ -18,6 +18,10 @@ en:
           name:
             one: Image
             other: Images
+        lottie_files:
+          name:
+            one: Lottie animation
+            other: Lottie animations
         other_files:
           name:
             one: Other
@@ -26,6 +30,9 @@ en:
           name:
             one: Video
             other: Videos
+      files:
+        tabs:
+          lottie_files: Lottie
       widgets:
         attributes:
           defaultNavigation:
@@ -77,6 +84,8 @@ en:
       feature_name: iframe embed content element
     legacy_social_embed_content_elements:
       feature_name: Legacy Twitter and TikTok content elements
+    lottie_animation_content_element:
+      feature_name: Lottie animation content element
     scrolled_entry_fragment_caching:
       feature_name: Pageflow Next Fragment Caching
     social_embed_content_element:
@@ -746,6 +755,20 @@ en:
           name: Video
           tabs:
             general: Video
+        lottieAnimation:
+          attributes:
+            id:
+              label: Animation
+            playbackMode:
+              inline_help_html: Determines how the animation is played once it becomes visible:<ul><li><strong>Loop:</strong> Again and again as long as it is visible.</li><li><strong>Play once:</strong> Once from start to end.</li></ul>
+              label: Playback Mode
+              values:
+                loop: Loop
+                playOnce: Play once
+          description: Embed an animation exported as dotLottie file
+          name: Lottie animation
+          tabs:
+            general: Lottie animation
         question:
           attributes:
             expandByDefault:

entry_types/scrolled/lib/pageflow_scrolled.rb

@@ -7,6 +7,13 @@ def plugin
       PageflowScrolled::Plugin.new
     end
 
+    def lottie_file_type
+      Pageflow::FileType.new(model: 'PageflowScrolled::LottieFile',
+                             collection_name: 'lottie_files',
+                             url_templates: LottieFileUrlTemplates.new,
+                             top_level_type: true)
+    end
+
     def entry_type
       Pageflow::EntryType.new(name: 'scrolled',
                               frontend_app: PageflowScrolled::EntriesController.action(:show),

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -204,6 +204,15 @@ def configure(config)
           )
         end
 
+        c.features.register('lottie_animation_content_element') do |feature_config|
+          feature_config.file_types.register(PageflowScrolled.lottie_file_type)
+
+          feature_config.additional_frontend_packs.register(
+            'pageflow-scrolled/contentElements/lottieAnimation-frontend',
+            content_element_type_names: ['lottieAnimation']
+          )
+        end
+
         c.features.register('datawrapper_chart_embed_opt_in')
         c.features.enable_by_default('datawrapper_chart_embed_opt_in')
         c.features.register('iframe_embed_content_element')

entry_types/scrolled/package/.eslintrc.js

@@ -7,6 +7,10 @@ module.exports = {
   ],
   "rules": {
     "no-trailing-spaces": "error",
+    // The import resolver predates package exports maps and thus
+    // cannot resolve subpaths like
+    // '@lottiefiles/dotlottie-web/dotlottie-player.wasm'.
+    "import/no-unresolved": ["error", {"ignore": ["\\.wasm$"]}],
     // react-app enables no-unused-expressions, but ESLint 6 predates
     // ChainExpression and flags optional-chaining call statements like
     // `node?.focus()` as unused. The other packages do not enable the rule.

entry_types/scrolled/package/config/webpack.js

@@ -1,4 +1,22 @@
 module.exports = {
+  module: {
+    rules: [
+      {
+        // Nested in oneOf to keep the rule free of a top level `type`
+        // property. Host application webpack configs generated by the
+        // install generator use `mergeWithRules` to match rules by
+        // `type` and would otherwise replace the `test` below.
+        oneOf: [
+          {
+            // Emit the WebAssembly module of the dotLottie player as
+            // asset, so that it does not have to be loaded from a CDN.
+            test: /\.wasm$/,
+            type: 'asset/resource'
+          }
+        ]
+      }
+    ]
+  },
   resolve: {
     alias: {
       // By default Video.js now includes the http-streaming
@@ -49,6 +67,12 @@ module.exports = {
         'pageflow-scrolled/contentElements/inlineBeforeAfter-frontend.css'
       ]
     },
+    'pageflow-scrolled/contentElements/lottieAnimation-frontend': {
+      import: [
+        'pageflow-scrolled/contentElements/lottieAnimation-frontend',
+        'pageflow-scrolled/contentElements/lottieAnimation-frontend.css'
+      ]
+    },
     'pageflow-scrolled/widgets/defaultNavigation': {
       import: [
         'pageflow-scrolled/widgets/defaultNavigation',

entry_types/scrolled/package/contentElements-server.js

@@ -1,6 +1,7 @@
 import 'pageflow-scrolled/contentElements-frontend';
 import 'pageflow-scrolled/contentElements/hotspots-frontend';
 import 'pageflow-scrolled/contentElements/inlineBeforeAfter-frontend';
+import 'pageflow-scrolled/contentElements/lottieAnimation-frontend';
 import 'pageflow-scrolled/contentElements/socialEmbed-frontend';
 import 'pageflow-scrolled/contentElements/tikTokEmbed-frontend';
 import 'pageflow-scrolled/contentElements/twitterEmbed-frontend';

entry_types/scrolled/package/jest.config.js

@@ -23,6 +23,8 @@ module.exports = {
   testURL: 'https://story.example.com',
 
   moduleNameMapper: {
+    '\\.wasm$': '<rootDir>/spec/support/jest/wasm-url-stub',
+
     '^pageflow-scrolled/contentElements-frontend$': '<rootDir>/src/contentElements/frontend',
     "^pageflow-scrolled/editor\\.css$": "<rootDir>/spec/support/jest/editor-css-stub",
     "^pageflow-scrolled/review\\.css$": "<rootDir>/spec/support/jest/review-css-stub",

entry_types/scrolled/package/package.json

@@ -10,6 +10,7 @@
     "@egjs/view360": "^3.4.3",
     "@floating-ui/react": "https://github.com/tf/floating-ui-react#react-16-focus-fix",
     "@headlessui/react": "^1.6.6",
+    "@lottiefiles/dotlottie-web": "^0.79.0",
     "classnames": "^2.3.2",
     "core-js": "^3.6.5",
     "core-js-pure": "^3.0.0",