From eb775bfce53bb2462a69bac3bdb18a8ded2f20e2 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Fri, 22 Feb 2019 12:05:25 +0100
Subject: [PATCH] See #578: Improved "responsiveness" of embedded player

---
 changes/changelog.d/578.enhancement |  1 +
 front/src/EmbedFrame.vue            | 67 ++++++++++++++++++++++++++++-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/changes/changelog.d/578.enhancement b/changes/changelog.d/578.enhancement
index 194ad2111..073de471f 100644
--- a/changes/changelog.d/578.enhancement
+++ b/changes/changelog.d/578.enhancement
@@ -1 +1,2 @@
 Added twitter:* meta tags to detect tracks and albums players automatically on more sites (#578)
+Improved responsiveness of embedded player
\ No newline at end of file
diff --git a/front/src/EmbedFrame.vue b/front/src/EmbedFrame.vue
index 7987b054a..50219204c 100644
--- a/front/src/EmbedFrame.vue
+++ b/front/src/EmbedFrame.vue
@@ -395,6 +395,7 @@ a:hover {
 }
 section.controls {
   display: flex;
+  width: 100%;
 }
 .cover {
   max-width: 120px;
@@ -405,6 +406,9 @@ section.controls {
   flex: 1;
   align-self: flex-end;
 }
+.player .plyr {
+  min-width: inherit;
+}
 article .content {
   flex: 1;
   display: flex;
@@ -484,10 +488,16 @@ section .plyr--audio .plyr__controls {
 @media screen and (max-width: 460px) {
   article,
   article .content {
+    position: relative;
     display: block;
   }
+  .content header {
+    padding-right: 80px;
+  }
   .cover.main {
-    float: right;
+    position: absolute;
+    right: 0;
+    top: 0;
     img {
       height: 60px;
       width: 60px;
@@ -496,12 +506,67 @@ section .plyr--audio .plyr__controls {
 }
 
 @media screen and (max-width: 320px) {
+  .content header {
+    font-size: 14px;
+  }
+  .content h3 {
+    font-size: 15px;
+  }
   .logo-wrapper,
   .position-cell {
     display: none;
   }
+  .plyr__volume {
+    min-width: 70px;
+  }
+  .queue .artist {
+    display: none;
+  }
 }
 
+@media screen and (max-width: 200px) {
+  .content header {
+    padding-right: 1em;
+    font-size: 13px;
+  }
+  .content h3 {
+    font-size: 14px;
+  }
+  .cover.main {
+    display: none;
+  }
+  .plyr__progress {
+    display: none;
+  }
+  .controls .plyr__control,
+  .player .plyr__control {
+    padding: 3px;
+  }
+  .queue td:last-child {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 170px) {
+  .plyr__volume {
+    min-width: inherit;
+  }
+}
+
+@media screen and (max-height: 180px) {
+  .queue-wrapper {
+    display: none;
+  }
+  article .content {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    height: 100vh;
+  }
+  article .content header {
+    flex-grow: 1;
+  }
+}
 // themes
 
 .dark {