Add infinity play option (#93)

* ft: added infinity play, added buttons; added muted * Fix video autoplay * Update CHANGELOG.md * Update CHANGELOG.md * Update auto play description to highlight that auto played video will be muted --------- Co-authored-by: asimonok <[email protected]> Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Feb 23, 2024 · 0272878 · 0272878
1 parent d3db3b0
commit 0272878
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,12 @@
 # Changelog
 
-## 4.2.0 (IN PROGRESS)
+## 4.2.0 (2024-02-22)
 
 ### Features / Enhancements
 
 - Update ESLint configuration and refactoring (#92)
 - Update dependencies and Actions (#94)
+- Add infinity play option (#93)
 
 ## 4.1.0 (2023-10-29)
 

diff --git a/src/components/ImagePanel/ImagePanel.tsx b/src/components/ImagePanel/ImagePanel.tsx
@@ -289,9 +289,11 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
   if (type === SupportedFileType.MP4 || type === SupportedFileType.WEBM) {
     return renderContainer(
       <video
+        muted={options.autoPlay}
         width={imageWidth || ''}
         height={imageHeight || ''}
         controls={options.controls}
+        loop={options.infinityPlay}
         autoPlay={options.autoPlay}
         data-testid={TEST_IDS.panel.video}
       >
@@ -305,7 +307,12 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
    */
   if (type === SupportedFileType.MP3 || type === SupportedFileType.OGG) {
     return renderContainer(
-      <audio controls={options.controls} autoPlay={options.autoPlay} data-testid={TEST_IDS.panel.audio}>
+      <audio
+        controls={options.controls}
+        autoPlay={options.autoPlay}
+        data-testid={TEST_IDS.panel.audio}
+        loop={options.infinityPlay}
+      >
         <source src={img} />
       </audio>
     );

diff --git a/src/constants/default.ts b/src/constants/default.ts
@@ -5,6 +5,7 @@ import { ImageScale, ImageSizeMode, PanelOptions, ZoomType } from '../types';
  */
 export const DEFAULT_OPTIONS: PanelOptions = {
   autoPlay: true,
+  infinityPlay: false,
   buttons: [],
   controls: true,
   description: '',

diff --git a/src/module.ts b/src/module.ts
@@ -179,7 +179,7 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
     .addRadio({
       path: 'autoPlay',
       name: 'Auto Play',
-      description: 'When enabled, the video and audio will automatically start playing.',
+      description: 'When enabled, the video and audio will automatically start playing without sound.',
       settings: {
         options: [
           { value: true, label: 'Enabled' },
@@ -188,6 +188,19 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
       },
       category: ['Video/Audio'],
       defaultValue: DEFAULT_OPTIONS.autoPlay,
+    })
+    .addRadio({
+      path: 'infinityPlay',
+      name: 'Infinity Play',
+      description: 'When enabled, the video and audio will be played back repeatedly.',
+      settings: {
+        options: [
+          { value: true, label: 'Enabled' },
+          { value: false, label: 'Disabled' },
+        ],
+      },
+      category: ['Video/Audio'],
+      defaultValue: DEFAULT_OPTIONS.infinityPlay,
     });
 
   return builder;

diff --git a/src/types/panel.ts b/src/types/panel.ts
@@ -98,6 +98,13 @@ export interface PanelOptions {
    */
   autoPlay: boolean;
 
+  /**
+   * Infinity Play
+   *
+   * @type {boolean}
+   */
+  infinityPlay: boolean;
+
   /**
    * Toolbar
    *