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

Merge pull request #29 from nikandlv/development 

Added new components, icons and Fixed some issues
master
Nikan Dalvand 2019-07-28 14:16:44 +04:30 committed by GitHub
parent 3f1f08b11a 1d40f6779b
commit bcbdf7553a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 182 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/renderer/components/Button.vue
View File

@ -1,5 +1,5 @@
<template>
<a href="#" role="button" class="btn" :class="className">
<a href="#" role="button" class="button" :class="className">
<slot name="icon"></slot>
<slot></slot>
</a>
@ -7,9 +7,10 @@
<script>
export default {
name: 'Button',
data () {
return {
className: `btn--` + this.variant
className: `button--` + this.variant
}
},
@ -19,7 +20,7 @@ export default {
</script>
<style lang="sass" scoped>
.btn
.button
font-size: .9rem
text-decoration: none
padding: .5rem 1rem
@ -28,36 +29,36 @@ export default {
transition: background-color 200ms
box-sizing: border-box
outline: unset
color: grey
transition: all .2s ease-in-out
svg
width: 14px
height: 14px
transition: fill 200ms
fill: gray
&:hover
background-color: rgba(0,0,0,0.05)
&:focus,&:active
background-color: rgba(0,0,0,.15)
&--contained
background-color: #0076F9
color: white
font-weight: 600
svg
fill: white
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active
background-color: darken(#0076F9,5)
svg
width: 14px
height: 14px
fill: white
transition: fill 200ms
&--flat
color: grey
transition: all .2s ease-in-out
svg
fill: gray
&:hover
background-color: rgba(0,0,0,0.05)
&:focus,&:active
background-color: rgba(0,0,0,.15)
&--raised
background-color: #0076F9
color: white
font-weight: 600
box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
svg
fill: white
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active

99
src/renderer/components/IconButton.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<span @click="onClick" role="button" class="icon-button" :class="className">
<slot name="icon"></slot>
<slot></slot>
</span>
</template>
<script>
export default {
name: 'IconButton',
data () {
return {
className: `icon-button--` + this.variant,
onClick: this.click || (() => {})
}
},
props: ['variant', 'click']
}
</script>
<style lang="sass" scoped>
.icon-button
display: flex
justify-content: center
align-items: center
width: 38px
cursor: pointer
height: 38px
text-decoration: none
text-transform: capitalize
border-radius: 100%
transition: background-color 200ms
box-sizing: border-box
outline: unset
color: grey
transition: all .2s ease-in-out
&.large
width: 48px
height: 48px
svg
width: 32px
height: 32px
&.small
width: 32px
height: 32px
svg
width: 14px
height: 14px
svg
width: 24px
height: 24px
transition: fill 200ms
fill: gray
&:hover
background-color: rgba(0,0,0,0.05)
&:focus,&:active
background-color: rgba(0,0,0,.15)
&--contained
background-color: #0076F9
color: white
font-weight: 600
svg
fill: white
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active
background-color: darken(#0076F9,5)
&--raised
background-color: #0076F9
color: white
font-weight: 600
box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
svg
fill: white
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active
background-color: darken(#0076F9,5)
&--outlined
background-color: white
color: #0076F9
border: 1px solid #0076F9
svg
fill: #0076F9
&:focus,&:active
background-color: darken(#0076F9,5)
color: white
svg
fill: white
&:hover
background-color: #0076F9
color: white
svg
fill: white
</style>

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

@ -81,7 +81,7 @@
</MenuItem>
</MenuGroup>
<Button variant="contained" class="playlist-button">
<Button class="playlist-button">
<template v-slot:icon>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve">
<g id="Add">

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

@ -1,6 +1,6 @@
<template>
<section>
<ActionBar />
<ActionBar class="action-bar" />
<div class="upper-row">
<MusicRow :items='items' />
</div>
@ -273,11 +273,13 @@ export default {
<style lang="sass">
section.page
padding: 1rem 2.5rem
overflow-x: hidden
.VueCarousel-wrapper
overflow: unset
.action-bar
padding: 1rem 2.5rem
.upper-row
padding: 1rem 2.5rem
.middle-row
display: flex
@ -286,6 +288,7 @@ section.page
.favourite
background: white
padding: 1rem 2.5rem
z-index: 10
&__list-header
width: 100%
@ -356,6 +359,7 @@ section.page
margin-top: 1.5rem
.genre
padding: 1rem 2.5rem
&__title
legend
font-size: 2rem

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

@ -1,23 +1,33 @@
<template>
<section class="player">
<img @load="onArtworkLoad" class="artwork" src="/static/demo/artwork.jpg" />
<img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
<div>
<p class="title">Don't Let Me Down</p>
<p class="artist">The Chainsmokers</p>
<p class="title">Yellow</p>
<p class="artist">Rich Brian</p>
</div>
<div class="visualizer">
<div id="visualizer"></div>
<div id="minimap" class="shade"></div>
</div>
<div class="duration">
<p class="progress active">00:00</p>
<p>{{duration}}</p>
<p class="currentTime progress active">00:00</p>
<p class="remainingTime">{{duration}}</p>
</div>
<div class="control-buttons">
<div class="play-pause-button" @click="togglePlay">
<svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
<svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
</div>
<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="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">
<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">
<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>
</div>
</section>
</template>
@ -27,8 +37,10 @@ import WaveSurfer from 'wavesurfer.js'
import minimap from 'wavesurfer.js/dist/plugin/wavesurfer.minimap'
import color from 'dominant-color'
import { formatSeconds } from '../utility/DateTime'
import IconButton from '../components/IconButton'
export default {
name: 'PlayerBar',
components: { IconButton },
mounted () {
let progress = this.$el.getElementsByClassName('progress')[0]
this.wavesurfer = WaveSurfer.create({
@ -102,16 +114,40 @@ export default {
data () {
return {
playingStatus: false,
isFavorited: false,
duration: '00:00'
}
},
methods: {
onArtworkLoad () {
let img = this.$el.getElementsByTagName('img')[0]
let controlIcons = this.$el.getElementsByClassName('control-buttons')[0].children
color(img.src, (_, color) => {
this.wavesurfer.setProgressColor(`#${color}`)
this.wavesurfer.minimap.params.progressColor = `#${color}`
this.wavesurfer.minimap.drawer.updateSize()
for (let child in controlIcons) {
if (typeof controlIcons[child] === 'object') {
if (controlIcons[child].className.includes('no-theme')) {
continue
}
if (controlIcons[child].className.includes('theme-icon')) {
let paths = controlIcons[child].getElementsByTagName('path')
for (let path in paths) {
if (typeof paths[path] === 'object') {
if (paths[path].getAttribute('class') === null) {
continue
}
if (paths[path].getAttribute('class').includes('colorable')) {
paths[path].style.fill = `#${color}`
}
}
}
continue
}
controlIcons[child].style.backgroundColor = `#${color}`
}
}
})
},
play () {
@ -147,6 +183,9 @@ export default {
togglePlay () {
this.wavesurfer.playPause()
this.playingStatus = this.isPlaying()
},
toggleFavorite () {
this.isFavorited = !this.isFavorited
}
}
}
@ -159,13 +198,18 @@ section.player
border-top: 1px solid rgba(0,0,0,0.1)
height: 4.5rem
min-height: 4.5rem
.control-buttons
span
margin: 0 0.2rem
display: flex
align-items: center
img.artwork
height: 4.5rem
width: 4.5rem
p.title,p.artist
p.title,p.artist,.currentTime,.remainingTime
font-size: .8rem
margin: 8px 10px
p.artist
p.artist,.remainingTime
color: lighten(black,45)
.visualizer
flex-grow: 1

BIN
static/demo/music.mp3
View File

Binary file not shown.

BIN
static/demo/yellow.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB