diff --git a/src/assets/icons/fullscreen-exit.svg b/src/assets/icons/fullscreen-exit.svg new file mode 100644 index 0000000000..f76f601e87 --- /dev/null +++ b/src/assets/icons/fullscreen-exit.svg @@ -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> \ No newline at end of file diff --git a/src/assets/icons/fullscreen.svg b/src/assets/icons/fullscreen.svg new file mode 100644 index 0000000000..e6128c0a70 --- /dev/null +++ b/src/assets/icons/fullscreen.svg @@ -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> \ No newline at end of file diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue index a46695cc9f..a593fdd458 100644 --- a/src/views/lyrics.vue +++ b/src/views/lyrics.vue @@ -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'));