From e8c3c0a0040033c3376c665fab1c0fb5b2501f1c Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sun, 2 Feb 2020 15:05:36 +0100 Subject: [PATCH] Added the music bot GUI --- ChangeLog.md | 3 + shared/css/static/frame-chat.scss | 437 ++++++++++++++ shared/css/static/main-layout.scss | 2 +- shared/html/templates.html | 151 ++++- shared/img/music/forward.svg | 10 - shared/img/music/icon_music_pause.svg | 45 ++ shared/img/music/no-thumbnail.png | Bin 0 -> 16805 bytes shared/img/music/no_thumbnail.svg | 8 - shared/img/music/playlist.svg | 14 - shared/img/music/rewind.svg | 10 - shared/js/connection/CommandHandler.ts | 119 ++++ shared/js/events.ts | 168 +++++- shared/js/proto.ts | 2 +- shared/js/ui/client.ts | 63 +- shared/js/ui/frames/chat_frame.ts | 18 +- shared/js/ui/frames/side/music_info.ts | 777 +++++++++++++++++++++++++ shared/js/ui/view.ts | 2 +- shared/loader/app.ts | 1 + vendor/xbbcode | 2 +- 19 files changed, 1748 insertions(+), 84 deletions(-) delete mode 100644 shared/img/music/forward.svg create mode 100644 shared/img/music/icon_music_pause.svg create mode 100644 shared/img/music/no-thumbnail.png delete mode 100644 shared/img/music/no_thumbnail.svg delete mode 100644 shared/img/music/playlist.svg delete mode 100644 shared/img/music/rewind.svg diff --git a/ChangeLog.md b/ChangeLog.md index bc005097..1194a25c 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,4 +1,7 @@ # Changelog: +* **02.02.20** + - Added a music bot GUI + * **30.01.20** - Improved chat message parsing - Fixed copy & paste error diff --git a/shared/css/static/frame-chat.scss b/shared/css/static/frame-chat.scss index 65064b3f..18a497d7 100644 --- a/shared/css/static/frame-chat.scss +++ b/shared/css/static/frame-chat.scss @@ -45,6 +45,8 @@ $bot_thumbnail_height: 9em; flex-direction: row; justify-content: stretch; + height: 3.25em; + .block, .button { white-space: nowrap; text-overflow: ellipsis; @@ -191,6 +193,35 @@ $bot_thumbnail_height: 9em; @include transition(background-color $button_hover_animation_time ease-in-out); } } + + &:not(.mode-channel_chat) { + .mode-channel_chat { display: none; } + } + + &:not(.mode-private_chat) { + .mode-private_chat { display: none; } + } + + &:not(.mode-client_info) { + .mode-client_info { display: none; } + } + + &:not(.mode-music_bot) { + .mode-music_bot { display: none; } + } + + &.mode-music_bot { + .mode-music_bot { + &.right { + margin-left: 8.5em; + } + &.left { + margin-right: 8.5em; + } + + width: 60em; /* same width so flex-shrik applies equaly */ + } + } } } @@ -864,6 +895,13 @@ $bot_thumbnail_height: 9em; line-height: 1.1em; word-wrap: break-word; + + .htmltag-client, .htmltag-channel { + display: inline; + + font-weight: bold; + color: $color_client_normal; + } } &:before { @@ -1431,6 +1469,405 @@ $bot_thumbnail_height: 9em; height: $bot_thumbnail_height; @include transition(opacity $button_hover_animation_time ease-in-out); + + img { + position: absolute; + + width: 100%; + height: 100%; + } + } + } + + .container-song-info { + display: flex; + flex-direction: column; + justify-content: flex-start; + + flex-shrink: 1; + flex-grow: 1; + + margin-left: .5em; + margin-right: .5em; + + min-width: 1em; + + .song-name { + font-size: 1.5em; + + min-width: 1em; + max-width: 100%; + + flex-shrink: 1; + flex-grow: 0; + + align-self: center; + color: #999999; + + @include text-dotdotdot(); + } + + .song-description { + display: none; + } + } + + .container-timeline { + margin-left: .5em; + margin-right: .5em; + + margin-bottom: .5em; + + .timestamps { + display: flex; + flex-direction: row; + justify-content: space-between; + + color: #999; + font-size: .75em; + } + + $timeline_height: .6em; + .timeline { + width: 100%; + position: relative; + + font-size: 0.8em; + margin-top: 0.1em; + height: $timeline_height; + cursor: pointer; + background-color: #242527; + border-radius: 0.2em; + overflow: visible; + + .indicator { + position: absolute; + left: 0; + top: 0; + bottom: 0; + + border-radius: .2em; + } + + .indicator-buffered { + background-color: #2f3133; + width: 30%; + } + + .indicator-playtime { + background-color: #4370a2; + width: 25%; + } + + $thumb_width: 1.2em; + $thumb_inner_width: 0.4em; + .thumb { + position: absolute; + + height: $thumb_width; + width: $thumb_width; + + left: -($thumb_width / 2); + bottom: -$thumb_width / 2 + $timeline_height / 2; + + background-color: #a5a5a5; + box-shadow: 0 0 0.5em 1px #a5a5a53d; + + display: flex; + flex-direction: column; + justify-content: center; + + .dot { + align-self: center; + + height: $thumb_inner_width; + width: $thumb_inner_width; + + + background-color: #4370a2; + box-shadow: 0 0 0.1em 1px hsla(212, 41%, 60%, 1); + + border-radius: 50%; + } + border-radius: 50%; + + //@include transition(.4s); + + margin-left: 25%; + } + } + } + + .control-buttons { + display: flex; + flex-direction: row; + justify-content: center; + + margin-top: 1em; + + .button { + width: 2em; + height: 2em; + + margin-right: .5em; + margin-left: .5em; + + cursor: pointer; + + svg { + width: 2em; + height: 2em; + + + fill: #242527; + @include transition($button_hover_animation_time ease-in-out); + } + + &:hover { + svg { + fill: #0a0a0a; + } + } + } + + .button-play, .button-pause { + &.hidden { + display: none; + } + } + } + } + + .container-playlist { + flex-grow: 1; + flex-shrink: 1; + + min-height: calc(3em + 4px); + position: relative; + + display: flex; + flex-direction: column; + justify-content: stretch; + + margin-bottom: 5px; + margin-top: 1em; + + @include user-select(none); + + .overlay { + position: absolute; + z-index: 1; + + top: 0; + left: 0; + right: 0; + bottom: 0; + + background: #2b2b28; + + display: flex; + flex-direction: column; + justify-content: center; + + border-radius: 0.2em; + border: 1px #161616 solid; + + a { + text-align: center; + + font-size: 1.5em; + color: hsla(0, 1%, 40%, 1); + } + + button { + width: 8em; + font-size: .8em; + align-self: center; + margin-top: .5em; + } + + &.hidden { + display: none; + } + } + + .playlist { + flex-grow: 1; + flex-shrink: 1; + min-height: 3em; + + cursor: pointer; + + display: flex; + flex-direction: column; + justify-content: flex-start; + + overflow-x: hidden; + overflow-y: auto; + + border: 1px #161616 solid; + border-radius: 0.2em; + background-color: rgba(43, 43, 40, 1); + + @include chat-scrollbar-vertical(); + + .entry { + flex-shrink: 0; + flex-grow: 0; + + display: flex; + flex-direction: row; + justify-content: stretch; + + width: 100%; + overflow: hidden; + + padding: .5em; + + color: #999; + border-bottom: 1px solid #242527; + + opacity: 0; + height: 0; + + @include transition(background-color $button_hover_animation_time ease-in-out); + + &:hover { + background-color: hsla(220, 0%, 20%, 1); + } + + &.shown { + opacity: 1; + height: 3.7em; + } + + &.animation { + @include transition(opacity 0.5s ease-in-out, height 0.5s ease-in); + } + + &.deleted { + @include transition(opacity 0.5s ease-in-out, height 0.5s ease-in, padding 0.5s ease-in); + + padding: 0; + opacity: 0; + height: 0; + } + + &.reordering { + z-index: 10000; + + position: fixed; + cursor: move; + + border: 1px #161616 solid; + border-radius: 0.2em; + background-color: #2b2b28; + } + + .container-thumbnail { + flex-shrink: 0; + flex-grow: 0; + + align-self: center; + + height: .9em; + width: 1.6em; + + font-size: 3em; + position: relative; + + border-radius: 0.05em; + overflow: hidden; + + img { + position: absolute; + + width: 100%; + height: 100%; + } + } + + .container-data { + margin-left: .5em; + + display: flex; + flex-direction: column; + justify-content: center; + + flex-shrink: 1; + flex-grow: 1; + min-width: 2em; + + .row { + display: flex; + flex-direction: row; + justify-content: space-between; + + &.second { + font-size: .8em; + } + + .name { + flex-shrink: 1; + min-width: 1em; + + @include text-dotdotdot(); + } + + .container-delete { + flex-grow: 0; + flex-shrink: 0; + + width: 1.5em; + height: 1em; + margin-left: .5em; + + opacity: .4; + @include transition($button_hover_animation_time ease-in-out); + + &:hover { + opacity: 1; + } + } + + .description { + flex-shrink: 1; + min-width: 1em; + + @include text-dotdotdot(); + } + + .length { + flex-grow: 0; + flex-shrink: 0; + + margin-left: .5em; + } + } + } + + &.current-song { + background-color: hsla(130, 50%, 30%, .25); + + &:hover { + background-color: hsla(130, 50%, 50%, .25); + } + + .container-delete { + display: none; + } + } + } + + .reorder-indicator { + $indicator_thickness: .2em; + + height: 0; + border: none; + border-top: $indicator_thickness solid hsla(0, 0%, 30%, 1); + + margin-top: $indicator_thickness / -2; + margin-bottom: $indicator_thickness / -2; } } } diff --git a/shared/css/static/main-layout.scss b/shared/css/static/main-layout.scss index d39cd3f5..3367846f 100644 --- a/shared/css/static/main-layout.scss +++ b/shared/css/static/main-layout.scss @@ -27,7 +27,7 @@ $animation_length: .5s; height: 80%; /* "default" settings */ width: 100%; - min-height: 25em; + min-height: 27em; /* fits with the music bot interface */ min-width: 100px; display: flex; diff --git a/shared/html/templates.html b/shared/html/templates.html index f740a555..650ff8e6 100644 --- a/shared/html/templates.html +++ b/shared/html/templates.html @@ -510,18 +510,161 @@
- + + +
- -
- error: description +
+ CHOSEN ONE | BEST EPIC MUSIC OF 2018 (Part 4) And some more info + +
+
+
+
00:01:13
+
00:03:22
+
+
+
+
+
+
+
+
+ + + +
+
+ + + +
+
+ + + + +
+
+ + + +
+
+
+
+
+
+ {{tr "Fetching playlist..." /}} +
+
+ {{tr "You don't have permissions to see this playlist" /}} + +
+
+ {{tr "An error occurred while fetching the playlist" /}} + +
+
+ {{tr "The playlist is currently empty." /}} + +
+
+
+
+ + +
+
+
+
2-Hours Epic Music | THE POWER OF EPIC MUSIC - Best Of Collection - Vol.5 - 2019
+
X
+
+ +
+
It is time for another 2-Hour Epic Music Mix. So far 2019 has been one amazing year for the orchestral epic music genre and i cannot wait for more. Also incl...
+
00:22:01
+
+
+
+ + +
+
+ +
+
+
+
CHOSEN ONE | BEST EPIC MUSIC OF 2018 (Part 4) And some more info
+
X
+
+ +
+
This is an example song description which needs some work
+
00:22:01
+
+
+
+ + +
+
+ +
+
+
+
CHOSEN ONE | BEST EPIC MUSIC OF 2018 (Part 4) And some more info
+
X
+
+ +
+
This is an example song description which needs some work
+
00:22:01
+
+
+
+ +