From 9d4511577fa894111a150730c3944c1e10e0f28e Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Fri, 14 Jun 2019 00:54:20 +0200 Subject: [PATCH] - Refactored webpanel style to use flex and dynamic element heights instead of ugly fixed/absolute positioning. - New media webpanel plugin WIP --- platypush/backend/http/app/routes/index.py | 1 + .../static/css/source/common/animations.scss | 27 ++-- .../http/static/css/source/common/vars.scss | 9 +- .../static/css/source/webpanel/index.scss | 39 +++++- .../http/static/css/source/webpanel/nav.scss | 13 +- .../css/source/webpanel/plugins/media.mplayer | 1 + .../css/source/webpanel/plugins/media.mpv | 1 + .../source/webpanel/plugins/media.omxplayer | 1 + .../css/source/webpanel/plugins/media.vlc | 1 + .../webpanel/plugins/media/controls.scss | 87 ++++++++++++ .../webpanel/plugins/media/devices.scss | 22 ++++ .../source/webpanel/plugins/media/index.scss | 30 +++++ .../webpanel/plugins/media/results.scss | 30 +++++ .../source/webpanel/plugins/media/search.scss | 53 ++++++++ .../source/webpanel/plugins/media/vars.scss | 11 ++ .../webpanel/plugins/music.mpd/index.scss | 107 ++++++++------- .../webpanel/plugins/music.mpd/vars.scss | 1 + .../backend/http/static/js/application.js | 4 - .../http/static/js/elements/dropdown.js | 8 ++ .../static/js/plugins/media.mplayer/index.js | 5 + .../http/static/js/plugins/media.mpv/index.js | 5 + .../js/plugins/media.omxplayer/index.js | 5 + .../http/static/js/plugins/media.vlc/index.js | 5 + .../http/static/js/plugins/media/controls.js | 14 ++ .../http/static/js/plugins/media/devices.js | 39 ++++++ .../http/static/js/plugins/media/index.js | 46 +++++++ .../http/static/js/plugins/media/item.js | 11 ++ .../http/static/js/plugins/media/results.js | 18 +++ .../http/static/js/plugins/media/search.js | 44 +++++++ .../http/static/js/plugins/music.mpd/index.js | 16 +-- platypush/backend/http/templates/index.html | 10 +- .../templates/plugins/light.hue/index.html | 2 +- .../plugins/media.mplayer/index.html | 7 + .../templates/plugins/media.mpv/index.html | 7 + .../plugins/media.omxplayer/index.html | 7 + .../templates/plugins/media.vlc/index.html | 7 + .../templates/plugins/media/controls.html | 44 +++++++ .../http/templates/plugins/media/devices.html | 13 ++ .../http/templates/plugins/media/index.html | 22 ++++ .../http/templates/plugins/media/item.html | 8 ++ .../http/templates/plugins/media/results.html | 18 +++ .../http/templates/plugins/media/search.html | 39 ++++++ .../templates/plugins/music.mpd/index.html | 124 +++++++++--------- .../templates/plugins/music.mpd/search.html | 30 ++--- .../plugins/music.snapcast/index.html | 2 +- .../http/templates/plugins/tts/common.html | 2 +- platypush/backend/http/utils.py | 13 +- setup.py | 2 +- 48 files changed, 833 insertions(+), 178 deletions(-) create mode 120000 platypush/backend/http/static/css/source/webpanel/plugins/media.mplayer create mode 120000 platypush/backend/http/static/css/source/webpanel/plugins/media.mpv create mode 120000 platypush/backend/http/static/css/source/webpanel/plugins/media.omxplayer create mode 120000 platypush/backend/http/static/css/source/webpanel/plugins/media.vlc create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/media/controls.scss create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/media/devices.scss create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/media/index.scss create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/media/search.scss create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/media/vars.scss create mode 100644 platypush/backend/http/static/js/plugins/media.mplayer/index.js create mode 100644 platypush/backend/http/static/js/plugins/media.mpv/index.js create mode 100644 platypush/backend/http/static/js/plugins/media.omxplayer/index.js create mode 100644 platypush/backend/http/static/js/plugins/media.vlc/index.js create mode 100644 platypush/backend/http/static/js/plugins/media/controls.js create mode 100644 platypush/backend/http/static/js/plugins/media/devices.js create mode 100644 platypush/backend/http/static/js/plugins/media/index.js create mode 100644 platypush/backend/http/static/js/plugins/media/item.js create mode 100644 platypush/backend/http/static/js/plugins/media/results.js create mode 100644 platypush/backend/http/static/js/plugins/media/search.js create mode 100644 platypush/backend/http/templates/plugins/media.mplayer/index.html create mode 100644 platypush/backend/http/templates/plugins/media.mpv/index.html create mode 100644 platypush/backend/http/templates/plugins/media.omxplayer/index.html create mode 100644 platypush/backend/http/templates/plugins/media.vlc/index.html create mode 100644 platypush/backend/http/templates/plugins/media/controls.html create mode 100644 platypush/backend/http/templates/plugins/media/devices.html create mode 100644 platypush/backend/http/templates/plugins/media/index.html create mode 100644 platypush/backend/http/templates/plugins/media/item.html create mode 100644 platypush/backend/http/templates/plugins/media/results.html create mode 100644 platypush/backend/http/templates/plugins/media/search.html diff --git a/platypush/backend/http/app/routes/index.py b/platypush/backend/http/app/routes/index.py index 292801dce..475c7eb57 100644 --- a/platypush/backend/http/app/routes/index.py +++ b/platypush/backend/http/app/routes/index.py @@ -58,6 +58,7 @@ def index(): scripts=enabled_scripts, styles=enabled_styles, utils=HttpUtils, token=Config.get('token'), websocket_port=get_websocket_port(), + plugins=Config.get_plugins(), backends=Config.get_backends(), has_ssl=http_conf.get('ssl_cert') is not None) diff --git a/platypush/backend/http/static/css/source/common/animations.scss b/platypush/backend/http/static/css/source/common/animations.scss index fc24399b3..0bc5add04 100644 --- a/platypush/backend/http/static/css/source/common/animations.scss +++ b/platypush/backend/http/static/css/source/common/animations.scss @@ -1,13 +1,12 @@ .fade-in { --duration: $fade-in-transition-duration; - opacity: 1; - animation-name: fadeInOpacity; - animation-iteration-count: 1; + animation-name: fadeIn; animation-timing-function: ease-in; animation-duration: var(--duration); + animation-fill-mode:both; } -@keyframes fadeInOpacity { +@keyframes fadeIn { 0% { opacity: 0; } @@ -16,22 +15,22 @@ } } -.fade-out { - --duration: $fade-out-transition-duration; - opacity: 1; - animation-name: fadeOutOpacity; - animation-iteration-count: 1; - animation-timing-function: ease-out; +.roll-in { + --duration: $roll-in-transition-duration; + animation-name: rollIn; + animation-timing-function: ease-in; animation-duration: var(--duration); + animation-fill-mode:both; } -@keyframes fadeOutOpacity { +@keyframes rollIn { 0% { - opacity: 1; + opacity: 0; + transform:translateX(-100%); } 100% { - opacity: 0; - display: none; + opacity: 1; + transform:translateX(0); } } diff --git a/platypush/backend/http/static/css/source/common/vars.scss b/platypush/backend/http/static/css/source/common/vars.scss index cc14a3e40..beb900268 100644 --- a/platypush/backend/http/static/css/source/common/vars.scss +++ b/platypush/backend/http/static/css/source/common/vars.scss @@ -23,15 +23,20 @@ $selected-bg: #c8ffd0 !default; $hover-bg: #def6ea !default; $header-bg: $default_bg !default; +$nav-height: 4.5rem !default; $nav-bg: #e8e8e8 !default; $nav-fg: $default-link-fg; -$nav-date-time-shadow: 2px 2px 2px #ccc !default; +$nav-margin: .2rem; +$nav-date-time-shadow: .2rem .2rem .2rem #ccc !default; //// Animations defaults $transition-duration: .5s !default; -$fade-transition-duration: .5s !default; +$fade-transition-duration: $transition-duration !default; +$roll-transition-duration: $transition-duration !default; $fade-in-transition-duration: $fade-transition-duration !default; $fade-out-transition-duration: $fade-transition-duration !default; +$roll-in-transition-duration: $roll-transition-duration !default; +$roll-out-transition-duration: $roll-transition-duration !default; //// Notifications $notification-bg: rgba(185, 255, 193, 0.9) !default; diff --git a/platypush/backend/http/static/css/source/webpanel/index.scss b/platypush/backend/http/static/css/source/webpanel/index.scss index efab4e928..efb25a1a0 100644 --- a/platypush/backend/http/static/css/source/webpanel/index.scss +++ b/platypush/backend/http/static/css/source/webpanel/index.scss @@ -11,17 +11,42 @@ body { width: 100%; + height: 100%; + margin: 0; overflow-x: hidden; font-family: $default-font-family; font-size: $default-font-size; } -main { - padding: 4.9rem 0; - margin: 0; -} - -a { - color: $default-link-fg; +#app { + display: flex; + flex-flow: column; + height: 100%; + + main { + margin: 0; + flex: 1 1 auto; + overflow: hidden; + + // nav height hardcoded, calc won't support either CSS4 nor SASS vars + height: calc(100vh - 4.8rem); + + .plugins-container { + height: inherit; + + .plugin-container { + overflow: auto; + height: inherit; + + .plugin { + overflow: auto; + } + } + } + } + + a { + color: $default-link-fg; + } } diff --git a/platypush/backend/http/static/css/source/webpanel/nav.scss b/platypush/backend/http/static/css/source/webpanel/nav.scss index f485f1f75..d2ff0f0d6 100644 --- a/platypush/backend/http/static/css/source/webpanel/nav.scss +++ b/platypush/backend/http/static/css/source/webpanel/nav.scss @@ -1,10 +1,13 @@ +:root { + --nav-height: $nav-height; +} + nav { - margin-bottom: 1.2rem; - position: fixed; - top: 0; width: 100%; - z-index: 10; - opacity: 0.95; + height: var(--nav-height); + margin-bottom: $nav-margin; + flex: 0 1 auto; + z-index: 2; ul { position: relative; diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media.mplayer b/platypush/backend/http/static/css/source/webpanel/plugins/media.mplayer new file mode 120000 index 000000000..27949aaf3 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media.mplayer @@ -0,0 +1 @@ +media \ No newline at end of file diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media.mpv b/platypush/backend/http/static/css/source/webpanel/plugins/media.mpv new file mode 120000 index 000000000..27949aaf3 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media.mpv @@ -0,0 +1 @@ +media \ No newline at end of file diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media.omxplayer b/platypush/backend/http/static/css/source/webpanel/plugins/media.omxplayer new file mode 120000 index 000000000..27949aaf3 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media.omxplayer @@ -0,0 +1 @@ +media \ No newline at end of file diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media.vlc b/platypush/backend/http/static/css/source/webpanel/plugins/media.vlc new file mode 120000 index 000000000..27949aaf3 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media.vlc @@ -0,0 +1 @@ +media \ No newline at end of file diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/controls.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/controls.scss new file mode 100644 index 000000000..a45859f39 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/controls.scss @@ -0,0 +1,87 @@ +.media-plugin { + .controls { + @extend .vertical-center; + width: 100%; + border-top: $default-border-2; + box-shadow: $control-panel-shadow; + flex: 0 0 $control-panel-height; + + .item-container { + @extend .vertical-center; + padding-left: 1rem; + line-height: 2.6rem; + } + + button { + &:hover { + .fa { + color: $button-hover-color; + } + } + } + + .playback-controls { + .row { + @extend .vertical-center; + justify-content: center; + } + + button { + padding: 0 1.5rem; + + .fa-play, .fa-pause { + color: $button-hover-color; + font-size: $font-size * 2; + margin-top: .3rem; + + &:hover { + color: $play-button-hover-color; + } + } + } + } + + .pull-right { + button { + &:not(last-child) { + padding: 0 .7rem; + } + + &:last-child { + padding: 0; + } + } + + .volume-container { + button { + padding: 0 .3rem 0 0; + background: none; + } + } + } + + .seek-slider { + width: 75%; + } + + .volume-slider { + width: 75%; + margin-right: 1rem; + } + + .elapsed-time, + .total-time { + font-size: .7em; + color: .7em; + } + + .elapsed-time { + margin-right: 1.5rem; + } + + .total-time { + margin-left: 1.5rem; + } + } +} + diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/devices.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/devices.scss new file mode 100644 index 000000000..de8a1dddc --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/devices.scss @@ -0,0 +1,22 @@ +.media-plugin { + .devices { + display: inline-block; + + button { + padding: .5rem; + } + + .dropdown { + .item { + display: flex; + align-items: center; + cursor: pointer; + + &:hover { + background: $hover-bg + } + } + } + } +} + diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/index.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/index.scss new file mode 100644 index 000000000..b75bfdb91 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/index.scss @@ -0,0 +1,30 @@ +@import 'common/vars'; +@import 'common/mixins'; +@import 'common/layout'; +@import 'common/animations'; + +@import 'webpanel/plugins/media/vars'; +@import 'webpanel/plugins/media/search'; +@import 'webpanel/plugins/media/devices'; +@import 'webpanel/plugins/media/results'; +@import 'webpanel/plugins/media/controls'; + +.media-plugin { + display: flex; + flex-direction: column; + height: inherit; + letter-spacing: .03rem; + + input[type=text] { + width: 100%; + + &:hover { + border-color: $default-hover-fg; + } + } + + button { + border: 0; + } +} + diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss new file mode 100644 index 000000000..3da146935 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss @@ -0,0 +1,30 @@ +.media-plugin { + .results { + height: calc(100% - 16rem); + overflow: auto; + + .empty { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5em; + letter-spacing: .1rem; + color: $empty-results-color; + } + + .media-item { + display: flex; + align-items: center; + cursor: pointer; + border-radius: 1rem; + padding: .5rem; + + &:nth-child(odd) { background: rgba(255, 255, 255, 0.0); } + &:nth-child(even) { background: $default-bg-3; } + &:hover { background: $hover-bg !important; } + &.selected { background: $selected-bg !important; } + } + } +} + diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/search.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/search.scss new file mode 100644 index 000000000..6e19ecead --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/search.scss @@ -0,0 +1,53 @@ +.media-plugin { + .search { + display: flex; + align-items: center; + width: 100%; + background: $default-bg-3; + border-bottom: $default-border-3; + + input[type=text] { + width: 80%; + max-width: 600px; + } + + [type=submit] { + color: $default-hover-fg; + font-size: 1.2em; + + &:hover { + border: $default-border-2; + border-radius: 5rem; + } + } + + .types { + .type { + display: inline-block; + padding: 1rem 1rem 0 1rem; + } + + label { + display: inline-block; + font-weight: normal; + margin: 0; + } + } + + button { + padding: 0 2rem; + border: 0; + + &:hover { + color: $default-hover-fg; + } + } + + form { + width: 100%; + margin: 0; + padding: 1rem 0; + } + } +} + diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/vars.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/vars.scss new file mode 100644 index 000000000..0edcb4003 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/vars.scss @@ -0,0 +1,11 @@ +$button-enabled-color: #59df3e; +$button-hover-color: $button-enabled-color; +$play-button-hover-color: #64ef4a; + +$control-panel-bg: rgba(245,245,245,0.95); +$control-panel-height: 10rem !default; +$control-panel-shadow: 0 -2.5px 4px 0 #c0c0c0; +$control-time-color: #666; + +$empty-results-color: #506050; + diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss index 7f3c0bef0..0e95b3ea0 100644 --- a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss +++ b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss @@ -4,11 +4,14 @@ @import 'webpanel/plugins/music.mpd/vars'; .music-mpd-container { + display: flex; + flex-direction: column; line-height: 3rem; letter-spacing: .03rem; + height: inherit; overflow: hidden; - * > .item { + .item { display: flex; align-items: center; cursor: pointer; @@ -25,12 +28,12 @@ } } - * > .duration { + .duration { color: $duration-color; font-size: .7em; } - * > button { + button { border: 0; &:disabled { @@ -55,16 +58,17 @@ .panels { display: flex; - } - - .browser, .playlist { - overflow: auto; + flex-direction: row; + flex: 0 1 auto; + order: 0; + height: calc(100% - 10.1rem); } .browser { + width: 40%; + min-width: 20rem; + max-width: 35rem; background: $browser-panel-bg; - border-right: $default-border-2; - padding: .3rem 1rem 6rem 1rem; font-size: .9em; .item { @@ -103,28 +107,27 @@ .browser, .search, .playlist { - position: relative; // For the dropdown menu - padding: .5rem 1rem 6rem 1rem; + .results { + position: relative; // For the dropdown menu + height: calc(100% - 5.1rem); + overflow: auto; + } .browser-controls, .results-controls, .playlist-controls { - position: fixed; - height: 5rem; + width: 100%; + height: 4rem; background: $playlist-controls-bg; border-bottom: $playlist-controls-border; - margin: -.5rem 0 0 -1rem; - padding: .5rem; + padding: .5rem 0; input[type=text] { width: 100%; } - * > button { - @extend %ctrl-button; - } - button { + @extend %ctrl-button; padding: 0 .75rem; } } @@ -157,6 +160,9 @@ } } + .playlist { + width: 100%; + } .playlist-add, .editor { .editor-controls, @@ -202,32 +208,32 @@ .controls { @extend .vertical-center; - position: fixed; width: 100%; - bottom: 0; border-top: $default-border-2; - padding: 1rem; background: $control-panel-bg; box-shadow: $control-panel-shadow; z-index: 2; + order: 1; + flex: 0 0 $control-panel-height; .track-container { @extend .vertical-center; + padding-left: 1rem; line-height: 2.6rem; + a { + color: initial; + text-decoration: none; + + &:hover { + color: $track-info-hover-color; + } + } + .track-info { .artist { font-weight: bold; } - - a { - color: initial; - text-decoration: none; - - &:hover { - color: $track-info-hover-color; - } - } } } @@ -280,37 +286,37 @@ } } - * > .seek-slider { + .seek-slider { width: 75%; } - * > .volume-slider { + .volume-slider { width: 75%; margin-right: 1rem; } - * > .elapsed-time, - * > .total-time { + .elapsed-time, + .total-time { font-size: .7em; color: .7em; } - * > .elapsed-time { + .elapsed-time { margin-right: 1.5rem; } - * > .total-time { + .total-time { margin-left: 1.5rem; } } .search { --width: 90vw; - position: relative; padding: 0; form { margin-bottom: 0; + padding: 2.7rem; .row { padding: .5rem; @@ -318,7 +324,7 @@ .footer { padding-top: 1.5rem; - margin-top: 1.5rem; + margin: 2.5rem 0; border-top: $search-modal-footer-border; .left { @@ -333,24 +339,22 @@ } .results-controls { - position: fixed; padding: 0; - margin: -2.45rem auto 0 -2rem; border-bottom: $default-border-2; width: var(--width); - height: 3em; + height: 4.5rem; display: flex; align-items: center; z-index: 502; } - .results { - padding-top: 2.7rem; - } - form, .results { position: relative; } + + .results { + height: calc(100% - 4.7rem); + } } .dropdown { @@ -394,6 +398,17 @@ } } +#music-mpd-search-modal { + .header { + height: 3.8rem; + } + + .body { + display: flex; + padding: 0; + } +} + #music-mpd-playlist-add { .modal { min-width: 50rem; diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/vars.scss b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/vars.scss index 3424a0285..8cfcee555 100644 --- a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/vars.scss +++ b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/vars.scss @@ -4,6 +4,7 @@ $play-button-hover-color: #64ef4a; $duration-color: #666; +$control-panel-height: 10rem !default; $control-panel-bg: rgba(245,245,245,0.95); $control-panel-shadow: 0 -2.5px 4px 0 #c0c0c0; $control-time-color: #666; diff --git a/platypush/backend/http/static/js/application.js b/platypush/backend/http/static/js/application.js index a9f50751a..9079ea006 100644 --- a/platypush/backend/http/static/js/application.js +++ b/platypush/backend/http/static/js/application.js @@ -39,7 +39,6 @@ window.vm = new Vue({ }; }, - mounted: function() {}, created: function() { const self = this; setInterval(() => { @@ -48,8 +47,5 @@ window.vm = new Vue({ initEvents(); }, - - updated: function() {}, - destroyed: function() {}, }); diff --git a/platypush/backend/http/static/js/elements/dropdown.js b/platypush/backend/http/static/js/elements/dropdown.js index 0f6524601..abf2eb903 100644 --- a/platypush/backend/http/static/js/elements/dropdown.js +++ b/platypush/backend/http/static/js/elements/dropdown.js @@ -100,5 +100,13 @@ function openDropdown(element) { element.style.top = (parseFloat(element.style.top) - parseFloat(getComputedStyle(element).height)) + 'px'; } } + + if (parseFloat(element.style.left) < 0) { + element.style.left = 0; + } + + if (parseFloat(element.style.top) < 0) { + element.style.top = 0; + } } diff --git a/platypush/backend/http/static/js/plugins/media.mplayer/index.js b/platypush/backend/http/static/js/plugins/media.mplayer/index.js new file mode 100644 index 000000000..ab8f2b5ce --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media.mplayer/index.js @@ -0,0 +1,5 @@ +Vue.component('media-mplayer', { + template: '#tmpl-media-mplayer', + props: ['config'], +}); + diff --git a/platypush/backend/http/static/js/plugins/media.mpv/index.js b/platypush/backend/http/static/js/plugins/media.mpv/index.js new file mode 100644 index 000000000..4bdc97b82 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media.mpv/index.js @@ -0,0 +1,5 @@ +Vue.component('media-mpv', { + template: '#tmpl-media-mpv', + props: ['config'], +}); + diff --git a/platypush/backend/http/static/js/plugins/media.omxplayer/index.js b/platypush/backend/http/static/js/plugins/media.omxplayer/index.js new file mode 100644 index 000000000..7bf182f10 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media.omxplayer/index.js @@ -0,0 +1,5 @@ +Vue.component('media-omxplayer', { + template: '#tmpl-media-omxplayer', + props: ['config'], +}); + diff --git a/platypush/backend/http/static/js/plugins/media.vlc/index.js b/platypush/backend/http/static/js/plugins/media.vlc/index.js new file mode 100644 index 000000000..679f02f54 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media.vlc/index.js @@ -0,0 +1,5 @@ +Vue.component('media-vlc', { + template: '#tmpl-media-vlc', + props: ['config'], +}); + diff --git a/platypush/backend/http/static/js/plugins/media/controls.js b/platypush/backend/http/static/js/plugins/media/controls.js new file mode 100644 index 000000000..b7c7a3080 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/controls.js @@ -0,0 +1,14 @@ +Vue.component('media-controls', { + template: '#tmpl-media-controls', + props: { + bus: { type: Object }, + item: { + type: Object, + default: () => {}, + } + }, + + methods: { + }, +}); + diff --git a/platypush/backend/http/static/js/plugins/media/devices.js b/platypush/backend/http/static/js/plugins/media/devices.js new file mode 100644 index 000000000..387a069a4 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/devices.js @@ -0,0 +1,39 @@ +Vue.component('media-devices', { + template: '#tmpl-media-devices', + props: { + bus: { type: Object }, + }, + + data: function() { + return { + showDevicesMenu: false, + }; + }, + + computed: { + dropdownItems: function() { + var items = [ + { + text: 'Local player', + icon: 'desktop', + }, + { + text: 'Browser', + icon: 'laptop', + }, + ]; + + return items; + }, + }, + + methods: { + openDevicesMenu: function() { + openDropdown(this.$refs.menu); + }, + }, + + created: function() { + }, +}); + diff --git a/platypush/backend/http/static/js/plugins/media/index.js b/platypush/backend/http/static/js/plugins/media/index.js new file mode 100644 index 000000000..a850bf427 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/index.js @@ -0,0 +1,46 @@ +Vue.component('media', { + template: '#tmpl-media', + props: ['config','player'], + data: function() { + return { + bus: new Vue({}), + results: [], + currentItem: {}, + loading: { + results: false, + }, + }; + }, + + computed: { + types: function() { + return { + file: {}, + torrent: {}, + youtube: {}, + }; + }, + }, + + methods: { + refresh: async function() { + }, + + onResultsLoading: function() { + this.loading.results = true; + }, + + onResultsReady: function(results) { + this.loading.results = false; + this.results = results; + }, + }, + + created: function() { + this.refresh(); + + this.bus.$on('results-loading', this.onResultsLoading); + this.bus.$on('results-ready', this.onResultsReady); + }, +}); + diff --git a/platypush/backend/http/static/js/plugins/media/item.js b/platypush/backend/http/static/js/plugins/media/item.js new file mode 100644 index 000000000..821062824 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/item.js @@ -0,0 +1,11 @@ +Vue.component('media-item', { + template: '#tmpl-media-item', + props: { + bus: { type: Object }, + item: { + type: Object, + default: () => {}, + } + }, +}); + diff --git a/platypush/backend/http/static/js/plugins/media/results.js b/platypush/backend/http/static/js/plugins/media/results.js new file mode 100644 index 000000000..6e714a710 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/results.js @@ -0,0 +1,18 @@ +Vue.component('media-results', { + template: '#tmpl-media-results', + props: { + bus: { type: Object }, + loading: { + type: Boolean, + default: false, + }, + results: { + type: Array, + default: () => [], + }, + }, + + methods: { + }, +}); + diff --git a/platypush/backend/http/static/js/plugins/media/search.js b/platypush/backend/http/static/js/plugins/media/search.js new file mode 100644 index 000000000..09262bf3f --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/search.js @@ -0,0 +1,44 @@ +Vue.component('media-search', { + template: '#tmpl-media-search', + props: { + bus: { type: Object }, + supportedTypes: { type: Object }, + }, + + data: function() { + return { + searching: false, + showFilter: false, + query: '', + + types: Object.keys(this.supportedTypes).reduce((obj, type) => { + obj[type] = true; + return obj; + }, {}), + }; + }, + + methods: { + search: async function(event) { + const types = Object.entries(this.types).filter(t => t[1]).map(t => t[0]); + var results = []; + + this.searching = true; + this.bus.$emit('results-loading'); + + try { + results = await request('media.search', { + query: this.query, + types: types, + }); + } finally { + this.searching = false; + this.bus.$emit('results-ready', results); + } + }, + }, + + created: function() { + }, +}); + diff --git a/platypush/backend/http/static/js/plugins/music.mpd/index.js b/platypush/backend/http/static/js/plugins/music.mpd/index.js index 67a24e2d0..c21e346a5 100644 --- a/platypush/backend/http/static/js/plugins/music.mpd/index.js +++ b/platypush/backend/http/static/js/plugins/music.mpd/index.js @@ -468,8 +468,8 @@ Vue.component('music-mpd', { } }; - adjust(this)(); - setInterval(adjust(this), 2000); + // adjust(this)(); + // setInterval(adjust(this), 2000); }, _parseStatus: async function(status) { @@ -1200,18 +1200,6 @@ Vue.component('music-mpd', { } else { return; } - - const self = this; - setTimeout(() => { - var parent = self.$refs.activePlaylistTrack[0].$el.parentElement; - if (parent.clientHeight + parent.scrollTop < parent.scrollHeight) { - if (parent.scrollTop-50 > 0) { - parent.scrollTop -= 50; - } else { - parent.scrollTop = 0; - } - } - }, 750); }, addToPlaylistPrompt: async function() { diff --git a/platypush/backend/http/templates/index.html b/platypush/backend/http/templates/index.html index ac956f7ce..b10bfdb23 100644 --- a/platypush/backend/http/templates/index.html +++ b/platypush/backend/http/templates/index.html @@ -27,11 +27,15 @@ window.config = { ...window.config, websocket_port: {{ websocket_port }}, - has_ssl: {% print('true' if has_ssl else 'false') %}, - templates: JSON.parse('{% print(utils.to_json(templates))|safe %}'), - scripts: JSON.parse('{% print(utils.to_json(scripts))|safe %}'), + has_ssl: {{ 'true' if has_ssl else 'false' }}, + templates: JSON.parse('{{ utils.to_json(templates)|safe }}'), + scripts: JSON.parse('{{ utils.to_json(scripts)|safe }}'), }; + + var __plugins__ = JSON.parse('{{ utils.to_json(plugins)|safe }}'); + var __backends__ = JSON.parse('{{ utils.to_json(backends)|safe }}'); + {% if token %} window.config.token = '{{ token }}'; {% else %} diff --git a/platypush/backend/http/templates/plugins/light.hue/index.html b/platypush/backend/http/templates/plugins/light.hue/index.html index f9e031281..aaf7a34bb 100644 --- a/platypush/backend/http/templates/plugins/light.hue/index.html +++ b/platypush/backend/http/templates/plugins/light.hue/index.html @@ -7,7 +7,7 @@ {% include 'plugins/light.hue/animations.html' %} +{% include 'plugins/media/index.html' %} + + + diff --git a/platypush/backend/http/templates/plugins/media.mpv/index.html b/platypush/backend/http/templates/plugins/media.mpv/index.html new file mode 100644 index 000000000..dba35b8b1 --- /dev/null +++ b/platypush/backend/http/templates/plugins/media.mpv/index.html @@ -0,0 +1,7 @@ + +{% include 'plugins/media/index.html' %} + + + diff --git a/platypush/backend/http/templates/plugins/media.omxplayer/index.html b/platypush/backend/http/templates/plugins/media.omxplayer/index.html new file mode 100644 index 000000000..6547fee46 --- /dev/null +++ b/platypush/backend/http/templates/plugins/media.omxplayer/index.html @@ -0,0 +1,7 @@ + +{% include 'plugins/media/index.html' %} + + + diff --git a/platypush/backend/http/templates/plugins/media.vlc/index.html b/platypush/backend/http/templates/plugins/media.vlc/index.html new file mode 100644 index 000000000..9d6fb93a3 --- /dev/null +++ b/platypush/backend/http/templates/plugins/media.vlc/index.html @@ -0,0 +1,7 @@ + +{% include 'plugins/media/index.html' %} + + + diff --git a/platypush/backend/http/templates/plugins/media/controls.html b/platypush/backend/http/templates/plugins/media/controls.html new file mode 100644 index 000000000..89c75dc7e --- /dev/null +++ b/platypush/backend/http/templates/plugins/media/controls.html @@ -0,0 +1,44 @@ + + + + diff --git a/platypush/backend/http/templates/plugins/media/devices.html b/platypush/backend/http/templates/plugins/media/devices.html new file mode 100644 index 000000000..18a39fb87 --- /dev/null +++ b/platypush/backend/http/templates/plugins/media/devices.html @@ -0,0 +1,13 @@ + + + + diff --git a/platypush/backend/http/templates/plugins/media/index.html b/platypush/backend/http/templates/plugins/media/index.html new file mode 100644 index 000000000..bb3587a6c --- /dev/null +++ b/platypush/backend/http/templates/plugins/media/index.html @@ -0,0 +1,22 @@ +{% include 'plugins/media/search.html' %} +{% include 'plugins/media/controls.html' %} +{% include 'plugins/media/results.html' %} +{% include 'plugins/media/item.html' %} + + + diff --git a/platypush/backend/http/templates/plugins/media/item.html b/platypush/backend/http/templates/plugins/media/item.html new file mode 100644 index 000000000..a86a14204 --- /dev/null +++ b/platypush/backend/http/templates/plugins/media/item.html @@ -0,0 +1,8 @@ + + + + diff --git a/platypush/backend/http/templates/plugins/media/results.html b/platypush/backend/http/templates/plugins/media/results.html new file mode 100644 index 000000000..eb4546083 --- /dev/null +++ b/platypush/backend/http/templates/plugins/media/results.html @@ -0,0 +1,18 @@ + + + + diff --git a/platypush/backend/http/templates/plugins/media/search.html b/platypush/backend/http/templates/plugins/media/search.html new file mode 100644 index 000000000..becb3352f --- /dev/null +++ b/platypush/backend/http/templates/plugins/media/search.html @@ -0,0 +1,39 @@ +{% include 'plugins/media/devices.html' %} + + + + + diff --git a/platypush/backend/http/templates/plugins/music.mpd/index.html b/platypush/backend/http/templates/plugins/music.mpd/index.html index f815b03c0..1de680c98 100644 --- a/platypush/backend/http/templates/plugins/music.mpd/index.html +++ b/platypush/backend/http/templates/plugins/music.mpd/index.html @@ -5,7 +5,7 @@ {% include 'plugins/music.mpd/search.html' %}