web/notify.moe
Code Issues Pull Requests Activity

Heavily improved audio player

Browse Source
This commit is contained in:
Eduard Urbach
2018-03-11 15:43:17 +01:00
parent 26703c467a
commit 950155bdd2
9 changed files with 177 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/soundtracks/soundtracks.pixy
View File

@ -14,7 +14,7 @@ component SoundTracks(tracks []*arn.SoundTrack, loadMoreIndex int, user *arn.Use
Icon("pencil")
span Edit draft
#load-more-target.sound-tracks
#load-more-target.soundtracks
SoundTracksScrollable(tracks, user)
if loadMoreIndex != 0

101
pages/soundtracks/soundtracks.scarlet
View File

@ -1,14 +1,14 @@
.sound-tracks
.soundtracks
horizontal-wrap
justify-content space-around
.sound-track
.soundtrack
vertical
flex 1
flex-basis 500px
padding 1rem
.sound-track-content
.soundtrack-content
horizontal
border-radius 3px
overflow hidden
@ -21,8 +21,95 @@
object-fit cover
width 100%
height 200px
filter brightness(100%)
transition filter 250ms ease
.sound-track-footer
.soundtrack-play-button
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
border-radius 50%
width 92px
height 92px
font-size 3rem
color rgba(0, 0, 0, 0.15)
background rgba(255, 255, 255, 0.9)
pointer-events none
.icon-play
transform translateX(27%)
.soundtrack-visualizer
horizontal
justify-content center
align-items center
pointer-events none
position absolute
top 0
left 0
width 100%
height 100%
opacity 0
transition opacity 250ms ease
.visualizer-box
width 3px
height 15px
margin 0.2rem
border-radius 1px
transition all 250ms linear
animation scale-vertically 300ms infinite ease, change-color 1s infinite ease
animation-direction alternate
.visualizer-box-1
animation-delay 0
.visualizer-box-2
animation-delay 100ms
.visualizer-box-3
animation-delay 200ms
animation scale-vertically
0%
transform scaleY(0.3)
opacity 0.8
100%
transform scaleY(1)
opacity 1
animation change-color
0%
background-color hsl(45, 100%, 68%)
100%
background-color hsl(235, 100%, 68%)
.soundtrack-play-area
position absolute
top 0
left 0
width 100%
height 100%
cursor pointer
transition opacity 250ms ease
&.playing
.soundtrack-play-button
opacity 0
.soundtrack-visualizer
opacity 1
.soundtrack-image
filter brightness(0)
:hover
.soundtrack-play-button
color button-hover-color
background button-hover-background
.soundtrack-footer
text-align center
margin-bottom 1rem
margin-top 0.4rem
@ -31,13 +118,13 @@
span
opacity 0.65
.sound-track-anime-link
.soundtrack-anime-link
display none
> 800px
.sound-track-anime-link
.soundtrack-anime-link
display block
.sound-track-anime-image
.soundtrack-anime-image
width 142px
height 200px