From 41fedf8b2e062d797f48ecb2ccb34bdfe26b5ec9 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Wed, 20 Oct 2021 13:14:49 +0000
Subject: [PATCH] Disabling mutually exclusive settings (#1822)

* Adds :disabled styling/functionality for ft-button & ft-select

* Disable proxy, external player, & SponsorBlock settings when applicable

* Changes Invidious General Settings, Proxy Settings, and SponsorBlock settings to disappear when appropriate

* Update ft-toggle-switch.sass

* Switches to styling with disabled class for ft-toggle-switch

* Sets cursor to not-allowed for disabled controls
---
 .../external-player-settings.vue              |   1 +
 .../components/ft-button/ft-button.css        |   5 +
 src/renderer/components/ft-input/ft-input.css |   5 +
 src/renderer/components/ft-input/ft-input.vue |   3 +-
 .../components/ft-select/ft-select.css        |   5 +
 .../components/ft-select/ft-select.js         |   4 +
 .../components/ft-select/ft-select.vue        |   7 +-
 .../ft-toggle-switch/ft-toggle-switch.sass    |   8 ++
 .../ft-toggle-switch/ft-toggle-switch.vue     |   9 +-
 .../general-settings/general-settings.vue     |  88 +++++++-------
 .../proxy-settings/proxy-settings.vue         | 113 ++++++++++--------
 .../sponsor-block-settings.vue                |  36 +++---
 12 files changed, 169 insertions(+), 115 deletions(-)

diff --git a/src/renderer/components/external-player-settings/external-player-settings.vue b/src/renderer/components/external-player-settings/external-player-settings.vue
index 8a296cab..e1f962c5 100644
--- a/src/renderer/components/external-player-settings/external-player-settings.vue
+++ b/src/renderer/components/external-player-settings/external-player-settings.vue
@@ -21,6 +21,7 @@
         <ft-toggle-switch
           :label="$t('Settings.External Player Settings.Ignore Unsupported Action Warnings')"
           :default-value="externalPlayerIgnoreWarnings"
+          :disabled="externalPlayer===''"
           :compact="true"
           :tooltip="$t('Tooltips.External Player Settings.Ignore Warnings')"
           @change="updateExternalPlayerIgnoreWarnings"
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 2edc6266..49e3a6e1 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -19,6 +19,11 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .ripple {
   position: relative;
   overflow: hidden;
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 7b69b029..7487db1c 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -2,6 +2,11 @@
   position: relative;
 }
 
+.disabled label, .disabled .ft-input{
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .clearInputTextButton {
   position: absolute;
   /* horizontal intentionally reduced to keep "I-beam pointer" visible */
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index b5d0667e..7803ddde 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -5,7 +5,8 @@
       search: isSearch,
       forceTextColor: forceTextColor,
       showActionButton: showActionButton,
-      showClearTextButton: showClearTextButton
+      showClearTextButton: showClearTextButton,
+      disabled: disabled
     }"
   >
     <label
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 25bb2885..10b3f6d6 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -28,6 +28,11 @@
   margin-top: 30px;
 }
 
+.disabled, .disabled + svg.iconSelect {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .select-text {
   position: relative;
   font-family: inherit;
diff --git a/src/renderer/components/ft-select/ft-select.js b/src/renderer/components/ft-select/ft-select.js
index 190568c8..8c4ab6cd 100644
--- a/src/renderer/components/ft-select/ft-select.js
+++ b/src/renderer/components/ft-select/ft-select.js
@@ -26,6 +26,10 @@ export default Vue.extend({
     tooltip: {
       type: String,
       default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   }
 })
diff --git a/src/renderer/components/ft-select/ft-select.vue b/src/renderer/components/ft-select/ft-select.vue
index 9b475592..e5e3b92e 100644
--- a/src/renderer/components/ft-select/ft-select.vue
+++ b/src/renderer/components/ft-select/ft-select.vue
@@ -2,7 +2,9 @@
   <div class="select">
     <select
       class="select-text"
+      :class="{disabled: disabled}"
       :value="value"
+      :disabled="disabled"
       @change="$emit('change', $event.target.value)"
     >
       <option
@@ -19,7 +21,10 @@
     />
     <span class="select-highlight" />
     <span class="select-bar" />
-    <label class="select-label">
+    <label
+      class="select-label"
+      :hidden="disabled"
+    >
       {{ placeholder }}
     </label>
     <ft-tooltip
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
index 04cc4836..74584998 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
@@ -7,6 +7,13 @@
   &.compact
     margin: 0
 
+.disabled
+  .switch-label
+    cursor: not-allowed
+
+  .switch-label-text
+    opacity: 0.4
+
 .switch-input
   -moz-appearance: none
   -webkit-appearance: none
@@ -69,3 +76,4 @@
 
     .switch-input:disabled + &
       background-color: #BDBDBD
+     
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
index 400793fc..03d8d078 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
@@ -1,7 +1,10 @@
 <template>
   <div
     class="switch-ctn"
-    :class="{compact}"
+    :class="{
+      compact,
+      disabled: disabled
+    }"
   >
     <input
       :id="id"
@@ -17,7 +20,9 @@
       :for="id"
       class="switch-label"
     >
-      {{ label }}
+      <span class="switch-label-text">
+        {{ label }}
+      </span>
       <ft-tooltip
         v-if="tooltip !== ''"
         class="selectTooltip"
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 35ab256e..c24db4f4 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -93,50 +93,54 @@
         @change="updateExternalLinkHandling"
       />
     </div>
-    <ft-flex-box class="generalSettingsFlexBox">
-      <ft-input
-        :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
-        :show-action-button="false"
-        :show-label="true"
-        :value="currentInvidiousInstance"
-        :data-list="invidiousInstancesList"
-        :tooltip="$t('Tooltips.General Settings.Invidious Instance')"
-        @input="handleInvidiousInstanceInput"
-      />
-    </ft-flex-box>
-    <ft-flex-box>
-      <div>
-        <a
-          href="https://api.invidious.io"
-        >
-          {{ $t('Settings.General Settings.View all Invidious instance information') }}
-        </a>
-      </div>
-    </ft-flex-box>
-    <p
-      v-if="defaultInvidiousInstance !== ''"
-      class="center"
+    <div
+      v-if="backendPreference === 'invidious' || backendFallback"
     >
-      {{ $t('Settings.General Settings.The currently set default instance is $').replace('$', defaultInvidiousInstance) }}
-    </p>
-    <template v-else>
-      <p class="center">
-        {{ $t('Settings.General Settings.No default instance has been set') }}
+      <ft-flex-box class="generalSettingsFlexBox">
+        <ft-input
+          :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
+          :show-action-button="false"
+          :show-label="true"
+          :value="currentInvidiousInstance"
+          :data-list="invidiousInstancesList"
+          :tooltip="$t('Tooltips.General Settings.Invidious Instance')"
+          @input="handleInvidiousInstanceInput"
+        />
+      </ft-flex-box>
+      <ft-flex-box>
+        <div>
+          <a
+            href="https://api.invidious.io"
+          >
+            {{ $t('Settings.General Settings.View all Invidious instance information') }}
+          </a>
+        </div>
+      </ft-flex-box>
+      <p
+        v-if="defaultInvidiousInstance !== ''"
+        class="center"
+      >
+        {{ $t('Settings.General Settings.The currently set default instance is $').replace('$', defaultInvidiousInstance) }}
       </p>
-      <p class="center">
-        {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
-      </p>
-    </template>
-    <ft-flex-box>
-      <ft-button
-        :label="$t('Settings.General Settings.Set Current Instance as Default')"
-        @click="handleSetDefaultInstanceClick"
-      />
-      <ft-button
-        :label="$t('Settings.General Settings.Clear Default Instance')"
-        @click="handleClearDefaultInstanceClick"
-      />
-    </ft-flex-box>
+      <template v-else>
+        <p class="center">
+          {{ $t('Settings.General Settings.No default instance has been set') }}
+        </p>
+        <p class="center">
+          {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
+        </p>
+      </template>
+      <ft-flex-box>
+        <ft-button
+          :label="$t('Settings.General Settings.Set Current Instance as Default')"
+          @click="handleSetDefaultInstanceClick"
+        />
+        <ft-button
+          :label="$t('Settings.General Settings.Clear Default Instance')"
+          @click="handleClearDefaultInstanceClick"
+        />
+      </ft-flex-box>
+    </div>
   </details>
 </template>
 
diff --git a/src/renderer/components/proxy-settings/proxy-settings.vue b/src/renderer/components/proxy-settings/proxy-settings.vue
index 946f578c..2ead1dfe 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.vue
+++ b/src/renderer/components/proxy-settings/proxy-settings.vue
@@ -13,62 +13,69 @@
         @change="handleUpdateProxy"
       />
     </ft-flex-box>
-    <ft-flex-box>
-      <ft-select
-        :placeholder="$t('Settings.Proxy Settings.Proxy Protocol')"
-        :value="proxyProtocol"
-        :select-names="protocolNames"
-        :select-values="protocolValues"
-        @change="handleUpdateProxyProtocol"
-      />
-    </ft-flex-box>
-    <ft-flex-box>
-      <ft-input
-        :placeholder="$t('Settings.Proxy Settings.Proxy Host')"
-        :show-action-button="false"
-        :show-label="true"
-        :value="proxyHostname"
-        @input="handleUpdateProxyHostname"
-      />
-      <ft-input
-        :placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
-        :show-action-button="false"
-        :show-label="true"
-        :value="proxyPort"
-        @input="handleUpdateProxyPort"
-      />
-    </ft-flex-box>
-    <p class="center">
-      {{ $t('Settings.Proxy Settings.Clicking on Test Proxy will send a request to') }} https://freegeoip.app/json/
-    </p>
-    <ft-flex-box>
-      <ft-button
-        :label="$t('Settings.Proxy Settings.Test Proxy')"
-        @click="testProxy"
-      />
-    </ft-flex-box>
-    <ft-loader
-      v-if="isLoading"
-    />
     <div
-      v-if="!isLoading && dataAvailable"
-      class="center"
+      v-if="useProxy"
     >
-      <h3>
-        {{ $t('Settings.Proxy Settings.Your Info') }}
-      </h3>
-      <p>
-        {{ $t('Settings.Proxy Settings.Ip') }}: {{ proxyIp }}
-      </p>
-      <p>
-        {{ $t('Settings.Proxy Settings.Country') }}: {{ proxyCountry }}
-      </p>
-      <p>
-        {{ $t('Settings.Proxy Settings.Region') }}: {{ proxyRegion }}
-      </p>
-      <p>
-        {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
+      <ft-flex-box>
+        <ft-select
+          :placeholder="$t('Settings.Proxy Settings.Proxy Protocol')"
+          :value="proxyProtocol"
+          :select-names="protocolNames"
+          :select-values="protocolValues"
+          @change="handleUpdateProxyProtocol"
+        />
+      </ft-flex-box>
+      <ft-flex-box>
+        <ft-input
+          :placeholder="$t('Settings.Proxy Settings.Proxy Host')"
+          :show-action-button="false"
+          :show-label="true"
+          :value="proxyHostname"
+          @input="handleUpdateProxyHostname"
+        />
+        <ft-input
+          :placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
+          :show-action-button="false"
+          :show-label="true"
+          :value="proxyPort"
+          @input="handleUpdateProxyPort"
+        />
+      </ft-flex-box>
+      <p
+        class="center"
+        :style="{opacity: useProxy ? 1 : 0.4}"
+      >
+        {{ $t('Settings.Proxy Settings.Clicking on Test Proxy will send a request to') }} https://freegeoip.app/json/
       </p>
+      <ft-flex-box>
+        <ft-button
+          :label="$t('Settings.Proxy Settings.Test Proxy')"
+          @click="testProxy"
+        />
+      </ft-flex-box>
+      <ft-loader
+        v-if="isLoading"
+      />
+      <div
+        v-if="!isLoading && dataAvailable"
+        class="center"
+      >
+        <h3>
+          {{ $t('Settings.Proxy Settings.Your Info') }}
+        </h3>
+        <p>
+          {{ $t('Settings.Proxy Settings.Ip') }}: {{ proxyIp }}
+        </p>
+        <p>
+          {{ $t('Settings.Proxy Settings.Country') }}: {{ proxyCountry }}
+        </p>
+        <p>
+          {{ $t('Settings.Proxy Settings.Region') }}: {{ proxyRegion }}
+        </p>
+        <p>
+          {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
+        </p>
+      </div>
     </div>
   </details>
 </template>
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index a8e4497b..cf04a5f3 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -13,22 +13,26 @@
         @change="handleUpdateSponsorBlock"
       />
     </ft-flex-box>
-    <ft-flex-box class="sponsorBlockSettingsFlexBox">
-      <ft-toggle-switch
-        :label="$t('Settings.SponsorBlock Settings.Notify when sponsor segment is skipped')"
-        :default-value="sponsorBlockShowSkippedToast"
-        @change="handleUpdateSponsorBlockShowSkippedToast"
-      />
-    </ft-flex-box>
-    <ft-flex-box>
-      <ft-input
-        :placeholder="$t('Settings.SponsorBlock Settings[\'SponsorBlock API Url (Default is https://sponsor.ajay.app)\']')"
-        :show-action-button="false"
-        :show-label="true"
-        :value="sponsorBlockUrl"
-        @input="handleUpdateSponsorBlockUrl"
-      />
-    </ft-flex-box>
+    <div
+      v-if="useSponsorBlock"
+    >
+      <ft-flex-box class="sponsorBlockSettingsFlexBox">
+        <ft-toggle-switch
+          :label="$t('Settings.SponsorBlock Settings.Notify when sponsor segment is skipped')"
+          :default-value="sponsorBlockShowSkippedToast"
+          @change="handleUpdateSponsorBlockShowSkippedToast"
+        />
+      </ft-flex-box>
+      <ft-flex-box>
+        <ft-input
+          :placeholder="$t('Settings.SponsorBlock Settings[\'SponsorBlock API Url (Default is https://sponsor.ajay.app)\']')"
+          :show-action-button="false"
+          :show-label="true"
+          :value="sponsorBlockUrl"
+          @input="handleUpdateSponsorBlockUrl"
+        />
+      </ft-flex-box>
+    </div>
   </details>
 </template>