Merge branch 'development' into use-i18n-polyfill

.github/dependabot.yml

@@ -20,6 +20,7 @@ updates:
           - "@eslint/*"
           - "yaml-eslint-parser"
           - "vue-eslint-parser"
+          - "neostandard"
       stylelint:
         patterns:
           - "stylelint"

_scripts/ProcessLocalesPlugin.js

@@ -26,11 +26,11 @@ class ProcessLocalesPlugin {
     }
     this.outputDir = options.outputDir
 
-    /** @type {Map<str, any>} */
+    /** @type {Map<string, any>} */
     this.locales = new Map()
     this.localeNames = []
 
-    /** @type {Map<str, any>} */
+    /** @type {Map<string, any>} */
     this.cache = new Map()
 
     this.filePaths = []

_scripts/getShakaLocales.js

@@ -32,7 +32,7 @@ function getMappings(shakaLocales, freeTubeLocales) {
    * @type {[string, string][]}
    * Using this structure as it gets passed to `new Map()` in the player component
    * The first element is the FreeTube locale, the second one is the shaka-player one
-   **/
+   */
   const mappings = []
 
   for (const locale of freeTubeLocales) {

eslint.config.mjs

@@ -10,7 +10,8 @@ import eslintPluginJsonc from 'eslint-plugin-jsonc'
 import eslintPluginYml from 'eslint-plugin-yml'
 import yamlEslintParser from 'yaml-eslint-parser'
 import neostandard from 'neostandard'
-import eslintPluginFreeTube from './_scripts/eslint-rules/plugin.mjs'
+import jsdoc from 'eslint-plugin-jsdoc'
+import freetube from './_scripts/eslint-rules/plugin.mjs'
 
 import activeLocales from './static/locales/activeLocales.json' with { type: 'json' }
 
@@ -41,7 +42,8 @@ export default [
     ],
     plugins: {
       unicorn: eslintPluginUnicorn,
-      freetube: eslintPluginFreeTube
+      jsdoc,
+      freetube,
     },
 
     languageOptions: {
@@ -118,7 +120,16 @@ export default [
       'vue/require-explicit-emits': 'error',
       'vue/no-unused-emit-declarations': 'error',
 
-      'freetube/use-i18n-polyfill': 'error'
+      'jsdoc/check-alignment': 'error',
+      'jsdoc/check-property-names': 'error',
+      'jsdoc/check-param-names': 'error',
+      'jsdoc/check-syntax': 'error',
+      'jsdoc/check-template-names': 'error',
+      'jsdoc/check-types': 'error',
+      'jsdoc/no-bad-blocks': 'error',
+      'jsdoc/no-multi-asterisks': 'error',
+
+      'freetube/use-i18n-polyfill': 'error',
     },
   },
 

package.json

@@ -74,14 +74,14 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
-    "youtubei.js": "^11.0.0"
+    "youtubei.js": "^11.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/plugin-transform-class-properties": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@double-great/stylelint-a11y": "^3.0.2",
-    "@eslint/js": "^9.13.0",
+    "@eslint/js": "^9.14.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.0.0",
     "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^12.0.2",
@@ -91,24 +91,25 @@
     "electron-builder": "^25.1.8",
     "eslint": "^9.11.1",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^50.4.3",
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-unicorn": "^56.0.0",
     "eslint-plugin-vue": "^9.30.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "eslint-plugin-yml": "^1.14.0",
+    "eslint-plugin-yml": "^1.15.0",
     "globals": "^15.11.0",
     "html-webpack-plugin": "^5.6.3",
     "js-yaml": "^4.1.0",
     "json-minimizer-webpack-plugin": "^5.0.0",
-    "lefthook": "^1.8.1",
-    "mini-css-extract-plugin": "^2.9.1",
+    "lefthook": "^1.8.2",
+    "mini-css-extract-plugin": "^2.9.2",
     "neostandard": "^0.11.7",
     "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.47",
     "postcss-scss": "^4.0.9",
     "rimraf": "^6.0.1",
-    "sass": "^1.80.4",
-    "sass-loader": "^16.0.2",
+    "sass": "^1.80.6",
+    "sass-loader": "^16.0.3",
     "stylelint": "^16.10.0",
     "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-config-standard": "^36.0.1",
@@ -118,7 +119,7 @@
     "vue-devtools": "^5.1.4",
     "vue-eslint-parser": "^9.4.3",
     "vue-loader": "^15.10.0",
-    "webpack": "^5.95.0",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
     "yaml-eslint-parser": "^1.2.3"

src/renderer/components/ChannelDetails/ChannelDetails.vue

@@ -280,14 +280,17 @@ const props = defineProps({
 
 const emit = defineEmits(['change-tab', 'search', 'subscribed'])
 
+/** @type {import('vue').ComputedRef<boolean>} */
 const hideChannelSubscriptions = computed(() => {
   return store.getters.getHideChannelSubscriptions
 })
 
+/** @type {import('vue').ComputedRef<boolean>} */
 const hideSharingActions = computed(() => {
   return store.getters.getHideSharingActions
 })
 
+/** @type {import('vue').ComputedRef<boolean>} */
 const hideUnsubscribeButton = computed(() => {
   return store.getters.getHideUnsubscribeButton
 })

src/renderer/components/FtCommunityPost/FtCommunityPost.vue

@@ -198,10 +198,12 @@ const props = defineProps({
   },
 })
 
+/** @type {import('vue').ComputedRef<'grid' | 'list'>} */
 const listType = computed(() => {
   return store.getters.getListType
 })
 
+/** @type {import('vue').ComputedRef<string[]>} */
 const forbiddenTitles = computed(() => {
   if (!props.hideForbiddenTitles) { return [] }
   return JSON.parse(store.getters.getForbiddenTitles)
@@ -211,10 +213,12 @@ const hideVideo = computed(() => {
   return forbiddenTitles.value.some((text) => props.data.postContent.content.title?.toLowerCase().includes(text.toLowerCase()))
 })
 
+/** @type {import('vue').ComputedRef<'local' | 'invidious'>} */
 const backendPreference = computed(() => {
   return store.getters.getBackendPreference
 })
 
+/** @type {import('vue').ComputedRef<boolean>} */
 const backendFallback = computed(() => {
   return store.getters.getBackendFallback
 })
@@ -226,11 +230,13 @@ const isInvidiousAllowed = computed(() => {
 let postType = ''
 let postText = ''
 let postId = ''
+/** @type {string[]?} */
 let authorThumbnails = null
 let postContent = ''
 let author = ''
 let authorId = ''
 let voteCount = 0
+/** @type {number?} */
 let commentCount = null
 
 parseCommunityData()

src/renderer/components/FtElementList/FtElementList.vue

@@ -104,10 +104,12 @@ const props = defineProps({
 
 const emit = defineEmits(['move-video-down', 'move-video-up', 'remove-from-playlist'])
 
+/** @type {import('vue').ComputedRef<'grid' | 'list'>} */
 const listType = computed(() => {
   return store.getters.getListType
 })
 
+/** @type {import('vue').ComputedRef<'grid' | 'list'>} */
 const displayValue = computed(() => {
   return props.display === '' ? listType.value : props.display
 })

src/renderer/components/FtListChannel/FtListChannel.vue

@@ -91,23 +91,29 @@ const props = defineProps({
   }
 })
 
+/** @type {import('vue').ComputedRef<string>} */
 const currentInvidiousInstanceUrl = computed(() => {
   return store.getters.getCurrentInvidiousInstanceUrl
 })
 
+/** @type {import('vue').ComputedRef<'grid' | 'list'>} */
 const listType = computed(() => {
   return store.getters.getListType
 })
 
+/** @type {import('vue').ComputedRef<boolean>} */
 const hideChannelSubscriptions = computed(() => {
   return store.getters.getHideChannelSubscriptions
 })
 
 let id = ''
 let thumbnail = ''
 let name = ''
+/** @type {number?} */
 let subscriberCount = null
+/** @type {number?} */
 let videoCount = null
+/** @type {string?} */
 let handle = null
 let description = ''
 
@@ -155,6 +161,7 @@ function parseLocalData() {
 
 function parseInvidiousData() {
   // Can be prefixed with `https://` or `//` (protocol relative)
+  /** @type {string} */
   const thumbnailUrl = props.data.authorThumbnails[2].url
 
   thumbnail = youtubeImageUrlToInvidious(thumbnailUrl, currentInvidiousInstanceUrl.value)

src/renderer/components/FtListHashtag/FtListHashtag.vue

@@ -67,13 +67,18 @@ const props = defineProps({
   }
 })
 
+/** @type {import('vue').ComputedRef<'list'| 'grid'>} */
 const listType = computed(() => {
   return store.getters.getListType
 })
 
+/** @type {string} */
 const title = props.data.title
+/** @type {number} */
 const channelCount = props.data.channelCount
+/** @type {number} */
 const videoCount = props.data.videoCount
+/** @type {string} */
 const url = `/hashtag/${encodeURIComponent(title.substring(1))}`
 
 const formattedChannelCount = computed(() => {

src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue

@@ -141,18 +141,22 @@ const props = defineProps({
 
 const emit = defineEmits(['move-video-down', 'move-video-up', 'remove-from-playlist'])
 
+/** @type {import('vue').ComputedRef<'video' | 'shortVideo' | 'channel' | 'playlist' | 'community'>} */
 const finalDataType = computed(() => {
   return props.data.type ?? props.dataType
 })
 
+/** @type {import('vue').ComputedRef<boolean>} */
 const hideLiveStreams = computed(() => {
   return store.getters.getHideLiveStreams
 })
 
+/** @type {import('vue').ComputedRef<boolean>} */
 const hideUpcomingPremieres = computed(() => {
   return store.getters.getHideUpcomingPremieres
 })
 
+/** @type {import('vue').ComputedRef<{name : string, preferredName: string, icon: string}[]>} */
 const channelsHidden = computed(() => {
   // Some component users like channel view will have this disabled
   if (!props.useChannelsHiddenPreference) { return [] }
@@ -166,6 +170,7 @@ const channelsHidden = computed(() => {
   })
 })
 
+/** @type {string[]} */
 const forbiddenTitles = computed(() => {
   if (!props.hideForbiddenTitles) { return [] }
   return JSON.parse(store.getters.getForbiddenTitles)

src/renderer/components/PasswordDialog/PasswordDialog.vue

@@ -0,0 +1,45 @@
+<template>
+  <FtCard
+    class="card"
+  >
+    <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
+
+    <FtInput
+      ref="password"
+      :placeholder="$t('Settings.Password Dialog.Password')"
+      :show-action-button="false"
+      input-type="password"
+      class="passwordInput"
+      @input="handlePasswordInput"
+    />
+  </FtCard>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+
+import FtCard from '../ft-card/ft-card.vue'
+import FtInput from '../ft-input/ft-input.vue'
+
+import store from '../../store/index'
+
+const emit = defineEmits(['unlocked'])
+
+const password = ref(null)
+
+onMounted(() => {
+  password.value.focus()
+})
+
+const settingsPassword = computed(() => {
+  return store.getters.getSettingsPassword
+})
+
+function handlePasswordInput(input) {
+  if (input === settingsPassword.value) {
+    emit('unlocked')
+  }
+}
+</script>
+
+<style scoped src="./PasswordDialog.css" />

src/renderer/components/PasswordSettings/PasswordSettings.vue

@@ -0,0 +1,67 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Password Settings.Password Settings')"
+  >
+    <FtFlexBox
+      v-if="hasStoredPassword"
+      class="settingsFlexStart460px"
+    >
+      <FtButton
+        :label="$t('Settings.Password Settings.Remove Password')"
+        @click="handleRemovePassword"
+      />
+    </FtFlexBox>
+    <FtFlexBox
+      v-else
+      class="settingsFlexStart460px"
+    >
+      <FtInput
+        :placeholder="$t('Settings.Password Settings.Set Password To Prevent Access')"
+        :show-action-button="false"
+        show-label
+        input-type="password"
+        :value="password"
+        @input="e => password = e"
+        @keydown.enter.native="handleSetPassword"
+      />
+      <FtButton
+        class="centerButton"
+        :label="$t('Settings.Password Settings.Set Password')"
+        @click="handleSetPassword"
+      />
+    </FtFlexBox>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+import store from '../../store/index'
+
+const settingsPassword = computed(() => {
+  return store.getters.getSettingsPassword
+})
+
+const hasStoredPassword = computed(() => {
+  return settingsPassword.value !== ''
+})
+
+const password = ref('')
+
+function handleSetPassword() {
+  store.dispatch('updateSettingsPassword', password.value)
+  password.value = ''
+}
+
+function handleRemovePassword() {
+  store.dispatch('updateSettingsPassword', '')
+  password.value = ''
+}
+</script>
+
+<style scoped src="./PasswordSettings.css" />