From 0cb35a4664258aa830f764b15caf7ab3c7f68497 Mon Sep 17 00:00:00 2001
From: Leon Blakey <code@leonblakey.com>
Date: Wed, 11 Jan 2023 22:24:26 -0800
Subject: [PATCH] New setting watchViewReversed to place chat on the left

---
 src/locales/en/ui.yml        |  2 ++
 src/store/settings.module.js |  2 ++
 src/views/Settings.vue       | 10 ++++++++++
 src/views/Watch.vue          |  4 +++-
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/locales/en/ui.yml b/src/locales/en/ui.yml
index 8b1bd5931..408b8f42b 100644
--- a/src/locales/en/ui.yml
+++ b/src/locales/en/ui.yml
@@ -243,6 +243,8 @@ views:
     title: Settings
     darkModeLabel: Dark Mode
     darkModeMsg: Changes the theme between light mode and dark mode
+    watchViewReversedLabel: Show Chat on Left
+    watchViewReversedMsg: Display chat to left of screen in watch screen
     redirectModeLabel: Open on Youtube
     redirectModeMsg: >-
       Clicking on video thumbnails will open it in Youtube, clicking the video
diff --git a/src/store/settings.module.js b/src/store/settings.module.js
index 99e22fac2..4f921a17b 100644
--- a/src/store/settings.module.js
+++ b/src/store/settings.module.js
@@ -27,6 +27,7 @@ const initialState = {
     ignoredTopics: [],
     // Valid values: "grid" | "list" | "denseList"
     homeViewMode: "grid",
+    watchViewReversed: false,
 
     // Live TL Window Settings
     liveTlStickBottom: false,
@@ -118,6 +119,7 @@ const mutations = {
         "liveTlHideSpoiler",
         "hidePlaceholder",
         "homeViewMode",
+        "watchViewReversed",
     ]),
     resetState(state) {
         Object.assign(state, initialState);
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index b0e77e0a0..86c0dfe79 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -125,6 +125,15 @@
               :prepend-icon="mdiWeatherNight"
             />
             <!-- :messages="$t('views.settings.darkModeMsg')" -->
+            <v-switch
+              v-model="watchViewReversed"
+              class="v-input--reverse v-input--expand"
+              :label="$t('views.settings.watchViewReversedLabel')"
+              hide-details
+              inset
+              :prepend-icon="mdiWeatherNight"
+            />
+            <!-- :messages="$t('views.settings.watchViewReversedMsg')" -->
             <div class="mt-6">
               <v-icon style="margin-right: 9px">
                 {{ mdiPalette }}
@@ -319,6 +328,7 @@ export default {
             "autoplayVideo",
             "scrollMode",
             "defaultOpen",
+            "watchViewReversed",
         ]),
         currentCol() {
             if (this.$vuetify.breakpoint.smAndDown) return 12;
diff --git a/src/views/Watch.vue b/src/views/Watch.vue
index cf8f9b463..1db7901a3 100644
--- a/src/views/Watch.vue
+++ b/src/views/Watch.vue
@@ -12,7 +12,8 @@
       'theater-mode': video.type === 'stream' || $vuetify.breakpoint.mdAndDown,
       'show-chat': showChatWindow,
       'full-height': theaterMode,
-      'show-highlights-bar': showHighlightsBar
+      'show-highlights-bar': showHighlightsBar,
+      'flex-row-reverse': watchViewReversed,
     }"
   >
     <KeyPress
@@ -214,6 +215,7 @@ export default {
     computed: {
         ...mapState("watch", ["video", "isLoading", "hasError"]),
         ...syncState("watch", ["showTL", "showLiveChat", "theaterMode"]),
+        ...syncState("settings", ["watchViewReversed"]),
         chatStatus: {
             get() {
                 return {