From d5970f58c6fb1e27344e3080941d2a1772ddb97c Mon Sep 17 00:00:00 2001
From: tayloraviets <tayloraviets@gmail.com>
Date: Mon, 5 Oct 2020 20:27:32 -0600
Subject: [PATCH] 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>
---
 .../distraction-settings.js                   |  56 +++++++
 .../distraction-settings.sass                 |   1 +
 .../distraction-settings.vue                  |  85 ++++++++++
 .../ft-list-channel/ft-list-channel.js        |  15 +-
 .../ft-list-channel/ft-list-channel.vue       |   5 +-
 .../components/ft-list-video/ft-list-video.js |   7 +-
 .../ft-list-video/ft-list-video.vue           |   2 +-
 src/renderer/components/side-nav/side-nav.js  |   6 +
 src/renderer/components/side-nav/side-nav.vue |   2 +
 .../watch-video-comments.js                   |  18 ++-
 .../watch-video-info/watch-video-info.js      |  15 ++
 .../watch-video-live-chat.js                  |   3 +
 .../watch-video-live-chat.vue                 |   5 +-
 .../watch-video-recommendations.js            |   3 +
 .../watch-video-recommendations.vue           |   5 +-
 src/renderer/store/modules/settings.js        | 153 +++++++++++++++++-
 src/renderer/views/Channel/Channel.js         |  18 ++-
 src/renderer/views/Channel/Channel.vue        |   1 +
 src/renderer/views/Settings/Settings.js       |   4 +-
 src/renderer/views/Settings/Settings.vue      |   1 +
 src/renderer/views/Watch/Watch.js             |  34 +++-
 static/locales/en-US.yaml                     |  10 ++
 22 files changed, 428 insertions(+), 21 deletions(-)
 create mode 100644 src/renderer/components/distraction-settings/distraction-settings.js
 create mode 100644 src/renderer/components/distraction-settings/distraction-settings.sass
 create mode 100644 src/renderer/components/distraction-settings/distraction-settings.vue

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
new file mode 100644
index 00000000..104c1edc
--- /dev/null
+++ 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'
+    ])
+  }
+})
diff --git a/src/renderer/components/distraction-settings/distraction-settings.sass b/src/renderer/components/distraction-settings/distraction-settings.sass
new file mode 100644
index 00000000..05cb0dfb
--- /dev/null
+++ b/src/renderer/components/distraction-settings/distraction-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
new file mode 100644
index 00000000..0f9dfede
--- /dev/null
+++ 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" />
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.js b/src/renderer/components/ft-list-channel/ft-list-channel.js
index c2e78f36..7319b029 100644
--- 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
     }
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.vue b/src/renderer/components/ft-list-channel/ft-list-channel.vue
index e3dcadbf..c9c5d080 100644
--- 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
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 1d56ae5d..6b0ca6ac 100644
--- 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', '')
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 8d43ba00..db74c95c 100644
--- 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>
diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
index 41ec34d0..6b1e90b0 100644
--- 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: {
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index bef75faf..a5a6e35c 100644
--- 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')"
       >
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
index 55d801c5..61fa8567 100644
--- 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'
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 fc1f5a73..41c40c82 100644
--- 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: {
diff --git 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
index 3cda5acf..c85e019c 100644
--- 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 () {
diff --git 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
index ac932826..b48d69de 100644
--- 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"
     />
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js
index b72b4db8..a5107bfc 100644
--- 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: {
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
index 0919674b..b91023f7 100644
--- 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>
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index c46e63d4..6245e992 100644
--- 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
   }
 }
 
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 40bf4743..3302d23c 100644
--- 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
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index e57f66ff..a222bae3 100644
--- 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 }}
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 9f7b1350..bea0b059 100644
--- 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
   }
 })
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 85a99dab..deaaba8e 100644
--- 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>
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index d1f142fd..37dc4a0f 100644
--- 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 : ''
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 98363316..89ac0e1c 100644
--- 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