Merge pull request #16497 from craftcms/feature/prevent-autoplay-new

Add AnimationBlocker to prevent autoplay of GIFs and other potentially animated filetypes

Author: brandonkelly

CHANGELOG-WIP.md

@@ -10,6 +10,7 @@
 ### Accessibility
 - Improved the accessibility of Tags fields for screen readers. ([#16754](https://github.com/craftcms/cms/pull/16754))
 - Removed redundant ARIA roles and labels from reorder buttons. ([#16826](https://github.com/craftcms/cms/pull/16826))
+- Animated assets no longer have animated thumbnails. ([#16497](https://github.com/craftcms/cms/pull/16497))
 
 ### Content Management
 - Window scrolling is now blocked when a modal window is open. ([#16768](https://github.com/craftcms/cms/pull/16768))
@@ -47,6 +48,7 @@
 ### Extensibility
 - Global nav items and breadcrumbs can now have `aria-label` attributes via an `ariaLabel` property.
 - Editable tables now support `icon` columns.
+- Added `craft\base\Element::couldHaveAnimatedThumb()`.
 - Added `craft\base\ElementInterface::baseGqlType()`.
 - Added `craft\base\ElementInterface::getSerializedFieldValuesForDb()`.
 - Added `craft\base\Field::EVENT_DEFINE_ACTION_MENU_ITEMS`. ([#16779](https://github.com/craftcms/cms/discussions/16779))

src/base/Element.php

@@ -4184,6 +4184,7 @@ public function getThumbHtml(int $size): ?string
                     'sizes' => sprintf('calc(%srem/16)', $size),
                     'srcset' => sprintf('%s %sw, %s %sw', $thumbUrl, $size, $this->thumbUrl($size * 2), $size * 2),
                     'alt' => $this->thumbAlt(),
+                    'animated' => $this->couldHaveAnimatedThumb(),
                 ],
             ]);
         }
@@ -4264,6 +4265,17 @@ protected function hasRoundedThumb(): bool
         return false;
     }
 
+    /**
+     * Returns whether the element’s thumbnail is potentially animated.
+     *
+     * @return boolean
+     * @since 5.7.0
+     */
+    protected function couldHaveAnimatedThumb(): bool
+    {
+        return false;
+    }
+
     /**
      * @inheritdoc
      */

src/elements/Asset.php

@@ -2353,6 +2353,9 @@ public function getPreviewThumbImg(int $desiredWidth, int $desiredHeight): strin
             'sizes' => "{$thumbSizes[0][0]}px",
             'srcset' => implode(', ', $srcsets),
             'alt' => $this->thumbAlt(),
+            'data' => [
+                'animated' => $this->couldHaveAnimatedThumb(),
+            ],
         ]);
     }
 
@@ -2409,6 +2412,14 @@ public function getExtension(): string
         return pathinfo($this->_filename, PATHINFO_EXTENSION);
     }
 
+    /**
+     * @inheritdoc
+     */
+    protected function couldHaveAnimatedThumb(): bool
+    {
+        return $this->getExtension() === 'gif' || $this->getExtension() === 'webp';
+    }
+
     /**
      * Returns the file’s MIME type, if it can be determined.
      *
@@ -3392,6 +3403,7 @@ protected function htmlAttributes(string $context): array
                 'kind' => $this->kind,
                 'alt' => $this->alt,
                 'filename' => $this->filename,
+                'animated' => $this->couldHaveAnimatedThumb(),
             ],
         ];
 

src/translations/en/app.php

@@ -1187,6 +1187,7 @@
     'Password' => 'Password',
     'Past year' => 'Past year',
     'Past {num} days' => 'Past {num} days',
+    'Pause' => 'Pause',
     'Pay {price}' => 'Pay {price}',
     'Pending' => 'Pending',
     'Perform Craft CMS and plugin updates' => 'Perform Craft CMS and plugin updates',
@@ -1201,6 +1202,7 @@
     'Placeholder Text' => 'Placeholder Text',
     'Plain Text' => 'Plain Text',
     'Plane' => 'Plane',
+    'Play' => 'Play',
     'Please fix the following in your {file} file before proceeding:' => 'Please fix the following in your {file} file before proceeding:',
     'Please set a valid volume for storing the user photos in user settings page first.' => 'Please set a valid volume for storing the user photos in user settings page first.',
     'Please talk to your host/IT department about upgrading your server.' => 'Please talk to your host/IT department about upgrading your server.',

src/web/assets/animationblocker/AnimationBlockerAsset.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * @link https://craftcms.com/
+ * @copyright Copyright (c) Pixel & Tonic, Inc.
+ * @license https://craftcms.github.io/license/
+ */
+
+namespace craft\web\assets\animationblocker;
+
+use craft\web\AssetBundle;
+
+/**
+ * Asset bundle for the Animation Blocker class.
+ */
+class AnimationBlockerAsset extends AssetBundle
+{
+    /**
+     * @inheritdoc
+     */
+    public $sourcePath = __DIR__ . '/dist';
+
+    /**
+     * @inheritdoc
+     */
+    public $js = [
+        'AnimationBlocker.js',
+    ];
+}