diff --git a/package-lock.json b/package-lock.json
index f6bc7dff255fbaaa4c57f7256814d58707850ca0..d045f1f11a9a7fb89b4834e43fb1d3b08edd13c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3911,16 +3911,6 @@
"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
"dev": true
},
- "clipboard": {
- "version": "2.0.6",
- "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
- "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
- "requires": {
- "good-listener": "^1.2.2",
- "select": "^1.1.2",
- "tiny-emitter": "^2.0.0"
- }
- },
"cliui": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -4511,11 +4501,6 @@
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
- "delegate": {
- "version": "3.2.0",
- "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
- "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
- },
"delegates": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -6170,14 +6155,6 @@
"minimist": "^1.2.5"
}
},
- "good-listener": {
- "version": "1.2.2",
- "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
- "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
- "requires": {
- "delegate": "^3.1.2"
- }
- },
"graceful-fs": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
@@ -9299,11 +9276,6 @@
}
}
},
- "select": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
- "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
- },
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -10835,11 +10807,6 @@
"setimmediate": "^1.0.4"
}
},
- "tiny-emitter": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
- "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
- },
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
@@ -11297,19 +11264,6 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
- "vue-blurhash": {
- "version": "0.1.2",
- "resolved": "https://registry.npmjs.org/vue-blurhash/-/vue-blurhash-0.1.2.tgz",
- "integrity": "sha512-VfIiQW2+F1HsJktumGsEwCsp0CYLdnmTcCA3nMvZ8Bze8bkpp9tonIygzBnjUKN0WZyOxb22i9QQ+lqgngjedA=="
- },
- "vue-clipboard2": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
- "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
- "requires": {
- "clipboard": "^2.0.0"
- }
- },
"vue-color": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.7.1.tgz",
diff --git a/package.json b/package.json
index 6507d10792a26694e79b9ed94833fe166795ea24..e61b437bcb9798abc2ca89c1b2525318d6fcc599 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,6 @@
"postcss-loader": "^4.1.0",
"style-loader": "^2.0.0",
"vue": "^2.6.12",
- "vue-blurhash": "^0.1.2",
- "vue-clipboard2": "^0.3.1",
"vue-content-loader": "^0.2.3",
"vue-resize-observer": "^1.0.32",
"vue-router": "^3.4.9",
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 0308db39c4a3be9f053eb0b6aa162e57ff5a52f7..c3ec3b4073a1a73238c559fb2c5b071abfa8d19b 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -43,15 +43,30 @@
:key="idx"
:class="{ selected: idx === activeItem}">
<td class="iconColumn">
- <div>
- <blur-hash-image
- hash="00PZr%"
- :src="episode.imgURL" />
- </div>
+ <div class="episodeImage"
+ :style="{ backgroundImage: `url(${episode.imgURL})` }" />
</td>
<td
class="nameColumn"
@click="changeRoute(`/browse/show/${episode.podcast_id}/${episode.id}`)">
+ <i-amp-video-eq>
+ <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>
+ </i-amp-video-eq>
<b>{{ episode.title }}</b>
<vue-show-more-text
:text="escapedEpisodeDescription(episode.description)"
@@ -238,14 +253,6 @@ table.episodeTable {
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0px;
- span {
- display: block;
- max-height: 45px;
- white-space: normal;
- text-overflow: ellipsis;
- overflow: hidden;
- color: #657786;
- }
b {
color: var(--color-main-text);
user-select: none;
@@ -297,4 +304,82 @@ table.episodeTable {
}
}
}
+
+i-amp-video-eq {
+ align-items: flex-end;
+ display: none;
+ width: 20px;
+ height: 12px;
+ overflow: hidden;
+ opacity: 0.8;
+ position: relative;
+ float: left;
+ top: 5px;
+ margin-right: 5px;
+}
+
+i-amp-video-eq .-amp-video-eq-col {
+ flex: 1;
+ position: relative;
+ height: 100%;
+ margin-right: 1px;
+}
+
+i-amp-video-eq .-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 i-amp-video-eq {
+ display: flex;
+}
</style>
diff --git a/src/main.js b/src/main.js
index 6de012bbd0f266603b7341368125a744ab349c8b..b62e2e863536b03c7aecd4bde6ca70443a5d2f57 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,12 +28,8 @@ import { translate, translatePlural } from '@nextcloud/l10n'
import App from './App'
-import VueBlurHash from 'vue-blurhash'
-import VueClipboard from 'vue-clipboard2'
import VueResizeObserver from 'vue-resize-observer'
-import 'vue-blurhash/dist/vue-blurhash.css'
-
Vue.prototype.t = translate
Vue.prototype.n = translatePlural
Vue.prototype.OC = window.OC
@@ -41,8 +37,6 @@ Vue.prototype.OCA = window.OCA
Vue.prototype.$apiUrl = 'https://api.fyyd.de/0.2'
Vue.prototype.$version = '0.0.1'
-Vue.use(VueClipboard)
-Vue.use(VueBlurHash)
Vue.use(VueResizeObserver)
export default new Vue({