Channels list UI

assets/styles/configuration.scss

@@ -0,0 +1,112 @@
+/* stylelint-disable custom-property-pattern */
+
+/*
+  Here we are getting some Peertube variables (see _variables.scss in Peertube source code):
+  We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings.
+*/
+$font-semibold: 600;
+$grey-actor-name: #777272;
+$grey-background-color: var(--greyBackgroundColor);
+$sub-menu-margin-bottom: 30px;
+$small-view: 800px;
+
+/*
+  These are styles to apply for the channel configuration pages.
+*/
+.peertube-plugin-livechat-configuration {
+  h1 {
+    /* See Peertube sub-menu-h1 mixin */
+    font-size: 1.3rem;
+    border-bottom: 2px solid $grey-background-color;
+    padding-bottom: 15px;
+    margin-bottom: $sub-menu-margin-bottom;
+  }
+
+  /* Channel selection page */
+  &.peertube-plugin-livechat-configuration-home {
+    ul.peertube-plugin-livechat-configuration-home-channels {
+      list-style-type: none;
+
+      li {
+        align-items: center;
+        gap: 15px;
+
+        /* See Peertube row-blocks mixin, used in video-channel */
+        display: flex;
+        min-height: 130px;
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+        /* stylelint-disable-next-line value-keyword-case */
+        border-bottom: 1px solid var(--inputBorderColor);
+
+        @media screen and (max-width: $small-view) {
+          flex-direction: column;
+          height: auto;
+          align-items: center;
+        }
+
+        .avatar {
+          /* See Peertube CSS, class avatar and avatar-80 */
+          width: 80px;
+          height: 80px;
+          min-width: 80px;
+          min-height: 80px;
+
+          &.channel {
+            border-radius: 5px;
+          }
+
+          &.initial {
+            /* See Peertube actor-avatar.component.scss */
+            background-color: #3c2109;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--initialFontSize);
+
+            &.gray {
+              background-color: #939393;
+            }
+          }
+        }
+
+        .peertube-plugin-livechat-configuration-home-info {
+          flex-grow: 1;
+
+          a {
+            /* See Peertube .video-channel-names */
+            &:hover,
+            &:focus,
+            &:active {
+              text-decoration: none !important;
+            }
+
+            &:focus:not(.focus-visible) {
+              outline: none !important;
+            }
+
+            width: fit-content;
+            display: flex;
+            align-items: baseline;
+            /* stylelint-disable-next-line value-keyword-case */
+            color: var(--mainForegroundColor);
+
+            div:first-child {
+              /* See Peertube .video-channel-display-name */
+              font-weight: $font-semibold;
+              font-size: 18px;
+            }
+
+            div:not(:first-child) {
+              /* See Peertube .video-channel-name */
+              margin-left: 5px;
+              font-size: 14px;
+              color: $grey-actor-name;
+            }
+          }
+        }
+      }
+    }
+  }
+}

client/common/configuration/templates/channel.ts

@@ -52,7 +52,7 @@ async function renderConfigurationChannel (
     }
 
     return Mustache.render(`
-      <div class="margin-content">
+      <div class="margin-content peertube-plugin-livechat-configuration">
         <h1>{{title}} {{channelConfiguration.channel.displayName}}</h1>
         <p>{{description}}</p>
         <form livechat-configuration-channel-options>

client/common/configuration/templates/home.ts

@@ -17,6 +17,7 @@ async function renderConfigurationHome (registerClientOptions: RegisterClientOpt
       throw new Error('Can\'t get the current username.')
     }
 
+    // FIXME: if more than 100 channels, loop (or add a pagination)
     const channels = await (await fetch(
       '/api/v1/accounts/' + encodeURIComponent(username) + '/video-channels?start=0&count=100&sort=name',
       {
@@ -40,16 +41,27 @@ async function renderConfigurationHome (registerClientOptions: RegisterClientOpt
     }
 
     return Mustache.render(`
-      <div class="margin-content">
+      <div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
         <h1>{{title}}</h1>
         <p>{{description}}</p>
         <h2>{{please_select}}</h2>
-        <ul>
+        <ul class="peertube-plugin-livechat-configuration-home-channels">
         {{#channels}}
           <li>
             <a href="{{livechatConfigurationUri}}">
-              {{displayName}}
+              {{#avatar}}
+                <img class="avatar channel" src="{{path}}">
+              {{/avatar}}
+              {{^avatar}}
+                <div class="avatar channel initial gray"></div>
+              {{/avatar}}
             </a>
+            <div class="peertube-plugin-livechat-configuration-home-info">
+              <a href="{{livechatConfigurationUri}}">
+                <div>{{displayName}}</div>
+                <div>{{name}}</div>
+              </a>
+            </div>
           </li>
         {{/channels}}
         </ul>

package.json

@@ -29,7 +29,8 @@
     }
   ],
   "css": [
-    "dist/assets/styles/style.css"
+    "dist/assets/styles/style.css",
+    "dist/assets/styles/configuration.css"
   ],
   "dependencies": {
     "async": "^3.2.2",