PR ready distraction free feature (#596)

* PR ready distraction free feature Signed-off-by: Taylor <tayloraviets@gmail.com> * presumably fixed linter issues Signed-off-by: Taylor <tayloraviets@gmail.com> * addressed PR issues and hopefully made the linter happy Signed-off-by: Taylor <tayloraviets@gmail.com> * fixed more linter issues Signed-off-by: Taylor <tayloraviets@gmail.com> * fixed more linter issues again Signed-off-by: Taylor <tayloraviets@gmail.com> * fixed more linter issues again. Signed-off-by: Taylor <tayloraviets@gmail.com> * moved bad quote Signed-off-by: Taylor <tayloraviets@gmail.com>
2020-10-05 20:27:32 -06:00 · 2020-10-05 20:27:32 -06:00 · d5970f58c6
parent e93df425fb
commit d5970f58c6
22 changed files with 428 additions and 21 deletions
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@ -0,0 +1,56 @@
+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: {
+    hideVideoViews: function () {
+      return this.$store.getters.getHideVideoViews
+    },
+    hideVideoLikesAndDislikes: function () {
+      return this.$store.getters.getHideVideoLikesAndDislikes
+    },
+    hideChannelSubscriptions: function () {
+      return this.$store.getters.getHideChannelSubscriptions
+    },
+    hideCommentLikes: function () {
+      return this.$store.getters.getHideCommentLikes
+    },
+    hideRecommendedVideos: function () {
+      return this.$store.getters.getHideRecommendedVideos
+    },
+    hideTrendingVideos: function () {
+      return this.$store.getters.getHideTrendingVideos
+    },
+    hidePopularVideos: function () {
+      return this.$store.getters.getHidePopularVideos
+    },
+    hideLiveChat: function () {
+      return this.$store.getters.getHideLiveChat
+    }
+  },
+  methods: {
+    ...mapActions([
+      'updateHideVideoViews',
+      'updateHideVideoLikesAndDislikes',
+      'updateHideChannelSubscriptions',
+      'updateHideCommentLikes',
+      'updateHideRecommendedVideos',
+      'updateHideTrendingVideos',
+      'updateHidePopularVideos',
+      'updateHideLiveChat'
+    ])
+  }
+})
--- a/src/renderer/components/distraction-settings/distraction-settings.sass
+++ b/src/renderer/components/distraction-settings/distraction-settings.sass
@ -0,0 +1 @@
+@use "../../sass-partials/settings"
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@ -0,0 +1,85 @@
+<template>
+  <ft-card
+    class="relative card"
+  >
+    <h3
+      class="videoTitle"
+    >
+      {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
+    </h3>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Video Views')"
+          :compact="true"
+          :default-value="hideVideoViews"
+          @change="updateHideVideoViews"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Video Likes And Dislikes')"
+          :compact="true"
+          :default-value="hideVideoLikesAndDislikes"
+          @change="updateHideVideoLikesAndDislikes"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Channel Subscribers')"
+          :compact="true"
+          :default-value="hideChannelSubscriptions"
+          @change="updateHideChannelSubscriptions"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Comment Likes')"
+          :compact="true"
+          :default-value="hideCommentLikes"
+          @change="updateHideCommentLikes"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Recommended Videos')"
+          :compact="true"
+          :default-value="hideRecommendedVideos"
+          @change="updateHideRecommendedVideos"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Trending Videos')"
+          :compact="true"
+          :default-value="hideTrendingVideos"
+          @change="updateHideTrendingVideos"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Popular Videos')"
+          :compact="true"
+          :default-value="hidePopularVideos"
+          @change="updateHidePopularVideos"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Live Chat')"
+          :compact="true"
+          :default-value="hideLiveChat"
+          @change="updateHideLiveChat"
+        />
+      </div>
+    </div>
+    <br>
+    <ft-flex-box>
+      <ft-select
+        v-if="false"
+        placeholder="Distraction View Type"
+        :value="viewValues[0]"
+        :select-names="viewNames"
+        :select-values="viewValues"
+      />
+    </ft-flex-box>
+    <br>
+    <ft-flex-box>
+      <ft-button
+        v-if="false"
+        label="Manage My Distractions"
+      />
+    </ft-flex-box>
+  </ft-card>
+</template>
+
+<script src="./distraction-settings.js" />
+<style scoped lang="sass" src="./distraction-settings.sass" />
--- a/src/renderer/components/ft-list-channel/ft-list-channel.js
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.js
@ -26,6 +26,9 @@ export default Vue.extend({
  computed: {
    listType: function () {
      return this.$store.getters.getListType
+    },
+    hideChannelSubscriptions: function () {
+      return this.$store.getters.getHideChannelSubscriptions
    }
  },
  mounted: function () {
@ -40,7 +43,11 @@ export default Vue.extend({
      this.thumbnail = this.data.avatar
      this.channelName = this.data.name
      this.id = this.data.channel_id
-      this.subscriberCount = this.data.followers.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      if (this.hideChannelSubscriptions) {
+        this.subscriberCount = null
+      } else {
+        this.subscriberCount = this.data.followers.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      }
      this.videoCount = this.data.videos.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      this.description = this.data.description_short
    },
@ -49,7 +56,11 @@ export default Vue.extend({
      this.thumbnail = this.data.authorThumbnails[2].url
      this.channelName = this.data.author
      this.id = this.data.authorId
-      this.subscriberCount = this.data.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      if (this.hideChannelSubscriptions) {
+        this.subscriberCount = null
+      } else {
+        this.subscriberCount = this.data.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      }
      this.videoCount = this.data.videoCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      this.description = this.data.description
    }
--- a/src/renderer/components/ft-list-channel/ft-list-channel.vue
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.vue
@ -26,14 +26,15 @@
      </router-link>
      <div class="infoLine">
        <span
+          v-if="subscriberCount !== null"
          class="subscriberCount"
        >
-          {{ subscriberCount }} subscribers
+          {{ subscriberCount }} subscribers -
        </span>
        <span
          class="videoCount"
        >
-          - {{ videoCount }} videos
+          {{ videoCount }} videos
        </span>
      </div>
      <p
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@ -137,6 +137,9 @@ export default Vue.extend({
        default:
          return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
      }
+    },
+    hideVideoViews: function () {
+      return this.$store.getters.getHideVideoViews
    }
  },
  mounted: function () {
@ -271,7 +274,9 @@ export default Vue.extend({
        })
      }

-      if (typeof (this.data.viewCount) !== 'undefined' && this.data.viewCount !== null) {
+      if (this.hideVideoViews) {
+        this.hideViews = true
+      } else if (typeof (this.data.viewCount) !== 'undefined' && this.data.viewCount !== null) {
        this.parsedViewCount = this.data.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else if (typeof (this.data.viewCountText) !== 'undefined') {
        this.parsedViewCount = this.data.viewCountText.replace(' views', '')
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@ -93,7 +93,7 @@
          class="uploadedTime"
        >• {{ publishedText }}</span>
        <span
-          v-if="isLive"
+          v-if="isLive && !hideViews"
          class="viewCount"
        >• {{ viewCount }} {{ $t("Video.Watching").toLowerCase() }}</span>
      </div>
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/src/renderer/components/side-nav/side-nav.js
@ -32,6 +32,12 @@ export default Vue.extend({
        }
        return 0
      })
+    },
+    hidePopularVideos: function () {
+      return this.$store.getters.getHidePopularVideos
+    },
+    hideTrendingVideos: function () {
+      return this.$store.getters.getHideTrendingVideos
    }
  },
  methods: {
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@ -18,6 +18,7 @@
        </p>
      </div>
      <div
+        v-if="!hideTrendingVideos"
        class="navOption mobileHidden"
        @click="navigate('trending')"
      >
@ -30,6 +31,7 @@
        </p>
      </div>
      <div
+        v-if="!hidePopularVideos"
        class="navOption mobileHidden"
        @click="navigate('popular')"
      >
--- a/src/renderer/components/watch-video-comments/watch-video-comments.js
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.js
@ -43,6 +43,9 @@ export default Vue.extend({
    invidiousInstance: function () {
      return this.$store.getters.getInvidiousInstance
    },
+    hideCommentLikes: function () {
+      return this.$store.getters.getHideCommentLikes
+    },

    sortNames: function () {
      return [
@ -144,6 +147,9 @@ export default Vue.extend({
          }).catch((error) => {
            console.error(error)
          })
+          if (this.hideCommentLikes) {
+            comment.likes = null
+          }
          return comment
        })
        this.commentData = this.commentData.concat(commentData)
@ -186,7 +192,11 @@ export default Vue.extend({
        const commentData = response.comments.map((comment) => {
          comment.showReplies = false
          comment.authorThumb = comment.authorThumbnails[1].url
-          comment.likes = comment.likeCount
+          if (this.hideCommentLikes) {
+            comment.likes = null
+          } else {
+            comment.likes = comment.likeCount
+          }
          comment.text = comment.content
          comment.dataType = 'invidious'

@ -250,7 +260,11 @@ export default Vue.extend({
        const commentData = response.comments.map((comment) => {
          comment.showReplies = false
          comment.authorThumb = comment.authorThumbnails[1].url
-          comment.likes = comment.likeCount
+          if (this.hideCommentLikes) {
+            comment.likes = null
+          } else {
+            comment.likes = comment.likeCount
+          }
          comment.text = comment.content
          comment.time = comment.publishedText
          comment.dataType = 'invidious'
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@ -104,14 +104,23 @@ export default Vue.extend({
    },

    totalLikeCount: function () {
+      if (this.hideVideoLikesAndDislikes) {
+        return null
+      }
      return this.likeCount + this.dislikeCount
    },

    likePercentageRatio: function () {
+      if (this.hideVideoLikesAndDislikes) {
+        return null
+      }
      return parseInt(this.likeCount / this.totalLikeCount * 100)
    },

    parsedViewCount: function () {
+      if (this.hideVideoViews) {
+        return null
+      }
      return this.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ` ${this.$t('Video.Views').toLowerCase()}`
    },

@ -140,6 +149,12 @@ export default Vue.extend({
      const dateSplit = date.toDateString().split(' ')
      const localeDateString = `Video.Published.${dateSplit[1]}`
      return `${this.$t(localeDateString)} ${dateSplit[2]}, ${dateSplit[3]}`
+    },
+    hideVideoLikesAndDislikes: function () {
+      return this.$store.getters.getHideVideoLikesAndDislikes
+    },
+    hideVideoViews: function () {
+      return this.$store.getters.getHideVideoViews
    }
  },
  methods: {
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
@ -76,6 +76,9 @@ export default Vue.extend({
      } else {
        return '445px'
      }
+    },
+    hideLiveChat: function () {
+      return this.$store.getters.getHideLiveChat
    }
  },
  created: function () {
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
@ -1,5 +1,8 @@
 <template>
-  <ft-card class="relative">
+  <ft-card
+    v-if="!hideLiveChat"
+    class="relative"
+  >
    <ft-loader
      v-if="isLoading"
    />
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js
@ -27,6 +27,9 @@ export default Vue.extend({
    },
    playNextVideo: function () {
      return this.$store.getters.getPlayNextVideo
+    },
+    hideRecommendedVideos: function () {
+      return this.$store.getters.getHideRecommendedVideos
    }
  },
  methods: {
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
@ -1,5 +1,8 @@
 <template>
-  <ft-card class="relative watchVideoRecommendations">
+  <ft-card
+    v-if="!hideRecommendedVideos"
+    class="relative watchVideoRecommendations"
+  >
    <h3>
      {{ $t("Up Next") }}
    </h3>
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@ -59,7 +59,15 @@ const state = {
  disctractionFreeMode: false,
  hideWatchedSubs: false,
  useRssFeeds: false,
-  usingElectron: true
+  usingElectron: true,
+  hideVideoViews: false,
+  hideVideoLikesAndDislikes: false,
+  hideChannelSubscriptions: false,
+  hideCommentLikes: false,
+  hideRecommendedVideos: false,
+  hideTrendingVideos: false,
+  hidePopularVideos: false,
+  hideLiveChat: false
 }

 const getters = {
@ -173,6 +181,37 @@ const getters = {

  getUsingElectron: () => {
    return state.usingElectron
+  },
+
+  getHideVideoViews: () => {
+    return state.hideVideoViews
+  },
+
+  getHideVideoLikesAndDislikes: () => {
+    return state.hideVideoLikesAndDislikes
+  },
+
+  getHideChannelSubscriptions: () => {
+    return state.hideChannelSubscriptions
+  },
+
+  getHideCommentLikes: () => {
+    return state.hideCommentLikes
+  },
+
+  getHideRecommendedVideos: () => {
+    return state.hideRecommendedVideos
+  },
+
+  getHideTrendingVideos: () => {
+    return state.hideTrendingVideos
+  },
+
+  getHidePopularVideos: () => {
+    return state.hidePopularVideos
+  },
+  getHideLiveChat: () => {
+    return state.hideLiveChat
  }
 }

@ -269,6 +308,30 @@ const actions = {
            case 'defaultQuality':
              commit('setDefaultQuality', result.value)
              break
+            case 'hideVideoViews':
+              commit('setHideVideoViews', result.value)
+              break
+            case 'hideVideoLikesAndDislikes':
+              commit('setHideVideoLikesAndDislikes', result.value)
+              break
+            case 'hideChannelSubscriptions':
+              commit('setHideChannelSubscriptions', result.value)
+              break
+            case 'hideCommentLikes':
+              commit('setHideCommentLikes', result.value)
+              break
+            case 'hideRecommendedVideos':
+              commit('setHideRecommendedVideos', result.value)
+              break
+            case 'hideTrendingVideos':
+              commit('setHideTrendingVideos', result.value)
+              break
+            case 'hidePopularVideos':
+              commit('setHidePopularVideos', result.value)
+              break
+            case 'hideLiveChat':
+              commit('setHideLiveChat', result.value)
+              break
          }
        })
      }
@ -499,6 +562,70 @@ const actions = {
        commit('setUseTor', useTor)
      }
    })
+  },
+
+  updateHideVideoViews ({ commit }, hideVideoViews) {
+    settingsDb.update({ _id: 'hideVideoViews' }, { _id: 'hideVideoViews', value: hideVideoViews }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHideVideoViews', hideVideoViews)
+      }
+    })
+  },
+
+  updateHideVideoLikesAndDislikes ({ commit }, hideVideoLikesAndDislikes) {
+    settingsDb.update({ _id: 'hideVideoLikesAndDislikes' }, { _id: 'hideVideoLikesAndDislikes', value: hideVideoLikesAndDislikes }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHideVideoLikesAndDislikes', hideVideoLikesAndDislikes)
+      }
+    })
+  },
+
+  updateHideChannelSubscriptions ({ commit }, hideChannelSubscriptions) {
+    settingsDb.update({ _id: 'hideChannelSubscriptions' }, { _id: 'hideChannelSubscriptions', value: hideChannelSubscriptions }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHideChannelSubscriptions', hideChannelSubscriptions)
+      }
+    })
+  },
+
+  updateHideCommentLikes ({ commit }, hideCommentLikes) {
+    settingsDb.update({ _id: 'hideCommentLikes' }, { _id: 'hideCommentLikes', value: hideCommentLikes }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHideCommentLikes', hideCommentLikes)
+      }
+    })
+  },
+
+  updateHideRecommendedVideos ({ commit }, hideRecommendedVideos) {
+    settingsDb.update({ _id: 'hideRecommendedVideos' }, { _id: 'hideRecommendedVideos', value: hideRecommendedVideos }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHideRecommendedVideos', hideRecommendedVideos)
+      }
+    })
+  },
+
+  updateHideTrendingVideos ({ commit }, hideTrendingVideos) {
+    settingsDb.update({ _id: 'hideTrendingVideos' }, { _id: 'hideTrendingVideos', value: hideTrendingVideos }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHideTrendingVideos', hideTrendingVideos)
+      }
+    })
+  },
+
+  updateHidePopularVideos ({ commit }, hidePopularVideos) {
+    settingsDb.update({ _id: 'hidePopularVideos' }, { _id: 'hidePopularVideos', value: hidePopularVideos }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHidePopularVideos', hidePopularVideos)
+      }
+    })
+  },
+
+  updateHideLiveChat ({ commit }, hideLiveChat) {
+    settingsDb.update({ _id: 'hideLiveChat' }, { _id: 'hideLiveChat', value: hideLiveChat }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setHideLiveChat', hideLiveChat)
+      }
+    })
  }
 }

@ -607,6 +734,30 @@ const mutations = {
  },
  setProfileList (state, profileList) {
    state.profileList = profileList
+  },
+  setHideVideoViews (state, hideVideoViews) {
+    state.hideVideoViews = hideVideoViews
+  },
+  setHideVideoLikesAndDislikes (state, hideVideoLikesAndDislikes) {
+    state.hideVideoLikesAndDislikes = hideVideoLikesAndDislikes
+  },
+  setHideChannelSubscriptions (state, hideChannelSubscriptions) {
+    state.hideChannelSubscriptions = hideChannelSubscriptions
+  },
+  setHideCommentLikes (state, hideCommentLikes) {
+    state.hideCommentLikes = hideCommentLikes
+  },
+  setHideRecommendedVideos (state, hideRecommendedVideos) {
+    state.hideRecommendedVideos = hideRecommendedVideos
+  },
+  setHideTrendingVideos (state, hideTrendingVideos) {
+    state.hideTrendingVideos = hideTrendingVideos
+  },
+  setHidePopularVideos (state, hidePopularVideos) {
+    state.hidePopularVideos = hidePopularVideos
+  },
+  setHideLiveChat (state, hideLiveChat) {
+    state.hideLiveChat = hideLiveChat
  }
 }

--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@ -123,6 +123,9 @@ export default Vue.extend({
    },

    formattedSubCount: function () {
+      if (this.hideChannelSubscriptions) {
+        return null
+      }
      return this.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },

@ -146,6 +149,9 @@ export default Vue.extend({
      }

      return false
+    },
+    hideChannelSubscriptions: function () {
+      return this.$store.getters.getHideChannelSubscriptions
    }
  },
  watch: {
@ -242,7 +248,11 @@ export default Vue.extend({
      ytch.getChannelInfo(this.id).then((response) => {
        this.id = response.authorId
        this.channelName = response.author
-        this.subCount = response.subscriberCount.toFixed(0)
+        if (this.hideChannelSubscriptions) {
+          this.subCount = null
+        } else {
+          this.subCount = response.subscriberCount.toFixed(0)
+        }
        this.thumbnailUrl = response.authorThumbnails[2].url
        this.channelDescription = autolinker.link(response.description)
        this.relatedChannels = response.relatedChannels
@ -333,7 +343,11 @@ export default Vue.extend({
        console.log(response)
        this.channelName = response.author
        this.id = response.authorId
-        this.subCount = response.subCount
+        if (this.hideChannelSubscriptions) {
+          this.subCount = null
+        } else {
+          this.subCount = response.subCount
+        }
        this.thumbnailUrl = response.authorThumbnails[3].url
        this.channelDescription = autolinker.link(response.description)
        this.relatedChannels = response.relatedChannels
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@ -32,6 +32,7 @@
          </span>
          <br>
          <span
+            v-if="subCount !== null"
            class="channelSubCount"
          >
            {{ formattedSubCount }}
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@ -7,6 +7,7 @@ import PlayerSettings from '../../components/player-settings/player-settings.vue
 import SubscriptionSettings from '../../components/subscription-settings/subscription-settings.vue'
 import PrivacySettings from '../../components/privacy-settings/privacy-settings.vue'
 import DataSettings from '../../components/data-settings/data-settings.vue'
+import DistractionSettings from '../../components/distraction-settings/distraction-settings.vue'

 export default Vue.extend({
  name: 'Settings',
@ -18,6 +19,7 @@ export default Vue.extend({
    'player-settings': PlayerSettings,
    'subscription-settings': SubscriptionSettings,
    'privacy-settings': PrivacySettings,
-    'data-settings': DataSettings
+    'data-settings': DataSettings,
+    'distraction-settings': DistractionSettings
  }
 })
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@ -4,6 +4,7 @@
    <theme-settings />
    <player-settings />
    <subscription-settings />
+    <distraction-settings />
    <privacy-settings />
    <data-settings />
  </div>
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@ -120,6 +120,12 @@ export default Vue.extend({

    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>`
+    },
+    hideChannelSubscriptions: function () {
+      return this.$store.getters.getHideChannelSubscriptions
+    },
+    hideVideoLikesAndDislikes: function () {
+      return this.$store.getters.getHideVideoLikesAndDislikes
    }
  },
  watch: {
@ -219,8 +225,13 @@ export default Vue.extend({
            video.lengthSeconds = video.length_seconds
            return video
          })
-          this.videoLikeCount = result.videoDetails.likes
-          this.videoDislikeCount = result.videoDetails.dislikes
+          if (this.hideVideoLikesAndDislikes) {
+            this.videoLikeCount = null
+            this.videoDislikeCount = null
+          } else {
+            this.videoLikeCount = result.videoDetails.likes
+            this.videoDislikeCount = result.videoDetails.dislikes
+          }
          this.isLive = result.player_response.videoDetails.isLiveContent || result.player_response.videoDetails.isLive
          this.isUpcoming = result.player_response.videoDetails.isUpcoming ? result.player_response.videoDetails.isUpcoming : false

@ -235,13 +246,13 @@ export default Vue.extend({
            }
          }

-          if (this.videoDislikeCount === null) {
+          if (this.videoDislikeCount === null && !this.hideVideoLikesAndDislikes) {
            this.videoDislikeCount = 0
          }

          const subCount = result.videoDetails.author.subscriber_count

-          if (typeof (subCount) !== 'undefined') {
+          if (typeof (subCount) !== 'undefined' && !this.hideChannelSubscriptions) {
            if (subCount >= 1000000) {
              this.channelSubscriptionCountText = `${subCount / 1000000}M`
            } else if (subCount >= 10000) {
@ -400,9 +411,18 @@ export default Vue.extend({

          this.videoTitle = result.title
          this.videoViewCount = result.viewCount
-          this.videoLikeCount = result.likeCount
-          this.videoDislikeCount = result.dislikeCount
-          this.channelSubscriptionCountText = result.subCountText || 'FT-0'
+          if (this.hideVideoLikesAndDislikes) {
+            this.videoLikeCount = null
+            this.videoDislikeCount = null
+          } else {
+            this.videoLikeCount = result.likeCount
+            this.videoDislikeCount = result.dislikeCount
+          }
+          if (this.hideChannelSubscriptions) {
+            this.channelSubscriptionCountText = ''
+          } else {
+            this.channelSubscriptionCountText = result.subCountText || 'FT-0'
+          }
          this.channelId = result.authorId
          this.channelName = result.author
          this.channelThumbnail = result.authorThumbnails[1] ? result.authorThumbnails[1].url : ''
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@ -194,6 +194,16 @@ Settings:
    Hide Videos on Watch: Hide Videos on Watch
    Fetch Feeds from RSS: Fetch Feeds from RSS
    Manage Subscriptions: Manage Subscriptions
+  Distraction Free Settings:
+    Distraction Free Settings: Distraction Free Settings
+    Hide Video Views: Hide Video Views
+    Hide Video Likes And Dislikes: Hide Video Likes And Dislikes
+    Hide Channel Subscribers: Hide Channel Subscribers
+    Hide Comment Likes: Hide Comment Likes
+    Hide Recommended Videos: Hide Recommended Videos
+    Hide Trending Videos: Hide Trending Videos
+    Hide Popular Videos: Hide Popular Videos
+    Hide Live Chat: Hide Live Chat
  Data Settings:
    Data Settings: Data Settings
    Select Import Type: Select Import Type