Code Cleanup (#114)

happy-software · Aug 11, 2024 · 775c1f2 · 775c1f2
1 parent 8f5b46a
commit 775c1f2
Show file tree

Hide file tree

Showing 24 changed files with 281 additions and 400 deletions.
diff --git a/CNAME b/CNAME
diff --git a/__tests__/pages/PlaylistsManager.test.js b/__tests__/pages/PlaylistsManager.test.js
diff --git a/package.json b/package.json
@@ -8,7 +8,6 @@
     "@honeybadger-io/react": "^6.1.23",
     "@tomplum/react-textfit": "^1.1.5",
     "axios": "^1.6.0",
-    "gh-pages": "^5.0.0",
     "nan": "^2.15.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -48,6 +47,7 @@
     "@babel/preset-react": "^7.16.7",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "gh-pages": "^6.1.1",
     "postcss-normalize": "^10.0.1",
     "react-test-renderer": "^17.0.2"
   }

diff --git a/src/AppConstants.js b/src/AppConstants.js
@@ -1,11 +1,11 @@
-// const APIRoot = "http://localhost:8000"; // When running locally
-const APIRoot = "https://happy-youtube-watcher.herokuapp.com";
+// const APIRoot = "http://localhost:8000" // When running locally
+const APIRoot = "https://happy-youtube-watcher.herokuapp.com"
 const appConstants = {
   APIEndpoints: {
     SHUFFLE: APIRoot + "/shuffle",
     TRACKED_PLAYLISTS: APIRoot + "/tracked-playlists",
     TRACKED_VIDEOS: APIRoot + "/videos",
   },
   SelectedPlaylistIdsKey: "selectedPlaylistIds"
-};
-export default appConstants;
+}
+export default appConstants
diff --git a/src/AppRoot.js b/src/AppRoot.js
@@ -1,25 +1,23 @@
-import React from "react";
+import React from "react"
 import {
   HashRouter as Router,
   Routes,
   Route
-} from "react-router-dom";
-import ShufflePlayer from './pages/ShufflePlayer';
-import TrackPlaylistForm from './pages/TrackPlaylistForm';
-import PlaylistsManager  from './pages/PlaylistsManager';
-import PlaylistsSearch   from './pages/PlaylistsSearch';
+} from "react-router-dom"
+import ShufflePlayer from './pages/ShufflePlayer'
+import TrackPlaylistForm from './pages/TrackPlaylistForm'
+import PlaylistsSearch from './pages/PlaylistsSearch'
 
 export default function AppRoot() {
-  return(
+  return (
     <Router>
       <div>
         <Routes>
           <Route path="/track-new-playlist" element={<TrackPlaylistForm />}></Route>
-          <Route path="/manage" element={<PlaylistsManager />}></Route>
           <Route path="/search" element={<PlaylistsSearch />}></Route>
           <Route exact path="/" element={<ShufflePlayer />}></Route>
         </Routes>
       </div>
     </Router>
-  );
-}
+  )
+}
diff --git a/src/components/ButtonList.js b/src/components/ButtonList.js
@@ -1,48 +1,19 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import ToggleableButton from './ToggleableButton';
+import React from 'react'
+import { Link } from 'react-router-dom'
+import ToggleableButton from './ToggleableButton'
 
-function ButtonList(props) {
-  return (
-    <div className="buttonList">
-      <div>
-        <button
-          onClick={() => props.playerRef.current?.getInternalPlayer()?.nextVideo()}
-          className='sytButton nextVideoButton'
-        >Next</button>
-        <ToggleableButton
-          toggled={props.repeatVideo}
-          setToggled={props.setRepeatVideo}
-          message="Repeat"
-          className="sytButton"
-        />
-        <ToggleableButton
-          toggled={props.hideVideo}
-          setToggled={props.setHideVideo}
-          message={props.hideVideo ? "Show Video" : "Hide Video"}
-          className="sytButton"
-        />
-        <Link
-          to="/track-new-playlist"
-          className="link">
-          <button
-            type="button"
-            className="sytButton"
-          >Add to Playlists</button>
-        </Link>
-        <Link
-          to="/search"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="link">
-          <button
-            type="button"
-            className="sytButton"
-          >Search</button>
-        </Link>
-      </div>
+export default function ButtonList(props) {
+  return <div className="buttonList">
+    <div>
+      <button onClick={() => props.playerRef.current?.getInternalPlayer()?.nextVideo()} className='sytButton nextVideoButton'>Next</button>
+      <ToggleableButton toggled={props.repeatVideo} setToggled={props.setRepeatVideo} message="Repeat" className="sytButton" />
+      <ToggleableButton toggled={props.hideVideo} setToggled={props.setHideVideo} message={props.hideVideo ? "Show Video" : "Hide Video"} className="sytButton" />
+      <Link to="/track-new-playlist" className="link">
+        <button type="button" className="sytButton" >Add to Playlists</button>
+      </Link>
+      <Link to="/search" target="_blank" rel="noopener noreferrer" className="link">
+        <button type="button" className="sytButton" >Search</button>
+      </Link>
     </div>
-  )
-}
-
-export default ButtonList;
+  </div>
+}
diff --git a/src/components/CurrentVideoInfo.jsx b/src/components/CurrentVideoInfo.jsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { Textfit } from '@tomplum/react-textfit';
+import React, { useState } from 'react'
+import { Textfit } from '@tomplum/react-textfit'
 
-function CurrentVideoInfo(props) {
+export default function CurrentVideoInfo(props) {
   const [hideDescription, setHideDescription] = useState(true)
 
   var titleOpts = {
@@ -16,22 +16,18 @@ function CurrentVideoInfo(props) {
     paddingRight: 10,
     flex: 0
   }
-  return (
-    <>
-      <div id="videoTitleDisplay" className='currentVideoTitle' onClick={() => setHideDescription(!hideDescription)}>
-        <Textfit style={titleOpts} mode="multi" max={44}>{props.currentVideo.title}</Textfit>
-        <a style={anchorOpts} href={`https://youtube.com/watch?v=${props.currentVideo.video_id}`} target="_blank" rel="noopener noreferrer">
-          <img alt='Go to Youtube Site' src={'/arrow-up-right.svg'}></img>
-        </a>
-      </div>
+  return <>
+    <div id="videoTitleDisplay" className='currentVideoTitle' onClick={() => setHideDescription(!hideDescription)}>
+      <Textfit style={titleOpts} mode="multi" max={44}>{props.currentVideo.title}</Textfit>
+      <a style={anchorOpts} href={`https://youtube.com/watch?v=${props.currentVideo.video_id}`} target="_blank" rel="noopener noreferrer">
+        <img alt='Go to Youtube Site' src={'/arrow-up-right.svg'}></img>
+      </a>
+    </div>
 
-      <div className="contentRow">
-        <div className={`${hideDescription ? 'hide' : ''}`}>
-          {props.currentVideo.description}
-        </div>
+    <div className="contentRow">
+      <div className={`${hideDescription ? 'hide' : ''}`}>
+        {props.currentVideo.description}
       </div>
-    </>
-  );
-}
-
-export default CurrentVideoInfo;
+    </div>
+  </>
+}
diff --git a/src/components/LoadingPlaceholder.js b/src/components/LoadingPlaceholder.js
@@ -1,15 +1,12 @@
-import React from 'react';
+import React from 'react'
 
-function LoadingPlaceholder(props) {
-  return(
-  <div className="loader">
+export default function LoadingPlaceholder(props) {
+  return <div className="loader">
     <svg width="50" height="50" viewBox="0 0 50 50">
       <path fill="#c779d0" d="M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z">
-      <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite" />
+        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite" />
       </path>
     </svg>
     <div>Give me a minute to wake up... so sleepy...</div>
-  </div>);
-}
-
-export default LoadingPlaceholder;
+  </div>
+}
diff --git a/src/components/Player.js b/src/components/Player.js
@@ -1,55 +1,51 @@
-import React from 'react';
-import ReactPlayer from 'react-player';
+import React from 'react'
+import ReactPlayer from 'react-player'
 
-function Player(props) {
-  const YOUTUBE_PLAYLIST_VIDEO_LIMIT = 200;
+export default function Player(props) {
+  const YOUTUBE_PLAYLIST_VIDEO_LIMIT = 200
 
   function onPlay() {
-    var internalPlayer = props.playerRef.current?.getInternalPlayer();
-    var videoData = internalPlayer.getVideoData();
-    var video = props.videos.find(v => v.video_id === videoData.video_id);
-    props.setCurrentVideo(video);
+    var internalPlayer = props.playerRef.current?.getInternalPlayer()
+    var videoData = internalPlayer.getVideoData()
+    var video = props.videos.find(v => v.video_id === videoData.video_id)
+    props.setCurrentVideo(video)
   }
 
   function onError() {
-    var internalPlayer = props.playerRef.current?.getInternalPlayer();
+    var internalPlayer = props.playerRef.current?.getInternalPlayer()
     var videoUrl = internalPlayer.getVideoUrl()
-    if (!videoUrl) return;
-    console.log(`BROKEN VIDEO: ${getVideoId(videoUrl)}`);
-    internalPlayer.nextVideo();
+    if (!videoUrl) return
+    console.log(`BROKEN VIDEO: ${getVideoId(videoUrl)}`)
+    internalPlayer.nextVideo()
   }
 
   function getVideoId(url) {
-    const urlParams = new URLSearchParams(new URL(url).search);
-    return urlParams.get('v');
+    const urlParams = new URLSearchParams(new URL(url).search)
+    return urlParams.get('v')
   }
 
-  return (
-    <div className='playerWrapper' style={{ display: props.hideVideo ? 'none' : 'block' }}>
-      <ReactPlayer
-        className='player'
-        ref={props.playerRef}
-        url={props.videos?.slice(0, YOUTUBE_PLAYLIST_VIDEO_LIMIT).map(v => `https://www.youtube.com/watch?v=${v.video_id}`)}
-        controls={true}
-        loop={props.repeatVideo}
-        playing={true}
-        width={"100%"}
-        height={"800px"}
-        onPlay={onPlay}
-        onError={onError}
-        config={{
-          youtube: {
-            playerVars: {},
-            embedOptions: {
-              host: "https://www.youtube-nocookie.com",
-            }
-          },
-          attributes: {},
-          tracks: [],
-        }}
-      />
-    </div>
-  );
-}
-
-export default Player;
+  return <div className='playerWrapper' style={{ display: props.hideVideo ? 'none' : 'block' }}>
+    <ReactPlayer
+      className='player'
+      ref={props.playerRef}
+      url={props.videos?.slice(0, YOUTUBE_PLAYLIST_VIDEO_LIMIT).map(v => `https://www.youtube.com/watch?v=${v.video_id}`)}
+      controls={true}
+      loop={props.repeatVideo}
+      playing={true}
+      width={"100%"}
+      height={"800px"}
+      onPlay={onPlay}
+      onError={onError}
+      config={{
+        youtube: {
+          playerVars: {},
+          embedOptions: {
+            host: "https://www.youtube-nocookie.com",
+          }
+        },
+        attributes: {},
+        tracks: [],
+      }}
+    />
+  </div>
+}