player buffering animation

package-lock.json

@@ -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==",
+			"integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
-			"dev": true
 		},
 		"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=",
+			"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
-			"dev": true
 		},
 		"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"
 			}

package.json

@@ -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"
 	},

src/App.vue

@@ -1,3 +1,9 @@
 <template>
 	<router-view />
 </template>
+
+<style  lang="scss">
+:root {
+	--icon-play: url('./assets/play.png');
+}
+</style>

src/components/Player.vue

@@ -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() {
+	data: () => ({
-		return {
+		isPlaying: true,
-			playerIcon: {
+		isBuffering: true,
-				backgroundImage: `url( ${require('../../img/play.png')} )`,
+	}),
-			},
-		}
-	},
 	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;
+		background-color: #0082c9;
-		border: none;
+		mask-repeat: no-repeat;
-		background-size: 100%;
+		mask-size: 55%;
-		background-position: center;
+		mask-position: 70% 50%;
-		float: left;
+	}
-		transition: background-image 0.4s ease-in-out;
+
+	.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;
+		border: 3px solid #0082c9;
-		/* background: url('../img/wheel.png') no-repeat; */
+		animation: buffering 2s infinite linear;
-		transition: background-image 0.4s ease-in-out;
 	}
 
-	@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;

src/components/Table.vue

@@ -56,12 +56,10 @@ export default {
 			default() { return [] },
 		},
 	},
-	data() {
+	data: () => ({
-		return {
 		activeItem: null,
 		stationsFavored: [1, 2],
-		}
+	}),
-	},
 	methods: {
 		doPlay(idx, station) {
 			this.activeItem = idx

webpack.js

@@ -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]',
+				},
 			},
 		],
 	},