From da82c84730f1c5240ae928dbc4ac45a1bf7cf0c2 Mon Sep 17 00:00:00 2001
From: veselcraft <veselcraft@icloud.com>
Date: Tue, 26 Nov 2024 03:32:40 +0300
Subject: [PATCH] feat(music): syncronized lyrics by lrc file format

!!!DRAFT!!!

Co-authored-by: Mikhail Serebryakov <126566943+synzr@users.noreply.github.com>
---
 Web/Models/Entities/Audio.php                |   5 +
 Web/Presenters/AudioPresenter.php            |  11 ++
 Web/Presenters/templates/Audio/bigplayer.xml |   2 +
 Web/Presenters/templates/Audio/player.xml    |   2 +-
 Web/routes.yml                               |   2 +
 Web/static/css/audios.css                    |  53 ++++++-
 Web/static/img/audios_controls.png           | Bin 4287 -> 5489 bytes
 Web/static/js/al_music.js                    | 141 ++++++++++++++++++-
 locales/en.strings                           |   2 +
 locales/ru.strings                           |   2 +
 locales/uk.strings                           |   2 +
 11 files changed, 214 insertions(+), 8 deletions(-)
 mode change 100644 => 100755 Web/static/img/audios_controls.png

diff --git a/Web/Models/Entities/Audio.php b/Web/Models/Entities/Audio.php
index 3b998f32..de7114b4 100644
--- a/Web/Models/Entities/Audio.php
+++ b/Web/Models/Entities/Audio.php
@@ -167,6 +167,11 @@ class Audio extends Media
         return !is_null($this->getRecord()->lyrics) ? htmlspecialchars($this->getRecord()->lyrics, ENT_DISALLOWED | ENT_XHTML) : NULL;
     }
 
+    function getLRC(): ?string
+    {
+        return !is_null($this->getRecord()->lrc) ? htmlspecialchars($this->getRecord()->lrc, ENT_DISALLOWED | ENT_XHTML) : NULL;
+    }
+
     function getLength(): int
     {
         return $this->getRecord()->length;
diff --git a/Web/Presenters/AudioPresenter.php b/Web/Presenters/AudioPresenter.php
index ae38d1d0..d06c9c0a 100644
--- a/Web/Presenters/AudioPresenter.php
+++ b/Web/Presenters/AudioPresenter.php
@@ -802,4 +802,15 @@ final class AudioPresenter extends OpenVKPresenter
 
         $this->returnJson($resultArr);
     }
+
+    function renderLRC(int $id) {
+        $audio = (new Audios)->get($id);
+        header("Content-Type: application/octet-stream");
+        
+        if ($audio->isAvailable()) {
+            exit($audio->getLRC());
+        } else {
+            exit("");
+        }
+    }
 }
diff --git a/Web/Presenters/templates/Audio/bigplayer.xml b/Web/Presenters/templates/Audio/bigplayer.xml
index 6ae6326d..c400839d 100644
--- a/Web/Presenters/templates/Audio/bigplayer.xml
+++ b/Web/Presenters/templates/Audio/bigplayer.xml
@@ -48,9 +48,11 @@
         </div>
 
         <div class="additionalButtons">
+            <div class="lyricsButton musicIcon" title="{_lyrics_tip}"></div>
             <div class="repeatButton musicIcon" title="{_repeat_tip} [R]" ></div>
             <div class="shuffleButton musicIcon" title="{_shuffle_tip}"></div>
             <div class="deviceButton musicIcon" title="{_mute_tip} [M]"></div>
         </div>
     </div>
+    <div class="lyrics"></div>
 </div>
diff --git a/Web/Presenters/templates/Audio/player.xml b/Web/Presenters/templates/Audio/player.xml
index 24fe4723..031b3f0c 100644
--- a/Web/Presenters/templates/Audio/player.xml
+++ b/Web/Presenters/templates/Audio/player.xml
@@ -2,7 +2,7 @@
 {php $isWithdrawn = $audio->isWithdrawn()}
 {php $isAvailable = $audio->isAvailable()}
 {php $editable = isset($thisUser) && $audio->canBeModifiedBy($thisUser)}
-<div id="audioEmbed-{$id}" data-realid="{$audio->getId()}" {if $hideButtons}data-prettyid="{$audio->getPrettyId()}" data-name="{$audio->getName()}"{/if} data-genre="{$audio->getGenre()}" class="audioEmbed {if !$isAvailable}processed{/if} {if $isWithdrawn}withdrawn{/if}" data-length="{$audio->getLength()}" data-keys="{json_encode($audio->getKeys())}" data-url="{$audio->getURL()}">
+<div id="audioEmbed-{$id}" data-realid="{$audio->getId()}" {if $hideButtons}data-prettyid="{$audio->getPrettyId()}" data-name="{$audio->getName()}"{/if} data-genre="{$audio->getGenre()}" class="audioEmbed {if !$isAvailable}processed{/if} {if $isWithdrawn}withdrawn{/if}" data-length="{$audio->getLength()}" data-keys="{json_encode($audio->getKeys())}" data-url="{$audio->getURL()}" {if !empty($audio->getLRC()) }data-lrc="/audio{$audio->getId()}/lrc"{/if}>
     <audio class="audio" />
 
     <div id="miniplayer" class="audioEntry">
diff --git a/Web/routes.yml b/Web/routes.yml
index 59b470c5..5a548df2 100644
--- a/Web/routes.yml
+++ b/Web/routes.yml
@@ -225,6 +225,8 @@ routes:
       handler: "Audio->playlists"
     - url: "/audio{num}/action"
       handler: "Audio->action"
+    - url: "/audio{num}/lrc"
+      handler: "Audio->lrc"
     - url: "/{?!club}{num}"
       handler: "Group->view"
       placeholders:
diff --git a/Web/static/css/audios.css b/Web/static/css/audios.css
index dae9020b..de60caa7 100644
--- a/Web/static/css/audios.css
+++ b/Web/static/css/audios.css
@@ -80,7 +80,7 @@
 .bigPlayer .paddingLayer .additionalButtons {
     float: left;
     margin-top: -6px;
-    width: 11%;
+    width: 14%;
 }
 
 .bigPlayer .paddingLayer .additionalButtons .repeatButton {
@@ -92,6 +92,14 @@
     float: left;
 }
 
+.bigPlayer .paddingLayer .additionalButtons .lyricsButton {
+    width: 12px;
+    height: 16px;
+    background-position: -79px -65px;
+    margin-left: 7px;
+    float: left;
+}
+
 .broadcastButton {
     width: 16px;
     height: 12px;
@@ -138,7 +146,7 @@
     float: left;
     margin-top: -13px;
     margin-left: 13px;
-    width: 63%;
+    width: 61%;
     position: relative;
 }
 
@@ -212,6 +220,47 @@
     width:72%
 }
 
+.bigPlayer .lyrics {
+	width: 100%;
+	height: 400px;
+	background-color: #ffffff;
+	margin-top: 23px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    box-shadow: 0px 2px 3px -2px #000a;
+    transition: 250ms ease-in;
+	display: none;
+    opacity: 0;
+}
+
+.bigPlayer .lyrics.shown {
+    opacity: 1;
+}
+
+.bigPlayer .lyrics .lyrics__line {
+    font-family: Tahoma;
+    font-size: 15pt;
+    padding: 7px 20px;
+    color: gray;
+    transition: 250ms ease-out;
+}
+  
+.bigPlayer .lyrics .lyrics__line__active {
+    color:black;
+    font-size: 17pt;
+}
+
+.bigPlayer .lyrics .lyrics__message {
+    font-family: Tahoma;
+    font-size: 9pt;
+    text-align: center;
+    padding: 3px;
+    padding-top: 50px;
+    color: black;
+}
+  
+
 .audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
     margin-top: 3px;
     width: calc(100% - 8px);
diff --git a/Web/static/img/audios_controls.png b/Web/static/img/audios_controls.png
old mode 100644
new mode 100755
index 47f39673fcee892f989fc9c8790cf753060bc631..b8c9bd4457db12181ae3438e84cfdc50f925c8b5
GIT binary patch
literal 5489
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
S+c*9cwK?o?=&{AwsQ&;7AIhfy

literal 4287
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

diff --git a/Web/static/js/al_music.js b/Web/static/js/al_music.js
index 2c8e11db..92525bb4 100644
--- a/Web/static/js/al_music.js
+++ b/Web/static/js/al_music.js
@@ -78,10 +78,117 @@ class bigPlayer {
 
     timeType = 0
 
+    lyricIndex = 0
+    lrcInterval = null;
+
     findTrack(id) {
         return this.tracks["tracks"].find(item => item.id == id)
     }
 
+    
+    // LRC | Synced lyrics functionality
+    _parseTimestamp = (timestamp) => {
+        if (timestamp[2] !== ":" || timestamp[5] !== ".") return;
+
+        const minutes = +timestamp.substring(0, 2);
+        const seconds = +timestamp.substring(3, 5);
+        const hundredths = +timestamp.substring(6, 8);
+
+        return minutes * 60 + seconds + hundredths / 100;
+    };
+
+    _parseLrcLine = (line) => {
+        if (!line.startsWith("[") && line.indexOf("]") !== 9) return;
+
+        const timestamp = this._parseTimestamp(line.substring(1, 9));
+        if (!timestamp) return;
+
+        return { timestamp, textContent: line.substring(10).trim() };
+    };
+
+    _parseLrc = (textContent) => {
+        return textContent.split("\n").map(this._parseLrcLine).filter(Boolean);
+    };
+
+    _importLrc = async (path) => {
+        return await fetch(path)
+            .then((response) => response.text())
+            .then(this._parseLrc);
+    };
+
+    // NOTE: LYRICS DOM FUNCTIONS
+    _createLineElement = (timestamp, textContent) => {
+        const element = document.createElement("div");
+
+        element.classList.add("lyrics__line");
+        element.setAttribute("data-timestamp", timestamp);
+
+        element.textContent = textContent;
+        document.querySelectorAll(`.lyrics`)[0].appendChild(element);
+    };
+
+    _loadLyrics = (lyrics) => {
+        document.querySelectorAll(`.lyrics`)[0].innerHTML = "";
+        document.querySelectorAll(`.lyrics`)[0].scrollTop = 0;
+
+        lyrics.forEach(({ timestamp, textContent }) =>
+            this._createLineElement(timestamp, textContent)
+        );
+
+        if (lyrics.length == 0) 
+        {
+            document.querySelectorAll(`.lyrics`)[0].innerHTML = `<div class="lyrics__message">${tr("sync_lyrics_not_available")}</div>`
+        }
+    };
+
+    handleLyricsSync = () => {
+        let currentLyric = document.querySelectorAll(`.lyrics`)[0].children[this.lyricIndex];
+
+        if (currentLyric == undefined) return;
+
+        let timestamp = currentLyric.getAttribute("data-timestamp");
+        let isActive = currentLyric.classList.contains("lyrics__line__active");
+
+        if (!isActive && this.player().currentTime >= timestamp) {
+            document.querySelectorAll(`.lyrics`)[0].scrollTop = currentLyric.offsetTop - 55
+            return currentLyric.classList.add("lyrics__line__active");
+        }
+
+        if (document.querySelectorAll(`.lyrics`)[0].children.length === this.lyricIndex + 1) {
+            return;
+        }
+
+        let nextLyric = document.querySelectorAll(`.lyrics`)[0].children[this.lyricIndex + 1];
+        let nextTimestamp = +nextLyric.getAttribute("data-timestamp");
+
+        if (isActive && this.player().currentTime >= nextTimestamp) {
+            currentLyric.classList.remove("lyrics__line__active");
+            return this.lyricIndex++;
+        }
+    }
+
+    updateLyricIndex = () => {
+        if (this.lyricIndex < 0) {
+            this.lyricIndex = 0;
+        }
+    
+        document.querySelectorAll(`.lyrics`)[0].children[this.lyricIndex].classList.remove(
+          "lyrics__line__active"
+        );
+    
+        this.lyricIndex = [...document.querySelectorAll(`.lyrics`)[0].children].findIndex(
+          (lyric) => {
+            const timestamp = +lyric.getAttribute("data-timestamp");
+            return timestamp >= this.player().currentTime;
+          }
+        );
+    
+        let currentLyric = document.querySelectorAll(`.lyrics`)[0].children[this.lyricIndex];
+    
+        document.querySelectorAll(`.lyrics`)[0].scrollTop = currentLyric.offsetTop - 55
+        currentLyric.classList.add("lyrics__line__active");
+    }
+
     constructor(context, context_id, page = 1) {
         this.context["context_type"] = context
         this.context["context_id"] = context_id
@@ -151,7 +258,6 @@ class bigPlayer {
 
             if (ps <= 100)
                 this.nodes["thisPlayer"].querySelector(".selectableTrack .slider").style.left = `${ ps}%`;
-
         })
 
         u(this.player()).on("volumechange", (e) => {
@@ -173,6 +279,7 @@ class bigPlayer {
             const width = e.clientX - rect.left;
             const time = Math.ceil((width * this.tracks["currentTrack"].length) / (rect.right - rect.left));
 
+            this.updateLyricIndex();
             this.player().currentTime = time;
         })
 
@@ -275,6 +382,22 @@ class bigPlayer {
             else
                 this.player().loop = false
         })
+        
+        u(".bigPlayer .additionalButtons .lyricsButton").on("click", (e) => {
+            if(this.tracks["currentTrack"] == null)
+                return
+
+            e.currentTarget.classList.toggle("pressed")
+
+            if (document.querySelectorAll(`.lyrics`)[0].classList.contains("shown")) {
+                document.querySelectorAll(`.lyrics`)[0].style.display = "block";
+                document.querySelectorAll(`.lyrics`)[0].classList.remove("shown");
+                setTimeout(() => {document.querySelectorAll(`.lyrics`)[0].style.display = ""}, 250);
+            } else {
+                document.querySelectorAll(`.lyrics`)[0].style.display = "block";
+                setTimeout(() => {document.querySelectorAll(`.lyrics`)[0].classList.add("shown")}, 50);
+            }
+        })
 
         u(".bigPlayer .additionalButtons .shuffleButton").on("click", (e) => {
             if(this.tracks["currentTrack"] == null)
@@ -327,9 +450,11 @@ class bigPlayer {
                     break
                 case "ArrowLeft":
                     this.player().currentTime = this.player().currentTime - 3
+                    this.updateLyricIndex();
                     break
                 case "ArrowRight":
                     this.player().currentTime = this.player().currentTime + 3
+                    this.updateLyricIndex();
                     break
                 // буквально
                 case " ":
@@ -400,7 +525,7 @@ class bigPlayer {
                 
                 return
             }
-
+            this.lrcInterval = clearInterval(this.lrcInterval);
             this.showNextTrack()
         })
         
@@ -429,6 +554,9 @@ class bigPlayer {
                     }
                 })
             }, 2000)
+
+            this.lyricIndex = 0;
+            this._importLrc(`/audio${this.tracks.currentTrack.id}/lrc`).then(this._loadLyrics)
         })
 
         if(localStorage.volume != null && localStorage.volume < 1 && localStorage.volume > 0)
@@ -447,6 +575,7 @@ class bigPlayer {
         navigator.mediaSession.setActionHandler('nexttrack', () => { this.showNextTrack() });
         navigator.mediaSession.setActionHandler("seekto", (details) => {
             this.player().currentTime = details.seekTime;
+            this.updateLyricIndex;
         });
     }
 
@@ -459,7 +588,8 @@ class bigPlayer {
         this.player().play()
         this.nodes["playButtons"].querySelector(".playButton").classList.add("pause")
         document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_paused.png")
-    
+        this.lrcInterval = setInterval(this.handleLyricsSync);
+
         navigator.mediaSession.playbackState = "playing"
     }
     
@@ -471,7 +601,8 @@ class bigPlayer {
         this.player().pause()
         this.nodes["playButtons"].querySelector(".playButton").classList.remove("pause")
         document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_playing.png")
-    
+        this.lrcInterval = clearInterval(this.lrcInterval);
+
         navigator.mediaSession.playbackState = "paused"
     }
 
@@ -788,7 +919,7 @@ function initPlayer(id, keys, url, length) {
         $(`#audioEmbed-${ id} .track`).removeClass('shown')
         $(`#audioEmbed-${ id}`).removeClass("havePlayed")
     }
-
+    
     u(audio).on("play", playButtonImageUpdate);
     u(audio).on(["pause", "suspended"], playButtonImageUpdate);
     u(audio).on("ended", (e) => {
diff --git a/locales/en.strings b/locales/en.strings
index 0056c076..27b06336 100644
--- a/locales/en.strings
+++ b/locales/en.strings
@@ -912,6 +912,8 @@
 "audio_popular" = "Popular";
 "audio_search" = "Search";
 
+"sync_lyrics_not_available" = "Syncronized lyrics are not available.";
+
 "my_audios_small" = "My audios";
 "my_playlists" = "My playlists";
 "playlists" = "Playlists";
diff --git a/locales/ru.strings b/locales/ru.strings
index cd1c4ddf..da298b5f 100644
--- a/locales/ru.strings
+++ b/locales/ru.strings
@@ -867,6 +867,8 @@
 "audio_popular" = "Популярное";
 "audio_search" = "Поиск";
 
+"sync_lyrics_not_available" = "Синхронизированный текст песни недоступен.";
+
 "my_audios_small" = "Мои аудиозаписи";
 "my_playlists" = "Мои плейлисты";
 "playlists" = "Плейлисты";
diff --git a/locales/uk.strings b/locales/uk.strings
index 262f2b69..5389a74e 100644
--- a/locales/uk.strings
+++ b/locales/uk.strings
@@ -828,6 +828,8 @@
 "audio_popular" = "Популярні";
 "audio_search" = "Пошук";
 
+"sync_lyrics_not_available" = "Синхронізований текст пісні недоступний.";
+
 "my_audios_small" = "Мої аудіозаписи";
 "my_playlists" = "Мій список відтворення";
 "playlists" = "Списки відтворення";