build

nielsboogaard · Feb 5, 2021 · ffc26e0 · ffc26e0
1 parent 9c62697
commit ffc26e0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/dist/filepond-plugin-media-preview.esm.js b/dist/filepond-plugin-media-preview.esm.js
@@ -132,14 +132,26 @@ const createMediaView = (_) =>
     tag: 'div',
     ignoreRect: true,
     create: ({ root, props }) => {
-      const { id } = props;
+      const attributes = root.query('GET_MEDIA_ELEMENT_ATTRIBUTES');
+
+      const attrsList = Object.keys(attributes);
+
+      console.log({ attributes });
 
       // get item
       const item = root.query('GET_ITEM', { id: props.id });
       let tagName = isPreviewableAudio(item.file) ? 'audio' : 'video';
 
       root.ref.media = document.createElement(tagName);
-      root.ref.media.setAttribute('controls', true);
+
+      attrsList.forEach((attribute) => {
+        // nulls and false attributes won't be passed
+        // as soon as text is considered as truthy value
+        if (!attributes[attribute]) return;
+
+        root.ref.media.setAttribute(attribute, attributes[attribute]);
+      });
+
       root.element.appendChild(root.ref.media);
 
       if (isPreviewableAudio(item.file)) {
@@ -165,8 +177,6 @@ const createMediaView = (_) =>
     },
     write: _.utils.createRoute({
       DID_MEDIA_PREVIEW_LOAD: ({ root, props }) => {
-        const { id } = props;
-
         // get item
         const item = root.query('GET_ITEM', { id: props.id });
         if (!item) return;
@@ -250,6 +260,7 @@ const createMediaWrapperView = (_) => {
 const plugin = (fpAPI) => {
   const { addFilter, utils } = fpAPI;
   const { Type, createRoute } = utils;
+
   const mediaWrapperView = createMediaWrapperView(fpAPI);
 
   // called for each view that is created right after the 'create' method
@@ -311,6 +322,7 @@ const plugin = (fpAPI) => {
     options: {
       allowVideoPreview: [true, Type.BOOLEAN],
       allowAudioPreview: [true, Type.BOOLEAN],
+      mediaElementAttributes: [{ controls: true }, Type.OBJECT],
     },
   };
 };

diff --git a/dist/filepond-plugin-media-preview.esm.min.js b/dist/filepond-plugin-media-preview.esm.min.js
diff --git a/dist/filepond-plugin-media-preview.js b/dist/filepond-plugin-media-preview.js
@@ -150,14 +150,23 @@
       tag: 'div',
       ignoreRect: true,
       create: ({ root, props }) => {
-        const { id } = props; // get item
+        const attributes = root.query('GET_MEDIA_ELEMENT_ATTRIBUTES');
+        const attrsList = Object.keys(attributes);
+        console.log({
+          attributes,
+        }); // get item
 
         const item = root.query('GET_ITEM', {
           id: props.id,
         });
         let tagName = isPreviewableAudio(item.file) ? 'audio' : 'video';
         root.ref.media = document.createElement(tagName);
-        root.ref.media.setAttribute('controls', true);
+        attrsList.forEach((attribute) => {
+          // nulls and false attributes won't be passed
+          // as soon as text is considered as truthy value
+          if (!attributes[attribute]) return;
+          root.ref.media.setAttribute(attribute, attributes[attribute]);
+        });
         root.element.appendChild(root.ref.media);
 
         if (isPreviewableAudio(item.file)) {
@@ -180,8 +189,7 @@
       },
       write: _.utils.createRoute({
         DID_MEDIA_PREVIEW_LOAD: ({ root, props }) => {
-          const { id } = props; // get item
-
+          // get item
           const item = root.query('GET_ITEM', {
             id: props.id,
           });
@@ -321,6 +329,12 @@
       options: {
         allowVideoPreview: [true, Type.BOOLEAN],
         allowAudioPreview: [true, Type.BOOLEAN],
+        mediaElementAttributes: [
+          {
+            controls: true,
+          },
+          Type.OBJECT,
+        ],
       },
     };
   }; // fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags