Added height animation to visualizer

pull/22/head
Nikan Dalvand 2019-07-26 19:48:39 +04:30
parent 1868c88b7e
commit ff20b7b668
1 changed files with 18 additions and 2 deletions

View File

@ -38,12 +38,14 @@ export default {
barHeight: 1, barHeight: 1,
barGap: null, barGap: null,
autoCenter: true, autoCenter: true,
height: 64, responsive: true,
responsive: true height: 64
}) })
this.wavesurfer.load('/static/demo/music.mp3') this.wavesurfer.load('/static/demo/music.mp3')
this.wavesurfer.on('ready', () => { this.wavesurfer.on('ready', () => {
this.duration = formatSeconds(this.getDuration()) this.duration = formatSeconds(this.getDuration())
this.wavesurfer.container.style['height'] = '100%'
console.log(this.wavesurfer.container)
}) })
let currentWidth = 0 let currentWidth = 0
let hoverStatus = false let hoverStatus = false
@ -148,8 +150,22 @@ section.player
.visualizer .visualizer
flex-grow: 1 flex-grow: 1
height: 64px height: 64px
position: relative
div
position: absolute
left: 0
top: 0
bottom: 0
margin: auto
transition: height 500ms ease
height: 0px
width: 100%
&.shade
pointer-events: none
opacity: 0.2
wave wave
overflow-x: hidden !important overflow-x: hidden !important
cursor: pointer cursor: pointer
transition: width 200ms ease transition: width 200ms ease
height: 100% !important
</style> </style>