Updated styles and fixed video playing in the background while switch…

…ing to next media.

- Improved margins around the embeds.
- If a video is playing and the user switch to the next media, it is stopped.
- Updated Makefile for the new standard dart-sass.

Makefile

@@ -1,5 +1,5 @@
 styles:
-	sass -t compressed --sourcemap=auto --unix-newlines assets/scss/sse.scss > assets/css-compiled/sse.min.css
+	sass -s compressed --no-source-map assets/scss/sse.scss > assets/css-compiled/sse.min.css
 
 watch:
-	sass -t compressed --watch assets/scss/sse.scss:assets/css-compiled/sse.min.css
+	sass -s compressed --source-map --watch assets/scss/sse.scss:assets/css-compiled/sse.min.css

assets/js/sse.js

@@ -32,10 +32,11 @@ document.addEventListener('DOMContentLoaded', function (e)
 
     function switchStatusImage(container, link, direction)
     {
+        container.dispatchEvent(new Event('sse-switch-media'));
+
         let activeElement = container.querySelector('.sse-status-image.is-active');
         let futureElement;
 
-
         if (direction === 'prev')
         {
             futureElement = activeElement.previousElementSibling;
@@ -69,6 +70,7 @@ document.addEventListener('DOMContentLoaded', function (e)
         let badge = container.querySelector('.sse-status-image-badge');
         let dots  = container.querySelector('.sse-status-image-progress-dots');
         let play_handle = container.querySelector('.sse-status-image-handle-play');
+        let figure = container.parentElement;
 
         if (!container.dataset.videoActive || container.dataset.videoActive === 'false')
         {
@@ -77,6 +79,7 @@ document.addEventListener('DOMContentLoaded', function (e)
             image.classList.add('is-hidden');
             badge.classList.add('is-hidden');
             play_handle.classList.add('is-hidden');
+            figure.classList.add('is-playing');
 
             if (dots) dots.classList.add('is-hidden');
 
@@ -92,17 +95,21 @@ document.addEventListener('DOMContentLoaded', function (e)
 
             video.play();
 
-            video.addEventListener('ended', function(e)
+            let end_video = function(e)
             {
                 video.classList.remove('is-active');
                 image.classList.remove('is-hidden');
                 badge.classList.remove('is-hidden');
                 play_handle.classList.remove('is-hidden');
+                figure.classList.remove('is-playing');
 
                 if (dots) dots.classList.remove('is-hidden');
 
                 container.dataset.videoActive = 'false';
-            });
+            }
+
+            video.addEventListener('ended', end_video);
+            figure.addEventListener('sse-switch-media', end_video);
         }
         else if (container.classList.contains('sse-status-image-animated-gif'))
         {

assets/scss/sse.scss

@@ -76,6 +76,10 @@ $instagram-line-height: 18px;
 .static-social-embed {
     @import 'sse/minireset';
     @import 'sse/utilities';
+
+    margin: 1rem auto;
+    padding: 0;
+
     @import 'sse/errors';
     @import 'sse/twitter';
     @import 'sse/mastodon';

assets/scss/sse/_twitter.scss

@@ -1,7 +1,4 @@
 &.sse-status {
-    margin: auto;
-    padding: 0;
-
     width: 66%;
     max-width: 800px;
 
@@ -182,6 +179,10 @@
                 &.is-hidden {
                     display: none;
                 }
+
+                &:hover {
+                    text-decoration: none;
+                }
             }
 
             .sse-status-image-badge {
@@ -231,6 +232,7 @@
             &:hover {
                 color: $twitter-blue;
                 background-image: linear-gradient(to left, rgba(lighten($twitter-blue, 42%), .4), transparent 100%);
+                text-decoration: none;
             }
         }
 
@@ -255,6 +257,17 @@
                 background-color: white;
             }
         }
+
+        &.is-playing {
+            .sse-status-image-handle-next, .sse-status-image-handle-prev {
+                height: calc(100% - 40px);
+                color: transparent;
+
+                &:hover {
+                    color: $twitter-blue;
+                }
+            }
+        }
     }
 
     p.sse-status-content, div.sse-status-content {