Add delete lyrics button #128

pom.xml

@@ -10,7 +10,7 @@
 	</parent>
 	<groupId>com.gmt</groupId>
 	<artifactId>g-player</artifactId>
-	<version>2.4.2</version>
+	<version>2.4.3</version>
 	<name>G-Player-SB</name>
 	<description>G-Player-SB</description>
 	<properties>

src/g-player-react/src/Components/main.scss

@@ -2990,6 +2990,16 @@ a.disabled-click{
 
 }
 
+.g-btn.xl{
+    width: 11em;
+    padding: 7px;
+}
+
+.g-btn.lg{
+    width: 9em;
+    padding: 7px;
+}
+
 .g-btn.md{
     width: 7em;
     padding: 7px;
@@ -3062,6 +3072,14 @@ a.disabled-click{
     color: beige;
 }
 
+.g-btn.red1{
+    color: #921b1b;
+}
+
+.g-btn.red1:hover{
+    color: beige;
+}
+
 .g-btn.beige-border{
     border: 1px solid beige;
 }

src/g-player-react/src/Components/redux/GPApis.js

@@ -54,6 +54,10 @@ export const updateLyricsAPI = (songId, lyrics) => {
     return iAxios.put(`/library/song/lyrics/id/${songId}`,lyrics).then(response => response);
 }
 
+export const deleteLyricsAPI = (songId) => {
+    return iAxios.delete(`/library/song/lyrics/id/${songId}`).then(response => response);
+}
+
 export const fetchAlbumsByGenreAPI = (genre) => {
     return iAxios.get(`/library/albums/genre/${genre}`).then(response => response);
 }

src/g-player-react/src/Components/redux/GPSaga.js

@@ -1,6 +1,6 @@
 import { onDeleteMusicPath, onEditAlbumInfo, onEditTrackInfo, onFetchAlbum, onFetchAlbumimgs, onFetchAlbumListOfAA, onFetchAlbumsByGenre, onFetchAlbumTracks, onFetchAllAlbumArtistsDtls, onFetchAllAlbumDtls, onFetchAllAlbums, onFetchAllArtistsDtls, onFetchAllHistory, onFetchAllSongs, onFetchBuildStatus, onFetchGenreDetails, onFetchLanguageDetails, onFetchMessagesByType, onFetchMostPlayedData, onFetchMusicPath, onFetchSongsByArtist, onFetchSongsByGenre, onFetchSongsByLanguage, onInitArtistImgDownload, onInitDeltaLibraryBuild, onInitLibraryBuild, onsaveMusicPath, onSearchByKey, onUpdateHistory, onUploadArtistImg } from "./library/LibrarySaga";
 import {all} from 'redux-saga/effects'
-import { onFetchCurrentSongAndStatus, onFetchCurrentSongStatus, onPlayASong, onPlayPause, onSetMediaVolume, onSetPlayBackTime, onUpdateLyrics } from "./player/PlayerSaga";
+import { onDeleteLyrics, onFetchCurrentSongAndStatus, onFetchCurrentSongStatus, onPlayASong, onPlayPause, onSetMediaVolume, onSetPlayBackTime, onUpdateLyrics } from "./player/PlayerSaga";
 import { onAddToPlaylist, onCreatePlaylist, onDeletePlaylist, onExportPlaylists, onFetchPlaylistNames, onFetchSongsInPlaylist, onImportPlaylists, onRemoveFromPlaylist, onRenamePlaylist } from "./playlist/PlaylistSaga";
 
 export function* GPSaga(){
@@ -24,6 +24,7 @@ export function* GPSaga(){
         onFetchAlbumsByGenre(),
         onFetchCurrentSongAndStatus(),
         onUpdateLyrics(),
+        onDeleteLyrics(),
         onFetchAlbum(),
         onInitLibraryBuild(),
         onInitDeltaLibraryBuild(),

src/g-player-react/src/Components/redux/player/PlayerActionTypes.js

@@ -23,3 +23,6 @@ export const PLAYER_CURRENT_SONG_AND_STATUS_FAIL = 'PLAYER_CURRENT_SONG_AND_STAT
 export const PLAYER_UPDATE_LYRICS_START = 'PLAYER_UPDATE_LYRICS_START';
 export const PLAYER_UPDATE_LYRICS_SUCCESS = 'PLAYER_UPDATE_LYRICS_SUCCESS';
 export const PLAYER_UPDATE_LYRICS_FAIL = 'PLAYER_UPDATE_LYRICS_FAIL';
+export const PLAYER_DELETE_LYRICS_START = 'PLAYER_DELETE_LYRICS_START';
+export const PLAYER_DELETE_LYRICS_SUCCESS = 'PLAYER_DELETE_LYRICS_SUCCESS';
+export const PLAYER_DELETE_LYRICS_FAIL = 'PLAYER_DELETE_LYRICS_FAIL';

src/g-player-react/src/Components/redux/player/PlayerActions.js

@@ -1,5 +1,5 @@
 import { PLAYER_CURRENT_SONG_AND_STATUS_START, PLAYER_CURRENT_SONG_AND_STATUS_SUCCESS, 
-        PLAYER_CURRENT_SONG_STATUS_START, PLAYER_CURRENT_SONG_STATUS_SUCCESS, PLAYER_PLAY_A_SONG_START, 
+        PLAYER_CURRENT_SONG_STATUS_START, PLAYER_CURRENT_SONG_STATUS_SUCCESS, PLAYER_DELETE_LYRICS_START, PLAYER_DELETE_LYRICS_SUCCESS, PLAYER_PLAY_A_SONG_START, 
         PLAYER_PLAY_A_SONG_SUCCESS, PLAYER_PLAY_PAUSE_START, PLAYER_PLAY_PAUSE_SUCCESS, 
         PLAYER_SET_MEDIA_VOLUME_START, PLAYER_SET_MEDIA_VOLUME_SUCCESS, PLAYER_SET_PB_LENGTH_START, 
         PLAYER_SET_PB_LENGTH_SUCCESS, PLAYER_UPDATE_LYRICS_START, PLAYER_UPDATE_LYRICS_SUCCESS, 
@@ -101,4 +101,14 @@ export const updateLyrics = (songId, lyrics) => ({
 export const updateLyricsSucc = (response) => ({
     type: PLAYER_UPDATE_LYRICS_SUCCESS,
     response
+})
+
+export const deleteLyrics = (songId) => ({
+    type: PLAYER_DELETE_LYRICS_START,
+    songId
+})
+
+export const deleteLyricsSucc = (response) => ({
+    type: PLAYER_DELETE_LYRICS_SUCCESS,
+    response
 })

src/g-player-react/src/Components/redux/player/PlayerReducer.js

@@ -1,7 +1,7 @@
 import { getCookieValue, setCookies } from "../../utilities/util";
 import { INIT, LOADING, REPEAT_OFF, SUCCESS, TRACK_LIST } from "../GPActionTypes";
 import { FETCH_SONGS_START } from "../library/LibraryActionTypes";
-import { PLAYER_CURRENT_SONG_AND_STATUS_START, PLAYER_CURRENT_SONG_AND_STATUS_SUCCESS, PLAYER_CURRENT_SONG_STATUS_START, PLAYER_CURRENT_SONG_STATUS_SUCCESS, PLAYER_PLAY_A_SONG_START, PLAYER_PLAY_A_SONG_SUCCESS, PLAYER_PLAY_PAUSE_START, PLAYER_PLAY_PAUSE_SUCCESS, PLAYER_SET_MEDIA_VOLUME_START, PLAYER_SET_MEDIA_VOLUME_SUCCESS, PLAYER_SET_PB_LENGTH_START, PLAYER_SET_PB_LENGTH_SUCCESS, PLAYER_UPDATE_LYRICS_SUCCESS, SET_PLAYER_ISPLAYING, SET_PLAYER_ISREPEAT, SET_PLAYER_ISSHUFFLE, SET_PLAYER_PLAYED_FROM } from "./PlayerActionTypes";
+import { PLAYER_CURRENT_SONG_AND_STATUS_START, PLAYER_CURRENT_SONG_AND_STATUS_SUCCESS, PLAYER_CURRENT_SONG_STATUS_START, PLAYER_CURRENT_SONG_STATUS_SUCCESS, PLAYER_DELETE_LYRICS_SUCCESS, PLAYER_PLAY_A_SONG_START, PLAYER_PLAY_A_SONG_SUCCESS, PLAYER_PLAY_PAUSE_START, PLAYER_PLAY_PAUSE_SUCCESS, PLAYER_SET_MEDIA_VOLUME_START, PLAYER_SET_MEDIA_VOLUME_SUCCESS, PLAYER_SET_PB_LENGTH_START, PLAYER_SET_PB_LENGTH_SUCCESS, PLAYER_UPDATE_LYRICS_SUCCESS, SET_PLAYER_ISPLAYING, SET_PLAYER_ISREPEAT, SET_PLAYER_ISSHUFFLE, SET_PLAYER_PLAYED_FROM } from "./PlayerActionTypes";
 
 export const initialState = {
     isPlaying:false,
@@ -125,6 +125,13 @@ const playerReducer = (state = initialState, action) => {
                 phase: PLAYER_UPDATE_LYRICS_SUCCESS
             }
         }
+        case PLAYER_DELETE_LYRICS_SUCCESS:{
+            return{
+                ...state,
+                songPlaying: action.response.library,
+                phase: PLAYER_DELETE_LYRICS_SUCCESS
+            }
+        }
         default:
             return {
                 ...state,

src/g-player-react/src/Components/redux/player/PlayerSaga.js

@@ -1,11 +1,11 @@
 import { call, put, takeEvery, takeLatest } from "redux-saga/effects";
 import { getCookieValue, handleAPIError, setCookies } from "../../utilities/util";
 import { GP_PAGE_TRACKS_MAP, MEDIA_PLAYER_NULL, PLAYER } from "../GPActionTypes";
-import { getCurrentSongAndStatusAPI, getCurrentSongStatusAPI, playASongAPI, playPauseAPI, setMediaVolumeAPI, 
+import { deleteLyricsAPI, getCurrentSongAndStatusAPI, getCurrentSongStatusAPI, playASongAPI, playPauseAPI, setMediaVolumeAPI, 
             setPlaybackLengthAPI, updateLyricsAPI } from "../GPApis";
-import { fetchCurrentSontAndStatusSucc, fettchCurrentSongStatusSucc, playASong, playASongSucc, playPauseSucc, 
+import { deleteLyricsSucc, fetchCurrentSontAndStatusSucc, fettchCurrentSongStatusSucc, playASong, playASongSucc, playPauseSucc, 
             setMediaVolumeSucc, setPlayBackLengthSucc, updateLyricsSucc } from "./PlayerActions";
-import { PLAYER_CURRENT_SONG_AND_STATUS_START, PLAYER_CURRENT_SONG_STATUS_START, PLAYER_PLAY_A_SONG_START, 
+import { PLAYER_CURRENT_SONG_AND_STATUS_START, PLAYER_CURRENT_SONG_STATUS_START, PLAYER_DELETE_LYRICS_START, PLAYER_PLAY_A_SONG_START, 
         PLAYER_PLAY_PAUSE_START, PLAYER_SET_MEDIA_VOLUME_START, PLAYER_SET_PB_LENGTH_START, 
         PLAYER_UPDATE_LYRICS_START 
     } from "./PlayerActionTypes";
@@ -147,4 +147,20 @@ export function* onUpdateLyricsAsync(payload){
         console.log(error);
         handleAPIError(error);
     }
+}
+
+export function* onDeleteLyrics(){
+    yield takeLatest(PLAYER_DELETE_LYRICS_START, onDeleteLyricsAsync);
+}
+
+export function* onDeleteLyricsAsync(payload){
+    try {
+        const response = yield call(deleteLyricsAPI,payload.songId);
+        if(response.status === 200){
+            yield put(deleteLyricsSucc(response.data));
+        }
+    } catch (error) {
+        console.log(error);
+        handleAPIError(error);
+    }
 }

src/g-player-react/src/Components/screen/lyrics/Lyrics.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { updateLyrics } from "../../redux/player/PlayerActions";
+import { deleteLyrics, updateLyrics } from "../../redux/player/PlayerActions";
 import { getLyricsFromLRC, getMins0 } from "../../utilities/util";
 import {  FaPlay } from "react-icons/fa";
 import { Link } from "react-router-dom";
@@ -15,6 +15,7 @@ import { MdOutlineSave } from "react-icons/md";
 import { MdOutlineCancelPresentation } from "react-icons/md";
 import { FaHourglassStart } from "react-icons/fa6";
 import { IoMdDownload } from "react-icons/io";
+import { RiDeleteBin6Line } from "react-icons/ri";
 
 export const Lyrics = () => {
     const dispatch = useDispatch();
@@ -181,6 +182,18 @@ export const Lyrics = () => {
         }
     }
 
+    const deleteLoadLyrics = () => {
+        if(window.confirm("Are you sure to delete lyrics ?")!==true){
+            return false;
+        }
+
+        if(window.confirm("This action is irreversible.")!==true){
+            return false;
+        }
+
+        dispatch(deleteLyrics(songPlaying.songId));
+    }
+
     const handleDoubleClickOnLyricsPage = () => {
         setLyricsUIExpanded(!lyricsUIExpanded);
     }
@@ -234,6 +247,7 @@ export const Lyrics = () => {
                 <>
                     <button onClick={initEditLyrics} className="g-btn xs success beige font-size-18" title="Edit Lyrics"><MdModeEdit /></button>
                     <button onClick={downLoadLyrics} className="g-btn xs success beige font-size-18" title="Download Lyrics"><IoMdDownload /></button>
+                    <button onClick={deleteLoadLyrics} className="g-btn xs red red1 font-size-18" title="Delete Lyrics"><RiDeleteBin6Line /></button>
                 </>
             }
         </div>

src/main/java/com/gmt/gp/controllers/LibraryController.java

@@ -133,6 +133,11 @@ public GPResponse updateLyrics(@RequestBody String lyrics, @PathVariable String
         return libraryService.updateLyrics(songId, lyrics);
     }
 
+    @DeleteMapping("/song/lyrics/id/{songId}")
+    public GPResponse deleteLyrics(@PathVariable String songId) {
+        return libraryService.deleteLyrics(songId);
+    }
+
     @RequestMapping("/albums")
     public Iterable<Album> getAllAlbums() {
         return libraryService.getAllAlbumsFromDb();

src/main/java/com/gmt/gp/services/LibraryService.java

@@ -745,7 +745,7 @@ public GPResponse updateLyrics(String songId, String lyrics) {
         try {
             lyrics = lyrics.replaceAll("\"", "");
             lyrics = lyrics.replaceAll("(\\\\r\\\\n|\\\\n)", "\\\n");
-            System.out.println("lyrics: " + lyrics);
+            LOG.info("lyrics: " + lyrics);
             Library song = libraryRepository.getBySongId(Integer.parseInt(songId));
             song.setLyrics(lyrics);
             song = libraryRepository.save(song);
@@ -763,6 +763,26 @@ public GPResponse updateLyrics(String songId, String lyrics) {
         return resp;
     }
 
+    public GPResponse deleteLyrics(String songId) {
+        GPResponse resp = new GPResponse();
+        try {
+            Library song = libraryRepository.getBySongId(Integer.parseInt(songId));
+            song.setLyrics(null);
+            song = libraryRepository.save(song);
+            AudioFile audioFile = AudioFileIO.read(new File(song.getSongPath()));
+            Tag tag = audioFile.getTag();
+            tag.deleteField(FieldKey.LYRICS);
+            audioFile.setTag(tag);
+            audioFile.commit();
+            song.setLyricsAvl(false);
+            libraryRepository.save(song);
+            resp.setLibrary(song);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return resp;
+    }
+
     // libraryRepository - end
 
     // albumRepository - start

src/main/resources/gp_react/asset-manifest.json

@@ -1,18 +1,18 @@
 {
   "files": {
-    "main.css": "/static/css/main.71ca3e22.css",
-    "main.js": "/static/js/main.b46a6fd0.js",
+    "main.css": "/static/css/main.f56e1292.css",
+    "main.js": "/static/js/main.9aeef251.js",
     "static/js/787.09cba7e9.chunk.js": "/static/js/787.09cba7e9.chunk.js",
     "static/media/Loading.gif": "/static/media/Loading.757857ce13a4e4e598e4.gif",
     "static/media/def_album_art.png": "/static/media/def_album_art.8f703ea1e26cee1e8ebb.png",
     "static/media/g_player_icon.png": "/static/media/g_player_icon.afa3935b5fcf43d3e484.png",
     "index.html": "/index.html",
-    "main.71ca3e22.css.map": "/static/css/main.71ca3e22.css.map",
-    "main.b46a6fd0.js.map": "/static/js/main.b46a6fd0.js.map",
+    "main.f56e1292.css.map": "/static/css/main.f56e1292.css.map",
+    "main.9aeef251.js.map": "/static/js/main.9aeef251.js.map",
     "787.09cba7e9.chunk.js.map": "/static/js/787.09cba7e9.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.71ca3e22.css",
-    "static/js/main.b46a6fd0.js"
+    "static/css/main.f56e1292.css",
+    "static/js/main.9aeef251.js"
   ]
 }

src/main/resources/gp_react/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/g-player-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/g-player-icon.png"/><link rel="manifest" href="/manifest.json"/><title>G player</title><script defer="defer" src="/static/js/main.b46a6fd0.js"></script><link href="/static/css/main.71ca3e22.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/g-player-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/g-player-icon.png"/><link rel="manifest" href="/manifest.json"/><title>G player</title><script defer="defer" src="/static/js/main.9aeef251.js"></script><link href="/static/css/main.f56e1292.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

src/main/resources/gp_react/static/js/main.9aeef251.js.LICENSE.txt

@@ -0,0 +1,119 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.1.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.5.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.5.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */