MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-02-04 10:26:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Replace date library moments.js with luxon

Browse Source
This commit is contained in:
chme 2022-04-15 19:47:36 +02:00
parent 708765537c
commit 81491367fc
16 changed files with 72 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web-src/package-lock.json generated
View File

@ -14,9 +14,8 @@
"axios": "^0.26.1",
"bulma": "^0.9.3",
"bulma-switch": "^2.0.4",
"luxon": "^2.3.1",
"mdi": "^2.2.43",
"moment": "^2.29.2",
"moment-duration-format": "^2.3.2",
"reconnectingwebsocket": "^1.0.0",
"spotify-web-api-js": "^1.5.2",
"string-to-color": "^2.2.2",
@ -1470,6 +1469,14 @@
"node": ">=10"
}
},
"node_modules/luxon": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
"integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA==",
"engines": {
"node": ">=12"
}
},
"node_modules/magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@ -1496,19 +1503,6 @@
"node": "*"
}
},
"node_modules/moment": {
"version": "2.29.2",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz",
"integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==",
"engines": {
"node": "*"
}
},
"node_modules/moment-duration-format": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/moment-duration-format/-/moment-duration-format-2.3.2.tgz",
"integrity": "sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ=="
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -3138,6 +3132,11 @@
"yallist": "^4.0.0"
}
},
"luxon": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
"integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA=="
},
"magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@ -3160,16 +3159,6 @@
"brace-expansion": "^1.1.7"
}
},
"moment": {
"version": "2.29.2",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz",
"integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg=="
},
"moment-duration-format": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/moment-duration-format/-/moment-duration-format-2.3.2.tgz",
"integrity": "sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

3
web-src/package.json
View File

@ -16,9 +16,8 @@
"axios": "^0.26.1",
"bulma": "^0.9.3",
"bulma-switch": "^2.0.4",
"luxon": "^2.3.1",
"mdi": "^2.2.43",
"moment": "^2.29.2",
"moment-duration-format": "^2.3.2",
"reconnectingwebsocket": "^1.0.0",
"spotify-web-api-js": "^1.5.2",
"string-to-color": "^2.2.2",

2
web-src/src/App.vue
View File

@ -33,7 +33,6 @@ import ModalDialogUpdate from '@/components/ModalDialogUpdate.vue'
import webapi from '@/webapi'
import * as types from '@/store/mutation_types'
import ReconnectingWebSocket from 'reconnectingwebsocket'
import moment from 'moment'
export default {
name: 'App',
@ -90,7 +89,6 @@ export default {
},
created: function () {
moment.locale(navigator.language)
this.connect()
// Start the progress bar on app start

2
web-src/src/components/ListAlbums.vue
View File

@ -34,7 +34,7 @@
v-if="album.item.date_released && album.item.media_kind === 'music'"
class="subtitle is-7 has-text-grey has-text-weight-normal"
>
{{ $filters.time(album.item.date_released, 'L') }}
{{ $filters.date(album.item.date_released) }}
</h2>
</div>
</div>

6
web-src/src/components/ModalDialogAlbum.vue
View File

@ -35,7 +35,7 @@
<p v-if="album.date_released">
<span class="heading">Release date</span>
<span class="title is-6">{{
$filters.time(album.date_released, 'L')
$filters.date(album.date_released)
}}</span>
</p>
<p v-else-if="album.year > 0">
@ -49,7 +49,7 @@
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.duration(album.length_ms)
$filters.durationInHours(album.length_ms)
}}</span>
</p>
<p>
@ -61,7 +61,7 @@
<p>
<span class="heading">Added at</span>
<span class="title is-6">{{
$filters.time(album.time_added, 'L LT')
$filters.datetime(album.time_added)
}}</span>
</p>
</div>

2
web-src/src/components/ModalDialogArtist.vue
View File

@ -27,7 +27,7 @@
<p>
<span class="heading">Added at</span>
<span class="title is-6">{{
$filters.time(artist.time_added, 'L LT')
$filters.datetime(artist.time_added)
}}</span>
</p>
</div>

2
web-src/src/components/ModalDialogComposer.vue
View File

@ -26,7 +26,7 @@
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.duration(composer.length_ms)
$filters.durationInHours(composer.length_ms)
}}</span>
</p>
</div>

2
web-src/src/components/ModalDialogGenre.vue
View File

@ -23,7 +23,7 @@
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.duration(genre.length_ms)
$filters.durationInHours(genre.length_ms)
}}</span>
</p>
</div>

2
web-src/src/components/ModalDialogQueueItem.vue
View File

@ -56,7 +56,7 @@
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.duration(item.length_ms)
$filters.durationInHours(item.length_ms)
}}</span>
</p>
<p>

6
web-src/src/components/ModalDialogTrack.vue
View File

@ -48,7 +48,7 @@
<p v-if="track.date_released">
<span class="heading">Release date</span>
<span class="title is-6">{{
$filters.time(track.date_released, 'L')
$filters.date(track.date_released)
}}</span>
</p>
<p v-else-if="track.year > 0">
@ -70,7 +70,7 @@
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.duration(track.length_ms)
$filters.durationInHours(track.length_ms)
}}</span>
</p>
<p>
@ -107,7 +107,7 @@
<p>
<span class="heading">Added at</span>
<span class="title is-6">{{
$filters.time(track.time_added, 'L LT')
$filters.datetime(track.time_added)
}}</span>
</p>
<p>

2
web-src/src/components/SpotifyListItemAlbum.vue
View File

@ -11,7 +11,7 @@
<b>{{ album.artists[0].name }}</b>
</h2>
<h2 class="subtitle is-7 has-text-grey has-text-weight-normal">
({{ album.album_type }}, {{ $filters.time(album.release_date, 'L') }})
({{ album.album_type }}, {{ $filters.date(album.release_date) }})
</h2>
</div>
<div class="media-right">

2
web-src/src/components/SpotifyModalDialogAlbum.vue
View File

@ -32,7 +32,7 @@
<p>
<span class="heading">Release date</span>
<span class="title is-6">{{
$filters.time(album.release_date, 'L')
$filters.date(album.release_date)
}}</span>
</p>
<p>

4
web-src/src/components/SpotifyModalDialogTrack.vue
View File

@ -28,7 +28,7 @@
<p>
<span class="heading">Release date</span>
<span class="title is-6">{{
$filters.time(album.release_date, 'L')
$filters.date(album.release_date)
}}</span>
</p>
<p>
@ -40,7 +40,7 @@
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.duration(track.duration_ms)
$filters.durationInHours(track.duration_ms)
}}</span>
</p>
<p>

50
web-src/src/filter/index.js
View File

@ -1,25 +1,47 @@
import moment from 'moment'
import momentDurationFormatSetup from 'moment-duration-format'
momentDurationFormatSetup(moment)
import { DateTime, Duration } from 'luxon'
export const filters = {
duration: function (value, format) {
if (format) {
return moment.duration(value).format(format)
durationInHours: function (value_ms) {
const seconds = Math.floor(value_ms / 1000)
if (seconds > 3600) {
return Duration.fromObject({ seconds: seconds })
.shiftTo('hours', 'minutes', 'seconds')
.toFormat('hh:mm:ss')
}
return moment.duration(value).format('hh:*mm:ss')
return Duration.fromObject({ seconds: seconds })
.shiftTo('minutes', 'seconds')
.toFormat('mm:ss')
},
time: function (value, format) {
if (format) {
return moment(value).format(format)
durationInDays: function (value_ms) {
const minutes = Math.floor(value_ms / 60000)
if (minutes > 1440) {
// 60 * 24
return Duration.fromObject({ minutes: minutes })
.shiftTo('days', 'hours', 'minutes')
.toHuman()
} else if (minutes > 60) {
return Duration.fromObject({ minutes: minutes })
.shiftTo('hours', 'minutes')
.toHuman()
}
return moment(value).format()
return Duration.fromObject({ minutes: minutes })
.shiftTo('minutes')
.toHuman()
},
timeFromNow: function (value, withoutSuffix) {
return moment(value).fromNow(withoutSuffix)
date: function (value) {
return DateTime.fromISO(value).toLocaleString(DateTime.DATE_FULL)
},
datetime: function (value) {
return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_MED)
},
timeFromNow: function (value) {
var diff = DateTime.now().diff(DateTime.fromISO(value))
return this.durationInDays(diff.as('milliseconds'))
},
number: function (value) {

13
web-src/src/pages/PageAbout.vue
View File

@ -61,20 +61,15 @@
<tr>
<th>Total playtime</th>
<td class="has-text-right">
{{
$filters.duration(
library.db_playtime * 1000,
'y [years], d [days], h [hours], m [minutes]'
)
}}
{{ $filters.durationInDays(library.db_playtime * 1000) }}
</td>
</tr>
<tr>
<th>Library updated</th>
<td class="has-text-right">
{{ $filters.timeFromNow(library.updated_at) }}
{{ $filters.timeFromNow(library.updated_at) }} ago
<span class="has-text-grey"
>({{ $filters.time(library.updated_at, 'lll') }})</span
>({{ $filters.datetime(library.updated_at) }})</span
>
</td>
</tr>
@ -83,7 +78,7 @@
<td class="has-text-right">
{{ $filters.timeFromNow(library.started_at, true) }}
<span class="has-text-grey"
>({{ $filters.time(library.started_at, 'll') }})</span
>({{ $filters.datetime(library.started_at) }})</span
>
</td>
</tr>

4
web-src/src/pages/PageNowPlaying.vue
View File

@ -38,8 +38,8 @@
</p>
<p class="content">
<span
>{{ $filters.duration(item_progress_ms) }} /
{{ $filters.duration(now_playing.length_ms) }}</span
>{{ $filters.durationInHours(item_progress_ms) }} /
{{ $filters.durationInHours(now_playing.length_ms) }}</span
>
</p>
</div>