FEATURE VideoSlide enhancements

dynamic · Sep 8, 2023 · d083a2e · d083a2e
1 parent 46f5426
commit d083a2e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/src/Model/VideoSlide.php b/src/Model/VideoSlide.php
@@ -9,6 +9,7 @@
  * Class \Dynamic\Carousel\Model\VideoSlide
  *
  * @property string $VideoType
+ * @property string $VideoEmbed
  * @property int $VideoID
  * @method File Video()
  */
@@ -34,6 +35,7 @@ class VideoSlide extends Slide
      */
     private static $db = [
         'VideoType' => 'Enum(["Embed","Native"], "Embed")',
+        'VideoEmbed' => 'Text',
     ];
 
     /**
@@ -56,7 +58,11 @@ class VideoSlide extends Slide
     public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {
-            //$fields->
+            $fields->dataFieldByName('Video')
+                ->displayIf('VideoType')->isEqualTo('Native');
+
+            $fields->dataFieldByName('VideoEmbed')
+                ->displayIf('VideoType')->isEqualTo('Embed');
         });
 
         return parent::getCMSFields();

diff --git a/templates/Includes/VideoSlide.ss b/templates/Includes/VideoSlide.ss
@@ -0,0 +1,46 @@
+<div class="embed-responsive embed-responsive-16by9">
+    <% if $VideoType == Embed %>
+        $VideoEmbed.Raw
+    <% else_if $VideoType == Native %>
+        $Video
+    <% end_if %>
+</div>
+<script>
+    var player;
+
+    window.onYouTubeIframeAPIReady = function() {
+        var iframe = document.querySelector('#carousel-1 .embed-responsive-item');
+        player = new YT.Player(iframe, {
+            events: {
+                'onStateChange': onPlayerStateChange
+            }
+        });
+    }
+
+    function onPlayerStateChange(event) {
+        var carouselElement = document.getElementById('carousel-1');
+        var carouselInstance = new bootstrap.Carousel(carouselElement);
+
+        if (event.data == YT.PlayerState.PLAYING) {
+            carouselInstance.pause();
+        } else if (event.data == YT.PlayerState.ENDED) {
+            carouselInstance.cycle();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        var tag = document.createElement('script');
+        tag.src = "https://www.youtube.com/iframe_api";
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+        var carouselElement = document.getElementById('carousel-1');
+        carouselElement.addEventListener('slid.bs.carousel', function(e) {
+            if (e.relatedTarget.querySelector('iframe') && player.getPlayerState() !== YT.PlayerState.PLAYING) {
+                player.playVideo();
+            }
+        });
+    });
+</script>
+
+