player buffering animation
This commit is contained in:
Jonas Heinrich
parent
efaeca5477
commit
cba38a1250
BIN
img/play.png
BIN
img/play.png
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
95
package-lock.json
generated
95
package-lock.json
generated
@ -2769,12 +2769,22 @@
|
||||
"unist-util-find-all-after": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"@tokenizer/token": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz",
|
||||
"integrity": "sha512-XO6INPbZCxdprl+9qa/AAbFFOMzzwqYxpjPgLICrMD6C2FCw6qfJOPcBk6JqqPLSaZ/Qx87qn4rpPmPMwaAK6w=="
|
||||
},
|
||||
"@types/color-name": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
|
||||
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/debug": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.5.tgz",
|
||||
"integrity": "sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ=="
|
||||
},
|
||||
"@types/jquery": {
|
||||
"version": "2.0.54",
|
||||
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.54.tgz",
|
||||
@ -4343,6 +4353,11 @@
|
||||
"integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
|
||||
"dev": true
|
||||
},
|
||||
"content-type": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
|
||||
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
|
||||
},
|
||||
"convert-source-map": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
|
||||
@ -6049,6 +6064,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"file-type": {
|
||||
"version": "16.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-type/-/file-type-16.0.0.tgz",
|
||||
"integrity": "sha512-0u4D11yDu0NXF+8qp1eiQ/6cOwPI7sbu9/bGzUOhlwzKbB9FYFivgTtsVPtlkXAakfByWjOsLp2/Jx927OVetg==",
|
||||
"requires": {
|
||||
"readable-web-to-node-stream": "^2.0.0",
|
||||
"strtok3": "^6.0.3",
|
||||
"token-types": "^2.0.0",
|
||||
"typedarray-to-buffer": "^3.1.5"
|
||||
}
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
@ -6652,8 +6678,7 @@
|
||||
"ieee754": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
|
||||
"integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
|
||||
},
|
||||
"iferr": {
|
||||
"version": "0.1.5",
|
||||
@ -7095,8 +7120,7 @@
|
||||
"is-typedarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
|
||||
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
|
||||
"dev": true
|
||||
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
|
||||
},
|
||||
"is-utf8": {
|
||||
"version": "0.2.1",
|
||||
@ -7591,6 +7615,11 @@
|
||||
"unist-util-visit": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
|
||||
"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw=="
|
||||
},
|
||||
"memory-fs": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
|
||||
@ -7903,6 +7932,34 @@
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
},
|
||||
"music-metadata": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/music-metadata/-/music-metadata-7.4.1.tgz",
|
||||
"integrity": "sha512-wImJchxYyUkF/y2fNNYNYzfJ+EHKUMc14tqhRMRSXGy4g16FUexBU5hBg3/56sm8eqlu0Axgc2/Mdh+XUKfByA==",
|
||||
"requires": {
|
||||
"content-type": "^1.0.4",
|
||||
"debug": "^4.2.0",
|
||||
"file-type": "^16.0.0",
|
||||
"media-typer": "^1.1.0",
|
||||
"strtok3": "^6.0.4",
|
||||
"token-types": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
|
||||
"integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
|
||||
"requires": {
|
||||
"ms": "2.1.2"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"mute-stream": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
|
||||
@ -8491,6 +8548,11 @@
|
||||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"peek-readable": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-3.1.0.tgz",
|
||||
"integrity": "sha512-KGuODSTV6hcgdZvDrIDBUkN0utcAVj1LL7FfGbM0viKTtCHmtZcuEJ+lGqsp0fTFkGqesdtemV2yUSMeyy3ddA=="
|
||||
},
|
||||
"performance-now": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
@ -8957,6 +9019,11 @@
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"readable-web-to-node-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-2.0.0.tgz",
|
||||
"integrity": "sha512-+oZJurc4hXpaaqsN68GoZGQAQIA3qr09Or4fqEsargABnbe5Aau8hFn6ISVleT3cpY/0n/8drn7huyyEvTbghA=="
|
||||
},
|
||||
"readdirp": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
|
||||
@ -9909,6 +9976,16 @@
|
||||
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
|
||||
"dev": true
|
||||
},
|
||||
"strtok3": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/strtok3/-/strtok3-6.0.4.tgz",
|
||||
"integrity": "sha512-rqWMKwsbN9APU47bQTMEYTPcwdpKDtmf1jVhHzNW2cL1WqAxaM9iBb9t5P2fj+RV2YsErUWgQzHD5JwV0uCTEQ==",
|
||||
"requires": {
|
||||
"@tokenizer/token": "^0.1.1",
|
||||
"@types/debug": "^4.1.5",
|
||||
"peek-readable": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"style-search": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
|
||||
@ -10747,6 +10824,15 @@
|
||||
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.9.3.tgz",
|
||||
"integrity": "sha512-v0aXGUy6IbEBWxmoKx7ZCou00dQqEAsjJF86f8b8dNCH4O4L6iEkX3d3WRMVDirBJ+8CxQcHDZuAFD47J/imEw=="
|
||||
},
|
||||
"token-types": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/token-types/-/token-types-2.0.0.tgz",
|
||||
"integrity": "sha512-WWvu8sGK8/ZmGusekZJJ5NM6rRVTTDO7/bahz4NGiSDb/XsmdYBn6a1N/bymUHuWYTWeuLUg98wUzvE4jPdCZw==",
|
||||
"requires": {
|
||||
"@tokenizer/token": "^0.1.0",
|
||||
"ieee754": "^1.1.13"
|
||||
}
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
|
||||
@ -10865,7 +10951,6 @@
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
|
||||
"integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-typedarray": "^1.0.0"
|
||||
}
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
"@nextcloud/vue": "^2.7.0",
|
||||
"howler": "^2.2.0",
|
||||
"jquery": "^3.5.1",
|
||||
"music-metadata": "^7.4.1",
|
||||
"vue": "^2.6.12",
|
||||
"vue-router": "^3.4.7"
|
||||
},
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:root {
|
||||
--icon-play: url('./assets/play.png');
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div id="app-settings">
|
||||
<button id="playbutton" class="play" :style="playerIcon" />
|
||||
<div
|
||||
class="wrap"
|
||||
:class="{ buffering: isBuffering }">
|
||||
<button
|
||||
class="player"
|
||||
:class="isPlaying ? 'pause' : 'play'" />
|
||||
</div>
|
||||
<div id="volumeicon" class="full" />
|
||||
<input
|
||||
v-model="sliderVal"
|
||||
@ -11,19 +17,16 @@
|
||||
max="1"
|
||||
step=".05"
|
||||
@input="changeVolume">
|
||||
<span id="stationMetadata" />
|
||||
<span class="stationMetadata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playerIcon: {
|
||||
backgroundImage: `url( ${require('../../img/play.png')} )`,
|
||||
},
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
isPlaying: true,
|
||||
isBuffering: true,
|
||||
}),
|
||||
methods: {
|
||||
changeVolume() {
|
||||
this.$emit('changeVolume', this.sliderVal)
|
||||
@ -34,40 +37,58 @@ export default {
|
||||
|
||||
<style>
|
||||
|
||||
#playbutton{
|
||||
.wrap {
|
||||
background: var(--color-main-background);
|
||||
border: 3px solid #0082c9;
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.player{
|
||||
height:50px;
|
||||
width: 50px;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
float: left;
|
||||
transition: background-image 0.4s ease-in-out;
|
||||
background-color: #0082c9;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 55%;
|
||||
mask-position: 70% 50%;
|
||||
}
|
||||
|
||||
.play{
|
||||
mask-image: var(--icon-play-000);
|
||||
transition: mask-image 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.pause{
|
||||
mask-image: var(--icon-pause-000);
|
||||
mask-position: 58% 50%;
|
||||
transition: mask-image 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.buffering {
|
||||
animation:spin 4s linear infinite;
|
||||
/* background: url('../img/wheel.png') no-repeat; */
|
||||
transition: background-image 0.4s ease-in-out;
|
||||
border: 3px solid #0082c9;
|
||||
animation: buffering 2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes spin { 100% { transform:rotate(360deg); } }
|
||||
@keyframes buffering {
|
||||
0% {
|
||||
border-color: #0082c9;
|
||||
}
|
||||
50% {
|
||||
border-color: var(--color-main-background);
|
||||
}
|
||||
100% {
|
||||
border-color: #0082c9;
|
||||
}
|
||||
}
|
||||
|
||||
#station_metadata{
|
||||
.station_metadata{
|
||||
margin: 2px 20px 5px 20px;
|
||||
padding-left: 5px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.play{
|
||||
/* background: url('../img/play.png') no-repeat; */
|
||||
}
|
||||
|
||||
.pause{
|
||||
/* background: url('../img/pause.png') no-repeat; */
|
||||
}
|
||||
|
||||
#volumeicon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
@ -56,12 +56,10 @@ export default {
|
||||
default() { return [] },
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeItem: null,
|
||||
stationsFavored: [1, 2],
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
activeItem: null,
|
||||
stationsFavored: [1, 2],
|
||||
}),
|
||||
methods: {
|
||||
doPlay(idx, station) {
|
||||
this.activeItem = idx
|
||||
|
||||
@ -5,7 +5,11 @@ const config = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/, loader: 'file-loader?name=./images/[name].[ext]',
|
||||
test: /\.(png|jpg|gif)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user