Add posibility to skip to next slide when video ends (#15)

alecslupu-pfa · May 4, 2023 · d2a2090 · d2a2090
1 parent f99d06b
commit d2a2090
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 1 deletion.
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" <%= settings %>>
+          <video aria-label="<%= accessibility_label %>" width="512" height="270" <%= settings %> id="videotag<%= model.id %>">
             <source src="<%= video_url %>" type="<%= content_type %>">
             <%= t("decidim.slider.tabs.video_text.main.no_video_support") %>
           </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
@@ -13,7 +13,20 @@ def video_url
             asset.path
           end
 
+          def skip_when_finished?
+            model.settings.skip_when_finished && !model.settings.loop
+          end
+
           def settings
+            [
+              video_settings,
+              skip_when_finished? ? "data-skip-when-finished" : nil
+            ].compact.join(" ")
+          end
+
+          protected
+
+          def video_settings
             {
               controls: model.settings.controls,
               autoplay: model.settings.autoplay,

diff --git a/app/cells/decidim/slider/tabs/video_text/settings/show.erb b/app/cells/decidim/slider/tabs/video_text/settings/show.erb
@@ -22,6 +22,7 @@
     <%= 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") %>
+    <%= settings_fields.check_box :skip_when_finished, label: t("decidim.slider.tabs.video_text.settings.skip_when_finished") %>
   </fieldset>
 
   <% form.fields_for :images, form.object.images do |images_fields| %>

diff --git a/app/packs/src/decidim/slider/orbit_slider.js b/app/packs/src/decidim/slider/orbit_slider.js
@@ -1,4 +1,10 @@
 $(() => {
+    $("*[data-skip-when-finished]").each(function (index, elemet) {
+        elemet.addEventListener('ended', function () {
+            document.querySelector('.orbit').querySelector(".orbit-next").click();
+        });
+    });
+
     $(".orbit-previous").after(`<button class="control" aria-label="button-control">`);
     const plugin = $('.orbit').data("zfPlugin");
 

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -57,6 +57,7 @@ en:
             playsinline: Play video inline
             secondary_cta: Secondary Call to Action
             secondary_url: Secondary URL
+            skip_when_finished: Skip next slide when video is finished
             title: Title
             url: URL
             video: Video

diff --git a/lib/decidim/slider/engine.rb b/lib/decidim/slider/engine.rb
@@ -79,6 +79,8 @@ class Engine < ::Rails::Engine
             settings.attribute :muted, type: :boolean, default: true
             settings.attribute :controls, type: :boolean, default: true
             settings.attribute :playsinline, type: :boolean, default: true
+
+            settings.attribute :skip_when_finished, type: :boolean, default: true
           end
         end
       end