Merge pull request #3441 from celestiancoder/LB-1488-ALLOW-YT-VIDEO-TO-BE-RESIZED

LB-1488: Allow Youtube video to be resized

Author: MonkeyDo

frontend/css/sass/brainzplayer.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "sass:color";
 
+@import "~react-resizable/css/styles.css";
+
 $primary-color: $listenbrainz-blue;
 $brainzplayer-height: 60px;
 $brainzplayer-padding: 0px;
@@ -13,7 +15,8 @@ $white-background: $white;
 $youtube-player-height: 200px;
 $youtube-player-width: 350px;
 $youtube-button-size: 30px;
-$youtube-resize-transition: height 0.25s ease-out;
+$youtube-resize-transition: width 0.15s ease-in-out, height 0.15s ease-in-out;
+$youtube-expanded-width: 1280px;
 
 #brainz-player {
   position: fixed;
@@ -59,7 +62,7 @@ $youtube-resize-transition: height 0.25s ease-out;
         height: $cover-art-size;
         width: $cover-art-size;
         position: absolute;
-        // transition: height, width 0.4s;
+        transition: height, width 0.4s;
         bottom: 0;
       }
 
@@ -75,12 +78,42 @@ $youtube-resize-transition: height 0.25s ease-out;
         position: absolute;
         bottom: $brainzplayer-height + 10px;
         right: 10px;
-        height: $youtube-player-height + $youtube-button-size;
-        width: $youtube-player-width;
+        height: auto;
+        width: auto;
         max-width: calc(100vw - 20px);
+        @media (min-width: $offscreen-sidenav-breakpoint) {
+          max-width: calc(100vw - 200px - 20px);
+        }
         z-index: 4;
         text-align: right; // to align the move and reduce buttons
-        transition: $youtube-resize-transition;
+
+        .react-resizable-handle {
+          z-index: 100;
+          position: absolute;
+
+          &.react-resizable-handle-nw {
+            top: 0;
+            left: 0;
+            cursor: nw-resize;
+            width: 20px;
+            height: 20px;
+            z-index: 2;
+            position: absolute;
+            &::after {
+              content: "";
+              width: 12px;
+              height: 12px;
+              top: 4px;
+              left: 4px;
+              position: absolute;
+              border-left: 2px solid rgba(255, 255, 255, 0.978);
+              border-top: 2px solid rgba(255, 255, 255, 0.978);
+            }
+            &:hover::after {
+              border-color: #fff;
+            }
+          }
+        }
 
         &.reduced {
           height: $youtube-button-size;
@@ -89,8 +122,13 @@ $youtube-resize-transition: height 0.25s ease-out;
           }
         }
 
+        .no-video-interaction {
+          pointer-events: none;
+        }
+
         .youtube-player {
-          height: $youtube-player-height;
+          height: 100%;
+          width: 100%;
           border-radius: 8px;
           border-top-right-radius: 0; // intersection with the square drag handle
           overflow: hidden;
@@ -116,6 +154,14 @@ $youtube-resize-transition: height 0.25s ease-out;
             cursor: grabbing;
           }
         }
+
+        .youtube-resizable-container {
+          position: relative;
+          > div {
+            height: 100%;
+            width: 100%;
+          }
+        }
       }
     }
   }

frontend/js/src/common/brainzplayer/YoutubePlayer.tsx

@@ -7,15 +7,18 @@ import {
   isFunction as _isFunction,
   isNil as _isNil,
   isString as _isString,
+  throttle,
 } from "lodash";
-
-import Draggable from "react-draggable";
+import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
+import { ResizableBox, ResizeCallbackData } from "react-resizable";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowsAlt,
   faWindowMaximize,
   faWindowMinimize,
   faTimes,
+  faExpand,
+  faCompress,
 } from "@fortawesome/free-solid-svg-icons";
 import { faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { Link } from "react-router";
@@ -35,8 +38,25 @@ export type YoutubePlayerProps = DataSourceProps & {
 
 type YoutubePlayerState = {
   hidePlayer?: boolean;
+  isExpanded?: boolean;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  isInteracting: boolean;
 };
 
+const DEFAULT_WIDTH = 350;
+const DEFAULT_HEIGHT = 200;
+const SIDEBAR_WIDTH = 200;
+const PLAYER_HEIGHT = 60;
+const BUTTON_HEIGHT = 30;
+const SIDEBAR_BREAKPOINT = 992;
+const EXPANDED_WIDTH = 1280;
+const EXPANDED_HEIGHT = 720;
+const PADDING = 10;
+const PADDING_TOP = 30;
+
 // For some reason Youtube types do not document getVideoData,
 // which we need to determine if there was no search results
 type ExtendedYoutubePlayer = {
@@ -123,10 +143,27 @@ export default class YoutubePlayer
   public iconColor = dataSourcesInfo.youtube.color;
   youtubePlayer?: ExtendedYoutubePlayer;
   checkVideoLoadedTimerId?: NodeJS.Timeout;
+  handleWindowResizeThrottle: (() => void) & {
+    cancel: () => void;
+    flush: () => void;
+  };
 
   constructor(props: YoutubePlayerProps) {
     super(props);
-    this.state = { hidePlayer: false };
+    this.state = {
+      hidePlayer: false,
+      isExpanded: false,
+      width: DEFAULT_WIDTH,
+      height: DEFAULT_HEIGHT,
+      x: 0,
+      y: 0,
+      isInteracting: false,
+    };
+    this.handleWindowResizeThrottle = throttle(this.handleWindowResize, 100);
+  }
+
+  componentDidMount(): void {
+    window.addEventListener("resize", this.handleWindowResizeThrottle);
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
@@ -140,6 +177,11 @@ export default class YoutubePlayer
     }
   }
 
+  componentWillUnmount(): void {
+    window.removeEventListener("resize", this.handleWindowResizeThrottle);
+    this.handleWindowResizeThrottle.cancel();
+  }
+
   stop = () => {
     this.youtubePlayer?.stopVideo();
     // Clear playlist
@@ -377,8 +419,111 @@ export default class YoutubePlayer
     });
   };
 
+  getMaxAvailableWidth = (): number => {
+    let maxWidth = window.innerWidth - PADDING * 2;
+
+    if (window.innerWidth > SIDEBAR_BREAKPOINT) {
+      maxWidth -= SIDEBAR_WIDTH;
+    }
+    return maxWidth;
+  };
+
+  calculateDimensions = () => {
+    const maxWidth = this.getMaxAvailableWidth();
+    const targetWidth = Math.min(EXPANDED_WIDTH, maxWidth);
+    const calculatedHeight = (targetWidth * 9) / 16 + BUTTON_HEIGHT;
+    const maxHeight =
+      window.innerHeight - (PLAYER_HEIGHT + BUTTON_HEIGHT + PADDING_TOP);
+    const targetHeight = Math.min(
+      EXPANDED_HEIGHT + BUTTON_HEIGHT,
+      calculatedHeight,
+      maxHeight
+    );
+    return {
+      width: targetWidth,
+      height: targetHeight,
+    };
+  };
+
+  handleExpandToggle = () => {
+    this.setState((prev) => {
+      const isNowExpanded = !prev.isExpanded;
+
+      if (isNowExpanded) {
+        const { width, height } = this.calculateDimensions();
+        return {
+          isExpanded: true,
+          width,
+          height,
+          x: 0,
+          y: 0,
+        };
+      }
+      return {
+        isExpanded: false,
+        width: DEFAULT_WIDTH,
+        height: DEFAULT_HEIGHT,
+        x: 0,
+        y: 0,
+      };
+    });
+  };
+
+  handleWindowResize = () => {
+    const { isExpanded, width, height } = this.state;
+    if (isExpanded) {
+      const { width: newWidth, height: newHeight } = this.calculateDimensions();
+      this.setState({
+        width: newWidth,
+        height: newHeight,
+      });
+    } else {
+      const maxSafeWidth = this.getMaxAvailableWidth();
+      const maxSafeHeight =
+        window.innerHeight - (PLAYER_HEIGHT + BUTTON_HEIGHT + PADDING_TOP);
+      if (width > maxSafeWidth || height > maxSafeHeight) {
+        this.setState({
+          width: Math.min(width, maxSafeWidth),
+          height: Math.min(height, maxSafeHeight),
+        });
+      }
+    }
+  };
+
+  onResize = (event: React.SyntheticEvent, data: ResizeCallbackData) => {
+    this.setState({
+      width: data.size.width,
+      height: data.size.height,
+      isExpanded: false,
+    });
+  };
+
+  onInteractionStart = () => {
+    this.setState({ isInteracting: true });
+  };
+
+  onInteractionStop = () => {
+    this.setState({ isInteracting: false });
+  };
+
+  onDrag = (event: DraggableEvent, data: DraggableData) => {
+    this.setState({
+      x: data.x,
+      y: data.y,
+    });
+  };
+
   render() {
-    const { hidePlayer } = this.state;
+    const {
+      hidePlayer,
+      isExpanded,
+      width,
+      height,
+      x,
+      y,
+      isInteracting,
+    } = this.state;
+
     const options: Options = {
       playerVars: {
         controls: 0,
@@ -392,18 +537,27 @@ export default class YoutubePlayer
       width: "100%",
       height: "100%",
     };
+
     const draggableBoundPadding = 10;
     // width of screen - padding on each side - youtube player width
     const leftBound =
-      document.body.clientWidth - draggableBoundPadding * 2 - 350;
-
+      document.body.clientWidth - draggableBoundPadding * 2 - width;
     const isCurrentDataSource =
       store.get(currentDataSourceNameAtom) === this.name;
     const isPlayerVisible = isCurrentDataSource && !hidePlayer;
+    const maxResizableWidth = this.getMaxAvailableWidth();
+    const maxResizableHeight =
+      window.innerHeight - PLAYER_HEIGHT - BUTTON_HEIGHT - PADDING_TOP;
 
     return (
       <Draggable
         handle=".youtube-drag-handle"
+        position={{ x, y }}
+        disabled={isInteracting}
+        cancel=".react-resizable-handle"
+        onDrag={this.onDrag}
+        onStart={this.onInteractionStart}
+        onStop={this.onInteractionStop}
         bounds={{
           left: -leftBound,
           right: -draggableBoundPadding,
@@ -420,21 +574,45 @@ export default class YoutubePlayer
           >
             <FontAwesomeIcon icon={faArrowsAlt} />
           </button>
+          <button
+            className="btn btn-sm youtube-button"
+            type="button"
+            onClick={this.handleExpandToggle}
+            title={isExpanded ? "Restore size" : "Expand video"}
+            aria-label={isExpanded ? "Restore size" : "Expand video"}
+          >
+            <FontAwesomeIcon icon={isExpanded ? faCompress : faExpand} />
+          </button>
           <button
             className="btn btn-sm youtube-button"
             type="button"
             onClick={this.handleHide}
           >
             <FontAwesomeIcon icon={faTimes} />
           </button>
-          <YouTube
-            className="youtube-player"
-            opts={options}
-            onError={this.onError}
-            onStateChange={this.handlePlayerStateChanged}
-            onReady={this.onReady}
-            videoId=""
-          />
+          <ResizableBox
+            width={width}
+            height={height}
+            onResizeStart={this.onInteractionStart}
+            onResize={this.onResize}
+            onResizeStop={this.onInteractionStop}
+            resizeHandles={["nw"]}
+            minConstraints={[DEFAULT_WIDTH, DEFAULT_HEIGHT]}
+            maxConstraints={[maxResizableWidth, maxResizableHeight]}
+            axis="both"
+            className="youtube-resizable-container"
+          >
+            <YouTube
+              className={`youtube-player${
+                isInteracting ? " no-video-interaction" : ""
+              }`}
+              opts={options}
+              onError={this.onError}
+              onStateChange={this.handlePlayerStateChanged}
+              onReady={this.onReady}
+              videoId=""
+            />
+          </ResizableBox>
         </div>
       </Draggable>
     );