From 47a95d0493c60b0be0971194686e1dc53b84e1db Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Fri, 25 Jun 2021 16:17:45 -0400
Subject: [PATCH 01/22] start to implement some parental controls

---
 .../distraction-settings.js                   | 26 +++++++++++++-
 .../distraction-settings.vue                  | 36 +++++++++++++++++++
 src/renderer/components/top-nav/top-nav.js    |  4 +++
 src/renderer/components/top-nav/top-nav.vue   |  4 +++
 .../watch-video-info/watch-video-info.js      |  8 +++++
 .../watch-video-info/watch-video-info.vue     |  2 ++
 src/renderer/store/modules/settings.js        |  6 ++++
 src/renderer/views/Watch/Watch.js             |  6 ++++
 src/renderer/views/Watch/Watch.vue            |  4 +--
 static/locales/en-US.yaml                     |  6 ++++
 10 files changed, 99 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 790368b43dd43..601e004fa5f8c 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -45,6 +45,24 @@ export default Vue.extend({
     },
     hideActiveSubscriptions: function () {
       return this.$store.getters.getHideActiveSubscriptions
+    },
+    hideComments: function () {
+      return this.$store.getters.getHideComments
+    },
+    hideDescription: function () {
+      return this.$store.getters.getHideDescription
+    },
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
+    },
+    hideSearchBar: function () {
+      return this.$store.getters.getHideSearchBar
+    },
+    hideShare: function() {
+      return this.$store.getters.getHideShare
+    },
+    hideUnsubscribe: function() {
+      return this.$store.getters.getHideUnsubscribe
     }
   },
   methods: {
@@ -68,7 +86,13 @@ export default Vue.extend({
       'updateHideLiveChat',
       'updateHideActiveSubscriptions',
       'updatePlayNextVideo',
-      'updateDefaultTheatreMode'
+      'updateDefaultTheatreMode',
+      'updateHideComments',
+      'updateHideDescription',
+      'updateHideLiveStreams',
+      'updateHideSearchBar',
+      'updateHideShare',
+      'updateHideUnsubscribe'
     ])
   }
 })
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 258e365de84f2..ea17c0d6336df 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -71,6 +71,42 @@
           :default-value="hideLiveChat"
           @change="updateHideLiveChat"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Comments')"
+          :compact="true"
+          :default-value="hideComments"
+          @change="updateHideComments"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Description')"
+          :compact="true"
+          :default-value="hideDescription"
+          @change="updateHideDescription"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Live Streams')"
+          :compact="true"
+          :default-value="hideLiveStreams"
+          @change="updateHideLiveStreams"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Search Bar')"
+          :compact="true"
+          :default-value="hideSearchBar"
+          @change="updateHideSearchBar"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Share')"
+          :compact="true"
+          :default-value="hideShare"
+          @change="updateHideShare"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Unsubscribe')"
+          :compact="true"
+          :default-value="hideUnsubscribe"
+          @change="updateHideUnsubscribe"
+        />
       </div>
     </div>
     <br>
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 380ebfe20d328..8ccc82cad9d45 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -28,6 +28,10 @@ export default Vue.extend({
       return this.$store.getters.getUsingElectron
     },
 
+    hideSearchBar: function () {
+      return this.$store.getters.getHideSearchBar
+    },
+
     enableSearchSuggestions: function () {
       return this.$store.getters.getEnableSearchSuggestions
     },
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index efdd22f93a43f..dc14caae8562c 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -31,6 +31,7 @@
         @keypress="historyForward"
       />
       <font-awesome-icon
+        v-if="!hideSearchBar"
         class="navSearchIcon navIcon"
         icon="search"
         role="button"
@@ -56,6 +57,7 @@
     <div class="middle">
       <div class="searchContainer">
         <ft-input
+          v-if="!hideSearchBar"
           :placeholder="$t('Search / Go to URL')"
           class="searchInput"
           :is-search="true"
@@ -66,6 +68,7 @@
           @click="goToSearch"
         />
         <font-awesome-icon
+          v-if="!hideSearchBar"
           class="navFilterIcon navIcon"
           :class="{ filterChanged: searchFilterValueChanged }"
           icon="filter"
@@ -76,6 +79,7 @@
         />
       </div>
       <ft-search-filters
+        v-if="!hideSearchBar"
         v-show="showFilters"
         class="searchFilters"
         :class="{ expand: !isSideNavOpen }"
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index ef307690a2b2d..d18ffa7466a00 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -130,6 +130,14 @@ export default Vue.extend({
       return this.$store.getters.getInvidiousInstance
     },
 
+    hideShare: function() {
+      return this.$store.getters.getHideShare
+    },
+
+    hideUnsubscribe: function() {
+      return this.$store.getters.getHideUnsubscribe
+    },
+
     profileList: function () {
       return this.$store.getters.getProfileList
     },
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 0d7b0bc3786f9..98327f03bee79 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -27,6 +27,7 @@
               {{ channelName }}
             </div>
             <ft-button
+              v-if="!hideUnsubscribe"
               :label="subscribedText"
               class="subscribeButton"
               background-color="var(--primary-color)"
@@ -107,6 +108,7 @@
           @click="handleFormatChange"
         />
         <ft-share-button
+          v-if="!hideShare"
           :id="id"
           :get-timestamp="getTimestamp"
           :playlist-id="playlistId"
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index d43c2b7db143d..31d639f0f39ec 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -186,11 +186,17 @@ const state = {
   hideActiveSubscriptions: false,
   hideChannelSubscriptions: false,
   hideCommentLikes: false,
+  hideComments: false,
+  hideDescription: false,
   hideLiveChat: false,
+  hideLiveStreams: false,
   hidePlaylists: false,
   hidePopularVideos: false,
   hideRecommendedVideos: false,
+  hideSearchBar: false,
+  hideShare: false,
   hideTrendingVideos: false,
+  hideUnsubscribe: false,
   hideVideoLikesAndDislikes: false,
   hideVideoViews: false,
   hideWatchedSubs: false,
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 4058802f40e23..04954e3c7b00a 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -133,6 +133,12 @@ export default Vue.extend({
     hideLiveChat: function () {
       return this.$store.getters.getHideLiveChat
     },
+    hideComments: function () {
+      return this.$store.getters.getHideComments
+    },
+    hideDescription: function () {
+      return this.$store.getters.getHideDescription
+    },
 
     youtubeNoCookieEmbeddedFrame: function () {
       return `<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/${this.videoId}?rel=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>`
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 29e4a5d1d0a3a..d35c50befc5b5 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -97,7 +97,7 @@
         @pause-player="pausePlayer"
       />
       <watch-video-description
-        v-if="!isLoading"
+        v-if="!isLoading && !hideDescription"
         :published="videoPublished"
         :description="videoDescription"
         :description-html="videoDescriptionHtml"
@@ -106,7 +106,7 @@
         @timestamp-event="changeTimestamp"
       />
       <watch-video-comments
-        v-if="!isLoading && !isLive"
+        v-if="!isLoading && !isLive && !hideComments"
         :id="videoId"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index e543dde0ab83f..9cf3eb55abe28 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -235,6 +235,12 @@ Settings:
     Hide Playlists: Hide Playlists
     Hide Live Chat: Hide Live Chat
     Hide Active Subscriptions: Hide Active Subscriptions
+    Hide Comments: Hide Comments
+    Hide Description: Hide Description
+    Hide Live Streams: Hide Live Streams
+    Hide Search Bar: Hide Search Bar
+    Hide Share: Hide Share
+    Hide Unsubscribe: Hide Unsubscribe
   Data Settings:
     Data Settings: Data Settings
     Select Import Type: Select Import Type

From 0ede1bd256558a556fa97c0039c5d58845f6d8fa Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Fri, 25 Jun 2021 18:11:42 -0400
Subject: [PATCH 02/22] Hide share + Hide Unsubscribe

---
 .../distraction-settings.vue                  |  4 ++
 .../components/ft-list-video/ft-list-video.js | 58 ++++++++++---------
 .../components/playlist-info/playlist-info.js |  4 ++
 .../playlist-info/playlist-info.vue           |  1 +
 src/renderer/views/Channel/Channel.js         |  4 ++
 src/renderer/views/Channel/Channel.vue        |  1 +
 6 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index ea17c0d6336df..4e52cb6ca9f34 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -71,6 +71,8 @@
           :default-value="hideLiveChat"
           @change="updateHideLiveChat"
         />
+      </div>
+      <div>
         <ft-toggle-switch
           :label="$t('Settings.Distraction Free Settings.Hide Comments')"
           :compact="true"
@@ -89,6 +91,8 @@
           :default-value="hideLiveStreams"
           @change="updateHideLiveStreams"
         />
+      </div>
+      <div>
         <ft-toggle-switch
           :label="$t('Settings.Distraction Free Settings.Hide Search Bar')"
           :compact="true"
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index b791d94c4695f..43ac40dc8b4ea 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -59,20 +59,7 @@ export default Vue.extend({
       isFavorited: false,
       isUpcoming: false,
       isPremium: false,
-      hideViews: false,
-      optionsValues: [
-        'history',
-        'openYoutube',
-        'copyYoutube',
-        'openYoutubeEmbed',
-        'copyYoutubeEmbed',
-        'openInvidious',
-        'copyInvidious',
-        'openYoutubeChannel',
-        'copyYoutubeChannel',
-        'openInvidiousChannel',
-        'copyInvidiousChannel'
-      ]
+      hideViews: false
     }
   },
   computed: {
@@ -129,20 +116,39 @@ export default Vue.extend({
     progressPercentage: function () {
       return (this.watchProgress / this.data.lengthSeconds) * 100
     },
+    optionsValues: function() {
+      const values = ['history']
+      if (!this.$store.getters.getHideShare) {
+        values.push('openYoutube')
+        values.push('copyYoutube')
+        values.push('openYoutubeEmbed')
+        values.push('copyYoutubeEmbed')
+        values.push('openInvidious')
+        values.push('copyInvidious')
+        values.push('openYoutubeChannel')
+        values.push('copyYoutubeChannel')
+        values.push('openInvidiousChannel')
+        values.push('copyInvidiousChannel')
+      }
+      return values
+    },
 
     optionsNames: function () {
-      const names = [
-        this.$t('Video.Open in YouTube'),
-        this.$t('Video.Copy YouTube Link'),
-        this.$t('Video.Open YouTube Embedded Player'),
-        this.$t('Video.Copy YouTube Embedded Player Link'),
-        this.$t('Video.Open in Invidious'),
-        this.$t('Video.Copy Invidious Link'),
-        this.$t('Video.Open Channel in YouTube'),
-        this.$t('Video.Copy YouTube Channel Link'),
-        this.$t('Video.Open Channel in Invidious'),
-        this.$t('Video.Copy Invidious Channel Link')
-      ]
+      let names = []
+      if (!this.$store.getters.getHideShare) {
+        names = [
+          this.$t('Video.Open in YouTube'),
+          this.$t('Video.Copy YouTube Link'),
+          this.$t('Video.Open YouTube Embedded Player'),
+          this.$t('Video.Copy YouTube Embedded Player Link'),
+          this.$t('Video.Open in Invidious'),
+          this.$t('Video.Copy Invidious Link'),
+          this.$t('Video.Open Channel in YouTube'),
+          this.$t('Video.Copy YouTube Channel Link'),
+          this.$t('Video.Open Channel in Invidious'),
+          this.$t('Video.Copy Invidious Channel Link')
+        ]
+      }
 
       if (this.watched) {
         names.unshift(this.$t('Video.Remove From History'))
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index d94b359936486..20e110bd7d125 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -35,6 +35,10 @@ export default Vue.extend({
     }
   },
   computed: {
+    hideShare: function() {
+      return this.$store.getters.getHideShare
+    },
+
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
     },
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index dc4aa85198fcb..29d13bd0a98f3 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -33,6 +33,7 @@
     </div>
     <br>
     <ft-list-dropdown
+      v-if="!hideShare"
       :title="$t('Playlist.Share Playlist.Share Playlist')"
       :label-names="shareHeaders"
       :label-values="shareValues"
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 74a8f3c79e1fc..8033ac76fb6a4 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -73,6 +73,10 @@ export default Vue.extend({
       return this.$store.getters.getBackendFallback
     },
 
+    hideUnsubscribe: function() {
+      return this.$store.getters.getHideUnsubscribe
+    },
+
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
     },
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index b56831d5cc908..7a97c2a2884dd 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -41,6 +41,7 @@
           </span>
         </div>
         <ft-button
+          v-if="!hideUnsubscribe"
           :label="subscribedText"
           background-color="var(--primary-color)"
           text-color="var(--text-with-main-color)"

From 9baa7199e952fbe0520728a6cd8a36f87c6a54ba Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Fri, 25 Jun 2021 19:07:13 -0400
Subject: [PATCH 03/22] Hide live streams

---
 .../distraction-settings.vue                  | 40 +++++++++----------
 .../components/ft-list-video/ft-list-video.js |  5 +++
 .../ft-list-video/ft-list-video.vue           |  1 +
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 4e52cb6ca9f34..b73384597dd9f 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -39,6 +39,24 @@
           :default-value="hideActiveSubscriptions"
           @change="updateHideActiveSubscriptions"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Comments')"
+          :compact="true"
+          :default-value="hideComments"
+          @change="updateHideComments"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Description')"
+          :compact="true"
+          :default-value="hideDescription"
+          @change="updateHideDescription"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Live Streams')"
+          :compact="true"
+          :default-value="hideLiveStreams"
+          @change="updateHideLiveStreams"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
@@ -71,28 +89,6 @@
           :default-value="hideLiveChat"
           @change="updateHideLiveChat"
         />
-      </div>
-      <div>
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Comments')"
-          :compact="true"
-          :default-value="hideComments"
-          @change="updateHideComments"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Description')"
-          :compact="true"
-          :default-value="hideDescription"
-          @change="updateHideDescription"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Live Streams')"
-          :compact="true"
-          :default-value="hideLiveStreams"
-          @change="updateHideLiveStreams"
-        />
-      </div>
-      <div>
         <ft-toggle-switch
           :label="$t('Settings.Distraction Free Settings.Hide Search Bar')"
           :compact="true"
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 43ac40dc8b4ea..b93fc432351bc 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -178,6 +178,11 @@ export default Vue.extend({
           return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
       }
     },
+
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
+    },
+
     hideVideoViews: function () {
       return this.$store.getters.getHideVideoViews
     },
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 625ef3b8e4937..4e4a7d75c8873 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="(!isLive && duration !== '0:00') || ((isLive || duration === null) && !hideLiveStreams)"
     class="ft-list-video ft-list-item"
     :class="{
       list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',

From c5be0796f2262e63972cdee2b8ee38d2cc70b721 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Fri, 25 Jun 2021 19:09:50 -0400
Subject: [PATCH 04/22] fix hide live streams

---
 src/renderer/components/ft-list-video/ft-list-video.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 4e4a7d75c8873..de395f2c414ee 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="(!isLive && duration !== '0:00') || ((isLive || duration === null) && !hideLiveStreams)"
+    v-if="(!isLive && duration !== '0:00') || (!hideLiveStreams)"
     class="ft-list-video ft-list-item"
     :class="{
       list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',

From 712e3591820bfda08c505985993b4a2b422cde1e Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Fri, 25 Jun 2021 22:05:46 -0400
Subject: [PATCH 05/22] Add "parental-control-settings"

---
 .../distraction-settings.js                   | 18 +-----
 .../distraction-settings.vue                  | 24 --------
 .../components/ft-list-video/ft-list-video.js |  4 ++
 .../parental-control-settings.js              | 46 +++++++++++++++
 .../parental-control-settings.sass            |  1 +
 .../parental-control-settings.vue             | 56 +++++++++++++++++++
 src/renderer/store/modules/settings.js        |  2 +
 src/renderer/views/Settings/Settings.js       |  4 +-
 src/renderer/views/Settings/Settings.vue      |  1 +
 src/renderer/views/Watch/Watch.js             | 13 ++++-
 src/renderer/views/Watch/Watch.vue            |  1 +
 static/locales/en-US.yaml                     | 12 ++--
 12 files changed, 134 insertions(+), 48 deletions(-)
 create mode 100644 src/renderer/components/parental-control-settings/parental-control-settings.js
 create mode 100644 src/renderer/components/parental-control-settings/parental-control-settings.sass
 create mode 100644 src/renderer/components/parental-control-settings/parental-control-settings.vue

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 601e004fa5f8c..0884844572549 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -46,23 +46,11 @@ export default Vue.extend({
     hideActiveSubscriptions: function () {
       return this.$store.getters.getHideActiveSubscriptions
     },
-    hideComments: function () {
-      return this.$store.getters.getHideComments
-    },
     hideDescription: function () {
       return this.$store.getters.getHideDescription
     },
-    hideLiveStreams: function() {
-      return this.$store.getters.getHideLiveStreams
-    },
     hideSearchBar: function () {
       return this.$store.getters.getHideSearchBar
-    },
-    hideShare: function() {
-      return this.$store.getters.getHideShare
-    },
-    hideUnsubscribe: function() {
-      return this.$store.getters.getHideUnsubscribe
     }
   },
   methods: {
@@ -87,12 +75,8 @@ export default Vue.extend({
       'updateHideActiveSubscriptions',
       'updatePlayNextVideo',
       'updateDefaultTheatreMode',
-      'updateHideComments',
       'updateHideDescription',
-      'updateHideLiveStreams',
-      'updateHideSearchBar',
-      'updateHideShare',
-      'updateHideUnsubscribe'
+      'updateHideSearchBar'
     ])
   }
 })
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index b73384597dd9f..75f774d701646 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -39,24 +39,12 @@
           :default-value="hideActiveSubscriptions"
           @change="updateHideActiveSubscriptions"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Comments')"
-          :compact="true"
-          :default-value="hideComments"
-          @change="updateHideComments"
-        />
         <ft-toggle-switch
           :label="$t('Settings.Distraction Free Settings.Hide Description')"
           :compact="true"
           :default-value="hideDescription"
           @change="updateHideDescription"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Live Streams')"
-          :compact="true"
-          :default-value="hideLiveStreams"
-          @change="updateHideLiveStreams"
-        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
@@ -95,18 +83,6 @@
           :default-value="hideSearchBar"
           @change="updateHideSearchBar"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Share')"
-          :compact="true"
-          :default-value="hideShare"
-          @change="updateHideShare"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Unsubscribe')"
-          :compact="true"
-          :default-value="hideUnsubscribe"
-          @change="updateHideUnsubscribe"
-        />
       </div>
     </div>
     <br>
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index b93fc432351bc..ab18f97d99586 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -179,6 +179,10 @@ export default Vue.extend({
       }
     },
 
+    hideAgeRestricted: function() {
+      return this.$store.getters.getHideLiveStreams
+    },
+
     hideLiveStreams: function() {
       return this.$store.getters.getHideLiveStreams
     },
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.js b/src/renderer/components/parental-control-settings/parental-control-settings.js
new file mode 100644
index 0000000000000..30221524d9b8c
--- /dev/null
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.js
@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import { mapActions } from 'vuex'
+import FtCard from '../ft-card/ft-card.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtSelect from '../ft-select/ft-select.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+
+export default Vue.extend({
+  name: 'PlayerSettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-button': FtButton,
+    'ft-select': FtSelect,
+    'ft-flex-box': FtFlexBox
+  },
+  computed: {
+    hideAgeRestricted: function() {
+      return this.$store.getters.hideAgeRestrictedVideos
+    },
+    hideComments: function () {
+      return this.$store.getters.getHideComments
+    },
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
+    },
+    hideShare: function() {
+      return this.$store.getters.getHideShare
+    },
+    hideUnsubscribe: function() {
+      return this.$store.getters.getHideUnsubscribe
+    },
+    showFamilyFriendlyOnly: function() {
+      return this.$store.getters.showFamilyFriendlyOnly
+    }
+  },
+  methods: {
+    ...mapActions([
+      'updateHideComments',
+      'updateHideLiveStreams',
+      'updateHideShare',
+      'updateHideUnsubscribe'
+    ])
+  }
+})
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.sass b/src/renderer/components/parental-control-settings/parental-control-settings.sass
new file mode 100644
index 0000000000000..05cb0dfb9f164
--- /dev/null
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.vue b/src/renderer/components/parental-control-settings/parental-control-settings.vue
new file mode 100644
index 0000000000000..e6881e0538c4d
--- /dev/null
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.vue
@@ -0,0 +1,56 @@
+<template>
+  <ft-card
+    class="relative card"
+  >
+    <h3
+      class="videoTitle"
+    >
+      {{ $t("Settings.Parental Control Settings.Parental Control Settings") }}
+    </h3>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Hide Unsubscribe')"
+          :compact="true"
+          :default-value="hideUnsubscribe"
+          @change="updateHideUnsubscribe"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Hide Live Streams')"
+          :compact="true"
+          :default-value="hideLiveStreams"
+          @change="updateHideLiveStreams"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Hide Age Restricted')"
+          :compact="true"
+          :default-value="hideAgeRestricted"
+          @change="updateAgeRestricted"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Hide Comments')"
+          :compact="true"
+          :default-value="hideComments"
+          @change="updateHideComments"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Hide Share')"
+          :compact="true"
+          :default-value="hideShare"
+          @change="updateHideShare"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
+          :compact="true"
+          :default-value="showFamilyFriendlyOnly"
+          @change="updateShowFamilyFriendlyOnly"
+        />
+      </div>
+    </div>
+  </ft-card>
+</template>
+
+<script src="./parental-control-settings.js" />
+<style scoped lang="sass" src="./parental-control-settings.sass" />
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 31d639f0f39ec..2fca22c8adc41 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -184,6 +184,7 @@ const state = {
   externalPlayerCustomArgs: '',
   forceLocalBackendForLegacy: false,
   hideActiveSubscriptions: false,
+  hideAgeRestrictedVideos: false,
   hideChannelSubscriptions: false,
   hideCommentLikes: false,
   hideComments: false,
@@ -212,6 +213,7 @@ const state = {
   rememberHistory: true,
   removeVideoMetaFiles: true,
   saveWatchedProgress: true,
+  showFamilyFriendlyOnly: false,
   sponsorBlockShowSkippedToast: true,
   sponsorBlockUrl: 'https://sponsor.ajay.app',
   thumbnailPreference: '',
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 4cfacc1e6ffca..2aacfb77c1cfb 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -11,6 +11,7 @@ import DataSettings from '../../components/data-settings/data-settings.vue'
 import DistractionSettings from '../../components/distraction-settings/distraction-settings.vue'
 import ProxySettings from '../../components/proxy-settings/proxy-settings.vue'
 import SponsorBlockSettings from '../../components/sponsor-block-settings/sponsor-block-settings.vue'
+import ParentControlSettings from '../../components/parental-control-settings/parental-control-settings.vue'
 
 export default Vue.extend({
   name: 'Settings',
@@ -26,7 +27,8 @@ export default Vue.extend({
     'data-settings': DataSettings,
     'distraction-settings': DistractionSettings,
     'proxy-settings': ProxySettings,
-    'sponsor-block-settings': SponsorBlockSettings
+    'sponsor-block-settings': SponsorBlockSettings,
+    'parental-control-settings': ParentControlSettings
   },
   computed: {
     usingElectron: function () {
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index f801e6dad2e22..a716090aaaab4 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -10,6 +10,7 @@
     <data-settings />
     <proxy-settings />
     <sponsor-block-settings />
+    <parental-control-settings/>
   </div>
 </template>
 
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 04954e3c7b00a..bee80d64240af 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -42,6 +42,8 @@ export default Vue.extend({
       showLegacyPlayer: false,
       showYouTubeNoCookieEmbed: false,
       hidePlayer: false,
+      isAgeRestricted: false,
+      isFamilyFriendly: false,
       isLive: false,
       isLiveContent: false,
       isUpcoming: false,
@@ -139,6 +141,12 @@ export default Vue.extend({
     hideDescription: function () {
       return this.$store.getters.getHideDescription
     },
+    hideAgeRestricted: function() {
+      return this.$store.getters.hideAgeRestrictedVideos
+    },
+    showFamilyFriendlyOnly: function() {
+      return this.$store.getters.showFamilyFriendlyOnly
+    },
 
     youtubeNoCookieEmbeddedFrame: function () {
       return `<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/${this.videoId}?rel=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>`
@@ -279,7 +287,8 @@ export default Vue.extend({
               this.thumbnail = result.videoDetails.thumbnails[result.videoDetails.thumbnails.length - 1].url
               break
           }
-
+          this.isFamilyFriendly = result.microformat.playerMicroformatRenderer.isFamilySafe
+          this.isAgeRestricted = result.videoDetails.age_restricted
           this.recommendedVideos = result.related_videos.map((video) => {
             video.videoId = video.id
             video.authorId = video.author.id
@@ -525,7 +534,6 @@ export default Vue.extend({
       this.invidiousGetVideoInformation(this.videoId)
         .then(result => {
           console.log(result)
-
           if (result.error) {
             throw new Error(result.error)
           }
@@ -552,6 +560,7 @@ export default Vue.extend({
           this.recommendedVideos = result.recommendedVideos
           this.adaptiveFormats = result.adaptiveFormats
           this.isLive = result.liveNow
+          this.isFamilyFriendly = result.isFamilyFriendly
           this.captionHybridList = result.captions.map(caption => {
             caption.url = this.invidiousInstance + caption.url
             caption.type = ''
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index d35c50befc5b5..ca32355091660 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="(isAgeRestricted==false || !hideAgeRestricted) && (isFamilyFriendly==true || !showFamilyFriendlyOnly)"
     class="videoLayout"
     :class="{
       isLoading,
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 9cf3eb55abe28..44ec71ae2e8d4 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -235,12 +235,8 @@ Settings:
     Hide Playlists: Hide Playlists
     Hide Live Chat: Hide Live Chat
     Hide Active Subscriptions: Hide Active Subscriptions
-    Hide Comments: Hide Comments
     Hide Description: Hide Description
-    Hide Live Streams: Hide Live Streams
     Hide Search Bar: Hide Search Bar
-    Hide Share: Hide Share
-    Hide Unsubscribe: Hide Unsubscribe
   Data Settings:
     Data Settings: Data Settings
     Select Import Type: Select Import Type
@@ -299,6 +295,14 @@ Settings:
     Enable SponsorBlock: Enable SponsorBlock
     'SponsorBlock API Url (Default is https://sponsor.ajay.app)': SponsorBlock API Url (Default is https://sponsor.ajay.app)
     Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
+  Parental Control Settings:
+    Parental Control Settings: Parental Control Settings
+    Hide Comments: Hide Comments
+    Hide Live Streams: Hide Live Streams
+    Hide Share: Hide Share
+    Hide Unsubscribe: Hide Unsubscribe
+    Show Family Friendly Only: Show Family Friendly Only
+    Hide Age Restricted: Hide Age Restricted
 About:
   #On About page
   About: About

From fab41a7fcd1aedf38fc36fa60ba0d77ae9cc9b22 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 27 Jun 2021 12:25:19 -0400
Subject: [PATCH 06/22] Implement Hide Live Streams & Hide "Age Restricted"

---
 .../ft-age-restricted/ft-age-restricted.js    | 17 ++++++++++++++
 .../ft-age-restricted/ft-age-restricted.sass  | 14 +++++++++++
 .../ft-age-restricted/ft-age-restricted.vue   | 13 +++++++++++
 .../ft-list-lazy-wrapper.vue                  |  1 +
 .../components/ft-list-video/ft-list-video.js |  4 ----
 .../ft-list-video/ft-list-video.vue           |  5 ++++
 .../parental-control-settings.js              |  8 +++----
 .../parental-control-settings.vue             | 12 +++-------
 src/renderer/store/modules/settings.js        |  1 -
 src/renderer/views/Channel/Channel.js         | 11 ++++++++-
 src/renderer/views/Channel/Channel.vue        | 11 ++++++---
 src/renderer/views/Search/Search.js           |  9 ++++++++
 src/renderer/views/Trending/Trending.js       |  9 ++++++--
 src/renderer/views/Watch/Watch.js             | 21 ++++++++---------
 src/renderer/views/Watch/Watch.sass           |  6 +++++
 src/renderer/views/Watch/Watch.vue            | 23 +++++++++++++++----
 static/locales/en-US.yaml                     |  4 +++-
 17 files changed, 127 insertions(+), 42 deletions(-)
 create mode 100644 src/renderer/components/ft-age-restricted/ft-age-restricted.js
 create mode 100644 src/renderer/components/ft-age-restricted/ft-age-restricted.sass
 create mode 100644 src/renderer/components/ft-age-restricted/ft-age-restricted.vue

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.js b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
new file mode 100644
index 0000000000000..11aa5c93d9866
--- /dev/null
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
@@ -0,0 +1,17 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtAgeRestricted',
+  props: {
+    contentTypeString: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    emoji: function () {
+      const emojis = ['😵', '😦', '🙁', '☹️', '😦', '🤫', '😕']
+      return emojis[Math.floor(Math.random() * emojis.length)]
+    }
+  }
+})
diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.sass b/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
new file mode 100644
index 0000000000000..142f9b63a3cf6
--- /dev/null
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
@@ -0,0 +1,14 @@
+.ft-age-restricted
+  color: #FFFFFF
+  h2
+    width: 100%
+    text-align: center
+    background-color: rgba(0, 0, 0, 0.7)
+    padding: 10px 0
+  .frown
+    width: 100%
+    text-align: center
+    background-color: rgba(0, 0, 0, 0.7)
+    font-size: 10em
+    padding: 20px 0
+    height: 100%
\ No newline at end of file
diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
new file mode 100644
index 0000000000000..0db0555392c7a
--- /dev/null
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="ft-age-restricted"
+  >
+    <h2 v-html="$t('Age Restricted.This '+contentTypeString+' is age restricted')" />
+    <div class="frown">
+      {{ emoji }}
+    </div>
+  </div>
+</template>
+
+<script src="./ft-age-restricted.js" />
+<style scoped lang="sass" src="./ft-age-restricted.sass" />
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
index e49915e2db4b9..540f50ad7bb83 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="data.type !== undefined"
     v-observe-visibility="firstScreen ? false : {
       callback: onVisibilityChanged,
       once: true,
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index ab18f97d99586..b93fc432351bc 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -179,10 +179,6 @@ export default Vue.extend({
       }
     },
 
-    hideAgeRestricted: function() {
-      return this.$store.getters.getHideLiveStreams
-    },
-
     hideLiveStreams: function() {
       return this.$store.getters.getHideLiveStreams
     },
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index de395f2c414ee..bb2880a1154d9 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -118,6 +118,11 @@
       </p>
     </div>
   </div>
+  <div
+    v-else
+  >
+    Live Streams are hidden
+  </div>
 </template>
 
 <script src="./ft-list-video.js" />
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.js b/src/renderer/components/parental-control-settings/parental-control-settings.js
index 30221524d9b8c..ab7c34091cd05 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.js
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.js
@@ -16,9 +16,6 @@ export default Vue.extend({
     'ft-flex-box': FtFlexBox
   },
   computed: {
-    hideAgeRestricted: function() {
-      return this.$store.getters.hideAgeRestrictedVideos
-    },
     hideComments: function () {
       return this.$store.getters.getHideComments
     },
@@ -32,7 +29,7 @@ export default Vue.extend({
       return this.$store.getters.getHideUnsubscribe
     },
     showFamilyFriendlyOnly: function() {
-      return this.$store.getters.showFamilyFriendlyOnly
+      return this.$store.getters.getShowFamilyFriendlyOnly
     }
   },
   methods: {
@@ -40,7 +37,8 @@ export default Vue.extend({
       'updateHideComments',
       'updateHideLiveStreams',
       'updateHideShare',
-      'updateHideUnsubscribe'
+      'updateHideUnsubscribe',
+      'updateShowFamilyFriendlyOnly'
     ])
   }
 })
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.vue b/src/renderer/components/parental-control-settings/parental-control-settings.vue
index e6881e0538c4d..0f7916c56c701 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.vue
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.vue
@@ -22,10 +22,10 @@
           @change="updateHideLiveStreams"
         />
         <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Hide Age Restricted')"
+          :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
           :compact="true"
-          :default-value="hideAgeRestricted"
-          @change="updateAgeRestricted"
+          :default-value="showFamilyFriendlyOnly"
+          @change="updateShowFamilyFriendlyOnly"
         />
       </div>
       <div class="switchColumn">
@@ -41,12 +41,6 @@
           :default-value="hideShare"
           @change="updateHideShare"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
-          :compact="true"
-          :default-value="showFamilyFriendlyOnly"
-          @change="updateShowFamilyFriendlyOnly"
-        />
       </div>
     </div>
   </ft-card>
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 2fca22c8adc41..cbdc97082ff2a 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -184,7 +184,6 @@ const state = {
   externalPlayerCustomArgs: '',
   forceLocalBackendForLegacy: false,
   hideActiveSubscriptions: false,
-  hideAgeRestrictedVideos: false,
   hideChannelSubscriptions: false,
   hideCommentLikes: false,
   hideComments: false,
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 8033ac76fb6a4..a0642bf698780 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -8,6 +8,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
+import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
 
 import ytch from 'yt-channel-info'
 import autolinker from 'autolinker'
@@ -22,7 +23,8 @@ export default Vue.extend({
     'ft-flex-box': FtFlexBox,
     'ft-channel-bubble': FtChannelBubble,
     'ft-loader': FtLoader,
-    'ft-element-list': FtElementList
+    'ft-element-list': FtElementList,
+    'ft-age-restricted': FtAgeRestricted
   },
   data: function () {
     return {
@@ -49,6 +51,7 @@ export default Vue.extend({
       searchResults: [],
       shownElementList: [],
       apiUsed: '',
+      isFamilyFriendly: true,
       videoSelectValues: [
         'newest',
         'oldest',
@@ -77,6 +80,10 @@ export default Vue.extend({
       return this.$store.getters.getHideUnsubscribe
     },
 
+    showFamilyFriendlyOnly: function() {
+      return this.$store.getters.getShowFamilyFriendlyOnly
+    },
+
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
     },
@@ -254,6 +261,7 @@ export default Vue.extend({
       ytch.getChannelInfo(this.id).then((response) => {
         this.id = response.authorId
         this.channelName = response.author
+        this.isFamilyFriendly = response.isFamilyFriendly
         if (this.hideChannelSubscriptions || response.subscriberCount === 0) {
           this.subCount = null
         } else {
@@ -349,6 +357,7 @@ export default Vue.extend({
         console.log(response)
         this.channelName = response.author
         this.id = response.authorId
+        this.isFamilyFriendly = response.isFamilyFriendly
         if (this.hideChannelSubscriptions) {
           this.subCount = null
         } else {
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 7a97c2a2884dd..a43c8c24d8112 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -3,11 +3,11 @@
     ref="search"
   >
     <ft-loader
-      v-if="isLoading"
+      v-if="isLoading && (isFamilyFriendly==true || !showFamilyFriendlyOnly)"
       :fullscreen="true"
     />
     <ft-card
-      v-else
+      v-else-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
       class="card"
     >
       <img
@@ -97,7 +97,7 @@
       </div>
     </ft-card>
     <ft-card
-      v-if="!isLoading"
+      v-if="!isLoading && (isFamilyFriendly==true || !showFamilyFriendlyOnly)"
       class="card"
     >
       <div
@@ -179,6 +179,11 @@
         </div>
       </div>
     </ft-card>
+    <ft-age-restricted
+      v-if="(isFamilyFriendly==false && showFamilyFriendlyOnly)"
+      class="ageRestricted"
+      :content-type-string="'channel'"
+    />
   </div>
 </template>
 
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index c7f93076de261..94cb5b5222414 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -37,6 +37,10 @@ export default Vue.extend({
 
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
+    },
+
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
     }
   },
   watch: {
@@ -94,6 +98,11 @@ export default Vue.extend({
 
       if (sameSearch.length > 0) {
         console.log(sameSearch)
+        if (this.hideLiveStreams) {
+          sameSearch[0].data = sameSearch[0].data.filter((obj) => {
+            return (!obj.liveNow && !obj.isUpcoming)
+          })
+        }
         // Replacing the data right away causes a strange error where the data
         // Shown is mixed from 2 different search results.  So we'll wait a moment
         // Before showing the results.
diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
index 8581acf69f64a..ecd16da7201e6 100644
--- a/src/renderer/views/Trending/Trending.js
+++ b/src/renderer/views/Trending/Trending.js
@@ -39,6 +39,9 @@ export default Vue.extend({
     },
     trendingCache () {
       return this.$store.getters.getTrendingCache
+    },
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
     }
   },
   mounted: function () {
@@ -76,7 +79,8 @@ export default Vue.extend({
 
       ytrend.scrape_trending_page(param).then((result) => {
         const returnData = result.filter((item) => {
-          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
+          return (item.type === 'video' && ((!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams)) ||
+            item.type === 'channel' || item.type === 'playlist'
         })
 
         this.shownResults = returnData
@@ -120,7 +124,8 @@ export default Vue.extend({
         console.log(result)
 
         const returnData = result.filter((item) => {
-          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
+          return (item.type === 'video' && ((!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams)) ||
+            item.type === 'channel' || item.type === 'playlist'
         })
 
         this.shownResults = returnData
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index bee80d64240af..6580a49c6fb8a 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -13,6 +13,7 @@ import WatchVideoComments from '../../components/watch-video-comments/watch-vide
 import WatchVideoLiveChat from '../../components/watch-video-live-chat/watch-video-live-chat.vue'
 import WatchVideoPlaylist from '../../components/watch-video-playlist/watch-video-playlist.vue'
 import WatchVideoRecommendations from '../../components/watch-video-recommendations/watch-video-recommendations.vue'
+import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
 
 export default Vue.extend({
   name: 'Watch',
@@ -26,7 +27,8 @@ export default Vue.extend({
     'watch-video-comments': WatchVideoComments,
     'watch-video-live-chat': WatchVideoLiveChat,
     'watch-video-playlist': WatchVideoPlaylist,
-    'watch-video-recommendations': WatchVideoRecommendations
+    'watch-video-recommendations': WatchVideoRecommendations,
+    'ft-age-restricted': FtAgeRestricted
   },
   beforeRouteLeave: function (to, from, next) {
     this.handleRouteChange()
@@ -42,7 +44,6 @@ export default Vue.extend({
       showLegacyPlayer: false,
       showYouTubeNoCookieEmbed: false,
       hidePlayer: false,
-      isAgeRestricted: false,
       isFamilyFriendly: false,
       isLive: false,
       isLiveContent: false,
@@ -141,11 +142,8 @@ export default Vue.extend({
     hideDescription: function () {
       return this.$store.getters.getHideDescription
     },
-    hideAgeRestricted: function() {
-      return this.$store.getters.hideAgeRestrictedVideos
-    },
     showFamilyFriendlyOnly: function() {
-      return this.$store.getters.showFamilyFriendlyOnly
+      return this.$store.getters.getShowFamilyFriendlyOnly
     },
 
     youtubeNoCookieEmbeddedFrame: function () {
@@ -287,8 +285,7 @@ export default Vue.extend({
               this.thumbnail = result.videoDetails.thumbnails[result.videoDetails.thumbnails.length - 1].url
               break
           }
-          this.isFamilyFriendly = result.microformat.playerMicroformatRenderer.isFamilySafe
-          this.isAgeRestricted = result.videoDetails.age_restricted
+          this.isFamilyFriendly = result.videoDetails.isFamilySafe
           this.recommendedVideos = result.related_videos.map((video) => {
             video.videoId = video.id
             video.authorId = video.author.id
@@ -715,7 +712,7 @@ export default Vue.extend({
     },
 
     handleWatchProgress: function () {
-      if (this.rememberHistory && !this.isUpcoming && !this.isLoading && !this.isLive) {
+      if (this.rememberHistory && !this.isUpcoming && !this.isLoading && !this.isLive && this.$refs.videoPlayer !== undefined) {
         const player = this.$refs.videoPlayer.player
 
         if (player !== null && this.saveWatchedProgress) {
@@ -735,7 +732,9 @@ export default Vue.extend({
       })
 
       console.log(historyIndex)
-
+      if (this.$refs.videoPlayer === undefined) {
+        return false
+      }
       if (!this.isLive) {
         if (this.timestamp) {
           if (this.timestamp < 0) {
@@ -948,7 +947,7 @@ export default Vue.extend({
 
       this.handleWatchProgress()
 
-      if (!this.isUpcoming && !this.isLoading) {
+      if (!this.isUpcoming && !this.isLoading && this.$refs.videoPlayer !== undefined) {
         const player = this.$refs.videoPlayer.player
 
         if (player !== null && !player.paused() && player.isInPictureInPicture()) {
diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
index 48bfd5dbdcb8f..c74a93970761f 100644
--- a/src/renderer/views/Watch/Watch.sass
+++ b/src/renderer/views/Watch/Watch.sass
@@ -6,6 +6,12 @@
 
 =single-column-template
   grid-template: "video" auto "info" auto "sidebar" auto / auto
+.ageRestricted 
+  max-width: calc(80vh * 1.78)
+  display: inline-block
+  +single-column-template
+  @media only screen and (min-width: 901px)
+    width: 300%
 
 .videoLayout
   display: grid
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index ca32355091660..6cac178681590 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="(isAgeRestricted==false || !hideAgeRestricted) && (isFamilyFriendly==true || !showFamilyFriendlyOnly)"
     class="videoLayout"
     :class="{
       isLoading,
@@ -9,10 +8,13 @@
     }"
   >
     <ft-loader
-      v-if="isLoading"
+      v-if="isLoading && !(isFamilyFriendly==false && showFamilyFriendlyOnly)"
       :fullscreen="true"
     />
-    <div class="videoArea">
+    <div
+      v-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      class="videoArea"
+    >
       <div class="videoAreaMargin">
         <ft-video-player
           v-if="!isLoading && !hidePlayer && !isUpcoming"
@@ -65,7 +67,15 @@
         </div>
       </div>
     </div>
-    <div class="infoArea">
+    <ft-age-restricted
+      v-if="(isFamilyFriendly==false && showFamilyFriendlyOnly)"
+      class="ageRestricted"
+      :content-type-string="'video'"
+    />
+    <div
+      v-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      class="infoArea"
+    >
       <watch-video-info
         v-if="!isLoading"
         :id="videoId"
@@ -115,7 +125,10 @@
         @timestamp-event="changeTimestamp"
       />
     </div>
-    <div class="sidebarArea">
+    <div
+      v-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      class="sidebarArea"
+    >
       <watch-video-live-chat
         v-if="!isLoading && isLive"
         :video-id="videoId"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 44ec71ae2e8d4..4ae28afc2a331 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -659,6 +659,8 @@ Playing Next Video Interval: Playing next video in no time. Click to cancel. | P
 Canceled next video autoplay: Canceled next video autoplay
 'The playlist has ended.  Enable loop to continue playing': 'The playlist has ended.  Enable
   loop to continue playing'
-
+Age Restricted:
+  This video is age restricted: This video is age restricted
+  This channel is age restricted: This channel is age restricted
 Yes: Yes
 No: No

From 698da8a6f343c39d70438d4a0a320b54460a9b0f Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 27 Jun 2021 12:54:33 -0400
Subject: [PATCH 07/22] Hide live streams from Subscriptions + fix hide live
 streams from search

---
 src/renderer/views/Search/Search.js               | 12 +++++-------
 src/renderer/views/Subscriptions/Subscriptions.js |  8 +++++++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 94cb5b5222414..97fd9ed259bd9 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -98,11 +98,7 @@ export default Vue.extend({
 
       if (sameSearch.length > 0) {
         console.log(sameSearch)
-        if (this.hideLiveStreams) {
-          sameSearch[0].data = sameSearch[0].data.filter((obj) => {
-            return (!obj.liveNow && !obj.isUpcoming)
-          })
-        }
+
         // Replacing the data right away causes a strange error where the data
         // Shown is mixed from 2 different search results.  So we'll wait a moment
         // Before showing the results.
@@ -139,7 +135,8 @@ export default Vue.extend({
 
         const returnData = result.items.filter((item) => {
           if (typeof item !== 'undefined') {
-            return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
+            return (item.type === 'video' && ((!item.isLive && !item.isUpcoming) || !this.hideLiveStreams)) ||
+              item.type === 'channel' || item.type === 'playlist'
           }
 
           return null
@@ -249,7 +246,8 @@ export default Vue.extend({
         console.log(result)
 
         const returnData = result.filter((item) => {
-          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
+          return (item.type === 'video' && ((!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams)) ||
+            item.type === 'channel' || item.type === 'playlist'
         })
 
         console.log(returnData)
diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js
index e0b6ae56aa2ae..aeaab62fd010f 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.js
+++ b/src/renderer/views/Subscriptions/Subscriptions.js
@@ -82,6 +82,10 @@ export default Vue.extend({
 
     activeSubscriptionList: function () {
       return this.profileList[this.activeProfile].subscriptions
+    },
+
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
     }
   },
   watch: {
@@ -170,7 +174,9 @@ export default Vue.extend({
           videoList = await Promise.all(videoList.sort((a, b) => {
             return b.publishedDate - a.publishedDate
           }))
-
+          videoList = videoList.filter(item => {
+            return (!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams
+          })
           const profileSubscriptions = {
             activeProfile: this.activeProfile,
             videoList: videoList

From f556dbe084dad81beb4b7803ab5df4eda89c7f17 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Thu, 1 Jul 2021 21:21:11 -0400
Subject: [PATCH 08/22] enable safe search on showFamilyFriendlyOnly

---
 src/renderer/views/Search/Search.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 97fd9ed259bd9..03281dd36ff87 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -41,6 +41,9 @@ export default Vue.extend({
 
     hideLiveStreams: function() {
       return this.$store.getters.getHideLiveStreams
+    },
+    showFamilyFriendlyOnly: function() {
+      return this.$store.getters.getShowFamilyFriendlyOnly
     }
   },
   watch: {
@@ -123,6 +126,8 @@ export default Vue.extend({
         payload.options.pages = 1
       }
 
+      payload.options.safeSearch = this.showFamilyFriendlyOnly
+
       this.ytSearch(payload).then((result) => {
         console.log(result)
         if (!result) {

From 16d9a8580c605d1a37551fbb202f9e55815f6f77 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 5 Jul 2021 16:37:40 -0400
Subject: [PATCH 09/22] Move some settings from parental control to distraction
 free

---
 .../distraction-settings.js                   | 14 ++++++++---
 .../distraction-settings.vue                  | 18 +++++++++++---
 .../parental-control-settings.js              | 20 +++++-----------
 .../parental-control-settings.vue             | 24 +++++--------------
 .../watch-video-info/watch-video-info.js      |  4 ++--
 .../watch-video-info/watch-video-info.vue     |  2 +-
 src/renderer/store/modules/settings.js        |  2 +-
 src/renderer/views/Channel/Channel.js         |  4 ++--
 src/renderer/views/Channel/Channel.vue        |  2 +-
 static/locales/en-US.yaml                     | 11 ++++-----
 10 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 0884844572549..6d92464168b70 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -49,8 +49,14 @@ export default Vue.extend({
     hideDescription: function () {
       return this.$store.getters.getHideDescription
     },
-    hideSearchBar: function () {
-      return this.$store.getters.getHideSearchBar
+    hideComments: function () {
+      return this.$store.getters.getHideComments
+    },
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
+    },
+    hideShare: function() {
+      return this.$store.getters.getHideShare
     }
   },
   methods: {
@@ -76,7 +82,9 @@ export default Vue.extend({
       'updatePlayNextVideo',
       'updateDefaultTheatreMode',
       'updateHideDescription',
-      'updateHideSearchBar'
+      'updateHideComments',
+      'updateHideLiveStreams',
+      'updateHideShare'
     ])
   }
 })
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 75f774d701646..7447bf42f0dda 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -45,6 +45,12 @@
           :default-value="hideDescription"
           @change="updateHideDescription"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Share')"
+          :compact="true"
+          :default-value="hideShare"
+          @change="updateHideShare"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
@@ -78,10 +84,16 @@
           @change="updateHideLiveChat"
         />
         <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Search Bar')"
+          :label="$t('Settings.Distraction Free Settings.Hide Live Streams')"
+          :compact="true"
+          :default-value="hideLiveStreams"
+          @change="updateHideLiveStreams"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Comments')"
           :compact="true"
-          :default-value="hideSearchBar"
-          @change="updateHideSearchBar"
+          :default-value="hideComments"
+          @change="updateHideComments"
         />
       </div>
     </div>
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.js b/src/renderer/components/parental-control-settings/parental-control-settings.js
index ab7c34091cd05..cc29f10e158b2 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.js
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.js
@@ -16,17 +16,11 @@ export default Vue.extend({
     'ft-flex-box': FtFlexBox
   },
   computed: {
-    hideComments: function () {
-      return this.$store.getters.getHideComments
+    hideSearchBar: function () {
+      return this.$store.getters.getHideSearchBar
     },
-    hideLiveStreams: function() {
-      return this.$store.getters.getHideLiveStreams
-    },
-    hideShare: function() {
-      return this.$store.getters.getHideShare
-    },
-    hideUnsubscribe: function() {
-      return this.$store.getters.getHideUnsubscribe
+    hideUnsubscribeButton: function() {
+      return this.$store.getters.getHideUnsubscribeButton
     },
     showFamilyFriendlyOnly: function() {
       return this.$store.getters.getShowFamilyFriendlyOnly
@@ -34,10 +28,8 @@ export default Vue.extend({
   },
   methods: {
     ...mapActions([
-      'updateHideComments',
-      'updateHideLiveStreams',
-      'updateHideShare',
-      'updateHideUnsubscribe',
+      'updateHideSearchBar',
+      'updateHideUnsubscribeButton',
       'updateShowFamilyFriendlyOnly'
     ])
   }
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.vue b/src/renderer/components/parental-control-settings/parental-control-settings.vue
index 0f7916c56c701..5bf1f0417dc16 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.vue
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.vue
@@ -10,16 +10,10 @@
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Hide Unsubscribe')"
+          :label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
           :compact="true"
-          :default-value="hideUnsubscribe"
-          @change="updateHideUnsubscribe"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Hide Live Streams')"
-          :compact="true"
-          :default-value="hideLiveStreams"
-          @change="updateHideLiveStreams"
+          :default-value="hideUnsubscribeButton"
+          @change="updateHideUnsubscribeButton"
         />
         <ft-toggle-switch
           :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
@@ -30,16 +24,10 @@
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Hide Comments')"
-          :compact="true"
-          :default-value="hideComments"
-          @change="updateHideComments"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Hide Share')"
+          :label="$t('Settings.Parental Control Settings.Hide Search Bar')"
           :compact="true"
-          :default-value="hideShare"
-          @change="updateHideShare"
+          :default-value="hideSearchBar"
+          @change="updateHideSearchBar"
         />
       </div>
     </div>
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index b5632b9c0fd0a..19acb31e441ba 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -134,8 +134,8 @@ export default Vue.extend({
       return this.$store.getters.getHideShare
     },
 
-    hideUnsubscribe: function() {
-      return this.$store.getters.getHideUnsubscribe
+    hideUnsubscribeButton: function() {
+      return this.$store.getters.getHideUnsubscribeButton
     },
 
     profileList: function () {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 98327f03bee79..95fcda24400d5 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -27,7 +27,7 @@
               {{ channelName }}
             </div>
             <ft-button
-              v-if="!hideUnsubscribe"
+              v-if="!hideUnsubscribeButton"
               :label="subscribedText"
               class="subscribeButton"
               background-color="var(--primary-color)"
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 122cfd00ab41f..8d8bfe83d841c 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -196,7 +196,7 @@ const state = {
   hideSearchBar: false,
   hideShare: false,
   hideTrendingVideos: false,
-  hideUnsubscribe: false,
+  hideUnsubscribeButton: false,
   hideVideoLikesAndDislikes: false,
   hideVideoViews: false,
   hideWatchedSubs: false,
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 18bf0abd3045a..c26b1377081b2 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -76,8 +76,8 @@ export default Vue.extend({
       return this.$store.getters.getBackendFallback
     },
 
-    hideUnsubscribe: function() {
-      return this.$store.getters.getHideUnsubscribe
+    hideUnsubscribeButton: function() {
+      return this.$store.getters.getHideUnsubscribeButton
     },
 
     showFamilyFriendlyOnly: function() {
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index a43c8c24d8112..6715b8eaecde9 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -41,7 +41,7 @@
           </span>
         </div>
         <ft-button
-          v-if="!hideUnsubscribe"
+          v-if="!hideUnsubscribeButton"
           :label="subscribedText"
           background-color="var(--primary-color)"
           text-color="var(--text-with-main-color)"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 5c75256b19533..108fa0b2a8909 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -241,7 +241,9 @@ Settings:
     Hide Live Chat: Hide Live Chat
     Hide Active Subscriptions: Hide Active Subscriptions
     Hide Description: Hide Description
-    Hide Search Bar: Hide Search Bar
+    Hide Comments: Hide Comments
+    Hide Live Streams: Hide Live Streams
+    Hide Share: Hide Share
   Data Settings:
     Data Settings: Data Settings
     Select Import Type: Select Import Type
@@ -302,12 +304,9 @@ Settings:
     Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
   Parental Control Settings:
     Parental Control Settings: Parental Control Settings
-    Hide Comments: Hide Comments
-    Hide Live Streams: Hide Live Streams
-    Hide Share: Hide Share
-    Hide Unsubscribe: Hide Unsubscribe
+    Hide Unsubscribe Button: Hide Unsubscribe Button
     Show Family Friendly Only: Show Family Friendly Only
-    Hide Age Restricted: Hide Age Restricted
+    Hide Search Bar: Hide Search Bar
 About:
   #On About page
   About: About

From b63d679987ff4e5b98da443066e47867aad15a92 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Thu, 19 Aug 2021 19:18:38 -0400
Subject: [PATCH 10/22] fix channel loading

---
 src/renderer/views/Channel/Channel.js  | 2 +-
 src/renderer/views/Channel/Channel.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index ad063038a136d..f13ca7bfca188 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -51,7 +51,7 @@ export default Vue.extend({
       searchResults: [],
       shownElementList: [],
       apiUsed: '',
-      isFamilyFriendly: true,
+      isFamilyFriendly: false,
       videoSelectValues: [
         'newest',
         'oldest',
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 6715b8eaecde9..81c59172e9f9e 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -3,7 +3,7 @@
     ref="search"
   >
     <ft-loader
-      v-if="isLoading && (isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      v-if="isLoading"
       :fullscreen="true"
     />
     <ft-card
@@ -180,7 +180,7 @@
       </div>
     </ft-card>
     <ft-age-restricted
-      v-if="(isFamilyFriendly==false && showFamilyFriendlyOnly)"
+      v-if="!isLoading && (isFamilyFriendly==false && showFamilyFriendlyOnly)"
       class="ageRestricted"
       :content-type-string="'channel'"
     />

From ce2d890f690a300efd03f41885d19ef785e684dc Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Wed, 15 Sep 2021 19:12:40 -0400
Subject: [PATCH 11/22] make parental control settings collapsible

---
 .../parental-control-settings.vue               | 17 ++++++++---------
 src/renderer/views/Settings/Settings.vue        |  3 ++-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.vue b/src/renderer/components/parental-control-settings/parental-control-settings.vue
index 5bf1f0417dc16..2ae9d0376cb41 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.vue
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Parental Control Settings.Parental Control Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Parental Control Settings.Parental Control Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -31,7 +30,7 @@
         />
       </div>
     </div>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./parental-control-settings.js" />
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 864f858e169d4..851a8b9948ed9 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -19,7 +19,8 @@
     <proxy-settings />
     <hr>
     <sponsor-block-settings />
-    <parental-control-settings/>
+    <hr>
+    <parental-control-settings />
   </div>
 </template>
 

From a7aada8443dc7eb4c48f0293309c55e21a09e403 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 3 Oct 2021 14:32:16 -0400
Subject: [PATCH 12/22] fix lint

---
 src/renderer/components/watch-video-info/watch-video-info.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index f41ac620d1218..db7f38ade1b47 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -137,7 +137,7 @@ export default Vue.extend({
     hideUnsubscribeButton: function() {
       return this.$store.getters.getHideUnsubscribeButton
     },
-      
+
     currentLocale: function () {
       return this.$store.getters.getCurrentLocale
     },

From 79701b4ca0be9bff3b363da0121bff7e18e6363a Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 11 Oct 2021 19:25:44 -0400
Subject: [PATCH 13/22] dont show age restricted on videos that are loading

---
 .../ft-age-restricted/ft-age-restricted.sass           |  6 +++---
 src/renderer/views/Watch/Watch.vue                     | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.sass b/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
index 142f9b63a3cf6..485a920b4546d 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
@@ -1,14 +1,14 @@
 .ft-age-restricted
-  color: #FFFFFF
+  color: var(--primary-text-color)
   h2
     width: 100%
     text-align: center
-    background-color: rgba(0, 0, 0, 0.7)
+    background-color: var(--card-bg-color)
     padding: 10px 0
   .frown
     width: 100%
     text-align: center
-    background-color: rgba(0, 0, 0, 0.7)
+    background-color: var(--card-bg-color)
     font-size: 10em
     padding: 20px 0
     height: 100%
\ No newline at end of file
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index eda4d6708b6af..e9ce50fee43f4 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -8,11 +8,11 @@
     }"
   >
     <ft-loader
-      v-if="isLoading && !(isFamilyFriendly==false && showFamilyFriendlyOnly)"
+      v-if="isLoading"
       :fullscreen="true"
     />
     <div
-      v-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      v-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
       class="videoArea"
     >
       <div class="videoAreaMargin">
@@ -68,12 +68,12 @@
       </div>
     </div>
     <ft-age-restricted
-      v-if="(isFamilyFriendly==false && showFamilyFriendlyOnly)"
+      v-if="(!isLoading && !isFamilyFriendly && showFamilyFriendlyOnly)"
       class="ageRestricted"
       :content-type-string="'video'"
     />
     <div
-      v-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      v-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
       class="infoArea"
     >
       <watch-video-info
@@ -125,7 +125,7 @@
       />
     </div>
     <div
-      v-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      v-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
       class="sidebarArea"
     >
       <watch-video-live-chat

From c1475ec9b95c835fff5ddecc2a6a9104aa25e7b0 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 11 Oct 2021 21:34:17 -0400
Subject: [PATCH 14/22] improve hide live videos

---
 .../ft-list-lazy-wrapper/ft-list-lazy-wrapper.js          | 5 +++++
 .../ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue         | 2 +-
 src/renderer/components/ft-list-video/ft-list-video.vue   | 6 ------
 src/renderer/views/Search/Search.js                       | 6 ++----
 src/renderer/views/Subscriptions/Subscriptions.js         | 8 +++++---
 src/renderer/views/Watch/Watch.js                         | 3 +++
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
index 5ff6c2f7513cb..237ce32a4e56b 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
@@ -33,6 +33,11 @@ export default Vue.extend({
       visible: this.firstScreen
     }
   },
+  computed: {
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
+    }
+  },
   methods: {
     onVisibilityChanged: function (visible) {
       this.visible = visible
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
index 540f50ad7bb83..48f7057aa49bb 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="data.type !== undefined"
+    v-if="data.type !== undefined && (data.type === 'video' ? ((!data.liveNow && (data.lengthSeconds != null)) || (!hideLiveStreams)) : true)"
     v-observe-visibility="firstScreen ? false : {
       callback: onVisibilityChanged,
       once: true,
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index bb2880a1154d9..625ef3b8e4937 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="(!isLive && duration !== '0:00') || (!hideLiveStreams)"
     class="ft-list-video ft-list-item"
     :class="{
       list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
@@ -118,11 +117,6 @@
       </p>
     </div>
   </div>
-  <div
-    v-else
-  >
-    Live Streams are hidden
-  </div>
 </template>
 
 <script src="./ft-list-video.js" />
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 03281dd36ff87..49509339d186a 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -140,8 +140,7 @@ export default Vue.extend({
 
         const returnData = result.items.filter((item) => {
           if (typeof item !== 'undefined') {
-            return (item.type === 'video' && ((!item.isLive && !item.isUpcoming) || !this.hideLiveStreams)) ||
-              item.type === 'channel' || item.type === 'playlist'
+            return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
           }
 
           return null
@@ -251,8 +250,7 @@ export default Vue.extend({
         console.log(result)
 
         const returnData = result.filter((item) => {
-          return (item.type === 'video' && ((!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams)) ||
-            item.type === 'channel' || item.type === 'playlist'
+          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
         })
 
         console.log(returnData)
diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js
index 4fe522c24fa24..3f9b2257801bb 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.js
+++ b/src/renderer/views/Subscriptions/Subscriptions.js
@@ -174,9 +174,11 @@ export default Vue.extend({
           videoList = await Promise.all(videoList.sort((a, b) => {
             return b.publishedDate - a.publishedDate
           }))
-          videoList = videoList.filter(item => {
-            return (!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams
-          })
+          if (this.hideLiveStreams) {
+            videoList = videoList.filter(item => {
+              return (!item.liveNow && !item.isUpcoming)
+            })
+          }
           const profileSubscriptions = {
             activeProfile: this.activeProfile,
             videoList: videoList
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index ab2a94621a77c..5b53dc7c32208 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -285,6 +285,7 @@ export default Vue.extend({
               this.thumbnail = result.videoDetails.thumbnails[result.videoDetails.thumbnails.length - 1].url
               break
           }
+
           this.isFamilyFriendly = result.videoDetails.isFamilySafe
           this.recommendedVideos = result.related_videos.map((video) => {
             video.videoId = video.id
@@ -531,6 +532,7 @@ export default Vue.extend({
       this.invidiousGetVideoInformation(this.videoId)
         .then(result => {
           console.log(result)
+
           if (result.error) {
             throw new Error(result.error)
           }
@@ -732,6 +734,7 @@ export default Vue.extend({
       })
 
       console.log(historyIndex)
+
       if (this.$refs.videoPlayer === undefined) {
         return false
       }

From 4fea7a3ad0aa0d288ea5f85b74f80d51b577e889 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 11 Oct 2021 21:51:57 -0400
Subject: [PATCH 15/22] code refactor

---
 .../components/ft-age-restricted/ft-age-restricted.vue   | 4 +++-
 .../parental-control-settings.js                         | 2 +-
 src/renderer/views/Trending/Trending.js                  | 9 ++-------
 src/renderer/views/Watch/Watch.js                        | 7 ++-----
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
index 0db0555392c7a..88943ae820389 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
@@ -2,7 +2,9 @@
   <div
     class="ft-age-restricted"
   >
-    <h2 v-html="$t('Age Restricted.This '+contentTypeString+' is age restricted')" />
+    <h2>
+      {{ $t('Age Restricted.This '+contentTypeString+' is age restricted') }}
+    </h2>
     <div class="frown">
       {{ emoji }}
     </div>
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.js b/src/renderer/components/parental-control-settings/parental-control-settings.js
index cc29f10e158b2..d5e1b0878c8e1 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.js
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.js
@@ -7,7 +7,7 @@ import FtSelect from '../ft-select/ft-select.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
 export default Vue.extend({
-  name: 'PlayerSettings',
+  name: 'ParentalControlSettings',
   components: {
     'ft-card': FtCard,
     'ft-toggle-switch': FtToggleSwitch,
diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
index 659ba793599fa..fa17c6920b88f 100644
--- a/src/renderer/views/Trending/Trending.js
+++ b/src/renderer/views/Trending/Trending.js
@@ -49,9 +49,6 @@ export default Vue.extend({
     },
     trendingCache () {
       return this.$store.getters.getTrendingCache
-    },
-    hideLiveStreams: function() {
-      return this.$store.getters.getHideLiveStreams
     }
   },
   mounted: function () {
@@ -125,8 +122,7 @@ export default Vue.extend({
 
       ytrend.scrape_trending_page(param).then((result) => {
         const returnData = result.filter((item) => {
-          return (item.type === 'video' && ((!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams)) ||
-            item.type === 'channel' || item.type === 'playlist'
+          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
         })
 
         this.shownResults = returnData
@@ -176,8 +172,7 @@ export default Vue.extend({
         console.log(result)
 
         const returnData = result.filter((item) => {
-          return (item.type === 'video' && ((!item.liveNow && !item.isUpcoming) || !this.hideLiveStreams)) ||
-            item.type === 'channel' || item.type === 'playlist'
+          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
         })
 
         this.shownResults = returnData
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 5b53dc7c32208..71e2a07d18b40 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -714,7 +714,7 @@ export default Vue.extend({
     },
 
     handleWatchProgress: function () {
-      if (this.rememberHistory && !this.isUpcoming && !this.isLoading && !this.isLive && this.$refs.videoPlayer !== undefined) {
+      if (this.rememberHistory && !this.isUpcoming && !this.isLoading && !this.isLive) {
         const player = this.$refs.videoPlayer.player
 
         if (player !== null && this.saveWatchedProgress) {
@@ -735,9 +735,6 @@ export default Vue.extend({
 
       console.log(historyIndex)
 
-      if (this.$refs.videoPlayer === undefined) {
-        return false
-      }
       if (!this.isLive) {
         if (this.timestamp) {
           if (this.timestamp < 0) {
@@ -950,7 +947,7 @@ export default Vue.extend({
 
       this.handleWatchProgress()
 
-      if (!this.isUpcoming && !this.isLoading && this.$refs.videoPlayer !== undefined) {
+      if (!this.isUpcoming && !this.isLoading) {
         const player = this.$refs.videoPlayer.player
 
         if (player !== null && !player.paused() && player.isInPictureInPicture()) {

From e19675e9dad5aaa34d6f0072e4fc42ce6237ceb9 Mon Sep 17 00:00:00 2001
From: peepopoggers <72892531+peepopoggers@users.noreply.github.com>
Date: Tue, 12 Oct 2021 08:33:11 +0100
Subject: [PATCH 16/22] grammar

---
 src/renderer/components/ft-age-restricted/ft-age-restricted.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
index 88943ae820389..f88c7bc8dce41 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
@@ -3,7 +3,7 @@
     class="ft-age-restricted"
   >
     <h2>
-      {{ $t('Age Restricted.This '+contentTypeString+' is age restricted') }}
+      {{ $t('Age Restricted. This '+contentTypeString+' is age restricted') }}
     </h2>
     <div class="frown">
       {{ emoji }}

From b7a566e546330374524cb6fc8533b6d5b61a417d Mon Sep 17 00:00:00 2001
From: peepopoggers <72892531+peepopoggers@users.noreply.github.com>
Date: Tue, 12 Oct 2021 08:34:06 +0100
Subject: [PATCH 17/22] nvm im dumb

---
 src/renderer/components/ft-age-restricted/ft-age-restricted.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
index f88c7bc8dce41..88943ae820389 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
@@ -3,7 +3,7 @@
     class="ft-age-restricted"
   >
     <h2>
-      {{ $t('Age Restricted. This '+contentTypeString+' is age restricted') }}
+      {{ $t('Age Restricted.This '+contentTypeString+' is age restricted') }}
     </h2>
     <div class="frown">
       {{ emoji }}

From ad7cae83adedf536ad96065b7ef44b24a006c4e3 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sat, 6 Nov 2021 09:48:05 -0400
Subject: [PATCH 18/22] use named placeholder for age restricted message

---
 .../components/ft-age-restricted/ft-age-restricted.js      | 5 +++++
 .../components/ft-age-restricted/ft-age-restricted.sass    | 2 +-
 .../components/ft-age-restricted/ft-age-restricted.vue     | 2 +-
 src/renderer/views/Channel/Channel.vue                     | 2 +-
 src/renderer/views/Watch/Watch.vue                         | 2 +-
 static/locales/en-US.yaml                                  | 7 +++++--
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.js b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
index 11aa5c93d9866..f97a2c1edf454 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.js
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
@@ -12,6 +12,11 @@ export default Vue.extend({
     emoji: function () {
       const emojis = ['😵', '😦', '🙁', '☹️', '😦', '🤫', '😕']
       return emojis[Math.floor(Math.random() * emojis.length)]
+    },
+
+    restrictedMessage: function () {
+      const contentType = this.$('Age Restricted.Type.' + this.contentTypeString)
+      return this.$t('Age Restricted.This $contentType is age restricted').replace('$contentType', contentType)
     }
   }
 })
diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.sass b/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
index 485a920b4546d..58d44107401fc 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.sass
@@ -11,4 +11,4 @@
     background-color: var(--card-bg-color)
     font-size: 10em
     padding: 20px 0
-    height: 100%
\ No newline at end of file
+    height: 100%
diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
index 88943ae820389..abc2eac85c259 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.vue
@@ -3,7 +3,7 @@
     class="ft-age-restricted"
   >
     <h2>
-      {{ $t('Age Restricted.This '+contentTypeString+' is age restricted') }}
+      {{ restrictedMessage }}
     </h2>
     <div class="frown">
       {{ emoji }}
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index e4f6bfd0a21f4..ad5d98fb285b1 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -198,7 +198,7 @@
     <ft-age-restricted
       v-if="!isLoading && (isFamilyFriendly==false && showFamilyFriendlyOnly)"
       class="ageRestricted"
-      :content-type-string="'channel'"
+      :content-type-string="'Channel'"
     />
   </div>
 </template>
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index e9ce50fee43f4..6442c55fbff29 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -70,7 +70,7 @@
     <ft-age-restricted
       v-if="(!isLoading && !isFamilyFriendly && showFamilyFriendlyOnly)"
       class="ageRestricted"
-      :content-type-string="'video'"
+      :content-type-string="'Video'"
     />
     <div
       v-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 0526dd8ece9fa..e9c069692f605 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -696,8 +696,11 @@ Default Invidious instance has been cleared: Default Invidious instance has been
 'The playlist has ended.  Enable loop to continue playing': 'The playlist has ended.  Enable
   loop to continue playing'
 Age Restricted:
-  This video is age restricted: This video is age restricted
-  This channel is age restricted: This channel is age restricted
+  # $contentType is replaced with video or channel
+  This $contentType is age restricted: This $ is age restricted
+  Type:
+    Channel: Channel
+    Video: Video
 External link opening has been disabled in the general settings: 'External link opening has been disabled in the general settings'
 Yes: Yes
 No: No

From 98357a2f927fc19e8a08ba32625d186bbed4722d Mon Sep 17 00:00:00 2001
From: RadmoreCameron <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 31 Jan 2022 11:46:00 -0500
Subject: [PATCH 19/22] improve readability

---
 src/renderer/views/Channel/Channel.vue   | 6 +++---
 src/renderer/views/Settings/Settings.js  | 2 +-
 src/renderer/views/Settings/Settings.vue | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index ad5d98fb285b1..22c8bb3b00f01 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -7,7 +7,7 @@
       :fullscreen="true"
     />
     <ft-card
-      v-else-if="(isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
       class="card"
     >
       <img
@@ -113,7 +113,7 @@
       </div>
     </ft-card>
     <ft-card
-      v-if="!isLoading && (isFamilyFriendly==true || !showFamilyFriendlyOnly)"
+      v-if="!isLoading && (isFamilyFriendly || !showFamilyFriendlyOnly)"
       class="card"
     >
       <div
@@ -196,7 +196,7 @@
       </div>
     </ft-card>
     <ft-age-restricted
-      v-if="!isLoading && (isFamilyFriendly==false && showFamilyFriendlyOnly)"
+      v-if="!isLoading && (!isFamilyFriendly && showFamilyFriendlyOnly)"
       class="ageRestricted"
       :content-type-string="'Channel'"
     />
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 8addb877532ec..6cef643f752cf 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -29,7 +29,7 @@ export default Vue.extend({
     'distraction-settings': DistractionSettings,
     'proxy-settings': ProxySettings,
     'sponsor-block-settings': SponsorBlockSettings,
-    'download-settings': DownloadSettings
+    'download-settings': DownloadSettings,
     'parental-control-settings': ParentControlSettings
   },
   computed: {
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 329e8b1896563..0039eeacdc702 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -20,9 +20,9 @@
     <hr>
     <download-settings v-if="usingElectron" />
     <hr>
-    <sponsor-block-settings />
-    <hr>
     <parental-control-settings />
+    <hr>
+    <sponsor-block-settings />
   </div>
 </template>
 

From 3457a5e4acd373e5d0542f2ca20e67166e80eecc Mon Sep 17 00:00:00 2001
From: onion chunky <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 6 Jun 2022 15:19:30 -0400
Subject: [PATCH 20/22] change Hide Description to Hide Video Description

---
 static/locales/en-US.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index f252f539b34c0..ed9c50d18c7c5 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -288,7 +288,7 @@ Settings:
     Hide Playlists: Hide Playlists
     Hide Live Chat: Hide Live Chat
     Hide Active Subscriptions: Hide Active Subscriptions
-    Hide Description: Hide Description
+    Hide Description: Hide Video Description
     Hide Comments: Hide Comments
     Hide Live Streams: Hide Live Streams
     Hide Share: Hide Share

From 519fdf62b284d1736c7c9a8e6530405b23ea0c81 Mon Sep 17 00:00:00 2001
From: onion chunky <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Wed, 15 Jun 2022 07:04:38 -0400
Subject: [PATCH 21/22] update translated strings

---
 .../distraction-settings/distraction-settings.js     | 12 ++++++------
 .../distraction-settings/distraction-settings.vue    | 12 ++++++------
 .../components/ft-list-video/ft-list-video.js        |  6 +++---
 .../components/playlist-info/playlist-info.js        |  4 ++--
 .../components/playlist-info/playlist-info.vue       |  2 +-
 .../components/watch-video-info/watch-video-info.js  |  4 ++--
 .../components/watch-video-info/watch-video-info.vue |  2 +-
 src/renderer/store/modules/settings.js               |  4 ++--
 src/renderer/views/Watch/Watch.js                    |  4 ++--
 src/renderer/views/Watch/Watch.vue                   |  2 +-
 static/locales/en-US.yaml                            |  4 ++--
 11 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 6d92464168b70..891cf70215501 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -46,8 +46,8 @@ export default Vue.extend({
     hideActiveSubscriptions: function () {
       return this.$store.getters.getHideActiveSubscriptions
     },
-    hideDescription: function () {
-      return this.$store.getters.getHideDescription
+    hideVideoDescription: function () {
+      return this.$store.getters.getHideVideoDescription
     },
     hideComments: function () {
       return this.$store.getters.getHideComments
@@ -55,8 +55,8 @@ export default Vue.extend({
     hideLiveStreams: function() {
       return this.$store.getters.getHideLiveStreams
     },
-    hideShare: function() {
-      return this.$store.getters.getHideShare
+    hideSharingActions: function() {
+      return this.$store.getters.getHideSharingActions
     }
   },
   methods: {
@@ -81,10 +81,10 @@ export default Vue.extend({
       'updateHideActiveSubscriptions',
       'updatePlayNextVideo',
       'updateDefaultTheatreMode',
-      'updateHideDescription',
+      'updateHideVideoDescription',
       'updateHideComments',
       'updateHideLiveStreams',
-      'updateHideShare'
+      'updateHideSharingActions'
     ])
   }
 })
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index afd566acaa1b4..4c59582d6f222 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -39,16 +39,16 @@
           @change="updateHideActiveSubscriptions"
         />
         <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Description')"
+          :label="$t('Settings.Distraction Free Settings.Hide Video Description')"
           :compact="true"
-          :default-value="hideDescription"
-          @change="updateHideDescription"
+          :default-value="hideVideoDescription"
+          @change="updateHideVideoDescription"
         />
         <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Hide Share')"
+          :label="$t('Settings.Distraction Free Settings.Hide Sharing Actions')"
           :compact="true"
-          :default-value="hideShare"
-          @change="updateHideShare"
+          :default-value="hideSharingActions"
+          @change="updateHideSharingActions"
         />
       </div>
       <div class="switchColumn">
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 3367451fe9040..764175010774f 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -117,8 +117,8 @@ export default Vue.extend({
       return (this.watchProgress / this.data.lengthSeconds) * 100
     },
 
-    hideShare: function() {
-      return this.$store.getters.getHideShare
+    hideSharingActions: function() {
+      return this.$store.getters.getHideSharingActions
     },
 
     dropdownOptions: function () {
@@ -131,7 +131,7 @@ export default Vue.extend({
           value: 'history'
         }
       )
-      if (!this.hideShare) {
+      if (!this.hideSharingActions) {
         options.push(
           {
             type: 'divider'
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index d95e84158c89f..f6edc105c7d3b 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -35,8 +35,8 @@ export default Vue.extend({
     }
   },
   computed: {
-    hideShare: function() {
-      return this.$store.getters.getHideShare
+    hideSharingActions: function() {
+      return this.$store.getters.getHideSharingActions
     },
 
     currentInvidiousInstance: function () {
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index 2332350d7d6f2..b3361cd030882 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -47,7 +47,7 @@
     <br>
 
     <ft-list-dropdown
-      v-if="!hideShare"
+      v-if="!hideSharingActions"
       :title="$t('Playlist.Share Playlist.Share Playlist')"
       :label-names="shareHeaders"
       :label-values="shareValues"
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 6f33522d432b4..b28fea27e9807 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -126,8 +126,8 @@ export default Vue.extend({
       return this.$store.getters.getCurrentInvidiousInstance
     },
 
-    hideShare: function() {
-      return this.$store.getters.getHideShare
+    hideSharingActions: function() {
+      return this.$store.getters.getHideSharingActions
     },
 
     hideUnsubscribeButton: function() {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index c2bc28d997631..da6cc05230891 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -114,7 +114,7 @@
           @click="handleFormatChange"
         />
         <ft-share-button
-          v-if="!hideShare"
+          v-if="!hideSharingActions"
           :id="id"
           :get-timestamp="getTimestamp"
           :playlist-id="playlistId"
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 974efdbf10597..2d5011ed839b9 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -193,14 +193,14 @@ const state = {
   hideChannelSubscriptions: false,
   hideCommentLikes: false,
   hideComments: false,
-  hideDescription: false,
+  hideVideoDescription: false,
   hideLiveChat: false,
   hideLiveStreams: false,
   hidePlaylists: false,
   hidePopularVideos: false,
   hideRecommendedVideos: false,
   hideSearchBar: false,
-  hideShare: false,
+  hideSharingActions: false,
   hideTrendingVideos: false,
   hideUnsubscribeButton: false,
   hideVideoLikesAndDislikes: false,
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 6d470ee140715..1be8ebb95dbeb 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -140,8 +140,8 @@ export default Vue.extend({
     hideComments: function () {
       return this.$store.getters.getHideComments
     },
-    hideDescription: function () {
-      return this.$store.getters.getHideDescription
+    hideVideoDescription: function () {
+      return this.$store.getters.getHideVideoDescription
     },
     showFamilyFriendlyOnly: function() {
       return this.$store.getters.getShowFamilyFriendlyOnly
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 960024f5df2a3..db724a5f04c38 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -107,7 +107,7 @@
         @pause-player="pausePlayer"
       />
       <watch-video-description
-        v-if="!isLoading && !hideDescription"
+        v-if="!isLoading && !hideVideoDescription"
         :published="videoPublished"
         :description="videoDescription"
         :description-html="videoDescriptionHtml"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index ed9c50d18c7c5..35a7d97e6321a 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -288,10 +288,10 @@ Settings:
     Hide Playlists: Hide Playlists
     Hide Live Chat: Hide Live Chat
     Hide Active Subscriptions: Hide Active Subscriptions
-    Hide Description: Hide Video Description
+    Hide Video Description: Hide Video Description
     Hide Comments: Hide Comments
     Hide Live Streams: Hide Live Streams
-    Hide Share: Hide Share
+    Hide Sharing Actions: Hide Sharing Actions
   Data Settings:
     Data Settings: Data Settings
     Select Import Type: Select Import Type

From 342995f9585adb48bd9ce1a3c4177add58da64f0 Mon Sep 17 00:00:00 2001
From: onion chunky <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 20 Jun 2022 14:58:10 -0400
Subject: [PATCH 22/22] fix age restricted component

---
 src/renderer/components/ft-age-restricted/ft-age-restricted.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.js b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
index f97a2c1edf454..5769012b54a86 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.js
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
@@ -15,7 +15,7 @@ export default Vue.extend({
     },
 
     restrictedMessage: function () {
-      const contentType = this.$('Age Restricted.Type.' + this.contentTypeString)
+      const contentType = this.$t('Age Restricted.Type.' + this.contentTypeString)
       return this.$t('Age Restricted.This $contentType is age restricted').replace('$contentType', contentType)
     }
   }