full screen functionality

zero-to-mastery · Dec 13, 2019 · 425a5c6 · 425a5c6
1 parent ef7c547
commit 425a5c6
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 59 deletions.
diff --git a/src/components/PlayerBar/DownloadButton/DownloadButton.js b/src/components/PlayerBar/DownloadButton/DownloadButton.js
@@ -4,15 +4,15 @@ import { ReactComponent as DownloadIcon } from '../../../assets/PlayerBarAssets/
 import { ReactComponent as DownloadIconReady } from '../../../assets/PlayerBarAssets/download-ready-icon.svg';
 import { downloadVisualStart } from '../../../store/actions/downloadActions';
 
-export default function DownloadButton({ songEnded, isPlaying }) {
+export default function DownloadButton({ isSongEnded, isPlaying }) {
     const dispatch = useDispatch();
 
     const onDownloadVisual = () => {
         dispatch(downloadVisualStart());
     };
     return (
         <>
-            {songEnded && !isPlaying ? (
+            {isSongEnded && !isPlaying ? (
                 <DownloadIconReady onClick={onDownloadVisual} />
             ) : (
                 <DownloadIcon />

diff --git a/src/components/PlayerBar/PlayerBar.js b/src/components/PlayerBar/PlayerBar.js
@@ -25,7 +25,7 @@ import classes from './PlayerBar.module.scss';
 export default function PlayerBar(props) {
     const [formatedDuration, setFormatedDuration] = useState('0:00');
     const [formatedCurrentTime, setFormatedCurrentTime] = useState('0:00');
-
+    const [isPlayerBarShowed, setIsPlayerBarShowed] = useState(true);
     // Props from (src/pages/App/App.js):
     const {
         uploadedSong,
@@ -35,9 +35,11 @@ export default function PlayerBar(props) {
         isPlaying,
         volume,
         onVolumeChange,
-        songEnded,
+        isSongEnded,
         currentTime,
-        onCueTimeChange
+        onCueTimeChange,
+        isFullSize,
+        setIsFullSize
     } = props;
 
     // Set formated duration
@@ -50,12 +52,38 @@ export default function PlayerBar(props) {
         setFormatedCurrentTime(getTime(currentTime));
     }, [currentTime]);
 
+    useEffect(() => {
+        const bar = document.getElementById('player_bar');
+        if (isFullSize && bar) {
+            bar.addEventListener(
+                'mouseenter',
+                () => setIsPlayerBarShowed(true),
+                false
+            );
+            bar.addEventListener(
+                'mouseleave',
+                () => setIsPlayerBarShowed(false),
+                false
+            );
+        }
+
+        return () => {
+            bar.removeEventListener(
+                'mouseenter',
+                () => setIsPlayerBarShowed(true),
+                false
+            );
+            bar.removeEventListener(
+                'mouseleave',
+                () => setIsPlayerBarShowed(false),
+                false
+            );
+        };
+    }, [isFullSize]);
+
     // Format time (eg. 140 to 2:20)
-    const getTime = dur => {
-        return (
-            Math.floor(dur / 60) + ':' + ('0' + Math.floor(dur % 60)).slice(-2)
-        );
-    };
+    const getTime = dur =>
+        Math.floor(dur / 60) + ':' + ('0' + Math.floor(dur % 60)).slice(-2);
 
     // Update the width for the progress slider base on the current time
     const sliderProgressWidth = {
@@ -71,7 +99,12 @@ export default function PlayerBar(props) {
     }
 
     return (
-        <div className={classes.playerBar}>
+        <div
+            id="player_bar"
+            className={`${classes.playerBar} ${isFullSize &&
+                !isPlayerBarShowed &&
+                classes.hide}`}
+        >
             <div className={classes.nowPlaying}>
                 <div className={classes.icon}>
                     <SongIcon />
@@ -125,13 +158,28 @@ export default function PlayerBar(props) {
             </div>
             <div className={classes.playerBarRight}>
                 <div className={classes.download}>
+                    <div className={classes.fullScreenIcon}>
+                        {/* I didn't know which icon to add so you more than welcome to replace this one */}
+                        <img
+                            className={`${classes.sizeIcon} ${
+                                isFullSize
+                                    ? classes.fullSizeIcon
+                                    : classes.normalSizeIcon
+                            }`}
+                            alt="set size icon"
+                            src="https://icon-library.net//images/full-screen-icon-png/full-screen-icon-png-21.jpg"
+                            onClick={() => {
+                                setIsFullSize(!isFullSize);
+                            }}
+                        />
+                    </div>
                     <div className={classes.snapshotButton}>
                         <ScreenshotButton />
                     </div>
                     <div className={classes.downloadButton}>
                         <DownloadButton
                             isPlaying={isPlaying}
-                            songEnded={songEnded}
+                            isSongEnded={isSongEnded}
                         />
                     </div>
                 </div>

diff --git a/src/components/PlayerBar/PlayerBar.module.scss b/src/components/PlayerBar/PlayerBar.module.scss
@@ -9,6 +9,11 @@
     height: 64px;
     font-size: 12px;
     max-width: 100%;
+    opacity: 1;
+    position: relative;
+}
+.hide {
+    opacity: 0;
 }
 
 .playButton {
@@ -135,7 +140,7 @@
             cursor: pointer;
 
             svg:active {
-                fill: #ccc
+                fill: #ccc;
             }
         }
     }
@@ -180,6 +185,20 @@
     }
 }
 
+.sizeIcon {
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    height: 2.2rem;
+    width: 2.2rem;
+}
+
+.fullSizeIcon:hover {
+    transform: scale(0.7);
+}
+
+.normalSizeIcon:hover {
+    transform: scale(1.3);
+}
 @media only screen and (max-width: 900px) {
     .playerBarRight {
         width: 30%;
@@ -200,10 +219,9 @@
 }
 
 @media screen and (max-width: 700px) {
-
     .icon,
     .volumeButton,
     .playerBarRight .download {
         display: none;
     }
-}
+}
diff --git a/src/components/UploadSong/UploadSong.jsx b/src/components/UploadSong/UploadSong.jsx
@@ -39,14 +39,6 @@ function UploadSong() {
             .then(url => dispatch(setSong({ url, filename })));
     };
 
-    const handleUploadStart = blob => {
-        dispatch(storeBlob(blob));
-    };
-
-    const handleProgress = progress => {
-        setUploadProgress(progress);
-    };
-
     const handleUploadError = error => {
         // ToDo - implement error span
         console.log(error);
@@ -61,7 +53,7 @@ function UploadSong() {
                 //detect file format
                 detectFileType.fromBuffer(buffer, (err, result) => {
                     if (err) {
-                        console.log(err);
+                        handleUploadError(err);
                     }
 
                     if (result.ext !== 'mp3') {
@@ -74,18 +66,14 @@ function UploadSong() {
         }
     };
 
-    const handleUnsupportedClosed = () => {
-        setPromptUnsupport(false);
-    };
-
     const renderSelectAudioFile = () => {
         return promptUnsupport ? (
             <div className={classes.unsupportBox}>
                 (
                 <UnsupportPrompt
                     title="An error occured"
                     message="Unsupported file format"
-                    onClosed={handleUnsupportedClosed}
+                    onClosed={() => setPromptUnsupport(false)}
                 />
                 )
             </div>
@@ -127,19 +115,18 @@ function UploadSong() {
             ) : (
                 renderSelectAudioFile()
             )}
-            {/*
+            {/* 
             Problem:
             FileUploader have to be unmounted and remounted everytime,
             in order to make onChange to work/invoked otherwise it will only
             work at first time.
             */
-
             !promptUnsupport && (
                 <FileUploader
                     id="fileElem"
                     style={{ display: 'none' }}
-                    onUploadStart={handleUploadStart}
-                    onProgress={handleProgress}
+                    onUploadStart={blob => dispatch(storeBlob(blob))}
+                    onProgress={progress => setUploadProgress(progress)}
                     onUploadSuccess={handleUploadSuccess}
                     onUploadError={handleUploadError}
                     accept="audio/mp3"

diff --git a/src/components/Visualizer/Visualizer.component.jsx b/src/components/Visualizer/Visualizer.component.jsx
@@ -39,7 +39,8 @@ const Visualizer = React.memo(props => {
         playPressed,
         uploadedSong,
         downloadVisual,
-        blob
+        blob,
+        isFullSize
     } = props;
 
     return (
@@ -50,7 +51,11 @@ const Visualizer = React.memo(props => {
             }}
         >
             {({ measureRef }) => (
-                <div ref={measureRef} className={classes.visualizer}>
+                <div
+                    ref={measureRef}
+                    className={`${classes.visualizer} ${isFullSize &&
+                        classes.fullSize}`}
+                >
                     <P5Wrapper
                         sketch={sketch}
                         playPressed={playPressed}
@@ -63,6 +68,7 @@ const Visualizer = React.memo(props => {
                         blob={blob}
                         cueTime={cueTime}
                         dispatch={useDispatch()}
+                        isFullSize={isFullSize}
                     />
                 </div>
             )}

diff --git a/src/components/Visualizer/Visualizer.module.scss b/src/components/Visualizer/Visualizer.module.scss
@@ -9,4 +9,10 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-}
+}
+
+.fullSize {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
diff --git a/src/pages/App/App.js b/src/pages/App/App.js
@@ -19,8 +19,9 @@ export default function App({ song }) {
     const [currentTime, setCurrentTime] = useState(null);
     const [cueTime, setCueTime] = useState(0);
     const [volume, setVolume] = useState(0.5);
-    const [togglePanel, setTogglePanel] = useState(false);
-    const [songEnded, setSongEnded] = useState(false);
+    const [isTogglePanel, setisTogglePanel] = useState(false);
+    const [isSongEnded, setisSongEnded] = useState(false);
+    const [isFullSize, setIsFullSize] = useState(false);
     const [blob, setBlob] = useState(null);
     // Redux States
     const { downloadState } = useSelector(state => state.download);
@@ -35,15 +36,15 @@ export default function App({ song }) {
     useEffect(() => {
         setUploadedSong(song);
         setBlob(song.blob);
-        setSongEnded(false);
+        setisSongEnded(false);
         setPlayPressed(false);
         setIsPlaying(false);
     }, [song]);
 
     const onSongEnd = () => {
         setIsPlaying(false);
         setPlayPressed(false);
-        setSongEnded(true);
+        setisSongEnded(true);
     };
 
     return (
@@ -52,14 +53,15 @@ export default function App({ song }) {
                 <div className={classes.visualmusic}>
                     <div className={classes.visualContainer}>
                         <div
-                            className={`${classes.visualmusic} ${togglePanel &&
-                                classes.shrink}`}
+                            className={`${
+                                classes.visualmusic
+                            } ${isTogglePanel && classes.shrink}`}
                         >
                             <div className={classes.hamburger}>
                                 <HamburgerToggle
-                                    initToggle={togglePanel}
+                                    initToggle={isTogglePanel}
                                     onClick={toggleState =>
-                                        setTogglePanel(toggleState)
+                                        setisTogglePanel(toggleState)
                                     }
                                 />
                             </div>
@@ -69,13 +71,15 @@ export default function App({ song }) {
                                 playPressed={playPressed}
                                 uploadedSong={uploadedSong && uploadedSong.url}
                                 blob={blob}
-                                downloadVisual={songEnded && downloadState}
+                                downloadVisual={isSongEnded && downloadState}
                                 cueTime={cueTime}
+                                isFullSize={isFullSize}
                             />
                         </div>
                         <div
-                            className={`${classes.visualPanel} ${togglePanel &&
-                                classes.slideIn}`}
+                            className={`${
+                                classes.visualPanel
+                            } ${isTogglePanel && classes.slideIn}`}
                         >
                             <VisualPanel />
                         </div>
@@ -103,8 +107,10 @@ export default function App({ song }) {
                             isPlaying={isPlaying}
                             uploadedSong={uploadedSong}
                             duration={duration}
-                            songEnded={songEnded}
+                            isSongEnded={isSongEnded}
                             onCueTimeChange={e => setCueTime(e.target.value)}
+                            isFullSize={isFullSize}
+                            setIsFullSize={setIsFullSize}
                         />
                     </div>
                 </div>