Lyrics - make scroll smooth #158

mgireesha · Oct 20, 2024 · e6d5b9b · e6d5b9b
1 parent fda5221
commit e6d5b9b
Show file tree

Hide file tree

Showing 15 changed files with 489 additions and 103 deletions.
diff --git a/src/g-player-react/src/Components/history/RecentPlays.js b/src/g-player-react/src/Components/history/RecentPlays.js
@@ -4,7 +4,6 @@ import { Header } from "../header/Header";
 import { CURRENT_PAGE, RECENT_PLAYS, RECENT_PLAYS_LABEL } from "../redux/GPActionTypes";
 import { fetchAllHistory } from "../redux/library/LibraryActions";
 import { AlbumThumbsGrouped } from "../screen/album/AlbumThumbsGrouped";
-import { Track } from "../screen/track/Track";
 import { AlbumThumb } from "../screen/album/AlbumThumb";
 import { setCookies } from "../utilities/util";
 import { TrackList } from "../screen/track/TrackList";
@@ -20,7 +19,7 @@ export const RecentPlays = () => {
     useEffect(()=>{
         dispatch(fetchAllHistory());
         setCookies(CURRENT_PAGE, JSON.stringify({type:RECENT_PLAYS}));
-    },[])
+    },[dispatch])
 
     useEffect(()=>{
         if(historyAlbums!==undefined){

diff --git a/src/g-player-react/src/Components/library/BuildLibrary.js b/src/g-player-react/src/Components/library/BuildLibrary.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { ARTIST_IMG_DOWNLOAD_STATUS, BUILD_STATUS, COMPLETED, COMPONENT, CURRENT_PAGE, GP_LIBRARY_DESCRIPTION, GP_LIBRARY_DESC_TEXT_1, INIT, INITIATED, LIBRARY, LIBRARY_BUILD, LIBRARY_LABEL, MUSIC_PATH, RUNNING } from "../redux/GPActionTypes";
+import { BUILD_STATUS, COMPONENT, GP_LIBRARY_DESCRIPTION, GP_LIBRARY_DESC_TEXT_1, INIT, INITIATED, LIBRARY_BUILD, RUNNING } from "../redux/GPActionTypes";
 import { fetchBuildStatusSucc, initLibraryBuild, setCommonPopupObj } from "../redux/library/LibraryActions";
 import { useDispatch, useSelector } from "react-redux";
 import { setCookies } from "../utilities/util";

diff --git a/src/g-player-react/src/Components/main.scss b/src/g-player-react/src/Components/main.scss
@@ -1800,10 +1800,23 @@ a.disabled-click{
     position: relative;
     overflow: hidden;
 
+    .lyrics-lines::-webkit-scrollbar { 
+        display: none;  /* Safari and Chrome */
+    }
+
+    .lyrics-lines{
+        overflow-y: auto;
+        max-height: 6.2em;
+
+        display: flex;
+        flex-direction: column;
+        row-gap: 10px;
+    }
+
     .show-lyrics-btn-container{
         position: absolute;
         bottom: 0;
-        left: 3.5%;
+        left: 6%;
         width: 90%;
         height: 20%;
 
@@ -1825,8 +1838,11 @@ a.disabled-click{
         text-overflow: ellipsis;
         /*to show dots if text is too long - end*/
 
-        span{
+        >span{
             font-size: 14px;
+            display:flex;
+            align-items: center;
+            justify-content: flex-end;
         }
     }
 
@@ -1859,6 +1875,11 @@ a.disabled-click{
     //     padding: 7.3px 15.3px;
     // }
 
+    .edit-lyrics{
+        width: 100%;
+        height: 92%;
+    }
+
     #new_lyrics_ta{
         margin-bottom: 7%;
         margin-top: 3%;
@@ -1900,11 +1921,26 @@ a.disabled-click{
     }
 
     .create-lyrics{
+        height: 100%;
+        width: 100%;
         max-height:85%;
         overflow-y:auto;
-        margin-left:20%;
-        .show-lyrics-btn-container{
+        display: flex;
+        //align-items: center;
+        padding: 0 15px;
+        column-gap: 10px;
+        .create-lyrics-btn-container{
+            display: flex;
+            flex-direction: column;
             row-gap: 5px;
+            justify-content: center;
+            width: 3em;
+            >div{
+                display: flex;
+                flex-direction: column;
+                row-gap: 5px;
+                position: absolute;
+            }
             button{
                 cursor: pointer;
                 svg{
@@ -1936,6 +1972,10 @@ a.disabled-click{
     height: 100%;
     overflow-y: hidden;
 
+    .lyrics-lines{
+        max-height: 22em;
+    }
+
     .show-lyrics-btn-container{
         height: 10%;
     }
@@ -3485,7 +3525,7 @@ a.disabled-click{
     .header-container{
         .header{
             display: flex;
-            align-items: end;
+            align-items: flex-end;
             column-gap: 10px;
             div{
                 svg{

diff --git a/src/g-player-react/src/Components/player/Player.js b/src/g-player-react/src/Components/player/Player.js
@@ -4,29 +4,31 @@ import { FaPauseCircle, FaPlay } from "react-icons/fa";
 import { MdOutlineLyrics, MdSkipNext, MdSkipPrevious } from "react-icons/md";
 import { TiArrowRepeat } from "react-icons/ti";
 import { TbArrowsShuffle , TbRepeatOnce} from "react-icons/tb";
-import { RiRefreshLine } from "react-icons/ri";
 import { useDispatch, useSelector } from "react-redux";
 import { fettchCurrentSongStatus, playASong, playPause, setIsPlaying, setIsShuffle, setPlayBackLength, setRepeat } from "../redux/player/PlayerActions";
 import { getMins, scrolltoId, scrollToPlaying, setCookies } from "../utilities/util";
 import { VolumeH } from "./VolumeH";
 import { Link } from "react-router-dom";
 import { fetchAllHistory, updateHistory } from "../redux/library/LibraryActions";
 import { SliderRC } from "../SliderRC";
-import { CURRENT, NEXT, PLAYER, PLAYLIST, PREVIOUS, REPEAT_ALL, REPEAT_OFF, REPEAT_ONE } from "../redux/GPActionTypes";
-
+import { ALBUM, ARTIST, CURRENT, GENRE, LANGUAGE, NEXT, PLAYER, PLAYLIST, PREVIOUS, 
+    RECENT_PLAYS, REPEAT_ALL, REPEAT_OFF, REPEAT_ONE, TRACKS } from "../redux/GPActionTypes";
 import def_album_art from '../images/def_album_art.png';
 import { SplitAndLink } from "../utilities/SplitAndLink";
 import { RefreshBuild } from "./RefreshBuild";
+import { useCookies } from "react-cookie";
 
 export const Player = () => {
 
     const dispatch = useDispatch();
 
+    const [cookies] = useCookies();
+
     const playerTracks = useSelector(state => state.library.playerTracks);
     const isPlaying = useSelector(state => state.player.isPlaying);
     const repeat = useSelector(state => state.player.repeat);
     const isShuffle = useSelector(state => state.player.isShuffle);
-    const songPlaying = useSelector(state => state.player.songPlaying);
+    let songPlaying = useSelector(state => state.player.songPlaying);
     const playedFrom = useSelector(state => state.player.playedFrom);
     const playingSongStat = useSelector(state => state.player.playingSongStat);
     const playlistSongs = useSelector(state => state.playlist.playlistSongs);
@@ -44,7 +46,6 @@ export const Player = () => {
             var key = event.which || event.keyCode; // keyCode detection
             var ctrl = event.ctrlKey ? event.ctrlKey : ((key === 17) ? true : false); // ctrl detection
             var shift = event.shiftKey ? event.shiftKey : ((key === 16) ? true : false);
-            //console.log("key",key,"ctrl",ctrl,"shift",shift)
             if(ctrl){
                 switch (key) {
                     case 32:
@@ -63,9 +64,9 @@ export const Player = () => {
 
             if (shift) {
                 if(playingSongStat && playingSongStat.currentTime){
-                    if(key == 39){
+                    if(key === 39){
                         setSlctdPlayBackTime(currentPlayVal+5);
-                    }else if(key == 37){
+                    }else if(key === 37){
                         setSlctdPlayBackTime(currentPlayVal-5);
                     }
                 }
@@ -75,6 +76,7 @@ export const Player = () => {
         return () => {
             window.removeEventListener('keyup', handleEscape);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [songPlaying,playingSongStat]);
 
     useEffect(()=>{
@@ -84,6 +86,7 @@ export const Player = () => {
     useEffect(()=>{
         clearInterval(statClearIntrvl);
         if(isPlaying)setStatClearIntrvl(setInterval( dispatchFetchStat, 500));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     },[songPlaying,isPlaying]);
 
     useEffect(()=>{
@@ -96,23 +99,23 @@ export const Player = () => {
              rBtn.classList.remove('rotate-player-button');
          }));
 
-        [...document.getElementsByClassName('player-controls')].forEach(pc => {pc.classList.remove('opacity-player-console')})
+        [...document.getElementsByClassName('player-controls')].forEach(pc => {pc.classList.remove('opacity-player-console')});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     },[songPlaying]);
 
     useEffect(()=>{
         const tempPlayTime = playTime;
         if(playTime===10000 && songPlaying!==null){
             dispatch(updateHistory(songPlaying.songId));
         }
-
         if(playTime===12000){
             dispatch(fetchAllHistory());
         }
-
         if(playTime > 4000 && Number.isInteger(playTime/5000)){
             setCookies("playingSongStat",JSON.stringify(playingSongStat));
         }
         setPlayTime(tempPlayTime+500);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     },[playingSongStat])
 
     useEffect(()=>{
@@ -133,6 +136,7 @@ export const Player = () => {
             const pBarval = Math.floor((currentTime/trackLength)*100);
             setCurrentplayVal(pBarval);
        }
+       // eslint-disable-next-line react-hooks/exhaustive-deps
     },[playingSongStat]);
 
     const dispatchFetchStat = () => {
@@ -141,6 +145,7 @@ export const Player = () => {
 
     useEffect(()=> {
         getSetLibrary();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     },[isShuffle, playerTracks]);
 
     const getSetLibrary = () => {
@@ -261,20 +266,47 @@ export const Player = () => {
             setCookies("isShuffle", true);
         }
     }
+
+    const getToPageURL = (songPlaying) => {
+        let url = '#';
+        const playedFrom = cookies['playedFrom'];
+        if(playedFrom){
+            if(playedFrom.pfKey===PLAYLIST){
+                url = `/playlist/${playedFrom.pfField?.name}/${playedFrom.pfVal}`;
+            }else if(playedFrom.pfKey===ARTIST){
+                url = `music/artists/${playedFrom.pfVal}`;
+            }else if(playedFrom.pfKey===ALBUM){
+                url = `/music/albums/${songPlaying?.album}`;
+            }else if(playedFrom.pfKey===GENRE){
+                url = `/music/genres/${playedFrom.pfVal}`;
+            }else if(playedFrom.pfKey===LANGUAGE){
+                url = `/music/languages/${playedFrom.pfVal}`;
+            }else if(playedFrom.pfKey===RECENT_PLAYS){
+                url = `/recent`;
+            }else if(playedFrom.pfKey===TRACKS){
+                url = `/music/tracks`;
+            }
+        }else if(songPlaying){
+            url = `/music/albums/${songPlaying.album}`;
+        }
+        return url;
+    }
 
     return (
         <div className="player">
             <div className="player-container">
                 <div className="song-info">
                     <Link to={songPlaying!==null?`/music/albums/${songPlaying.album}`:'#'}>
                         <div className="song-info-img">
-                            <img src={songPlaying ?`/gp_images/albums/${songPlaying.album}.jpg`: def_album_art} />
-                            {/* {songPlayingImg !== null && songPlayingImg!=='' && <img src={songPlayingImg} />}
-                            {(songPlayingImg===null || songPlayingImg==='') && <img src={def_album_art} />} */}
+                            <img src={songPlaying ?`/gp_images/albums/${songPlaying.album}.jpg`: def_album_art} alt={songPlaying?.album} />
                         </div>
                     </Link>
                     <div className="song-info-title">
-                        <p onClick={()=>scrollToPlaying(isPlaying)} style={{cursor:'pointer'}}>{songPlaying && songPlaying.title}{songPlaying && songPlaying.lyricsAvl && <span><MdOutlineLyrics title="This track has lyrics" style={{margin:'5px 0 0 5px'}} /></span>}</p>
+                        <Link to={getToPageURL(songPlaying)}>
+                            <p onClick={()=>scrollToPlaying(isPlaying)} style={{cursor:'pointer'}}>
+                                {songPlaying && songPlaying.title}{songPlaying && songPlaying.lyricsAvl && <span><MdOutlineLyrics title="This track has lyrics" style={{margin:'5px 0 0 5px'}} /></span>}
+                            </p>
+                        </Link>
                         <p style={{maxHeight: '3em',overflow: 'auto'}}>{songPlaying!==null && <SplitAndLink str={songPlaying.artist} url={`/music/artists/`} />}</p>
                     </div>
 

diff --git a/src/g-player-react/src/Components/playlist/ImportExportPlaylistPopupBtns.js b/src/g-player-react/src/Components/playlist/ImportExportPlaylistPopupBtns.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { COMING_SOON_LABEL, CSV_IMPORT_INPUT, EXPORT_LABEL, GP_IMPORT_INPUT, IMPORT_LABEL, IMPORT_PLAYLISTS_LABEL } from "../redux/GPActionTypes";
+import { COMING_SOON_LABEL, CSV_IMPORT_INPUT, EXPORT_LABEL, GP_IMPORT_INPUT, IMPORT_LABEL } from "../redux/GPActionTypes";
 import { useDispatch, useSelector } from "react-redux";
 import { exportPlaylists, importPlaylists } from "../redux/playlist/PlaylistActions";
 import { setCommonPopupObj } from "../redux/library/LibraryActions";
@@ -12,7 +12,6 @@ export const ImportExportPlaylistPopupBtns = () => {
 
     const [showImportOptions, setShowImportOptions] = useState(false);
     const [showSpinner, setShowSpinner] = useState(false);
-    const [selectedFiles, setSelectedFiles] = useState({});
 
     const onExportPlaylists = () => {
         if(window.confirm("Export Playlists ?")===true){
@@ -58,17 +57,9 @@ export const ImportExportPlaylistPopupBtns = () => {
             })
             tempSelectedFiles[playlistName] = result.split("\r\n");
         }
-        if(fileType === '.csv'){
-            setSelectedFiles(tempSelectedFiles); 
-        }else if(fileType === '.gp'){
+        if(fileType === '.gp'){
             tempSelectedFiles = getGPPLPayload(tempSelectedFiles);
         }
-
-        /*console.log("tempSelectedFiles",tempSelectedFiles);
-        const tempCommonPopupObj = {...commonPopupObj};
-        tempCommonPopupObj.payload = tempSelectedFiles;
-        tempCommonPopupObj.dispatchPayload = true;
-        dispatch(setCommonPopupObj(tempCommonPopupObj));*/
         return tempSelectedFiles;
     }
 

diff --git a/src/g-player-react/src/Components/redux/GPActionTypes.js b/src/g-player-react/src/Components/redux/GPActionTypes.js
@@ -139,6 +139,9 @@ export const SEARCH_RESULTS_LABEL = 'Search Results';
 export const SELECT_TRACKS_LABEL = 'Select tracks';
 export const UNSELECT_TRACKS_LABEL = 'Unselect tracks';
 export const SHOW_ASSIGNED_PLAYLISTS = 'SHOW_ASSIGNED_PLAYLISTS';
+export const SHOW_CREATE_LYRICS = 'SHOW_CREATE_LYRICS';
+export const SHOW_EDIT_LYRICS = 'SHOW_EDIT_LYRICS';
+export const SHOW_LYRICS = 'SHOW_LYRICS';
 export const SOME_PAGE = 'SOME_PAGE';
 export const SORT_A_TO_Z = 'SORT_A_TO_Z';
 export const SORT_A_TO_Z_DESC = 'SORT_A_TO_Z_DESC';

diff --git a/src/g-player-react/src/Components/screen/album/Album.js b/src/g-player-react/src/Components/screen/album/Album.js
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import def_album_art from '../../images/def_album_art.png';
 import { ALBUM, CURRENT_PAGE, EDIT_INFO_LABEL, MULTI_LINGUAL, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_TRACK_NUMBER, TRACKS_LABEL } from ".././../redux/GPActionTypes";
-import { Lyrics } from "../lyrics/Lyrics";
+import { Lyrics } from "../lyrics/LyricsV2";
 import { fetchAlbum, fetchAlbumTacks, setMetadataPopupObj } from "../../redux/library/LibraryActions";
 import { camelize, setCookies } from "../../utilities/util";
 import { TrackList } from "../track/TrackList";