фейдинг аудио и попытка что-то исправить

VKAPI/Handlers/Audio.php

@@ -733,7 +733,7 @@ public function deleteAlbum(int $album_id): int
         return 1;
     }
 
-    public function moveToAlbum(int $album_id, string $audio_ids): int
+    public function moveToAlbum(int $album_id, string $audio_ids, ?bool $do_link = false): int
     {
         $this->requireUser();
         $this->willExecuteWriteAction();
@@ -769,7 +769,14 @@ public function moveToAlbum(int $album_id, string $audio_ids): int
         $res = 1;
         try {
             foreach ($audios as $audio) {
-                $res = min($res, (int) $album->add($audio));
+                if ($do_link) {
+                    if ($audio->canBeModifiedBy($this->getUser())) {
+                        $audio->setAlbum($album);
+                        $audio->save();
+                    }
+                } else {
+                    $res = min($res, (int) $album->add($audio));
+                }
             }
         } catch (\OutOfBoundsException $ex) {
             return 0;

Web/Models/Entities/Audio.php

@@ -408,7 +408,6 @@ public function toVkApiStruct(?User $user = null, bool $forceURLExposure = false
         $obj->artist     = $this->getPerformer();
         $obj->title      = $this->getTitle();
         $obj->duration   = $this->getLength();
-        $obj->album_id   = $obj->album = null; # i forgor to implement
         $obj->url        = false;
         $obj->manifest   = false;
         $obj->keys       = false;
@@ -424,6 +423,7 @@ public function toVkApiStruct(?User $user = null, bool $forceURLExposure = false
         $album = $this->getAlbum();
         if ($album) {
             $obj->album = $album->toVkApiStruct($user);
+            $obj->album_id = $album->getPrettyId();
         }
 
         $obj->added      = $user && $this->isInLibraryOf($user);

Web/Presenters/AudioPresenter.php

@@ -877,6 +877,7 @@ public function renderApiGetContext()
 
         foreach ($audios as $audio) {
             $obj = $audio->toVkApiStruct($this->user->identity);
+            $obj->id = $audio->getId();
             $obj->name = $audio->getTitle();
             $obj->performer = $audio->getPerformer();
             $obj->length = $audio->getLength();

Web/static/css/audios.css

@@ -65,9 +65,11 @@
     left: 0;
     width: 70%;
     background: var(--common-2);
-    padding: 10px 14px;
-    border-bottom: 1px solid var(--brand);
-    box-shadow: 0px 5px 9px 0px #2b2b2b33;
+    margin-left: -1px;
+    padding: 15px 14px 17px 15px;
+    border: 1px solid #d8d8d8;
+    border-top: unset;
+    box-shadow: 0px 10px 8px 0px #2b2b2b33;
 }
 
 .bigPlayer.album_shown #album_info {
@@ -78,7 +80,7 @@
 .bigPlayer.album_shown #album_info a {
     display: flex;
     align-items: center;
-    gap: 7px;
+    gap: 13px;
 }
 
 .bigPlayer.album_shown #album_info a, 
@@ -93,7 +95,7 @@
 }
 
 .bigPlayer.album_shown #album_info img {
-    width: 22px;
+    width: 27px;
     border-radius: 1px;
 }
 

Web/static/css/main.css

@@ -4144,9 +4144,10 @@ hr {
 }
 
 #ctx_menu a {
-    padding: 5px 6px 6px 8px;
+    padding: 5px 6px 6px 20px;
     color: black;
     position: relative;
+    font-size: 10px;
 }
 
 #ctx_menu a:hover {

Web/static/js/al_music.js

@@ -107,6 +107,7 @@ window.player = new class {
 
     __linked_player_id = null
     current_track_id = 0
+    _fading = false
     tracks = []
 
     // 0 - shows remaining time before end
@@ -195,6 +196,10 @@ window.player = new class {
         }
 
         this.audioPlayer.onvolumechange = () => {
+            if (this._fading == true) {
+                return
+            }
+
             const volume = this.audioPlayer.volume;
             const ps = Math.ceil((volume * 100) / 1);
 
@@ -419,6 +424,7 @@ window.player = new class {
 
         document.querySelectorAll('audio').forEach(el => el.pause())
 
+        this._volumeFade(false)
         await this.audioPlayer.play()
         this.__setFavicon()
         this.__updateFace()
@@ -430,12 +436,53 @@ window.player = new class {
             return
         }
 
-        this.audioPlayer.pause()
+        this._volumeFade(true)
+
+        setTimeout(() => {
+            this.audioPlayer.pause()
+            this.__updateFace()
+        }, 150)
         this.__setFavicon('paused')
-        this.__updateFace()
         navigator.mediaSession.playbackState = "paused"
     }
 
+    _volumeFade(down = false, interval = 15) {
+        const step = 0.03
+
+        if (!this.audioPlayer || this._fading) {
+            return
+        }
+
+        const current_volume = this.audioPlayer.volume
+
+        if (down) {
+            this.audioPlayer.volume = current_volume
+        } else {
+            this.audioPlayer.volume = 0
+        }
+
+        this._fading = true
+
+        const _i = setInterval(() => {
+            let done = false
+            if (down) {
+                this.audioPlayer.volume = Math.max(0, this.audioPlayer.volume - step)
+
+                done = this.audioPlayer.volume == 0
+            } else {
+                this.audioPlayer.volume = Math.min(1, this.audioPlayer.volume + step)
+
+                done = this.audioPlayer.volume >= current_volume
+            }
+
+            if (done) {
+                this.audioPlayer.volume = current_volume
+                this._fading = false
+                clearInterval(_i)
+            }
+        }, interval);
+    }
+
     async playPreviousTrack() {
         if(!this.currentTrack || !this.previousTrack) {
             return
@@ -641,7 +688,11 @@ window.player = new class {
     }
 
     __updateFace() {
-        const _c = new AudioTrack(this.currentTrack)
+        let _c = null
+        if (this.currentTrack) { 
+            _c = new AudioTrack(this.currentTrack)
+        }
+
         const prev_button = this.uiPlayer.find('.nextButton')
         const next_button = this.uiPlayer.find('.backButton')
 
@@ -691,7 +742,7 @@ window.player = new class {
         }
 
         if(_c) {
-            this.uiPlayer.find('.trackInfo .trackName span').html(escapeHtml(_c.getName()))
+            this.uiPlayer.find('.trackInfo .trackName span').html(escapeHtml(_c.getTitle()))
             this.uiPlayer.find('.trackInfo .trackPerformers').html('')
             const performers = _c.getPerformers()
             const lastPerformer = performers[performers.length - 1]
@@ -718,7 +769,7 @@ window.player = new class {
         if(this.ajaxPlayer.length > 0) {
             if(_c) {
                 this.ajaxPlayer.find('#aj_player_track_title b').html(escapeHtml(_c.getPerformer()))
-                this.ajaxPlayer.find('#aj_player_track_title span').html(escapeHtml(_c.getName()))
+                this.ajaxPlayer.find('#aj_player_track_title span').html(escapeHtml(_c.getTitle()))
             }
         }
 
@@ -1342,7 +1393,8 @@ u(document).on('contextmenu', '.bigPlayer, .audioEmbed, #ajax_audio_player', (e)
             <a id='audio_ctx_mute' ${window.player.audioPlayer.muted ? `class='pressed'` : ''}>${tr('mute_tip_noun')}</a>
             ` : ''}
             ${ctx_type == 'mini_player' ? `
-            <a style='display:none;' id='audio_ctx_play_next'>${tr('audio_ctx_play_next')}</a>    
+            <a style='display:none;' id='audio_ctx_play_next'>${tr('audio_ctx_play_next')}</a>
+            <a id='audio_ctx_link_playlist'>${tr('playlist')}</a>
             ` : ''}
             <a id='audio_ctx_add_to_group'>${tr('audio_ctx_add_to_group')}</a>
             <a id='audio_ctx_add_to_playlist'>${tr('audio_ctx_add_to_playlist')}</a>
@@ -1450,6 +1502,64 @@ u(document).on('contextmenu', '.bigPlayer, .audioEmbed, #ajax_audio_player', (e)
     ctx_u.find('#audio_ctx_show_count').on('click', (ev) => {
         window.player.bigPlayer_toggleCountBlock()
     })
+    ctx_u.find('#audio_ctx_link_playlist').on('click', async (ev) => {
+        let track_id = 0
+        if(ctx_type == 'main_player') {
+            if(window.player.current_track_id == 0) {
+                return
+            }
+
+            track_id = window.player.current_track_id
+        } else {
+            track_id = Number(u(e.target).closest('.audioEmbed').attr('data-realid'))
+        }
+
+        const audios = await window.OVKAPI.call('audio.getById', {
+            'audios': track_id
+        })
+        const audio = audios.items[0]
+        const id = audio.album_id
+
+        if (!audio.editable) {
+            if (id) {
+                window.router.route('/playlist' + id)
+            }
+            return
+        }
+        let body = u(`
+            <div>
+                <div>
+                    <div class="playlist_data"></div>
+                </div>
+                <div style="display: flex;align-items: center;gap: 3px;">
+                    <span>${escapeHtml(location.origin)}/playlist</span>
+                    <input style="width:50%;" type="text" id="playlist_id" value="${id ?? ""}">
+                </div>
+            </div>
+        `)
+        const msg = new CMessageBox({
+            title: '',
+            body: body.html(),
+            buttons: [tr('ok'), tr('cancel')],
+            callbacks: [async () => {
+                const new_id = msg.getNode().find('#playlist_id').nodes[0].value
+                if (new_id != '') {
+                    const playlist_id = new_id.split('_')
+
+                    try {
+                        await window.OVKAPI.call('audio.moveToAlbum', {
+                            'do_link': 1,
+                            'audio_ids': track_id,
+                            'album_id': playlist_id[1]
+                        })
+                    } catch(e) {
+                        makeError(e.message)
+                    }
+                }
+            }, () => {}]
+        })
+        msg.getNode().find('.ovk-diag-head').remove()
+    })
 })
 
 u(document).on("click", ".musicIcon.edit-icon", (e) => {