Update player icons to YouTube style and reorder controls

Co-authored-by: ArnavSingh76533 <160649079+ArnavSingh76533@users.noreply.github.com>

components/icon/IconBackward.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconBackward: FC<IconProps> = ({ className = "" }) => {
+const IconBackward: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 448 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z'
+        d='M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z'
       />
     </Icon>
   )

components/icon/IconCog.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconCog: FC<IconProps> = ({ className = "" }) => {
+const IconCog: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 512 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z'
+        d='M12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5zm0-9c-3.03 0-5.5 2.47-5.5 5.5s2.47 5.5 5.5 5.5 5.5-2.47 5.5-5.5-2.47-5.5-5.5-5.5zM19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65z'
       />
     </Icon>
   )

components/icon/IconCompress.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconCompress: FC<IconProps> = ({ className = "" }) => {
+const IconCompress: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 448 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z'
+        d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'
       />
     </Icon>
   )

components/icon/IconExpand.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconExpand: FC<IconProps> = ({ className = "" }) => {
+const IconExpand: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 448 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z'
+        d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'
       />
     </Icon>
   )

components/icon/IconForward.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconForward: FC<IconProps> = ({ className = "" }) => {
+const IconForward: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 448 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z'
+        d='M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z'
       />
     </Icon>
   )

components/icon/IconMusic.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconMusic: FC<IconProps> = ({ className = "" }) => {
+const IconMusic: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 512 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z'
+        d='M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z'
       />
     </Icon>
   )

components/icon/IconPause.tsx

@@ -6,11 +6,11 @@ const IconPause: FC<IconProps> = ({ className = "", sizeClassName }) => {
     <Icon
       className={className}
       sizeClassName={sizeClassName}
-      viewBox='0 0 448 512'
+      viewBox='0 0 24 24'
     >
       <path
         fill='currentColor'
-        d='M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z'
+        d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'
       />
     </Icon>
   )

components/icon/IconPip.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconPip: FC<IconProps> = ({ className = "" }) => {
+const IconPip: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 24 24'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z'
+        d='M19 11h-8v6h8v-6zm4 8V4.98C23 3.88 22.1 3 21 3H3c-1.1 0-2 .88-2 1.98V19c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H3V4.97h18v14.05z'
       />
     </Icon>
   )

components/icon/IconPlay.tsx

@@ -6,11 +6,11 @@ const IconPlay: FC<IconProps> = ({ className = "", sizeClassName }) => {
     <Icon
       className={className}
       sizeClassName={sizeClassName}
-      viewBox='0 0 448 512'
+      viewBox='0 0 24 24'
     >
       <path
         fill='currentColor'
-        d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z'
+        d='M8 5v14l11-7z'
       />
     </Icon>
   )

components/icon/IconReplay.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconReplay: FC<IconProps> = ({ className = "" }) => {
+const IconReplay: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 512 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z'
+        d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'
       />
     </Icon>
   )

components/icon/IconSoundDown.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconSoundDown: FC<IconProps> = ({ className = "" }) => {
+const IconSoundDown: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 384 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z'
+        d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'
       />
     </Icon>
   )

components/icon/IconSoundMute.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconSoundMute: FC<IconProps> = ({ className = "" }) => {
+const IconSoundMute: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 512 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z'
+        d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'
       />
     </Icon>
   )

components/icon/IconSoundOff.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconSoundOff: FC<IconProps> = ({ className = "" }) => {
+const IconSoundOff: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 256 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M215 71l-89 89H24a24 24 0 0 0-24 24v144a24 24 0 0 0 24 24h102.06L215 441c15 15 41 4.47 41-17V88c0-21.47-26-32-41-17z'
+        d='M7 9v6h4l5 5V4l-5 5H7z'
       />
     </Icon>
   )

components/icon/IconSoundUp.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import Icon, { IconProps } from "./Icon"
 
-const IconSoundUp: FC<IconProps> = ({ className = "" }) => {
+const IconSoundUp: FC<IconProps> = ({ className = "", sizeClassName }) => {
   return (
-    <Icon className={className} viewBox='0 0 576 512'>
+    <Icon className={className} sizeClassName={sizeClassName} viewBox='0 0 24 24'>
       <path
         fill='currentColor'
-        d='M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z'
+        d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'
       />
     </Icon>
   )

components/player/Controls.tsx

@@ -267,6 +267,17 @@ const Controls: FC<Props> = ({
             </span>
           </ControlButton>
 
+          <ControlButton
+            tooltip={fullscreen ? "Leave fullscreen" : "Enter fullscreen"}
+            onClick={() => {
+              console.log("Toggled fullscreen")
+              setFullscreen(!fullscreen)
+            }}
+            interaction={showControlsAction}
+          >
+            {fullscreen ? <IconCompress /> : <IconExpand />}
+          </ControlButton>
+
           <PlayerMenu
             roomId={roomId}
             playing={playing}
@@ -373,17 +384,6 @@ const Controls: FC<Props> = ({
           >
             <IconPip />
           </ControlButton>
-
-          <ControlButton
-            tooltip={fullscreen ? "Leave fullscreen" : "Enter fullscreen"}
-            onClick={() => {
-              console.log("Toggled fullscreen")
-              setFullscreen(!fullscreen)
-            }}
-            interaction={showControlsAction}
-          >
-            {fullscreen ? <IconCompress /> : <IconExpand />}
-          </ControlButton>
         </div>
 
         <InputSlider