新增全屏状态
This commit is contained in:
lyswhut
@@ -26,16 +26,26 @@ const themes = {
|
||||
naruto: 'rgba(87,144,167,.14)',
|
||||
happy_new_year: 'rgba(192,57,43,.1)',
|
||||
}
|
||||
|
||||
const getBarWidth = canvasWidth => {
|
||||
let barWidth = (canvasWidth / 128) * 2.5
|
||||
const width = canvasWidth / 85
|
||||
// console.log(barWidth - width)
|
||||
// if (barWidth - width > 20) newBarWidth = 20
|
||||
// barWidth = newBarWidth
|
||||
return barWidth - width > 12 ? width : barWidth
|
||||
}
|
||||
export default {
|
||||
setup() {
|
||||
const dom_canvas = ref(null)
|
||||
const analyser = getAnalyser()
|
||||
|
||||
let ctx
|
||||
let bufferLength
|
||||
let bufferLength = 0
|
||||
let dataArray
|
||||
let WIDTH
|
||||
let HEIGHT
|
||||
let MAX_HEIGHT
|
||||
let barWidth
|
||||
let barHeight
|
||||
let x = 0
|
||||
@@ -89,7 +99,7 @@ export default {
|
||||
// let b = 50
|
||||
|
||||
// ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')'
|
||||
barHeight = barHeight * frequencyAvg + barHeight * 0.42
|
||||
barHeight = (barHeight * frequencyAvg + barHeight * 0.42) * MAX_HEIGHT
|
||||
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight)
|
||||
|
||||
x += barWidth
|
||||
@@ -101,7 +111,7 @@ export default {
|
||||
analyser.fftSize = 256
|
||||
bufferLength = analyser.frequencyBinCount
|
||||
// console.log(bufferLength)
|
||||
barWidth = (WIDTH / bufferLength) * 2.5
|
||||
barWidth = getBarWidth(WIDTH)
|
||||
dataArray = new Uint8Array(bufferLength)
|
||||
renderFrame()
|
||||
}
|
||||
@@ -110,14 +120,27 @@ export default {
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
const canvas = dom_canvas.value
|
||||
canvas.width = canvas.clientWidth
|
||||
canvas.height = canvas.clientHeight
|
||||
WIDTH = canvas.width
|
||||
HEIGHT = canvas.height
|
||||
MAX_HEIGHT = Math.round(HEIGHT * 0.4 / 255 * 10000) / 10000
|
||||
// console.log(MAX_HEIGHT)
|
||||
barWidth = getBarWidth(WIDTH)
|
||||
}
|
||||
|
||||
window.eventHub.on(eventPlayerNames.play, handlePlay)
|
||||
window.eventHub.on(eventPlayerNames.pause, handlePause)
|
||||
window.eventHub.on(eventPlayerNames.error, handlePause)
|
||||
window.addEventListener('resize', handleResize)
|
||||
onBeforeUnmount(() => {
|
||||
handlePause()
|
||||
window.eventHub.off(eventPlayerNames.play, handlePlay)
|
||||
window.eventHub.off(eventPlayerNames.pause, handlePause)
|
||||
window.eventHub.off(eventPlayerNames.error, handlePause)
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@@ -127,6 +150,8 @@ export default {
|
||||
canvas.height = canvas.clientHeight
|
||||
WIDTH = canvas.width
|
||||
HEIGHT = canvas.height
|
||||
MAX_HEIGHT = Math.round(HEIGHT * 0.4 / 255 * 10000) / 10000
|
||||
// console.log(MAX_HEIGHT)
|
||||
if (isPlay.value) handlePlay()
|
||||
})
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="$style.controlBtn">
|
||||
<div :class="$style.controlBtn" v-show="!isFullscreen">
|
||||
<button type="button" :class="[$style.btn, $style.close]" :tips="$t('close')" @click="close">
|
||||
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
|
||||
<use xlink:href="#icon-window-close"></use>
|
||||
@@ -16,10 +16,12 @@
|
||||
<script>
|
||||
import { base as eventBaseName } from '@renderer/event/names'
|
||||
// import { getRandom } from '../../utils'
|
||||
import { isFullscreen } from '@renderer/core/share'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
isFullscreen,
|
||||
min() {
|
||||
window.eventHub.emit(eventBaseName.min)
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :class="$style.menu">
|
||||
<ul :class="$style.list">
|
||||
<li v-for="item in menus" :key="item.to">
|
||||
<li v-for="item in menus" :key="item.to" :class="$style.navItem">
|
||||
<router-link :class="$style.link" :active-class="$style.active" :to="item.to" :tips="item.tips">
|
||||
<div :class="$style.icon">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" :viewBox="item.iconSize" space="preserve">
|
||||
@@ -98,13 +98,26 @@ export default {
|
||||
// .mixin-ellipsis-1;
|
||||
// }
|
||||
}
|
||||
.navItem {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: 84%;
|
||||
}
|
||||
}
|
||||
.link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// display: block;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
|
||||
position: relative;
|
||||
padding: 18px 3px;
|
||||
// padding: 18px 3px;
|
||||
// margin: 5px 0;
|
||||
// border-left: 5px solid transparent;
|
||||
transition: @transition-theme;
|
||||
@@ -114,6 +127,9 @@ export default {
|
||||
font-size: 11.5px;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
transition: background-color 0.3s ease;
|
||||
// border-radius: @radius-border;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="$style.aside">
|
||||
<div :class="[$style.aside, { [$style.fullscreen]: isFullscreen }]">
|
||||
<ControlBtns v-if="setting.controlBtnPosition == 'left'" />
|
||||
<div :class="$style.logo" v-else>L X</div>
|
||||
<NavBar />
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { isFullscreen } from '@renderer/core/share'
|
||||
|
||||
import ControlBtns from './ControlBtns'
|
||||
import NavBar from './NavBar'
|
||||
@@ -15,6 +16,11 @@ import NavBar from './NavBar'
|
||||
export default {
|
||||
name: 'CoreAside',
|
||||
components: { ControlBtns, NavBar },
|
||||
setup() {
|
||||
return {
|
||||
isFullscreen,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['setting']),
|
||||
},
|
||||
@@ -36,6 +42,13 @@ export default {
|
||||
-webkit-user-select: none;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
&.fullscreen {
|
||||
-webkit-app-region: no-drag;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template lang="pug">
|
||||
transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
|
||||
div(:class="$style.container" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
|
||||
div(:class="[$style.container, , { [$style.fullscreen]: isFullscreen }]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
|
||||
//- div(:class="$style.bg" :style="bgStyle")
|
||||
//- div(:class="$style.bg2")
|
||||
div(:class="[$style.header, $style.controlBtnLeft]" v-if="setting.controlBtnPosition == 'left'")
|
||||
@@ -52,6 +52,7 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
|
||||
|
||||
<script>
|
||||
import { useRefGetter, ref } from '@renderer/utils/vueTools'
|
||||
import { isFullscreen } from '@renderer/core/share'
|
||||
import { base as eventBaseName } from '@renderer/event/names'
|
||||
import {
|
||||
isShowPlayerDetail,
|
||||
@@ -117,6 +118,7 @@ export default {
|
||||
handleAfterEnter,
|
||||
handleAfterLeave,
|
||||
visibled,
|
||||
isFullscreen,
|
||||
min() {
|
||||
window.eventHub.emit(eventBaseName.min)
|
||||
},
|
||||
@@ -161,6 +163,15 @@ export default {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
.header {
|
||||
-webkit-app-region: no-drag;
|
||||
.close, .min {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// .bg {
|
||||
// position: absolute;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="$style.control">
|
||||
<div :class="$style.control" v-show="!isFullscreen">
|
||||
<button type="button" :class="[$style.btn, $style.min]" :tips="$t('min')" @click="min">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
|
||||
<use xlink:href="#icon-window-minimize-2"></use>
|
||||
@@ -15,6 +15,7 @@
|
||||
|
||||
<script>
|
||||
import { base as eventBaseName } from '@renderer/event/names'
|
||||
import { isFullscreen } from '@renderer/core/share'
|
||||
// import { getRandom } from '../../utils'
|
||||
|
||||
export default {
|
||||
@@ -29,6 +30,7 @@ export default {
|
||||
close() {
|
||||
window.eventHub.emit(eventBaseName.close)
|
||||
},
|
||||
isFullscreen,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="[$style.toolbar, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]">
|
||||
<div :class="[$style.toolbar, { [$style.fullscreen]: isFullscreen }, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]">
|
||||
<SearchInput />
|
||||
<div :class="$style.logo" v-if="setting.controlBtnPosition == 'left'">L X</div>
|
||||
<ControlBtns v-else />
|
||||
@@ -11,10 +11,16 @@ import { mapGetters } from 'vuex'
|
||||
|
||||
import ControlBtns from './ControlBtns'
|
||||
import SearchInput from './SearchInput'
|
||||
import { isFullscreen } from '@renderer/core/share'
|
||||
|
||||
export default {
|
||||
name: 'CoreToolBar',
|
||||
components: { SearchInput, ControlBtns },
|
||||
setup() {
|
||||
return {
|
||||
isFullscreen,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['setting']),
|
||||
},
|
||||
@@ -34,6 +40,13 @@ export default {
|
||||
-webkit-app-region: drag;
|
||||
z-index: 2;
|
||||
|
||||
&.fullscreen {
|
||||
-webkit-app-region: no-drag;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.controlBtnLeft {
|
||||
.control {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user