init after os change
Noisyboy-9
parent
b9ff59c712
commit
3f0467fdeb
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "jukebox",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.7",
|
||||
"author": "Nikan Dalvand <nikandalvand@gmail.com>",
|
||||
"description": "A Cross-platform soundcloud client",
|
||||
"license": null,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="dialog-wrapper" :class="{'open' : open}">
|
||||
<div class="overlay">
|
||||
<div class="overlay" @click="onCloseEvent">
|
||||
|
||||
</div>
|
||||
<div class="dialog">
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -12,18 +12,27 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'Dialog',
|
||||
props: ['open']
|
||||
props: ['open', 'onClose'],
|
||||
computed: {
|
||||
onCloseEvent () {
|
||||
return this.onClose || (() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.dialog-wrapper.open
|
||||
.dialog-wrapper
|
||||
z-index: 1400
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
width: 100vw
|
||||
height: 100vh
|
||||
display: flex
|
||||
opacity: 0
|
||||
transition: opacity 150ms
|
||||
pointer-events: none
|
||||
align-items: center
|
||||
justify-content: center
|
||||
.overlay
|
||||
|
|
@ -43,4 +52,8 @@ export default {
|
|||
min-width: 250px
|
||||
z-index: 1400
|
||||
box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
|
||||
.dialog-wrapper.open
|
||||
pointer-events: all
|
||||
opacity: 1
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span @click="onClick" role="button" class="icon-button" :class="className">
|
||||
<span @click="onClick" role="button" class="icon-button" :class="{className, 'disabled': disabled}">
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
onClick: this.click || (() => {})
|
||||
}
|
||||
},
|
||||
props: ['variant', 'click']
|
||||
props: ['variant', 'click', 'disabled']
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -35,6 +35,9 @@ export default {
|
|||
outline: unset
|
||||
color: grey
|
||||
transition: all .2s ease-in-out
|
||||
&.disabled
|
||||
background-color: rgba(0,0,0,.15) !important
|
||||
pointer-events: none
|
||||
&.large
|
||||
width: 48px
|
||||
height: 48px
|
||||
|
|
@ -51,7 +54,7 @@ export default {
|
|||
width: 24px
|
||||
height: 24px
|
||||
transition: fill 200ms
|
||||
fill: gray
|
||||
fill: white
|
||||
&:hover
|
||||
background-color: rgba(0,0,0,0.05)
|
||||
&:focus,&:active
|
||||
|
|
|
|||
|
|
@ -1,18 +1,26 @@
|
|||
<template>
|
||||
<router-link tag="li" :to="to" class="menu-item" :class="{'fade' : faded}">
|
||||
<router-link tag="span" :to="to">
|
||||
<li @click="onClick" class="menu-item" :class="{'fade' : faded}">
|
||||
<span>
|
||||
<slot name="icon"></slot>
|
||||
</span>
|
||||
<span>
|
||||
<slot>Nothing to show</slot>
|
||||
</span>
|
||||
</li>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
props: ['to', 'faded']
|
||||
props: ['to', 'faded', 'click'],
|
||||
computed: {
|
||||
onClick () {
|
||||
console.log(this.click)
|
||||
return this.click || (() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<Dialog :open="false" />
|
||||
<Dialog :open="aboutOpen" :onClose="closeAbout">
|
||||
test
|
||||
<Logo :nopadding="true"/>
|
||||
</Dialog>
|
||||
<section class="handle" :class="{'open': menuStatus}">
|
||||
<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">
|
||||
|
|
@ -107,7 +110,7 @@
|
|||
</template>
|
||||
Settings
|
||||
</MenuItem>
|
||||
<MenuItem to="/" :faded="true">
|
||||
<MenuItem to="#" :click="openAbout" :faded="true">
|
||||
<template v-slot:icon>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path d="M8,16a8,8,0,1,1,8-8A8.011,8.011,0,0,1,8,16Zm-.075-5.159a.924.924,0,0,0-.67.266.885.885,0,0,0-.274.657.862.862,0,0,0,.283.686.979.979,0,0,0,.661.245.947.947,0,0,0,.645-.248.869.869,0,0,0,.279-.682.91.91,0,0,0-.924-.923Zm.148-6.228a1.354,1.354,0,0,1,.952.341,1.1,1.1,0,0,1,.369.837.942.942,0,0,1-.121.472,1.8,1.8,0,0,1-.3.394c-.119.119-.312.3-.573.524a9.768,9.768,0,0,0-.72.686,2.251,2.251,0,0,0-.427.67,2.312,2.312,0,0,0-.162.9.832.832,0,0,0,.22.626.758.758,0,0,0,.543.211A.692.692,0,0,0,8.6,9.631c.045-.2.08-.343.1-.425a1.261,1.261,0,0,1,.1-.242A1.4,1.4,0,0,1,8.983,8.7a4.338,4.338,0,0,1,.338-.338c.518-.462.864-.779,1.058-.97a2.869,2.869,0,0,0,.509-.686A1.91,1.91,0,0,0,11.1,5.78a2.22,2.22,0,0,0-.375-1.24,2.579,2.579,0,0,0-1.064-.9A3.629,3.629,0,0,0,8.074,3.3a3.486,3.486,0,0,0-1.693.4,2.932,2.932,0,0,0-1.105,1A2.255,2.255,0,0,0,4.9,5.9a.753.753,0,0,0,.239.53.792.792,0,0,0,.587.245c.39,0,.66-.236.8-.7a2.756,2.756,0,0,1,.545-1.013A1.324,1.324,0,0,1,8.074,4.613Z"/>
|
||||
|
|
@ -135,14 +138,21 @@ export default {
|
|||
name: 'DockableSidebar',
|
||||
components: { MenuGroup, MenuItem, Logo, Button, Dialog },
|
||||
data: () => {
|
||||
return { version: projectPackage.version }
|
||||
return { version: projectPackage.version, aboutOpen: false }
|
||||
},
|
||||
mounted () {
|
||||
let container = this.$el.getElementsByClassName('sidebar')[0]
|
||||
Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true })
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['toggleMenuStatus'])
|
||||
...mapActions(['toggleMenuStatus']),
|
||||
openAbout () {
|
||||
this.aboutOpen = true
|
||||
},
|
||||
closeAbout () {
|
||||
console.log('close')
|
||||
this.aboutOpen = false
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['menuStatus'])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@
|
|||
<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>
|
||||
<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>
|
||||
<IconButton variant="contained">
|
||||
<IconButton variant="contained" :click="playPrevious" :disabled="(currentlyPlaying == 0)">
|
||||
<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>
|
||||
<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="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><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="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||
</IconButton>
|
||||
<IconButton variant="contained">
|
||||
<IconButton variant="contained" :click="playNext" :disabled="(currentlyPlaying + 1) >= playerQueue.length">
|
||||
<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>
|
||||
<IconButton variant="contained" :click="toggleFullscreenStatus">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</IconButton>
|
||||
</div>
|
||||
</section>
|
||||
<section class="fullscreen" :class="{'active' : fullscreenStatus}">
|
||||
<section class="fullscreen theme-background" :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>
|
||||
|
|
@ -49,7 +49,6 @@ import color from 'dominant-color'
|
|||
import { formatSeconds } from '../utility/DateTime'
|
||||
import IconButton from '../components/IconButton'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'PlayerBar',
|
||||
components: { IconButton },
|
||||
|
|
@ -58,11 +57,22 @@ export default {
|
|||
playingStatus: false,
|
||||
isFavorited: false,
|
||||
duration: '00:00',
|
||||
isFullscreen: false
|
||||
isFullscreen: false,
|
||||
updateCurrent: false
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['fullscreenStatus', 'currentlyPlaying', 'playerQueue']),
|
||||
mounted () {
|
||||
this.drawVisualizer()
|
||||
},
|
||||
updated () {
|
||||
if (this.updateCurrent) {
|
||||
this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream)
|
||||
this.updateCurrent = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawVisualizer () {
|
||||
let progress = this.$el.getElementsByClassName('progress')[0]
|
||||
this.wavesurfer = WaveSurfer.create({
|
||||
container: '#visualizer',
|
||||
|
|
@ -91,11 +101,25 @@ export default {
|
|||
]
|
||||
})
|
||||
this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream)
|
||||
let readyCounter = 0
|
||||
this.wavesurfer.on('ready', () => {
|
||||
readyCounter += 1
|
||||
this.duration = formatSeconds(this.getDuration())
|
||||
this.wavesurfer.container.style['height'] = '100%'
|
||||
let map = this.wavesurfer.minimap.drawer.container
|
||||
this.wavesurfer.container.style['height'] = '100%'
|
||||
map.style['height'] = '100%'
|
||||
if (readyCounter > 2) {
|
||||
this.play()
|
||||
this.playingStatus = this.isPlaying()
|
||||
}
|
||||
})
|
||||
this.wavesurfer.on('finish', () => {
|
||||
if (this.currentlyPlaying >= 0 && (this.currentlyPlaying + 1) !== this.playerQueue.length) {
|
||||
this.playNext()
|
||||
}
|
||||
if (this.currentlyPlaying >= 0 && (this.currentlyPlaying + 1) === this.playerQueue.length) {
|
||||
this.playingStatus = false
|
||||
}
|
||||
})
|
||||
let currentWidth = 0
|
||||
let hoverStatus = false
|
||||
|
|
@ -132,10 +156,10 @@ export default {
|
|||
currentWidth = progressWave.style.width
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onArtworkLoad () {
|
||||
let img = this.$el.getElementsByTagName('img')[0]
|
||||
let controlIcons = this.$el.getElementsByClassName('control-buttons')[0].children
|
||||
let themeBackground = this.$el.getElementsByClassName('theme-background')
|
||||
color(img.src, (_, color) => {
|
||||
this.wavesurfer.setProgressColor(`#${color}`)
|
||||
this.wavesurfer.minimap.params.progressColor = `#${color}`
|
||||
|
|
@ -162,16 +186,41 @@ export default {
|
|||
controlIcons[child].style.backgroundColor = `#${color}`
|
||||
}
|
||||
}
|
||||
for (let item in themeBackground) {
|
||||
if (typeof themeBackground[item] === 'object') {
|
||||
themeBackground[item].style.backgroundColor = `#${color}`
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
playNext () {
|
||||
this.wavesurfer.container.style['height'] = '0%'
|
||||
let map = this.wavesurfer.minimap.drawer.container
|
||||
map.style['height'] = '0%'
|
||||
window.setTimeout(() => {
|
||||
this.playQueueItem(this.currentlyPlaying + 1)
|
||||
this.updateCurrent = true
|
||||
}, 500)
|
||||
},
|
||||
playPrevious () {
|
||||
this.wavesurfer.container.style['height'] = '0%'
|
||||
let map = this.wavesurfer.minimap.drawer.container
|
||||
map.style['height'] = '0%'
|
||||
window.setTimeout(() => {
|
||||
this.playQueueItem(this.currentlyPlaying - 1)
|
||||
this.updateCurrent = true
|
||||
}, 500)
|
||||
},
|
||||
play () {
|
||||
this.wavesurfer.play()
|
||||
},
|
||||
pause () {
|
||||
this.wavesurfer.pause()
|
||||
this.playingStatus = this.isPlaying()
|
||||
},
|
||||
stop () {
|
||||
this.wavesurfer.stop()
|
||||
this.playingStatus = this.isPlaying()
|
||||
},
|
||||
toggleMute () {
|
||||
this.wavesurfer.toggleMute()
|
||||
|
|
@ -195,13 +244,17 @@ export default {
|
|||
return this.wavesurfer.getDuration()
|
||||
},
|
||||
togglePlay () {
|
||||
this.wavesurfer.playPause()
|
||||
if (this.isPlaying()) {
|
||||
this.pause()
|
||||
} else {
|
||||
this.play()
|
||||
}
|
||||
this.playingStatus = this.isPlaying()
|
||||
},
|
||||
toggleFavorite () {
|
||||
this.isFavorited = !this.isFavorited
|
||||
},
|
||||
...mapActions(['toggleFullscreenStatus'])
|
||||
...mapActions(['toggleFullscreenStatus', 'playQueueItem'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -238,7 +291,7 @@ section.player
|
|||
top: 0
|
||||
bottom: 0
|
||||
margin: auto
|
||||
transition: height 500ms ease ease
|
||||
transition: height 500ms ease
|
||||
height: 0px
|
||||
width: 100%
|
||||
z-index:
|
||||
|
|
@ -261,7 +314,7 @@ section.fullscreen
|
|||
background-color: white
|
||||
z-index: 1400
|
||||
transition: transform 500ms ease-out
|
||||
transform: translate3d(0,+100vh,0)
|
||||
transform: translate3d(0,+100%,0)
|
||||
&.active
|
||||
transform: translate3d(0,0vh,0)
|
||||
transform: translate3d(0,0%,0)
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,14 @@ import Vue from 'vue'
|
|||
import Vuex from 'vuex'
|
||||
|
||||
import { createPersistedState, createSharedMutations } from 'vuex-electron'
|
||||
|
||||
import Store from 'electron-store'
|
||||
import modules from './modules'
|
||||
|
||||
let clear = false
|
||||
if (clear) {
|
||||
const store = new Store({ name: 'vuex' })
|
||||
store.clear()
|
||||
}
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules,
|
||||
plugins: [
|
||||
|
|
|
|||
|
|
@ -8,6 +8,20 @@ const state = {
|
|||
artist: 'Rich Brian',
|
||||
artwork: '/static/demo/yellow.jpeg',
|
||||
stream: '/static/demo/music.mp3'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Yellow',
|
||||
artist: 'Rich Brian',
|
||||
artwork: '/static/demo/habiba.jpg',
|
||||
stream: '/static/demo/music.mp3'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Ali sorena',
|
||||
artist: 'Negar',
|
||||
artwork: '/static/demo/negar.jpg',
|
||||
stream: '/static/demo/negar.mp3'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
Loading…
Reference in New Issue