Merge branch 'development' into feature/playlist-search-playlists-wit…

…h-matching-videos * development: Fix handling of video published date in video lists (#4752) Translated using Weblate (Dutch) Translated using Weblate (Chinese (Simplified)) Bump lefthook from 1.6.4 to 1.6.5 (#4758) Bump marked from 12.0.0 to 12.0.1 (#4757) Bump electron from 29.1.0 to 29.1.1 (#4756) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese (Brazil)) Improve touch controls for dash quality selector (#4750) Translated using Weblate (Serbian) Translated using Weblate (Spanish) Translated using Weblate (French) Translated using Weblate (German) Translated using Weblate (Estonian)
FreeTubeApp · Mar 13, 2024 · 81c8234 · 81c8234
2 parents 834adc8 + 98aded9
commit 81c8234
Show file tree

Hide file tree

Showing 27 changed files with 286 additions and 216 deletions.
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "autolinker": "^4.0.0",
     "electron-context-menu": "^3.6.1",
     "lodash.debounce": "^4.0.8",
-    "marked": "^12.0.0",
+    "marked": "^12.0.1",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "swiper": "^11.0.7",
@@ -89,7 +89,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
-    "electron": "^29.1.0",
+    "electron": "^29.1.1",
     "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -106,7 +106,7 @@
     "html-webpack-plugin": "^5.6.0",
     "js-yaml": "^4.1.0",
     "json-minimizer-webpack-plugin": "^5.0.0",
-    "lefthook": "^1.6.4",
+    "lefthook": "^1.6.5",
     "mini-css-extract-plugin": "^2.8.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.35",

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -7,7 +7,6 @@ import {
   formatNumber,
   openExternalLink,
   showToast,
-  toLocalePublicationString,
   toDistractionFreeTitle,
   deepCopy
 } from '../../helpers/utils'
@@ -98,7 +97,7 @@ export default defineComponent({
       duration: '',
       description: '',
       watchProgress: 0,
-      publishedText: '',
+      published: undefined,
       isLive: false,
       isUpcoming: false,
       isPremium: false,
@@ -657,60 +656,60 @@ export default defineComponent({
         if (typeof premiereDate === 'string') {
           premiereDate = new Date(premiereDate)
         }
-        this.publishedText = premiereDate.toLocaleString()
+        this.uploadedTime = premiereDate.toLocaleString([this.currentLocale, 'en'])
+        this.published = premiereDate.getTime()
       } else if (typeof (this.data.premiereTimestamp) !== 'undefined') {
-        this.publishedText = new Date(this.data.premiereTimestamp * 1000).toLocaleString()
-      } else {
-        this.publishedText = this.data.publishedText
-      }
+        this.uploadedTime = new Date(this.data.premiereTimestamp * 1000).toLocaleString([this.currentLocale, 'en'])
+        this.published = this.data.premiereTimestamp * 1000
+      } else if (typeof this.data.published === 'number' && !this.isLive) {
+        this.published = this.data.published
 
-      if (this.data.isRSS && this.data.publishedDate != null && !this.isLive) {
-        const now = new Date()
-        // Convert from ms to second
-        // For easier code interpretation the value is made to be positive
-        // `publishedDate` is sometimes a string, e.g. when switched back from another view
-        const publishedDate = Date.parse(this.data.publishedDate)
-        let timeDiffFromNow = ((now - publishedDate) / 1000)
-        let timeUnit = 'second'
+        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 (timeDiffFromNow > 60) {
-          timeDiffFromNow /= 60
-          timeUnit = 'minute'
-        }
+          if (timeUnit === 'minute' && timeDiffFromNow >= 60) {
+            timeDiffFromNow /= 60
+            timeUnit = 'hour'
+          }
 
-        if (timeUnit === 'minute' && timeDiffFromNow > 60) {
-          timeDiffFromNow /= 60
-          timeUnit = 'hour'
-        }
+          if (timeUnit === 'hour' && timeDiffFromNow >= 24) {
+            timeDiffFromNow /= 24
+            timeUnit = 'day'
+          }
 
-        if (timeUnit === 'hour' && timeDiffFromNow > 24) {
-          timeDiffFromNow /= 24
-          timeUnit = 'day'
-        }
+          const timeDiffFromNowDays = timeDiffFromNow
 
-        // Diff month might have diff no. of days
-        // To ensure the display is fine we use 31
-        if (timeUnit === 'day' && timeDiffFromNow > 31) {
-          timeDiffFromNow /= 24
-          timeUnit = 'month'
-        }
+          if (timeUnit === 'day' && timeDiffFromNow >= 7) {
+            timeDiffFromNow /= 7
+            timeUnit = 'week'
+          }
 
-        if (timeUnit === 'month' && timeDiffFromNow > 12) {
-          timeDiffFromNow /= 12
-          timeUnit = 'year'
-        }
+          // Use 30 days per month, just like calculatePublishedDate
+          if (timeUnit === 'week' && timeDiffFromNowDays >= 30) {
+            timeDiffFromNow = timeDiffFromNowDays / 30
+            timeUnit = 'month'
+          }
 
-        // 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).format(Math.ceil(-timeDiffFromNow), timeUnit)
-      } else if (this.publishedText && !this.isLive) {
-        // produces a string according to the template in the locales string
-        this.uploadedTime = toLocalePublicationString({
-          publishText: this.publishedText,
-          isLive: this.isLive,
-          isUpcoming: this.isUpcoming,
-          isRSS: this.data.isRSS
-        })
+          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)
+        }
       }
 
       if (this.hideVideoViews) {
@@ -732,14 +731,6 @@ export default defineComponent({
           // For UX consistency, no progress reading if writing disabled
           this.watchProgress = historyEntry.watchProgress
         }
-
-        if (historyEntry.published !== '') {
-          const videoPublished = historyEntry.published
-          const videoPublishedDate = new Date(videoPublished)
-          this.publishedText = videoPublishedDate.toLocaleDateString()
-        } else {
-          this.publishedText = ''
-        }
       } else {
         this.watchProgress = 0
       }
@@ -751,7 +742,7 @@ export default defineComponent({
         title: this.title,
         author: this.channelName,
         authorId: this.channelId,
-        published: this.publishedText ? this.publishedText.split(',')[0] : this.publishedText,
+        published: this.published,
         description: this.description,
         viewCount: this.viewCount,
         lengthSeconds: this.data.lengthSeconds,

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -137,13 +137,9 @@
           {{ $tc('Global.Counts.View Count', viewCount, {count: parsedViewCount}) }}
         </span>
         <span
-          v-if="uploadedTime !== '' && !isLive && !inHistory"
+          v-if="uploadedTime !== '' && !isLive"
           class="uploadedTime"
         > • {{ uploadedTime }}</span>
-        <span
-          v-if="inHistory"
-          class="uploadedTime"
-        > • {{ publishedText }}</span>
         <span
           v-if="isLive && !hideViews"
           class="viewCount"

diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -29,3 +29,9 @@
   background-color: #000;
 }
 /* stylelint-enable liberty/use-logical-spec */
+
+@media only screen and (max-width: 460px) {
+  :deep(.dash-selector .vjs-menu) {
+    max-block-size: 14em;
+  }
+}
diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js
@@ -1817,6 +1817,34 @@ export default defineComponent({
 
           // For default auto, it may select a resolution before generating the quality buttons
           button.querySelector('#vjs-current-quality').innerText = defaultIsAuto ? autoQualityLabel : currentQualityLabel
+          const vjsMenu = button.querySelector('.vjs-menu')
+          let isTapping = false
+          button.addEventListener('touchstart', () => {
+            isTapping = true
+          })
+          button.addEventListener('touchmove', () => {
+            // if they are moving, they cannot be tapping
+            isTapping = false
+          })
+          button.addEventListener('touchend', (e) => {
+            if (isTapping) {
+              button.focus()
+              // make it easier to toggle the vjs-menu on touch (hover css is inconsistent w/ touch)
+              if (!e.target.classList.contains('quality-item') && !e.target.classList.contains('vjs-menu-item-text')) {
+                vjsMenu.classList.toggle('vjs-lock-showing')
+              } else {
+                // hide the quality selector on select (just like the other quality selectors do on mobile)
+                vjsMenu.classList.remove('vjs-lock-showing')
+              }
+              this.handleClick(e)
+              isTapping = false
+            }
+          })
+          button.addEventListener('focusout', () => {
+            // remove class which shows the selector
+            vjsMenu.classList.remove('vjs-lock-showing')
+          })
+          button.classList.add('dash-selector')
 
           return button.children[0]
         }

diff --git a/src/renderer/components/subscriptions-live/subscriptions-live.js b/src/renderer/components/subscriptions-live/subscriptions-live.js
@@ -2,10 +2,10 @@ import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import SubscriptionsTabUI from '../subscriptions-tab-ui/subscriptions-tab-ui.vue'
 
-import { copyToClipboard, showToast } from '../../helpers/utils'
+import { setPublishedTimestampsInvidious, copyToClipboard, showToast } from '../../helpers/utils'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 import { getLocalChannelLiveStreams } from '../../helpers/api/local'
-import { addPublishedDatesInvidious, addPublishedDatesLocal, parseYouTubeRSSFeed, updateVideoListAfterProcessing } from '../../helpers/subscriptions'
+import { parseYouTubeRSSFeed, updateVideoListAfterProcessing } from '../../helpers/subscriptions'
 
 export default defineComponent({
   name: 'SubscriptionsLive',
@@ -198,8 +198,6 @@ export default defineComponent({
           }
         }
 
-        addPublishedDatesLocal(result.videos)
-
         return result
       } catch (err) {
         console.error(err)
@@ -294,7 +292,7 @@ export default defineComponent({
         invidiousAPICall(subscriptionsPayload).then((result) => {
           const videos = result.videos.filter(e => e.type === 'video')
 
-          addPublishedDatesInvidious(videos)
+          setPublishedTimestampsInvidious(videos)
 
           let name
 

diff --git a/src/renderer/components/subscriptions-videos/subscriptions-videos.js b/src/renderer/components/subscriptions-videos/subscriptions-videos.js
@@ -2,10 +2,10 @@ import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import SubscriptionsTabUI from '../subscriptions-tab-ui/subscriptions-tab-ui.vue'
 
-import { copyToClipboard, showToast } from '../../helpers/utils'
+import { setPublishedTimestampsInvidious, copyToClipboard, showToast } from '../../helpers/utils'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 import { getLocalChannelVideos } from '../../helpers/api/local'
-import { addPublishedDatesInvidious, addPublishedDatesLocal, parseYouTubeRSSFeed, updateVideoListAfterProcessing } from '../../helpers/subscriptions'
+import { parseYouTubeRSSFeed, updateVideoListAfterProcessing } from '../../helpers/subscriptions'
 
 export default defineComponent({
   name: 'SubscriptionsVideos',
@@ -198,8 +198,6 @@ export default defineComponent({
           }
         }
 
-        addPublishedDatesLocal(result.videos)
-
         return result
       } catch (err) {
         console.error(err)
@@ -291,7 +289,7 @@ export default defineComponent({
         }
 
         invidiousAPICall(subscriptionsPayload).then((result) => {
-          addPublishedDatesInvidious(result.videos)
+          setPublishedTimestampsInvidious(result.videos)
 
           let name
 

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
@@ -3,7 +3,7 @@ import { mapMutations } from 'vuex'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtListVideoNumbered from '../ft-list-video-numbered/ft-list-video-numbered.vue'
-import { copyToClipboard, showToast } from '../../helpers/utils'
+import { copyToClipboard, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
 import {
   getLocalPlaylist,
   parseLocalPlaylistVideo,
@@ -451,6 +451,8 @@ export default defineComponent({
         this.playlistTitle = result.title
         this.channelName = result.author
         this.channelId = result.authorId
+
+        setPublishedTimestampsInvidious(result.videos)
         this.playlistItems = this.playlistItems.concat(result.videos)
 
         this.isLoading = false