From 179fdade987a0dd48c99cd001986a73851a925d0 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 16 Aug 2021 23:41:07 -0700
Subject: [PATCH] remove player context

---
 src/components/player/Player.tsx    |   7 +-
 src/components/player/PlayerBar.tsx | 212 ++++++++++++++--------------
 2 files changed, 106 insertions(+), 113 deletions(-)

diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index 356d7e1..c50ff9f 100644
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   useRef,
   useEffect,
   useImperativeHandle,
@@ -17,8 +16,6 @@ import {
   setAutoIncremented,
 } from '../../redux/playQueueSlice';
 
-export const PlayerContext = createContext<any>({});
-
 const Player = ({ children }: any, ref: any) => {
   const player1Ref = useRef<any>();
   const player2Ref = useRef<any>();
@@ -150,7 +147,7 @@ const Player = ({ children }: any, ref: any) => {
   };
 
   return (
-    <PlayerContext.Provider value={{}}>
+    <>
       <ReactAudioPlayer
         ref={player1Ref}
         src={playQueue.entry[playQueue.player1.index]?.streamUrl}
@@ -172,7 +169,7 @@ const Player = ({ children }: any, ref: any) => {
         autoPlay={playQueue.player2.index === playQueue.currentIndex}
       />
       {children}
-    </PlayerContext.Provider>
+    </>
   );
 };
 
diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx
index ad9c519..da80d1a 100644
--- a/src/components/player/PlayerBar.tsx
+++ b/src/components/player/PlayerBar.tsx
@@ -130,115 +130,111 @@ const PlayerBar = () => {
   };
 
   return (
-    <Player ref={playersRef}>
-      <PlayerContainer>
-        <FlexboxGrid align="middle" style={{ height: '100%' }}>
-          <FlexboxGrid.Item
-            colspan={6}
-            style={{ textAlign: 'left', paddingLeft: '25px' }}
-          >
-            <PlayerColumn left height="50px">
-              <div>Is seeking: {isDragging ? 'true' : 'false'}</div>
-            </PlayerColumn>
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item
-            colspan={12}
-            style={{ textAlign: 'center', verticalAlign: 'middle' }}
-          >
-            <PlayerColumn center height="45px">
-              <PlayerControlIcon icon="random" size="lg" />
-              <PlayerControlIcon
-                icon="step-backward"
-                size="lg"
-                onClick={handleClickPrevious}
-              />
-              <PlayerControlIcon
-                icon={
-                  playQueue.status === 'PLAYING'
-                    ? 'pause-circle'
-                    : 'play-circle'
-                }
-                size="3x"
-                onClick={handleClickPlayPause}
-              />
-              <PlayerControlIcon
-                icon="step-forward"
-                size="lg"
-                onClick={handleClickNext}
-              />
-              <PlayerControlIcon
-                icon="repeat"
-                size="lg"
-                onClick={() => console.log('Set Repeat')}
-              />
-            </PlayerColumn>
-            <PlayerColumn center height="35px">
-              <FlexboxGrid
-                justify="center"
-                style={{
-                  width: '100%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  height: '35px',
-                }}
+    <PlayerContainer>
+      <Player />
+      <FlexboxGrid align="middle" style={{ height: '100%' }}>
+        <FlexboxGrid.Item
+          colspan={6}
+          style={{ textAlign: 'left', paddingLeft: '25px' }}
+        >
+          <PlayerColumn left height="50px">
+            <div>Is seeking: {isDragging ? 'true' : 'false'}</div>
+          </PlayerColumn>
+        </FlexboxGrid.Item>
+        <FlexboxGrid.Item
+          colspan={12}
+          style={{ textAlign: 'center', verticalAlign: 'middle' }}
+        >
+          <PlayerColumn center height="45px">
+            <PlayerControlIcon icon="random" size="lg" />
+            <PlayerControlIcon
+              icon="step-backward"
+              size="lg"
+              onClick={handleClickPrevious}
+            />
+            <PlayerControlIcon
+              icon={
+                playQueue.status === 'PLAYING' ? 'pause-circle' : 'play-circle'
+              }
+              size="3x"
+              onClick={handleClickPlayPause}
+            />
+            <PlayerControlIcon
+              icon="step-forward"
+              size="lg"
+              onClick={handleClickNext}
+            />
+            <PlayerControlIcon
+              icon="repeat"
+              size="lg"
+              onClick={() => console.log('Set Repeat')}
+            />
+          </PlayerColumn>
+          <PlayerColumn center height="35px">
+            <FlexboxGrid
+              justify="center"
+              style={{
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                height: '35px',
+              }}
+            >
+              <FlexboxGrid.Item
+                colspan={4}
+                style={{ textAlign: 'right', paddingRight: '10px' }}
               >
-                <FlexboxGrid.Item
-                  colspan={4}
-                  style={{ textAlign: 'right', paddingRight: '10px' }}
-                >
-                  {format((isDragging ? manualSeek : seek) * 1000)}
-                </FlexboxGrid.Item>
-                <FlexboxGrid.Item colspan={16}>
-                  <Slider
-                    progress
-                    // disabled={playQueue.isFading}
-                    defaultValue={0}
-                    value={isDragging ? manualSeek : seek}
-                    tooltip={false}
-                    max={playQueue.entry[playQueue.currentIndex]?.duration || 0}
-                    onChange={handleSeekSlider}
-                    style={{ width: '100%' }}
-                  />
-                </FlexboxGrid.Item>
-                <FlexboxGrid.Item
-                  colspan={4}
-                  style={{ textAlign: 'left', paddingLeft: '10px' }}
-                >
-                  {format(
-                    playQueue.entry[playQueue.currentIndex]?.duration * 1000 ||
-                      0
-                  )}
-                </FlexboxGrid.Item>
-              </FlexboxGrid>
-            </PlayerColumn>
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item
-            colspan={6}
-            style={{ textAlign: 'right', paddingRight: '25px' }}
-          >
-            <PlayerColumn right height="45px">
-              <Icon
-                icon={
-                  playQueue.volume > 0.7
-                    ? 'volume-up'
-                    : playQueue.volume < 0.3
-                    ? 'volume-off'
-                    : 'volume-down'
-                }
-                size="lg"
-                style={{ marginRight: '15px' }}
-              />
-              <Slider
-                progress
-                value={Math.floor(playQueue.volume * 100)}
-                style={{ width: '80px' }}
-                onChange={handleVolumeSlider}
-              />
-            </PlayerColumn>
-          </FlexboxGrid.Item>
-        </FlexboxGrid>
-      </PlayerContainer>
-    </Player>
+                {format((isDragging ? manualSeek : seek) * 1000)}
+              </FlexboxGrid.Item>
+              <FlexboxGrid.Item colspan={16}>
+                <Slider
+                  progress
+                  // disabled={playQueue.isFading}
+                  defaultValue={0}
+                  value={isDragging ? manualSeek : seek}
+                  tooltip={false}
+                  max={playQueue.entry[playQueue.currentIndex]?.duration || 0}
+                  onChange={handleSeekSlider}
+                  style={{ width: '100%' }}
+                />
+              </FlexboxGrid.Item>
+              <FlexboxGrid.Item
+                colspan={4}
+                style={{ textAlign: 'left', paddingLeft: '10px' }}
+              >
+                {format(
+                  playQueue.entry[playQueue.currentIndex]?.duration * 1000 || 0
+                )}
+              </FlexboxGrid.Item>
+            </FlexboxGrid>
+          </PlayerColumn>
+        </FlexboxGrid.Item>
+        <FlexboxGrid.Item
+          colspan={6}
+          style={{ textAlign: 'right', paddingRight: '25px' }}
+        >
+          <PlayerColumn right height="45px">
+            <Icon
+              icon={
+                playQueue.volume > 0.7
+                  ? 'volume-up'
+                  : playQueue.volume < 0.3
+                  ? 'volume-off'
+                  : 'volume-down'
+              }
+              size="lg"
+              style={{ marginRight: '15px' }}
+            />
+            <Slider
+              progress
+              value={Math.floor(playQueue.volume * 100)}
+              style={{ width: '80px' }}
+              onChange={handleVolumeSlider}
+            />
+          </PlayerColumn>
+        </FlexboxGrid.Item>
+      </FlexboxGrid>
+    </PlayerContainer>
   );
 };