Add option to display distraction free titles (#2987)

* 2953 Added boilerplate to manage setting.

* Hooked in distraction free title to video list view.

* Tweaked the regexp to include apostrophe when looking for runs.

Also only change case for runs of 3 or more, to avoid messing with
common abbreviations.

* Addressed review feedback.

Co-authored-by: Simon Epstein <simon.epstein@67bricks.com>

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

@@ -65,6 +65,9 @@ export default Vue.extend({
     hideChapters: function () {
       return this.$store.getters.getHideChapters
     },
+    showDistractionFreeTitles: function () {
+      return this.$store.getters.getShowDistractionFreeTitles
+    },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden)
     }
@@ -100,7 +103,8 @@ export default Vue.extend({
       'updateHideUpcomingPremieres',
       'updateHideSharingActions',
       'updateHideChapters',
-      'updateChannelsHidden'
+      'updateChannelsHidden',
+      'updateShowDistractionFreeTitles'
     ])
   }
 })

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

@@ -102,6 +102,12 @@
           :default-value="hideComments"
           @change="updateHideComments"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Display Titles Without Excessive Capitalisation')"
+          :compact="true"
+          :default-value="showDistractionFreeTitles"
+          @change="updateShowDistractionFreeTitles"
+        />
       </div>
     </div>
     <br class="hide-on-mobile">

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

@@ -7,7 +7,9 @@ import {
   formatDurationAsTimestamp,
   openExternalLink,
   showToast,
-  toLocalePublicationString
+  toLocalePublicationString,
+  toDistractionFreeTitle,
+
 } from '../../helpers/utils'
 
 export default Vue.extend({
@@ -282,7 +284,17 @@ export default Vue.extend({
 
     currentLocale: function () {
       return i18n.locale.replace('_', '-')
-    }
+    },
+    showDistractionFreeTitles: function () {
+      return this.$store.getters.getShowDistractionFreeTitles
+    },
+    displayTitle: function () {
+      if (this.showDistractionFreeTitles) {
+        return toDistractionFreeTitle(this.data.title)
+      } else {
+        return this.data.title
+      }
+    },
   },
   mounted: function () {
     this.parseVideoData()

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

@@ -82,7 +82,7 @@
           query: playlistId ? {playlistId} : {}
         }"
       >
-        {{ title }}
+        {{ displayTitle }}
       </router-link>
       <div class="infoLine">
         <router-link

src/renderer/helpers/utils.js

@@ -554,3 +554,26 @@ export function getVideoParamsFromUrl(url) {
 
   return extractors.reduce((a, c) => a || c(), null) || paramsObject
 }
+
+/**
+ * This will match sequences of upper case characters and convert them into title cased words.
+ * @param {string} title the title to process
+ * @param {number} minUpperCase the minimum number of consecutive upper case characters to match
+ * @returns {string} the title with upper case characters removed
+ */
+export function toDistractionFreeTitle(title, minUpperCase = 3) {
+  const firstValidCharIndex = (word) => {
+    const reg = /[\p{L}]/u
+    return word.search(reg)
+  }
+
+  const capitalizedWord = (word) => {
+    const chars = word.split('')
+    const index = firstValidCharIndex(word)
+    chars[index] = chars[index].toUpperCase()
+    return chars.join('')
+  }
+
+  const reg = RegExp(`[\\p{Lu}|']{${minUpperCase},}`, 'ug')
+  return title.replace(reg, x => capitalizedWord(x.toLowerCase()))
+}

src/renderer/store/modules/settings.js

@@ -213,6 +213,7 @@ const state = {
   hideWatchedSubs: false,
   hideLabelsSideBar: false,
   hideChapters: false,
+  showDistractionFreeTitles: false,
   landingPage: 'subscriptions',
   listType: 'grid',
   maxVideoPlaybackRate: 3,

static/locales/en-US.yaml

@@ -323,6 +323,7 @@ Settings:
     Hide Active Subscriptions: Hide Active Subscriptions
     Hide Video Description: Hide Video Description
     Hide Comments: Hide Comments
+    Display Titles Without Excessive Capitalisation: Display Titles Without Excessive Capitalisation
     Hide Live Streams: Hide Live Streams
     Hide Upcoming Premieres: Hide Upcoming Premieres
     Hide Sharing Actions: Hide Sharing Actions