sync-from-video UX improvements

- Display subtitle file name in video element when it's loaded - Fade-in asbplayer logo on drag over video element
killergerbah · May 25, 2021 · 3ca2f39 · 3ca2f39
1 parent 29534f3
commit 3ca2f39
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/client/src/components/Player.js b/client/src/components/Player.js
@@ -207,7 +207,7 @@ export default function Player(props) {
 
                     if (subtitlesRef.current) {
                         channel.subtitleSettings(settingsProvider.subtitleSettings);
-                        channel.subtitles(subtitlesRef.current);
+                        channel.subtitles(subtitlesRef.current, subtitleFile?.name);
                     }
 
                     channel.condensedModeToggle(condensedModeEnabledRef.current);
@@ -473,12 +473,12 @@ export default function Player(props) {
                 displayTime: timeDuration(s.originalStart + offset, length)
             }));
 
-            videoRef.current?.subtitles(newSubtitles);
+            videoRef.current?.subtitles(newSubtitles, subtitleFile?.name);
 
             return newSubtitles;
         });
 
-    }, [offset, offsetRef]);
+    }, [subtitleFile, offset, offsetRef]);
 
     const handleVolumeChange = useCallback((v) => {
         if (audioRef.current) {

diff --git a/client/src/services/VideoChannel.js b/client/src/services/VideoChannel.js
@@ -178,8 +178,8 @@ export default class VideoChannel {
         this.protocol.postMessage({command: 'audioTrackSelected', id: id});
     }
 
-    subtitles(subtitles) {
-        this.protocol.postMessage({command: 'subtitles', value: subtitles});
+    subtitles(subtitles, subtitleFileName) {
+        this.protocol.postMessage({command: 'subtitles', value: subtitles, name: subtitleFileName});
     }
 
     subtitleSettings(settings) {

diff --git a/extension/video.css b/extension/video.css
@@ -47,6 +47,21 @@
     pointer-events: none;
 }
 
+.asbplayer-drag-image-fade-in {
+    animation-duration: 0.2s;
+    animation-name: asbplayer-fade-in;
+}
+
+@keyframes asbplayer-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
 .asbplayer-drag-image-container {
     position: absolute;
     pointer-events: none;

diff --git a/extension/video.js b/extension/video.js
@@ -190,7 +190,7 @@ class Binding {
                         break;
                     case 'subtitles':
                         this.subtitleContainer.subtitles = request.message.value;
-                        this.subtitleContainer.showLoadedMessage("[Subtitles Loaded]");
+                        this.subtitleContainer.showLoadedMessage(request.message.name || "[Subtitles Loaded]");
                         break;
                     case 'subtitleSettings':
                         this.subtitleContainer.subtitleSettings = request.message.value;
@@ -721,6 +721,7 @@ class DragContainer {
             e.preventDefault();
             this.dragEnterElement = null;
             this._imageElement().classList.add("asbplayer-hide");
+            this._imageElement().classList.remove("asbplayer-drag-image-fade-in");
             this._dragElement().classList.remove("asbplayer-drag-zone-dragging");
 
             if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) {
@@ -748,6 +749,7 @@ class DragContainer {
             e.stopPropagation();
             this.dragEnterElement = e.target;
             this._imageElement().classList.remove("asbplayer-hide");
+            this._imageElement().classList.add("asbplayer-drag-image-fade-in");
         };
 
         this.bodyDragEnterListener = (e) => {
@@ -762,6 +764,7 @@ class DragContainer {
 
             if (this.dragEnterElement === e.target) {
                 this._imageElement().classList.add("asbplayer-hide");
+                this._imageElement().classList.remove("asbplayer-drag-image-fade-in");
                 this._dragElement().classList.remove("asbplayer-drag-zone-dragging");
             }
         };