github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2024-11-22 06:37:18 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(ui): add fullscreen button (#2276)

Browse Source 
* feat(ui): add fullscreen button

* fix: fullscreen图标修改，添加exit icon
This commit is contained in:
StarsEnd 2024-08-13 14:28:05 +08:00 committed by GitHub
parent bd5af9c721
commit df82c7cd22
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/fullscreen-exit.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" data-darkreader-inline-fill="" xmlns="http://www.w3.org/2000/svg">
<path id="path" d="M1 11L3 11L3 13C3 13.55 3.45 14 4 14C4.55 14 5 13.55 5 13L5 10C5 9.45 4.55 9 4 9L1 9C0.45 9 0 9.45 0 10C0 10.55 0.45 11 1 11ZM11 3L11 1C11 0.45 10.55 0 10 0C9.45 0 9 0.45 9 1L9 4C9 4.54 9.45 5 10 5L13 5C13.55 5 14 4.54 14 4C14 3.45 13.55 3 13 3L11 3Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

3
src/assets/icons/fullscreen.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" data-darkreader-inline-fill="" xmlns="http://www.w3.org/2000/svg">
<path id="path" d="M1 9C0.45 9 0 9.45 0 10L0 13C0 13.55 0.45 14 1 14L4 14C4.55 14 5 13.55 5 13C5 12.45 4.55 12 4 12L2 12L2 10C2 9.45 1.55 9 1 9ZM9 1C9 1.54 9.45 2 10 2L12 2L12 4C12 4.54 12.45 5 13 5C13.55 5 14 4.54 14 4L14 1C14 0.45 13.55 0 13 0L10 0C9.45 0 9 0.45 9 1Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

23
src/views/lyrics.vue
View File

@ -268,6 +268,12 @@
<svg-icon icon-class="arrow-down" />
</button>
</div>
<div class="close-button" style="left: 24px" @click="fullscreen">
<button>
<svg-icon v-if="isFullscreen" icon-class="fullscreen-exit" />
<svg-icon v-else icon-class="fullscreen" />
</button>
</div>
</div>
</transition>
</template>
@ -305,6 +311,7 @@ export default {
minimize: true,
background: '',
date: this.formatTime(new Date()),
isFullscreen: !!document.fullscreenElement,
};
},
computed: {
@ -435,6 +442,15 @@ export default {
this.getLyric();
this.getCoverColor();
this.initDate();
document.addEventListener('keydown', e => {
if (e.key === 'F11') {
e.preventDefault();
this.fullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
this.isFullscreen = !!document.fullscreenElement;
});
},
beforeDestroy: function () {
if (this.timer) {
@ -466,6 +482,13 @@ export default {
second.padStart(2, '0')
);
},
fullscreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
},
addToPlaylist() {
if (!isAccountLoggedIn()) {
this.showToast(locale.t('toast.needToLogin'));