WideScreenMode: Comments can now be on the right side

Scarwolf · Feb 19, 2021 · 4db588c · 4db588c
1 parent 33f2001
commit 4db588c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/src/module/WidescreenMode.js b/src/module/WidescreenMode.js
@@ -18,6 +18,7 @@ export default class WidescreenMode {
         this.scrollMultiplicator = parseInt(Settings.get('WidescreenMode.settings.scroll_speed')) || 1;
         this.displayBenisUntilTop = Settings.get("WidescreenMode.settings.display_benis_until_top");
         this.biggerStreamNavIcons = Settings.get("WidescreenMode.settings.bigger_stream_nav_icons");
+        this.commentsLeft = Settings.get("WidescreenMode.settings.comments_left");
     }
 
 
@@ -117,6 +118,11 @@ export default class WidescreenMode {
                 description: 'Definiere, wie schnell im Zoom gescrollt werden soll.',
                 type: 'number'
             },
+            {
+                id: 'comments_left',
+                title: 'Kommentare auf der linken Seite',
+                description: 'Wenn deaktiviert werden Kommentare auf der rechten Seite des Bildschirms angezeigt.',
+            },
         ];
     }
 
@@ -215,6 +221,10 @@ export default class WidescreenMode {
                     document.getElementsByClassName('stream-prev-icon')[0].classList.add('stream-prev-icon-xl');
                     document.getElementsByClassName('stream-next-icon')[0].classList.add('stream-next-icon-xl');
                 }
+
+                if(!_this.commentsLeft) {
+                    document.getElementsByClassName('item-container-content')[0].classList.add('right');
+                }
             },
             remove: function () {
                 this.parent();

diff --git a/src/style/widescreenMode.less b/src/style/widescreenMode.less
@@ -197,6 +197,23 @@ body[class] {
 
   .item-container-content {
     display: flex;
+
+    &.right {
+      flex-direction: row-reverse;
+
+      .comments-switch {
+        transform: rotate(180deg);
+      }
+
+      .video-controls {
+        padding-left: 30px;
+      }
+
+      .stream-prev {
+        margin-left: 30px;
+      }
+    }
+
     height: 100%;
     width: 100%;
 

diff --git a/src/template/streamItemComments.html b/src/template/streamItemComments.html
@@ -1,7 +1,7 @@
 <div class="comment-count">
     <div class="count"><span class="pict">c</span> {"Kommentar".inflect(commentCount)}</div>
-    <div class="comments-switch fa  fa-chevron-right"></div>
-    <div class="comments-toggle fa  fa-bars"></div>
+    <div class="comments-switch fa fa-chevron-right"></div>
+    <div class="comments-toggle fa fa-bars"></div>
 </div>
 <div class="comments-head">
     <?js if( p.user.id ) {?>