From ecb4e853e41be3bf92f4a7c4aa52cac7886db39e Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Sat, 25 Mar 2023 07:47:07 +0530
Subject: [PATCH] Localize durations and update dependencies

---
 package.json                           |  3 +-
 src/components/Video/VideoChapters.vue |  4 +-
 src/components/Video/VideoItem.vue     |  5 +-
 src/routes/FeedPage.vue                |  4 +-
 src/routes/SearchResults.vue           |  4 --
 src/routes/WatchHistory.vue            |  7 +--
 src/routes/WatchVideo.vue              |  2 +-
 src/store/i18n-store.js                | 11 ++++
 src/tools/libpiped.js                  |  5 --
 yarn.lock                              | 73 ++++++++++++++++++--------
 10 files changed, 69 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index ba6dd39..d9d1166 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,9 @@
     "core-js": "^3.29.1",
     "dexie": "^3.2.3",
     "dompurify": "^2.4.5",
-    "format-duration": "^1.4.0",
     "i18n-iso-countries": "^6.8.0",
+    "intl-messageformat": "^10.3.3",
+    "intl-unofficial-duration-unit-format": "^3.1.0",
     "javascript-time-ago": "https://bafybeicafhqxxnrmlt5fipy7zf46je4u6iwady7fiqrwcszhpk7ztno6pe.ipfs.cf-ipfs.com/?filename=jta.tar.gz",
     "lodash-es": "^4.17.21",
     "marked": "^3.0.8",
diff --git a/src/components/Video/VideoChapters.vue b/src/components/Video/VideoChapters.vue
index 2b9f06d..5fd4f18 100644
--- a/src/components/Video/VideoChapters.vue
+++ b/src/components/Video/VideoChapters.vue
@@ -12,15 +12,13 @@
 </template>
 
 <script>
-import formatDuration from 'format-duration'
-
 export default {
 	name: 'VideoChapters',
 	props: ['chapters'],
 	computed: {
 		humanizedChapters () {
 			return this.chapters.map(ch => {
-				ch.humanizedStart = formatDuration(ch.start * 1000)
+				ch.humanizedStart = this.$store.getters['i18n/fmtDuration'](ch.start)
 				return ch
 			})
 		}
diff --git a/src/components/Video/VideoItem.vue b/src/components/Video/VideoItem.vue
index e9907a0..767f5ea 100644
--- a/src/components/Video/VideoItem.vue
+++ b/src/components/Video/VideoItem.vue
@@ -27,7 +27,7 @@
                 {{ video.uploadedDate }}
             </span>
             <br/>
-            {{ timeFormat(video.duration) }}
+            {{ $store.getters['i18n/fmtDuration'](video.duration) }}
         </v-card-text>
         <slot name="bottom" />
     </v-card>
@@ -102,9 +102,6 @@ export default {
 					this.alreadyWatched = false
 				}
 			}
-		},
-		timeFormat (...args) {
-			return LibPiped.timeFormat(...args)
 		}
 	}
 }
diff --git a/src/routes/FeedPage.vue b/src/routes/FeedPage.vue
index 4db597e..5ff8742 100644
--- a/src/routes/FeedPage.vue
+++ b/src/routes/FeedPage.vue
@@ -57,8 +57,6 @@ import NGErrorHandler from '@/components/NGErrorHandler'
 import GridRow from '@/components/Grid/GridRow'
 import GridCol from '@/components/Grid/GridCol'
 
-import { LibPiped } from '@/tools/libpiped'
-
 const PAGE_SIZE = 50
 let lastAbortController = new AbortController()
 
@@ -83,7 +81,7 @@ export default {
 	metaInfo () {
 		let generatedDescription = ''
 		for (const vid of this.videos) {
-			generatedDescription += `${vid.title} — ${this.$store.getters['i18n/fmtFullNumber'](vid.views)} views (${LibPiped.timeFormat(vid.duration)})\n`
+			generatedDescription += `${vid.title} — ${this.$store.getters['i18n/fmtFullNumber'](vid.views)} views (${this.$store.getters['i18n/fmtDuration'](vid.duration)})\n`
 		}
 
 		return {
diff --git a/src/routes/SearchResults.vue b/src/routes/SearchResults.vue
index b04e831..eb4aa8e 100644
--- a/src/routes/SearchResults.vue
+++ b/src/routes/SearchResults.vue
@@ -29,7 +29,6 @@
 </template>
 
 <script>
-import { LibPiped } from '@/tools/libpiped'
 import VideoItem from '@/components/Video/VideoItem'
 import GenericDisplayItem from '@/components/GenericDisplayItem'
 import GridRow from '@/components/Grid/GridRow'
@@ -107,9 +106,6 @@ export default {
 			})
 		},
 
-		timeFormat (...args) {
-			return LibPiped.timeFormat(...args)
-		},
 		async updateResults () {
 			this.results = this.fetchResults().then(json => {
 				json.items = json.items.map(this.rationalizeSearchResult)
diff --git a/src/routes/WatchHistory.vue b/src/routes/WatchHistory.vue
index 53e5e29..2ff5c91 100644
--- a/src/routes/WatchHistory.vue
+++ b/src/routes/WatchHistory.vue
@@ -14,7 +14,7 @@
                 <VideoItem :video="doc.video" :src-progress="doc.progressPcnt" max-height>
                     <template v-slot:top>
                         <ExpandableDate message-key="misc.watchedAgo"
-                                        :message-arguments="{ p: timeFormat(doc.progress) }" :date="doc.timestamp"/>
+                                        :message-arguments="{ p: $store.getters['i18n/fmtDuration'](doc.progress) }" :date="doc.timestamp"/>
                         <br/>
                     </template>
                 </VideoItem>
@@ -27,7 +27,6 @@
 <script>
 import _chunk from 'lodash-es/chunk'
 
-import { LibPiped } from '@/tools/libpiped'
 import { deleteWatchedVideos, PMDB } from '@/store/watched-videos-db'
 import VideoItem from '@/components/Video/VideoItem'
 import ExpandableDate from '@/components/ExpandableDate'
@@ -54,10 +53,6 @@ export default {
 	},
 
 	methods: {
-		timeFormat (t) {
-			return LibPiped.timeFormat(t)
-		},
-
 		async loadData () {
 			if (!this.unfinishedVideosSwitch) {
 				this.data = await PMDB.watchedVideos.orderBy('timestamp').reverse().offset((this.currentPage - 1) * PAGE_SIZE).limit(PAGE_SIZE).toArray()
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
index 450fce4..270686d 100644
--- a/src/routes/WatchVideo.vue
+++ b/src/routes/WatchVideo.vue
@@ -419,7 +419,7 @@ export default {
 		},
 
 		lastWatchDurationH () {
-			return LibPiped.timeFormat(this.lastWatch.progress)
+			return this.$store.getters['i18n/fmtDuration'](this.lastWatch.progress)
 		}
 	},
 	components: {
diff --git a/src/store/i18n-store.js b/src/store/i18n-store.js
index bf03f20..00e44d3 100644
--- a/src/store/i18n-store.js
+++ b/src/store/i18n-store.js
@@ -1,3 +1,5 @@
+import DurationUnitFormat from 'intl-unofficial-duration-unit-format'
+
 export const i18nStore = {
 	namespaced: true,
 	state: () => ({
@@ -5,6 +7,7 @@ export const i18nStore = {
 		dateFormatter: null,
 		fullNumberFormatter: null,
 		abbreviatedNumFormatter: null,
+		durationFormatter: null,
 		timeAgo: null,
 		languageFormatter: null,
 		collator: null,
@@ -33,6 +36,10 @@ export const i18nStore = {
 			state.languageFormatter = new Intl.DisplayNames([intlLocale, 'en-US'], {
 				type: 'language'
 			})
+			state.durationFormatter = new DurationUnitFormat(intlLocale, {
+				style: DurationUnitFormat.styles.NARROW,
+				format: '{hours} {minutes} {seconds}'
+			})
 			state.collator = new Intl.Collator(intlLocale)
 			state.timeAgo = timeAgo
 
@@ -60,6 +67,10 @@ export const i18nStore = {
 			return state.abbreviatedNumFormatter.format(num)
 		},
 
+		fmtDuration: state => dur => {
+			return state.durationFormatter.format(dur)
+		},
+
 		fmtDate: state => dt => {
 			return state.dateFormatter.format(dt)
 		},
diff --git a/src/tools/libpiped.js b/src/tools/libpiped.js
index af6f5e7..4f0071e 100644
--- a/src/tools/libpiped.js
+++ b/src/tools/libpiped.js
@@ -1,15 +1,10 @@
 import DOMPurify from 'dompurify'
-import formatDuration from 'format-duration'
 
 class LibPiped {
 	pad (num, size) {
 		return ('000' + num).slice(size * -1)
 	}
 
-	timeFormat (durationInSeconds) {
-		return formatDuration(durationInSeconds * 1000)
-	}
-
 	purifyHTML (original) {
 		return DOMPurify.sanitize(original)
 	}
diff --git a/yarn.lock b/yarn.lock
index 8649182..e7eb897 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1033,7 +1033,39 @@
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.8.tgz#56347764786079838faf43f0eeda22dd7328437f"
   integrity sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA==
 
-"@formatjs/intl-localematcher@^0.2.32":
+"@formatjs/ecma402-abstract@1.14.3":
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz#6428f243538a11126180d121ce8d4b2f17465738"
+  integrity sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.32"
+    tslib "^2.4.0"
+
+"@formatjs/fast-memoize@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.0.1.tgz#f15aaa73caad5562899c69bdcad8db82adcd3b0b"
+  integrity sha512-M2GgV+qJn5WJQAYewz7q2Cdl6fobQa69S1AzSM2y0P68ZDbK5cWrJIcPCO395Of1ksftGZoOt4LYCO/j9BKBSA==
+  dependencies:
+    tslib "^2.4.0"
+
+"@formatjs/icu-messageformat-parser@2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz#8e8fd577c3e39454ef14bba4963f2e1d5f2cc46c"
+  integrity sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.14.3"
+    "@formatjs/icu-skeleton-parser" "1.3.18"
+    tslib "^2.4.0"
+
+"@formatjs/icu-skeleton-parser@1.3.18":
+  version "1.3.18"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz#7aed3d60e718c8ad6b0e64820be44daa1e29eeeb"
+  integrity sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.14.3"
+    tslib "^2.4.0"
+
+"@formatjs/intl-localematcher@0.2.32", "@formatjs/intl-localematcher@^0.2.32":
   version "0.2.32"
   resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz#00d4d307cd7d514b298e15a11a369b86c8933ec1"
   integrity sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ==
@@ -1896,11 +1928,6 @@ acorn@^8.0.4, acorn@^8.0.5, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
-add-zero@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/add-zero/-/add-zero-1.0.0.tgz#88e221696717f66db467672f3f9aa004de9f1a2c"
-  integrity sha512-WpPiUgy7h9Kd7NY0aTuhfx7vjub3XYbZCq1W2e/LMvUsEmYK/hz8xgFDmd0GnKpk44HXFwIFu1hEOivc+MzJ0Q==
-
 address@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.0.tgz#d352a62c92fee90f89a693eccd2a8b2139ab02d9"
@@ -2359,9 +2386,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
-  version "1.0.30001374"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz#3dab138e3f5485ba2e74bd13eca7fe1037ce6f57"
-  integrity sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==
+  version "1.0.30001469"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz"
+  integrity sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"
@@ -3764,14 +3791,6 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-format-duration@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/format-duration/-/format-duration-1.4.0.tgz#6ad86c88f504150873cd28ca82d26a26898d9971"
-  integrity sha512-Mcg3hOAiKxo6JRBgfrQ+sbVvr3D9/4wE7eDQXx3WV2d/yKmrcHXHJS4OhrqVeg+iiFE2Op+pHhdOkQUl8yIclw==
-  dependencies:
-    add-zero "^1.0.0"
-    parse-ms "^1.0.1"
-
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -4277,6 +4296,21 @@ interpret@^1.0.0, interpret@^1.4.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
+intl-messageformat@^10.3.3:
+  version "10.3.3"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.3.3.tgz#576798d31c9f8d90f9beadaa5a3878b8d30177a2"
+  integrity sha512-un/f07/g2e/3Q8e1ghDKET+el22Bi49M7O/rHxd597R+oLpPOMykSv5s51cABVfu3FZW+fea4hrzf2MHu1W4hw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.14.3"
+    "@formatjs/fast-memoize" "2.0.1"
+    "@formatjs/icu-messageformat-parser" "2.3.0"
+    tslib "^2.4.0"
+
+intl-unofficial-duration-unit-format@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/intl-unofficial-duration-unit-format/-/intl-unofficial-duration-unit-format-3.1.0.tgz#994feefc8d903d9e5044dc7e4e1d38ebad59394b"
+  integrity sha512-yjvUDwV63zSGkbeUqpDRJmOgMQoJA8OFhNeo+1KY20q+lFCtcvRWszJNsq/ssrUJRy8g+Mt3BYNfwFvRRSAkow==
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -5385,11 +5419,6 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-ms@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-1.0.1.tgz#56346d4749d78f23430ca0c713850aef91aa361d"
-  integrity sha512-LpH1Cf5EYuVjkBvCDBYvkUPh+iv2bk3FHflxHkpCYT0/FZ1d3N3uJaLiHr4yGuMcFUhv6eAivitTvWZI4B/chg==
-
 parse5-htmlparser2-tree-adapter@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"