Merge branch 'development' of github.com:FreeTubeApp/FreeTube into fe…

…at/user-playlists-as-grid

.eslintrc.js

@@ -112,6 +112,8 @@ module.exports = {
         ignoreText: ['-', '•', '/', 'YouTube', 'Invidious', 'FreeTube']
       }
     ],
+    'vue/require-explicit-emits': 'error',
+    'vue/no-unused-emit-declarations': 'error',
   },
   settings: {
     'vue-i18n': {

_scripts/webpack.renderer.config.js

@@ -151,6 +151,8 @@ const config = {
     alias: {
       vue$: 'vue/dist/vue.runtime.esm.js',
 
+      'DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$': path.resolve(__dirname, '../src/datastores/handlers/electron.js'),
+
       'youtubei.js$': 'youtubei.js/web',
 
       // video.js's mpd-parser uses @xmldom/xmldom so that it can support both node and web browsers

_scripts/webpack.web.config.js

@@ -160,6 +160,8 @@ const config = {
     alias: {
       vue$: 'vue/dist/vue.runtime.esm.js',
 
+      'DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$': path.resolve(__dirname, '../src/datastores/handlers/web.js'),
+
       // video.js's mpd-parser uses @xmldom/xmldom so that it can support both node and web browsers
       // As FreeTube only runs in electron and web browsers, we can use the native DOMParser class, instead of the "polyfill"
       // https://caniuse.com/mdn-api_domparser

jsconfig.json

@@ -3,6 +3,13 @@
     "target": 2.7
   },
   "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "baseUrl": "./",
+    "paths": {
+      "DB_HANDLERS_ELECTRON_RENDERER_OR_WEB": [
+        "src/datastores/handlers/electron",
+        "src/datastores/handlers/web"
+      ]
+    }
   }
 }

src/datastores/handlers/base.js

@@ -1,4 +1,4 @@
-import db from '../index'
+import * as db from '../index'
 
 class Settings {
   static find() {
@@ -192,13 +192,11 @@ function compactAllDatastores() {
   ])
 }
 
-const baseHandlers = {
-  settings: Settings,
-  history: History,
-  profiles: Profiles,
-  playlists: Playlists,
+export {
+  Settings as settings,
+  History as history,
+  Profiles as profiles,
+  Playlists as playlists,
 
   compactAllDatastores,
 }
-
-export default baseHandlers

src/datastores/handlers/electron.js

@@ -205,11 +205,9 @@ class Playlists {
   }
 }
 
-const handlers = {
-  settings: Settings,
-  history: History,
-  profiles: Profiles,
-  playlists: Playlists
+export {
+  Settings as settings,
+  History as history,
+  Profiles as profiles,
+  Playlists as playlists
 }
-
-export default handlers

src/datastores/handlers/index.js

@@ -1,18 +1,6 @@
-let handlers
-if (process.env.IS_ELECTRON) {
-  handlers = require('./electron').default
-} else {
-  handlers = require('./web').default
-}
-
-const DBSettingHandlers = handlers.settings
-const DBHistoryHandlers = handlers.history
-const DBProfileHandlers = handlers.profiles
-const DBPlaylistHandlers = handlers.playlists
-
 export {
-  DBSettingHandlers,
-  DBHistoryHandlers,
-  DBProfileHandlers,
-  DBPlaylistHandlers
-}
+  settings as DBSettingHandlers,
+  history as DBHistoryHandlers,
+  profiles as DBProfileHandlers,
+  playlists as DBPlaylistHandlers
+} from 'DB_HANDLERS_ELECTRON_RENDERER_OR_WEB'

src/datastores/handlers/web.js

@@ -1,4 +1,4 @@
-import baseHandlers from './base'
+import * as baseHandlers from './base'
 
 // TODO: Syncing
 // Syncing on the web would involve a different implementation
@@ -118,11 +118,9 @@ class Playlists {
   }
 }
 
-const handlers = {
-  settings: Settings,
-  history: History,
-  profiles: Profiles,
-  playlists: Playlists
+export {
+  Settings as settings,
+  History as history,
+  Profiles as profiles,
+  Playlists as playlists
 }
-
-export default handlers

src/datastores/index.js

@@ -22,10 +22,7 @@ if (process.env.IS_ELECTRON_MAIN) {
   dbPath = (dbName) => `${dbName}.db`
 }
 
-const db = {}
-db.settings = new Datastore({ filename: dbPath('settings'), autoload: true })
-db.profiles = new Datastore({ filename: dbPath('profiles'), autoload: true })
-db.playlists = new Datastore({ filename: dbPath('playlists'), autoload: true })
-db.history = new Datastore({ filename: dbPath('history'), autoload: true })
-
-export default db
+export const settings = new Datastore({ filename: dbPath('settings'), autoload: true })
+export const profiles = new Datastore({ filename: dbPath('profiles'), autoload: true })
+export const playlists = new Datastore({ filename: dbPath('playlists'), autoload: true })
+export const history = new Datastore({ filename: dbPath('history'), autoload: true })

src/main/index.js

@@ -7,7 +7,7 @@ import path from 'path'
 import cp from 'child_process'
 
 import { IpcChannels, DBActions, SyncEvents } from '../constants'
-import baseHandlers from '../datastores/handlers/base'
+import * as baseHandlers from '../datastores/handlers/base'
 import { extractExpiryTimestamp, ImageCache } from './ImageCache'
 import { existsSync } from 'fs'
 import asyncFs from 'fs/promises'

src/renderer/App.css

@@ -18,10 +18,14 @@
 
 .banner {
   inline-size: 85%;
-  margin-block: 20px;
+  margin-block: 40px 0;
   margin-inline: auto;
 }
 
+.banner + .banner {
+  margin-block: 20px;
+}
+
 .banner-wrapper {
   margin-block: 0;
   margin-inline: 10px;
@@ -53,8 +57,8 @@
   }
 
   .banner {
-    inline-size: 80%;
-    margin-block-start: 20px;
+    inline-size: 90%;
+    margin-block: 60px 0;
   }
 
   .flexBox {

src/renderer/components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.js

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'FtAutoLoadNextPageWrapper',
+  emits: ['load-next-page'],
   computed: {
     generalAutoLoadMorePaginatedItemsEnabled() {
       return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled

src/renderer/components/ft-channel-bubble/ft-channel-bubble.js

@@ -20,6 +20,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['click'],
   data: function () {
     return {
       selected: false

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -16,6 +16,10 @@ export default defineComponent({
       type: Array,
       default: () => ['fas', 'ellipsis-v']
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     theme: {
       type: String,
       default: 'base'
@@ -61,6 +65,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['click'],
   data: function () {
     return {
       dropdownShown: false,
@@ -87,6 +92,7 @@ export default defineComponent({
     },
 
     handleIconClick: function () {
+      if (this.disabled) { return }
       if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
         this.dropdownShown = !this.dropdownShown
 
@@ -103,6 +109,7 @@ export default defineComponent({
     },
 
     handleIconMouseDown: function () {
+      if (this.disabled) { return }
       if (this.dropdownShown) {
         this.mouseDownOnIcon = true
       }

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -79,6 +79,12 @@
   }
 }
 
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  user-select: none;
+}
+
 .iconDropdown {
   background-color: var(--side-nav-color);
   box-shadow: 0 1px 2px rgb(0 0 0 / 50%);

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -7,7 +7,8 @@
       :icon="icon"
       :class="{
         [theme]: true,
-        shadow: useShadow
+        shadow: useShadow,
+        disabled
       }"
       :style="{
         padding: padding + 'px',

src/renderer/components/ft-input-tags/ft-input-tags.js

@@ -53,6 +53,7 @@ export default defineComponent({
       default: (_) => ({ preferredName: '', icon: '' }),
     }
   },
+  emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name'],
   methods: {
     updateTags: async function (text, _e) {
       if (this.areChannelTags) {

src/renderer/components/ft-input/ft-input.js

@@ -64,6 +64,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['clear', 'click', 'input'],
   data: function () {
     let actionIcon = ['fas', 'search']
     if (this.forceActionButtonIconName !== null) {

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

@@ -5,6 +5,7 @@ import {
   copyToClipboard,
   formatDurationAsTimestamp,
   formatNumber,
+  getRelativeTimeFromDate,
   openExternalLink,
   showToast,
   toDistractionFreeTitle,
@@ -84,6 +85,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['pause-player'],
   data: function () {
     return {
       id: '',
@@ -344,6 +346,10 @@ export default defineComponent({
       return this.historyEntryExists && !this.inHistory
     },
 
+    currentLocale: function () {
+      return this.$i18n.locale.replace('_', '-')
+    },
+
     externalPlayer: function () {
       return this.$store.getters.getExternalPlayer
     },
@@ -461,14 +467,6 @@ export default defineComponent({
       return query
     },
 
-    currentLocale: function () {
-      return this.$i18n.locale.replace('_', '-')
-    },
-
-    showAddToPlaylistPrompt: function () {
-      return this.$store.getters.getShowAddToPlaylistPrompt
-    },
-
     useDeArrowTitles: function () {
       return this.$store.getters.getUseDeArrowTitles
     },
@@ -667,48 +665,8 @@ export default defineComponent({
         if (this.inHistory) {
           this.uploadedTime = new Date(this.data.published).toLocaleDateString([this.currentLocale, 'en'])
         } else {
-          const now = new Date().getTime()
-          // Convert from ms to second
-          // For easier code interpretation the value is made to be positive
-          let timeDiffFromNow = ((now - this.data.published) / 1000)
-          let timeUnit = 'second'
-
-          if (timeDiffFromNow >= 60) {
-            timeDiffFromNow /= 60
-            timeUnit = 'minute'
-          }
-
-          if (timeUnit === 'minute' && timeDiffFromNow >= 60) {
-            timeDiffFromNow /= 60
-            timeUnit = 'hour'
-          }
-
-          if (timeUnit === 'hour' && timeDiffFromNow >= 24) {
-            timeDiffFromNow /= 24
-            timeUnit = 'day'
-          }
-
-          const timeDiffFromNowDays = timeDiffFromNow
-
-          if (timeUnit === 'day' && timeDiffFromNow >= 7) {
-            timeDiffFromNow /= 7
-            timeUnit = 'week'
-          }
-
           // Use 30 days per month, just like calculatePublishedDate
-          if (timeUnit === 'week' && timeDiffFromNowDays >= 30) {
-            timeDiffFromNow = timeDiffFromNowDays / 30
-            timeUnit = 'month'
-          }
-
-          if (timeUnit === 'month' && timeDiffFromNow >= 12) {
-            timeDiffFromNow /= 12
-            timeUnit = 'year'
-          }
-
-          // Using `Math.ceil` so that -1.x days ago displayed as 1 day ago
-          // Notice that the value is turned to negative to be displayed as "ago"
-          this.uploadedTime = new Intl.RelativeTimeFormat([this.currentLocale, 'en']).format(Math.ceil(-timeDiffFromNow), timeUnit)
+          this.uploadedTime = getRelativeTimeFromDate(new Date(this.data.published).toDateString(), false)
         }
       }
 

src/renderer/components/ft-notification-banner/ft-notification-banner.css

@@ -30,3 +30,11 @@
   inset-inline-end: 10px;
   cursor: pointer;
 }
+
+@media only screen and (width <= 680px) {
+  .bannerIcon {
+    inset-block-start: 27%;
+    block-size: 25px;
+    inline-size: 25px;
+  }
+}

src/renderer/components/ft-notification-banner/ft-notification-banner.js

@@ -8,6 +8,7 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ['click'],
   methods: {
     handleClick: function (response) {
       this.$emit('click', response)

src/renderer/components/ft-notification-banner/ft-notification-banner.vue

@@ -24,7 +24,7 @@
       tabindex="0"
       :title="$t('Close Banner')"
       @click.stop="handleClose"
-      @keydown.enter.stop.prevent="handleClose"
+      @keydown.enter.space.stop.prevent="handleClose"
     />
   </div>
 </template>