nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #40 from nikandlv/development 

Fullscreen fix, homepage bug fix and transition optimization
master
Nikan Dalvand 2019-07-31 23:02:34 +04:30 committed by GitHub
parent eb69961497 7113f66802
commit 2bfd100536
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/App.vue
View File

@ -2,7 +2,7 @@
<div id="app" class="root"> <div id="app" class="root">
<DockableSidebar /> <DockableSidebar />
<div class="page-wrapper"> <div class="page-wrapper">
<router-view class="page" :class="{'fullscreen' : fullscreenStatus}"></router-view> <router-view class="page"></router-view>
<PlayerBar class="player-bar" /> <PlayerBar class="player-bar" />
</div> </div>
</div> </div>
@ -31,7 +31,8 @@ $lato-font-path: '/node_modules/lato-font/fonts'
@include lato-include-font('normal') @include lato-include-font('normal')
.root
position: relative
.root,.page-wrapper .root,.page-wrapper
display: flex display: flex
@include lato-font('normal') @include lato-font('normal')

23
src/renderer/layouts/DockableSidebar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<section class="handle" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}"> <section class="handle" :class="{'open': menuStatus}">
<div @click="toggleMenuStatus" class="icon"> <div @click="toggleMenuStatus" class="icon">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
<g> <g>
@ -16,8 +16,8 @@
</div> </div>
<Logo :nopadding="true"/> <Logo :nopadding="true"/>
</section> </section>
<section class="overlay" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}" @click="toggleMenuStatus" /> <section class="overlay" :class="{'open': menuStatus}" @click="toggleMenuStatus" />
<section class="sidebar" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}"> <section class="sidebar" :class="{'open': menuStatus}">
<div class="logo-wrapper"> <div class="logo-wrapper">
<Logo class="logo" /> <Logo class="logo" />
</div> </div>
@ -142,7 +142,7 @@ export default {
methods: { methods: {
...mapActions(['toggleMenuStatus']) ...mapActions(['toggleMenuStatus'])
}, },
computed: mapGetters(['menuStatus', 'fullscreenStatus']) computed: mapGetters(['menuStatus'])
} }
</script> </script>
@ -156,7 +156,7 @@ section.handle
box-sizing: border-box box-sizing: border-box
transition: transform 300ms,box-shadow 200ms transition: transform 300ms,box-shadow 200ms
background-color: #fcfcfc background-color: #fcfcfc
transform: translateY(-100%) transform: translate3d(0,-100%,0)
display: flex display: flex
align-items: center align-items: center
z-index: 1210 z-index: 1210
@ -208,15 +208,8 @@ section.sidebar
min-height: 48px min-height: 48px
.icon .icon
display: none display: none
&.fullscreen
transform: translateX(-100%)
overflow-y: hidden
z-index: 1200
position: absolute
left: 0
top: 0
&.open &.open
transform: translateX(0%) transform: translate3d(0%,0,0)
padding: 1rem 0rem 0rem 1rem padding: 1rem 0rem 0rem 1rem
width: 300px width: 300px
overflow-y: hidden overflow-y: hidden
@ -237,7 +230,7 @@ section.sidebar
padding: 1rem 0rem 0rem 1rem padding: 1rem 0rem 0rem 1rem
@media(max-width: 800px) @media(max-width: 800px)
section.sidebar section.sidebar
transform: translateX(-100%) transform: translate3d(-100%,0,0)
overflow-y: hidden overflow-y: hidden
z-index: 1200 z-index: 1200
position: absolute position: absolute
@ -261,5 +254,5 @@ section.sidebar
.logo .logo
display: none display: none
section.handle section.handle
transform: translateY(0%) transform: translate3d(0,0%,0)
</style> </style>

6
src/renderer/layouts/HomePage.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<section> <section >
<ActionBar class="action-bar" /> <ActionBar class="action-bar" />
<div class="upper-row" > <div class="upper-row" >
<MusicRow :items='items' title="Top rated" /> <MusicRow :items='items' title="Top rated" />
@ -58,7 +58,7 @@ export default {
components: { ActionBar, MusicRow, List, ListItem, Button, MusicBox }, components: { ActionBar, MusicRow, List, ListItem, Button, MusicBox },
mounted () { mounted () {
let container = this.$el let container = this.$el
Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true }) Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true, alwaysShowTracks: true })
}, },
data: () => { data: () => {
return { return {
@ -261,6 +261,8 @@ export default {
<style lang="sass"> <style lang="sass">
section.page section.page
.scrollbar-track-x,.scrollbar-thumb-x
display: none !important
overflow-x: hidden overflow-x: hidden
.VueCarousel-wrapper .VueCarousel-wrapper
overflow: unset overflow: unset

90
src/renderer/layouts/PlayerBar.vue
View File

@ -1,37 +1,44 @@
<template> <template>
<section class="player" :class="{'fullscreen' : fullscreenStatus}"> <section>
<img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" /> <section class="player">
<div> <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
<p class="title">Yellow</p> <div>
<p class="artist">Rich Brian</p> <p class="title">Yellow</p>
</div> <p class="artist">Rich Brian</p>
<div class="visualizer"> </div>
<div id="visualizer"></div> <div class="visualizer">
<div id="minimap" class="shade"></div> <div id="visualizer"></div>
</div> <div id="minimap" class="shade"></div>
<div class="duration"> </div>
<p class="currentTime progress active">00:00</p> <div class="duration">
<p class="remainingTime">{{duration}}</p> <p class="currentTime progress active">00:00</p>
</div> <p class="remainingTime">{{duration}}</p>
<div class="control-buttons"> </div>
<IconButton variant="theme-icon" :click="toggleFavorite"> <div class="control-buttons">
<svg v-show="isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> <IconButton variant="theme-icon" :click="toggleFavorite">
<svg v-show="!isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg> <svg v-show="isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</IconButton> <svg v-show="!isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
<IconButton variant="contained"> </IconButton>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <IconButton variant="contained">
</IconButton> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<IconButton variant="contained large" :click="togglePlay"> </IconButton>
<svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <IconButton variant="contained large" :click="togglePlay">
<svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</IconButton> <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<IconButton variant="contained"> </IconButton>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <IconButton variant="contained">
</IconButton> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<IconButton variant="contained" :click="toggleFullscreenStatus"> </IconButton>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <IconButton variant="contained" :click="toggleFullscreenStatus">
</IconButton> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</div> </IconButton>
</div>
</section>
<section class="fullscreen" :class="{'active' : fullscreenStatus}">
<IconButton variant="contained" :click="toggleFullscreenStatus">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</IconButton>
</section>
</section> </section>
</template> </template>
@ -208,10 +215,6 @@ section.player
background-color: white background-color: white
min-height: 4.5rem min-height: 4.5rem
transition: height 500ms ease, min-height 500ms ease, width 500ms ease transition: height 500ms ease, min-height 500ms ease, width 500ms ease
&.fullscreen
height: 100vh
min-height: 100vh
z-index: 1300
.control-buttons .control-buttons
span span
margin: 0 0.2rem margin: 0 0.2rem
@ -248,4 +251,17 @@ section.player
cursor: pointer cursor: pointer
transition: width 200ms ease transition: width 200ms ease
height: 100% !important height: 100% !important
section.fullscreen
width: 100vw
height: 100vh
position: absolute
overflow: hidden
left: 0
top: 0
background-color: white
z-index: 1400
transition: transform 500ms ease-out
transform: translate3d(0,+100vh,0)
&.active
transform: translate3d(0,0vh,0)
</style> </style>

12
src/renderer/utility/HorizontalScrollPlugin.js
View File

@ -3,15 +3,17 @@ import Scrollbar from 'smooth-scrollbar'
export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
static pluginName = 'horizontalScroll'; static pluginName = 'horizontalScroll';
transformDelta (delta, fromEvent) { transformDelta (delta, fromEvent) {
console.log(fromEvent.type) const { x, y } = delta
if (!this.scrollbar.options.horizontal) {
return {
y: y,
x: 0
}
}
if (!/wheel/.test(fromEvent.type)) { if (!/wheel/.test(fromEvent.type)) {
return delta return delta
} }
// @see: https://github.com/idiotWu/smooth-scrollbar/issues/181 // @see: https://github.com/idiotWu/smooth-scrollbar/issues/181
if (!this.scrollbar.options.horizontal) {
return
}
const { x, y } = delta
return { return {
y: 0, y: 0,
x: Math.abs(x) > Math.abs(y) ? x : y x: Math.abs(x) > Math.abs(y) ? x : y