unload playAnimation into component

CHANGELOG.md

@@ -5,6 +5,7 @@
   [#94](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/94) @onny
 
 ## 0.1 - 2020-12
+
 ### Added
 - First beta release of the podcast app
   [#200](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/200) @onny

src/components/PlayAnimation.vue

+<!--
+  - @copyright Copyright (c) 2021 Jonas Heinrich
+  -
+  - @author Jonas Heinrich <onny@project-insanity.org>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+	<div class="eq-animation">
+		<div class="-amp-video-eq-col">
+			<div class="-amp-video-eq-1-1" />
+			<div class="-amp-video-eq-1-2" />
+		</div>
+		<div class="-amp-video-eq-col">
+			<div class="-amp-video-eq-2-1" />
+			<div class="-amp-video-eq-2-2" />
+		</div>
+		<div class="-amp-video-eq-col">
+			<div class="-amp-video-eq-3-1" />
+			<div class="-amp-video-eq-3-2" />
+		</div>
+		<div class="-amp-video-eq-col">
+			<div class="-amp-video-eq-4-1" />
+			<div class="-amp-video-eq-4-2" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PlayAnimation',
+	props: {
+		playing: {
+			type: Boolean,
+			default: true,
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.eq-animation {
+	align-items: flex-end;
+	display: flex;
+	width: 20px;
+	height: 12px;
+	overflow: hidden;
+	opacity: 0.8;
+	position: relative;
+	float: left;
+	top: 5px;
+	margin-right: 5px;
+}
+
+.eq-animation .-amp-video-eq-col {
+	flex: 1;
+	position: relative;
+	height: 100%;
+	margin-right: 1px;
+}
+
+.eq-animation .-amp-video-eq-col div {
+	animation-name: amp-video-eq-animation;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	background-color: rgb(0, 130, 201);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	transform: translateY(100%);
+	will-change: transform;
+}
+
+.-amp-video-eq-1-1 {
+	animation-duration: 0.3s;
+}
+
+.-amp-video-eq-1-2 {
+	animation-duration: 0.45s;
+}
+
+.-amp-video-eq-2-1 {
+	animation-duration: 0.5s;
+}
+
+.-amp-video-eq-2-2 {
+	animation-duration: 0.4s;
+}
+
+.-amp-video-eq-3-1 {
+	animation-duration: 0.3s;
+}
+
+.-amp-video-eq-3-2 {
+	animation-duration: 0.35s;
+}
+
+.-amp-video-eq-4-1 {
+	animation-duration: 0.4s;
+}
+
+.-amp-video-eq-4-2 {
+	animation-duration: 0.25s;
+}
+
+@keyframes amp-video-eq-animation {
+	0% {
+		transform: translateY(100%);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+</style>

src/components/Table.vue

@@ -49,24 +49,8 @@
 				<td
 					class="nameColumn"
 					@click="changeRoute(`/browse/show/${episode.podcast_id}/${episode.id}`)">
-					<div class="eq-animation">
-						<div class="-amp-video-eq-col">
-							<div class="-amp-video-eq-1-1" />
-							<div class="-amp-video-eq-1-2" />
-						</div>
-						<div class="-amp-video-eq-col">
-							<div class="-amp-video-eq-2-1" />
-							<div class="-amp-video-eq-2-2" />
-						</div>
-						<div class="-amp-video-eq-col">
-							<div class="-amp-video-eq-3-1" />
-							<div class="-amp-video-eq-3-2" />
-						</div>
-						<div class="-amp-video-eq-col">
-							<div class="-amp-video-eq-4-1" />
-							<div class="-amp-video-eq-4-2" />
-						</div>
-					</div>
+					<PlayAnimation
+						v-show="isPlaying(episode.id)" />
 					<b>{{ episode.title }}</b>
 					<vue-show-more-text
 						:text="escapedEpisodeDescription(episode.description)"
@@ -124,6 +108,7 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en'
 import vueShowMoreText from 'vue-show-more-text'
+import PlayAnimation from './PlayAnimation'
 
 TimeAgo.addDefaultLocale(en)
 const timeAgo = new TimeAgo('en-US')
@@ -134,6 +119,7 @@ export default {
 		Actions,
 		ActionButton,
 		vueShowMoreText,
+		PlayAnimation,
 	},
 	props: {
 		episodes: {
@@ -326,84 +312,6 @@ table.episodeTable {
 	}
 }
 
-.eq-animation {
-	align-items: flex-end;
-	display: none;
-	width: 20px;
-	height: 12px;
-	overflow: hidden;
-	opacity: 0.8;
-	position: relative;
-	float: left;
-	top: 5px;
-	margin-right: 5px;
-}
-
-.eq-animation .-amp-video-eq-col {
-	flex: 1;
-	position: relative;
-	height: 100%;
-	margin-right: 1px;
-}
-
-.eq-animation .-amp-video-eq-col div {
-	animation-name: amp-video-eq-animation;
-	animation-timing-function: linear;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-	background-color: rgb(0, 130, 201);
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	transform: translateY(100%);
-	will-change: transform;
-}
-
-.-amp-video-eq-1-1 {
-	animation-duration: 0.3s;
-}
-
-.-amp-video-eq-1-2 {
-	animation-duration: 0.45s;
-}
-
-.-amp-video-eq-2-1 {
-	animation-duration: 0.5s;
-}
-
-.-amp-video-eq-2-2 {
-	animation-duration: 0.4s;
-}
-
-.-amp-video-eq-3-1 {
-	animation-duration: 0.3s;
-}
-
-.-amp-video-eq-3-2 {
-	animation-duration: 0.35s;
-}
-
-.-amp-video-eq-4-1 {
-	animation-duration: 0.4s;
-}
-
-.-amp-video-eq-4-2 {
-	animation-duration: 0.25s;
-}
-
-@keyframes amp-video-eq-animation {
-	0% {
-		transform: translateY(100%);
-	}
-	100% {
-		transform: translateY(0);
-	}
-}
-
-table.episodeTable tr.selected .eq-animation {
-	display: flex;
-}
-
 [lazy=loading] {
 	opacity: 0;
 }