Add posibility of configuring video options (#13)

alecslupu-pfa · May 4, 2023 · 50e85b4 · 50e85b4
1 parent 2be3919
commit 50e85b4
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 29 deletions.
diff --git a/app/cells/decidim/slider/homepage/main/show.erb b/app/cells/decidim/slider/homepage/main/show.erb
@@ -3,7 +3,7 @@
     <div class="row">
       <div class="column">
 
-        <div class="orbit" role="region" data-orbit id="slider-block">
+        <div class="orbit" role="region" data-orbit id="slider-block" <%= settings %>>
           <div class="orbit-wrapper">
             <div class="orbit-controls">
 

diff --git a/app/cells/decidim/slider/homepage/main_cell.rb b/app/cells/decidim/slider/homepage/main_cell.rb
@@ -14,6 +14,12 @@ def show
 
         private
 
+        def settings
+          {
+            "data-auto-play": model.settings.autoplay
+          }.map { |k, v| "#{k}=\"#{v}\"" }.join(" ")
+        end
+
         def cells
           return @cells if defined?(@cells)
 

diff --git a/app/cells/decidim/slider/homepage/settings/show.erb b/app/cells/decidim/slider/homepage/settings/show.erb
@@ -1,3 +1,4 @@
 <% form.fields_for :settings, form.object.settings do |settings_fields| %>
   <%= settings_fields.text_field :upload_size, label: t("decidim.slider.homepage.settings.upload_size") %>
+  <%= settings_fields.check_box :autoplay, label: t("decidim.slider.homepage.settings.autoplay") %>
 <% end %>
diff --git a/app/cells/decidim/slider/tabs/video_text/main/show.erb b/app/cells/decidim/slider/tabs/video_text/main/show.erb
@@ -3,7 +3,7 @@
     <div class="column orbit-figure">
       <div class="row small-up-1 smallmedium-up-2">
         <div class="column text-center">
-          <video aria-label="<%= accessibility_label %>" width="512" height="270" controls autoplay muted loop>
+          <video aria-label="<%= accessibility_label %>" width="512" height="270" <%= settings %>>
             <source src="<%= video_url %>" type="<%= content_type %>">
             Your browser does not support the video tag.
           </video>

diff --git a/app/cells/decidim/slider/tabs/video_text/main_cell.rb b/app/cells/decidim/slider/tabs/video_text/main_cell.rb
@@ -12,6 +12,16 @@ def uploader_name
           def video_url
             asset.path
           end
+
+          def settings
+            {
+              controls: model.settings.controls,
+              autoplay: model.settings.autoplay,
+              muted: model.settings.muted,
+              loop: model.settings.loop,
+              playsinline: model.settings.playsinline
+            }.select { |_, v| v }.keys.join(" ")
+          end
         end
       end
     end

diff --git a/app/cells/decidim/slider/tabs/video_text/settings/show.erb b/app/cells/decidim/slider/tabs/video_text/settings/show.erb
@@ -14,6 +14,16 @@
   <%= settings_fields.translated :text_field, :secondary_cta, label: t("decidim.slider.tabs.video_text.settings.secondary_cta") %>
   <%= settings_fields.translated :text_field, :secondary_url, label: t("decidim.slider.tabs.video_text.settings.secondary_url") %>
 
+  <fieldset>
+    <legend><%= t("decidim.slider.tabs.video_text.settings.video_options") %></legend>
+
+    <%= settings_fields.check_box :loop, label: t("decidim.slider.tabs.video_text.settings.loop") %>
+    <%= settings_fields.check_box :autoplay, label: t("decidim.slider.tabs.video_text.settings.autoplay") %>
+    <%= settings_fields.check_box :muted, label: t("decidim.slider.tabs.video_text.settings.muted") %>
+    <%= settings_fields.check_box :controls, label: t("decidim.slider.tabs.video_text.settings.controls") %>
+    <%= settings_fields.check_box :playsinline, label: t("decidim.slider.tabs.video_text.settings.playsinline") %>
+  </fieldset>
+
   <% form.fields_for :images, form.object.images do |images_fields| %>
     <%= images_fields.upload :video, label: t("decidim.slider.tabs.video_text.settings.video") %>
   <% end %>

diff --git a/app/packs/src/decidim/slider/orbit_slider.js b/app/packs/src/decidim/slider/orbit_slider.js
@@ -1,31 +1,36 @@
 $(() => {
-  $(".orbit-previous").after(`<button class="control" aria-label="button-control">`);
-  const plugin = $('.orbit').data("zfPlugin");
+    $(".orbit-previous").after(`<button class="control" aria-label="button-control">`);
+    const plugin = $('.orbit').data("zfPlugin");
 
-   $(document.body).on( "click", ".orbit-bullets > .control", function() {
-    $(this).toggleClass("pause");
+    if (typeof (plugin.timer) !== "undefined") {
+        $(document.body).on("click", ".orbit-bullets > .control", function () {
+            $(this).toggleClass("pause");
 
-    if ($(this).hasClass("pause")) {
-      plugin.options.autoPlay = false;
-      plugin.$element.data('clickedOn', true);
-      plugin.timer.pause();
-    } else {
-      plugin.$element.data('clickedOn', false);
-      plugin.options.autoPlay = true;
-      plugin.timer.restart();
+            if ($(this).hasClass("pause")) {
+                plugin.options.autoPlay = false;
+                plugin.$element.data('clickedOn', true);
+                plugin.timer.pause();
+            } else {
+                plugin.$element.data('clickedOn', false);
+                plugin.options.autoPlay = true;
+                plugin.timer.restart();
+            }
+
+        });
     }
-  });
 
-  window.slidePromises = [];
+    window.slidePromises = [];
 
-  $("#slider-block .orbit-previous, #slider-block .orbit-next, #slider-block .orbit-bullets > button")
-    .attr('tabindex', 0)
-    .on('click.zf.orbit touchend.zf.orbit', function (e) {
-      const plugin = $('.orbit').data("zfPlugin");
-      plugin.options.autoPlay = false;
-      plugin.$element.data('clickedOn', true);
-      plugin.timer.pause();
-    });
+    $("#slider-block .orbit-previous, #slider-block .orbit-next, #slider-block .orbit-bullets > button")
+        .attr('tabindex', 0)
+        .on('click.zf.orbit touchend.zf.orbit', function (e) {
+            const plugin = $('.orbit').data("zfPlugin");
+            if (typeof (plugin.timer) !== "undefined") {
+                plugin.options.autoPlay = false;
+                plugin.$element.data('clickedOn', true);
+                plugin.timer.pause();
+            }
+        });
 
     $(".orbit").on("beforeslidechange.zf.orbit", function (event, currentSlide, newSlide) {
         var currentVideo = currentSlide[0].querySelector('video');
@@ -35,14 +40,14 @@ $(() => {
         }
 
         if (currentVideo) {
-            if (slidePromises[currentSlide[0].dataset.slide] !== undefined){
+            if (slidePromises[currentSlide[0].dataset.slide] !== undefined) {
                 slidePromises[currentSlide[0].dataset.slide].then(_ => {
                     currentVideo.pause();
                 })
-                .catch(error => {
-                    // Auto-play was prevented
-                    // Show paused UI.
-                });
+                    .catch(error => {
+                        // Auto-play was prevented
+                        // Show paused UI.
+                    });
             }
         }
     });

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -30,6 +30,7 @@ en:
           previous_slide: Previous Slide
           slide_details: Slide Details
         settings:
+          autoplay: Autoplay
           upload_size: Upload Settings (MB)
       tabs:
         image:
@@ -45,10 +46,16 @@ en:
         video_text:
           settings:
             accessibility_label: Accessibility Label
+            autoplay: Autoplay
             content: Content
+            controls: Display Controls
             cta: Call to Action
+            loop: Loop
+            muted: Muted
+            playsinline: Play video inline
             secondary_cta: Secondary Call to Action
             secondary_url: Secondary URL
             title: Title
             url: URL
             video: Video
+            video_options: Video Options
diff --git a/lib/decidim/slider/engine.rb b/lib/decidim/slider/engine.rb
@@ -24,6 +24,7 @@ class Engine < ::Rails::Engine
 
           content_block.settings do |settings|
             settings.attribute :upload_size, type: :integer, default: 500
+            settings.attribute :autoplay, type: :boolean, default: true
           end
         end
       end
@@ -72,6 +73,12 @@ class Engine < ::Rails::Engine
             settings.attribute :accessibility_label, type: :text, translated: true, required: false
             settings.attribute :secondary_cta, type: :text, translated: true, required: false
             settings.attribute :secondary_url, type: :text, translated: true, required: false
+
+            settings.attribute :loop, type: :boolean, default: true
+            settings.attribute :autoplay, type: :boolean, default: true
+            settings.attribute :muted, type: :boolean, default: true
+            settings.attribute :controls, type: :boolean, default: true
+            settings.attribute :playsinline, type: :boolean, default: true
           end
         end
       end