Merge branch 'main' of https://github.com/JohnXLivingston/peertube-plugin-livechat

assets/styles/admin/firewall/_firewall.scss

@@ -0,0 +1,94 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* stylelint-disable custom-property-pattern */
+
+@use "sass:color";
+@use "../../variables";
+
+.peertube-plugin-livechat-admin-firewall {
+  h1 {
+    padding-top: 40px;
+
+    /* See Peertube sub-menu-h1 mixin */
+    font-size: 1.3rem;
+    border-bottom: 2px solid var(--greyBackgroundColor);
+    padding-bottom: 15px;
+  }
+
+  textarea[name^="_content_"] {
+    min-height: 10rem;
+  }
+
+  input[type="submit"],
+  input[type="reset"],
+  button[type="submit"],
+  button[type="reset"] {
+    // Peertube rounded-line-height-1-5 mixins
+    line-height: variables.$button-calc-line-height;
+
+    // Peertube peertube-button mixin
+    padding: 4px 13px;
+    border: 0;
+    font-weight: variables.$font-semibold;
+    border-radius: 3px !important;
+    text-align: center;
+    cursor: pointer;
+    font-size: variables.$button-font-size;
+  }
+
+  input[type="submit"],
+  button[type="submit"] {
+    // Peertube orange-button mixin
+    &,
+    &:active,
+    &:focus {
+      color: #fff;
+      background-color: var(--mainColor);
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: var(--mainHoverColor);
+    }
+
+    &[disabled],
+    &.disabled {
+      cursor: default;
+      color: #fff;
+      background-color: var(--inputBorderColor);
+    }
+  }
+
+  input[type="reset"],
+  button[type="reset"] {
+    // Peertube grey-button mixin
+    background-color: var(--greyBackgroundColor);
+    color: var(--greyForegroundColor);
+
+    &:hover,
+    &:active,
+    &:focus,
+    &[disabled],
+    &.disabled {
+      color: var(--greyForegroundColor);
+      background-color: var(--greySecondaryBackgroundColor);
+    }
+
+    &[disabled],
+    &.disabled {
+      cursor: default;
+    }
+  }
+
+  .peertube-livechat-admin-firewall-col-name {
+    width: 25%;
+  }
+
+  .peertube-livechat-admin-firewall-col-content {
+    width: 65%;
+  }
+}

assets/styles/elements/_spinner.scss

@@ -15,9 +15,9 @@ livechat-spinner,
     height: 48px;
     margin: 20px;
     /* stylelint-disable-next-line custom-property-pattern */
-    border: 5px solid var(--greyBackgroundColor);
+    border: 5px solid var(--greyBackgroundColor) !important; // !important is required for it to work in ConverseJS
     /* stylelint-disable-next-line custom-property-pattern */
-    border-bottom-color: var(--mainColor);
+    border-bottom-color: var(--mainColor) !important; // !important is required for it to work in ConverseJS
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;

assets/styles/style.scss

@@ -9,4 +9,5 @@
 @use "elements/index";
 @use "video";
 @use "configuration/configuration";
+@use "admin/firewall/firewall";
 @use "list-rooms/list-rooms.scss";

assets/styles/video/_container.scss

@@ -18,17 +18,31 @@
 /* Note: livechat-viewer-mode-content (the form where anonymous users can
     choose nickname or log in with external account), can be something like
     ~180px height (at time of writing).
-    We must ensure that the 200px limit for converse-muc and converse-root is
+    We must ensure that the px height limit for converse-muc and converse-root is
     always higher than livechat-viewer-mode-content max size.
+  Note: We also must ensure that when the user has choosen its nickname, and there is an
+    ongoing poll, the user can see the chat when the poll is folded.
 */
 #peertube-plugin-livechat-container converse-root {
   display: block;
   border: 1px solid black;
-  min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
+  min-height: max(30vh, 300px); // Always at least 200px, and ideally at least 30% of viewport.
   height: 100%;
+  min-width: min(400px, 25vw);
 
   converse-muc {
-    min-height: max(59vh, 400px);
+    min-height: max(30vh, 300px);
+  }
+
+  @media screen and (orientation: portrait) and (max-width: 767px) {
+    /* On small screen, and when portrait mode, we are giving the chat more vertical space.
+        It should go under the video.
+     */
+    min-height: max(50vh, 300px);
+
+    converse-muc {
+      min-height: max(50vh, 300px);
+    }
   }
 }