From f64d47565d00f2d09d563d12623385dfcf6f4099 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Mon, 15 Jul 2024 04:04:17 +0200 Subject: [PATCH] [Media UI] Support for generic media download. --- .../src/components/panels/Media/Browser.vue | 2 + .../src/components/panels/Media/Downloads.vue | 321 ++++++++++++++++++ .../src/components/panels/Media/Header.vue | 10 + .../src/components/panels/Media/Index.vue | 240 +++++++++++-- .../src/components/panels/Media/Info.vue | 40 +-- .../src/components/panels/Media/Item.vue | 75 +--- .../src/components/panels/Media/Nav.vue | 31 +- .../panels/Media/Providers/Mixin.vue | 1 + .../panels/Media/Providers/YouTube.vue | 2 + .../Media/Providers/YouTube/Channel.vue | 3 +- .../panels/Media/Providers/YouTube/Feed.vue | 2 + .../Media/Providers/YouTube/Playlist.vue | 2 + .../Media/Providers/YouTube/Playlists.vue | 2 + .../src/components/panels/Music/Playlists.vue | 2 + .../http/webapp/src/style/animations.scss | 27 ++ .../http/webapp/src/style/themes/light.scss | 2 + .../http/webapp/src/utils/DateTime.vue | 8 +- .../backend/http/webapp/src/utils/Types.vue | 4 + 18 files changed, 639 insertions(+), 135 deletions(-) create mode 100644 platypush/backend/http/webapp/src/components/panels/Media/Downloads.vue diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue index 8e5a1e2ac0..b7cdf03f7f 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue @@ -27,6 +27,7 @@ :selected-channel="selectedChannel" @add-to-playlist="$emit('add-to-playlist', $event)" @back="back" + @download="$emit('download', $event)" @path-change="$emit('path-change', $event)" @play="$emit('play', $event)" /> @@ -48,6 +49,7 @@ export default { 'add-to-playlist', 'back', 'create-playlist', + 'download', 'path-change', 'play', 'remove-from-playlist', diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Downloads.vue b/platypush/backend/http/webapp/src/components/panels/Media/Downloads.vue new file mode 100644 index 0000000000..0aef6a7156 --- /dev/null +++ b/platypush/backend/http/webapp/src/components/panels/Media/Downloads.vue @@ -0,0 +1,321 @@ + + + + + diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Header.vue b/platypush/backend/http/webapp/src/components/panels/Media/Header.vue index a1c8ce28ed..9d201bdf77 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Header.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Header.vue @@ -22,6 +22,14 @@ +
+
+ +
+
+
-
-
Direct URL
-
- - - - - - - -
-
-
TV Series
@@ -185,14 +168,13 @@ diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue index 1fcc18683d..4ab3c9eb2f 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue @@ -3,56 +3,42 @@ class="item media-item" :class="{selected: selected}" @click.right.prevent="$refs.dropdown.toggle()" - v-if="!hidden" - > + v-if="!hidden">
- +
-
+
- + + v-if="(item.type === 'torrent' || item.type === 'youtube') && item.item_type !== 'channel' && item.item_type !== 'playlist'" /> - - - + v-if="item.type === 'file'" /> +
-
+
-
- -
-
{{ formatDateTime(item.created_at, true) }}
- - - Are you sure you want to remove this item from the playlist? -
@@ -128,16 +81,11 @@ export default { display: flex; flex-direction: column; align-items: center; - justify-content: space-between; cursor: initial !important; margin-bottom: 5px; border: 1px solid transparent; border-bottom: 1px solid transparent !important; - @include from($tablet) { - max-height: max(25em, 25%); - } - &.selected { box-shadow: $border-shadow-bottom; background: $selected-bg; @@ -158,7 +106,6 @@ export default { display: flex; flex-direction: column; align-items: center; - flex: 1; .row { width: 100%; diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Nav.vue b/platypush/backend/http/webapp/src/components/panels/Media/Nav.vue index 325246ed1d..3ea2833066 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Nav.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Nav.vue @@ -5,7 +5,7 @@
  • + :class="{selected: name === selectedView, ...customClasses[name]}" @click="$emit('input', name)">
    • @@ -28,6 +28,10 @@ export default { type: String, }, + downloadIconClass: { + type: String, + }, + views: { type: Object, default: () => { @@ -42,6 +46,11 @@ export default { displayName: 'Browser', }, + downloads: { + iconClass: 'fa fa-download', + displayName: 'Downloads', + }, + torrents: { iconClass: 'fa fa-magnet', displayName: 'Torrents', @@ -59,6 +68,15 @@ export default { return views }, + + customClasses() { + return { + downloads: this.downloadIconClass.split(' ').reduce((acc, cls) => { + acc[cls] = true + return acc + }, {}), + } + }, }, } @@ -107,12 +125,8 @@ nav { list-style: none; padding: .6em; opacity: 0.7; - - &.selected, - &:hover { - border-radius: 1.2em; - margin: 0 0.2em; - } + border-radius: 1.2em; + margin: 0 0.2em; &:hover { background: $nav-entry-collapsed-hover-bg; @@ -122,6 +136,9 @@ nav { background: $nav-entry-collapsed-selected-bg; } + &.completed { + color: $ok-fg; + } } } diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue index e787a68da1..8bcc2014dc 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue @@ -7,6 +7,7 @@ export default { 'add-to-playlist', 'back', 'create-playlist', + 'download', 'path-change', 'play', 'remove-from-playlist', diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue index e8bdb82674..3a2ae02687 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue @@ -9,6 +9,7 @@
    @@ -16,6 +17,7 @@ @@ -26,6 +27,7 @@ export default { mixins: [Utils], emits: [ 'add-to-playlist', + 'download', 'play', ], diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue index f8417e4325..c48ca6fa7f 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue @@ -50,6 +50,7 @@ :playlist="id" :selected-result="selectedResult" @add-to-playlist="$emit('add-to-playlist', $event)" + @download="$emit('download', $event)" @play="$emit('play', $event)" @remove-from-playlist="$emit('remove-from-playlist', $event)" @select="selectedResult = $event" @@ -68,6 +69,7 @@ export default { mixins: [Utils], emits: [ 'add-to-playlist', + 'download', 'play', 'remove-from-playlist', ], diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue index e983b66d09..f1943aa982 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue @@ -31,6 +31,7 @@ :filter="filter" :metadata="playlistsById[selectedPlaylist.id] || selectedPlaylist" @add-to-playlist="$emit('add-to-playlist', $event)" + @download="$emit('download', $event)" @remove-from-playlist="$emit('remove-from-playlist', {item: $event, playlist_id: selectedPlaylist.id})" @play="$emit('play', $event)" /> @@ -110,6 +111,7 @@ export default { emits: [ 'add-to-playlist', 'create-playlist', + 'download', 'play', 'remove-from-playlist', 'remove-playlist', diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue b/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue index 5c5126d905..3aa1ac5c35 100644 --- a/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue +++ b/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue @@ -16,6 +16,7 @@ @add-to-queue="$emit('load-tracks', {tracks: $event, play: false})" @add-to-queue-and-play="$emit('load-tracks', {tracks: $event, play: true})" @back="$emit('playlist-edit', null)" + @download="$emit('download', $event)" @info="$emit('info', $event)" @move="$emit('track-move', {...$event, playlist: editedPlaylist})" @play="$emit('load-tracks', {tracks: [$event], play: true})" @@ -104,6 +105,7 @@ export default { emits: [ 'add-to-playlist', + 'download', 'info', 'load', 'load-tracks', diff --git a/platypush/backend/http/webapp/src/style/animations.scss b/platypush/backend/http/webapp/src/style/animations.scss index 3523a814da..4d2ef72b82 100644 --- a/platypush/backend/http/webapp/src/style/animations.scss +++ b/platypush/backend/http/webapp/src/style/animations.scss @@ -26,3 +26,30 @@ display: none; } } + +.glow { + animation-duration: 2s; + -webkit-animation-duration: 2s; + animation-fill-mode: both; + animation-name: glow; + -webkit-animation-name: glow; +} + +.loop { + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; +} + +@keyframes glow { + 0% {opacity: 1; box-shadow: 0 0 5px #fff;} + 10% {opacity: 0.9; box-shadow: 0 0 10px $active-glow-fg-1;} + 20% {opacity: 0.8; box-shadow: 0 0 20px $active-glow-fg-1;} + 30% {opacity: 0.7; box-shadow: 0 0 30px $active-glow-fg-1;} + 40% {opacity: 0.6; box-shadow: 0 0 40px $active-glow-fg-1;} + 50% {opacity: 0.5; box-shadow: 0 0 50px $active-glow-fg-1;} + 60% {opacity: 0.6; box-shadow: 0 0 40px $active-glow-fg-1;} + 70% {opacity: 0.7; box-shadow: 0 0 30px $active-glow-fg-1;} + 80% {opacity: 0.8; box-shadow: 0 0 20px $active-glow-fg-1;} + 90% {opacity: 0.9; box-shadow: 0 0 10px $active-glow-fg-1;} + 100% {opacity: 1; box-shadow: 0 0 5px #fff;} +} diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss index 37db58665d..87121a48e1 100644 --- a/platypush/backend/http/webapp/src/style/themes/light.scss +++ b/platypush/backend/http/webapp/src/style/themes/light.scss @@ -87,6 +87,8 @@ $default-link-fg: #5f7869 !default; /// Active $active-glow-bg-1: #d4ffe3 !default; $active-glow-bg-2: #9cdfb0 !default; +$active-glow-fg-1: #32b646 !default; +$active-glow-fg-2: #5f7869 !default; /// Hover $default-hover-fg: #35b870 !default; diff --git a/platypush/backend/http/webapp/src/utils/DateTime.vue b/platypush/backend/http/webapp/src/utils/DateTime.vue index c6bb8f2716..36917f2e5d 100644 --- a/platypush/backend/http/webapp/src/utils/DateTime.vue +++ b/platypush/backend/http/webapp/src/utils/DateTime.vue @@ -3,13 +3,17 @@ export default { name: "DateTime", methods: { formatDate(date, year=false) { - if (typeof date === 'string') + if (typeof date === 'number') + date = new Date(date * 1000) + else if (typeof date === 'string') date = new Date(Date.parse(date)) return date.toDateString().substring(0, year ? 15 : 10) }, formatTime(date, seconds=true) { + if (typeof date === 'number') + date = new Date(date * 1000) if (typeof date === 'string') date = new Date(Date.parse(date)) @@ -17,6 +21,8 @@ export default { }, formatDateTime(date, year=false, seconds=true, skipTimeIfMidnight=false) { + if (typeof date === 'number') + date = new Date(date * 1000) if (typeof date === 'string') date = new Date(Date.parse(date)) diff --git a/platypush/backend/http/webapp/src/utils/Types.vue b/platypush/backend/http/webapp/src/utils/Types.vue index 809ae76de5..09b858a1c3 100644 --- a/platypush/backend/http/webapp/src/utils/Types.vue +++ b/platypush/backend/http/webapp/src/utils/Types.vue @@ -114,6 +114,10 @@ export default { return true }, + + round(value, decimals) { + return Number(Math.round(value+'e'+decimals)+'e-'+decimals); + }, }, }