Add Parental Controls

src/renderer/components/distraction-settings/distraction-settings.js

@@ -45,6 +45,18 @@ export default Vue.extend({
     },
     hideActiveSubscriptions: function () {
       return this.$store.getters.getHideActiveSubscriptions
+    },
+    hideVideoDescription: function () {
+      return this.$store.getters.getHideVideoDescription
+    },
+    hideComments: function () {
+      return this.$store.getters.getHideComments
+    },
+    hideLiveStreams: function() {
+      return this.$store.getters.getHideLiveStreams
+    },
+    hideSharingActions: function() {
+      return this.$store.getters.getHideSharingActions
     }
   },
   methods: {
@@ -68,7 +80,11 @@ export default Vue.extend({
       'updateHideLiveChat',
       'updateHideActiveSubscriptions',
       'updatePlayNextVideo',
-      'updateDefaultTheatreMode'
+      'updateDefaultTheatreMode',
+      'updateHideVideoDescription',
+      'updateHideComments',
+      'updateHideLiveStreams',
+      'updateHideSharingActions'
     ])
   }
 })

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -38,6 +38,18 @@
           :default-value="hideActiveSubscriptions"
           @change="updateHideActiveSubscriptions"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Video Description')"
+          :compact="true"
+          :default-value="hideVideoDescription"
+          @change="updateHideVideoDescription"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Sharing Actions')"
+          :compact="true"
+          :default-value="hideSharingActions"
+          @change="updateHideSharingActions"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
@@ -70,6 +82,18 @@
           :default-value="hideLiveChat"
           @change="updateHideLiveChat"
         />
+        <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 Comments')"
+          :compact="true"
+          :default-value="hideComments"
+          @change="updateHideComments"
+        />
       </div>
     </div>
     <br>

src/renderer/components/ft-age-restricted/ft-age-restricted.js

@@ -0,0 +1,22 @@
+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)]
+    },
+
+    restrictedMessage: function () {
+      const contentType = this.$t('Age Restricted.Type.' + this.contentTypeString)
+      return this.$t('Age Restricted.This $contentType is age restricted').replace('$contentType', contentType)
+    }
+  }
+})

src/renderer/components/ft-age-restricted/ft-age-restricted.sass

@@ -0,0 +1,14 @@
+.ft-age-restricted
+  color: var(--primary-text-color)
+  h2
+    width: 100%
+    text-align: center
+    background-color: var(--card-bg-color)
+    padding: 10px 0
+  .frown
+    width: 100%
+    text-align: center
+    background-color: var(--card-bg-color)
+    font-size: 10em
+    padding: 20px 0
+    height: 100%

src/renderer/components/ft-age-restricted/ft-age-restricted.vue

@@ -0,0 +1,15 @@
+<template>
+  <div
+    class="ft-age-restricted"
+  >
+    <h2>
+      {{ restrictedMessage }}
+    </h2>
+    <div class="frown">
+      {{ emoji }}
+    </div>
+  </div>
+</template>
+
+<script src="./ft-age-restricted.js" />
+<style scoped lang="sass" src="./ft-age-restricted.sass" />

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

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="data.type !== undefined && (data.type === 'video' ? ((!data.liveNow && (data.lengthSeconds != null)) || (!hideLiveStreams)) : true)"
     v-observe-visibility="firstScreen ? false : {
       callback: onVisibilityChanged,
       once: true,

src/renderer/components/ft-list-video/ft-list-video.js

@@ -117,69 +117,76 @@ export default Vue.extend({
       return (this.watchProgress / this.data.lengthSeconds) * 100
     },
 
+    hideSharingActions: function() {
+      return this.$store.getters.getHideSharingActions
+    },
+
     dropdownOptions: function () {
       const options = []
-
       options.push(
         {
           label: this.watched
             ? this.$t('Video.Remove From History')
             : this.$t('Video.Mark As Watched'),
           value: 'history'
-        },
-        {
-          type: 'divider'
-        },
-        {
-          label: this.$t('Video.Copy YouTube Link'),
-          value: 'copyYoutube'
-        },
-        {
-          label: this.$t('Video.Copy YouTube Embedded Player Link'),
-          value: 'copyYoutubeEmbed'
-        },
-        {
-          label: this.$t('Video.Copy Invidious Link'),
-          value: 'copyInvidious'
-        },
-        {
-          type: 'divider'
-        },
-        {
-          label: this.$t('Video.Open in YouTube'),
-          value: 'openYoutube'
-        },
-        {
-          label: this.$t('Video.Open YouTube Embedded Player'),
-          value: 'openYoutubeEmbed'
-        },
-        {
-          label: this.$t('Video.Open in Invidious'),
-          value: 'openInvidious'
-        },
-        {
-          type: 'divider'
-        },
-        {
-          label: this.$t('Video.Copy YouTube Channel Link'),
-          value: 'copyYoutubeChannel'
-        },
-        {
-          label: this.$t('Video.Copy Invidious Channel Link'),
-          value: 'copyInvidiousChannel'
-        },
-        {
-          type: 'divider'
-        },
-        {
-          label: this.$t('Video.Open Channel in YouTube'),
-          value: 'openYoutubeChannel'
-        },
-        {
-          label: this.$t('Video.Open Channel in Invidious'),
-          value: 'openInvidiousChannel'
         }
       )
+      if (!this.hideSharingActions) {
+        options.push(
+          {
+            type: 'divider'
+          },
+          {
+            label: this.$t('Video.Copy YouTube Link'),
+            value: 'copyYoutube'
+          },
+          {
+            label: this.$t('Video.Copy YouTube Embedded Player Link'),
+            value: 'copyYoutubeEmbed'
+          },
+          {
+            label: this.$t('Video.Copy Invidious Link'),
+            value: 'copyInvidious'
+          },
+          {
+            type: 'divider'
+          },
+          {
+            label: this.$t('Video.Open in YouTube'),
+            value: 'openYoutube'
+          },
+          {
+            label: this.$t('Video.Open YouTube Embedded Player'),
+            value: 'openYoutubeEmbed'
+          },
+          {
+            label: this.$t('Video.Open in Invidious'),
+            value: 'openInvidious'
+          },
+          {
+            type: 'divider'
+          },
+          {
+            label: this.$t('Video.Copy YouTube Channel Link'),
+            value: 'copyYoutubeChannel'
+          },
+          {
+            label: this.$t('Video.Copy Invidious Channel Link'),
+            value: 'copyInvidiousChannel'
+          },
+          {
+            type: 'divider'
+          },
+          {
+            label: this.$t('Video.Open Channel in YouTube'),
+            value: 'openYoutubeChannel'
+          },
+          {
+            label: this.$t('Video.Open Channel in Invidious'),
+            value: 'openInvidiousChannel'
+          }
+        )
+      }
 
       return options
     },
@@ -203,6 +210,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
     },

src/renderer/components/parental-control-settings/parental-control-settings.js

@@ -0,0 +1,36 @@
+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: 'ParentalControlSettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-button': FtButton,
+    'ft-select': FtSelect,
+    'ft-flex-box': FtFlexBox
+  },
+  computed: {
+    hideSearchBar: function () {
+      return this.$store.getters.getHideSearchBar
+    },
+    hideUnsubscribeButton: function() {
+      return this.$store.getters.getHideUnsubscribeButton
+    },
+    showFamilyFriendlyOnly: function() {
+      return this.$store.getters.getShowFamilyFriendlyOnly
+    }
+  },
+  methods: {
+    ...mapActions([
+      'updateHideSearchBar',
+      'updateHideUnsubscribeButton',
+      'updateShowFamilyFriendlyOnly'
+    ])
+  }
+})

src/renderer/components/parental-control-settings/parental-control-settings.sass

@@ -0,0 +1 @@
+@use "../../sass-partials/settings"

src/renderer/components/parental-control-settings/parental-control-settings.vue

@@ -0,0 +1,37 @@
+<template>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Parental Control Settings.Parental Control Settings") }}
+      </h3>
+    </summary>
+    <hr>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
+          :compact="true"
+          :default-value="hideUnsubscribeButton"
+          @change="updateHideUnsubscribeButton"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
+          :compact="true"
+          :default-value="showFamilyFriendlyOnly"
+          @change="updateShowFamilyFriendlyOnly"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Parental Control Settings.Hide Search Bar')"
+          :compact="true"
+          :default-value="hideSearchBar"
+          @change="updateHideSearchBar"
+        />
+      </div>
+    </div>
+  </details>
+</template>
+
+<script src="./parental-control-settings.js" />
+<style scoped lang="sass" src="./parental-control-settings.sass" />

src/renderer/components/playlist-info/playlist-info.js

@@ -35,6 +35,10 @@ export default Vue.extend({
     }
   },
   computed: {
+    hideSharingActions: function() {
+      return this.$store.getters.getHideSharingActions
+    },
+
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
     },

src/renderer/components/playlist-info/playlist-info.vue

@@ -47,6 +47,7 @@
     <br>
 
     <ft-list-dropdown
+      v-if="!hideSharingActions"
       :title="$t('Playlist.Share Playlist.Share Playlist')"
       :label-names="shareHeaders"
       :label-values="shareValues"

src/renderer/components/top-nav/top-nav.js

@@ -32,6 +32,10 @@ export default Vue.extend({
       return this.$store.getters.getUsingElectron
     },
 
+    hideSearchBar: function () {
+      return this.$store.getters.getHideSearchBar
+    },
+
     enableSearchSuggestions: function () {
       return this.$store.getters.getEnableSearchSuggestions
     },