From 7ebc1bff1692a3185e32c6d8f57258770d887992 Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Sun, 21 Jul 2024 14:09:14 +0200 Subject: [PATCH] [bugfix] fix sometimes maps duration were wrong --- package-lock.json | 10 ++++++++-- package.json | 1 + .../maps/filter-panel.component.tsx | 9 ++++----- .../maps/map-item.component.tsx | 13 +++++++------ .../local-playlist-filter-panel.component.tsx | 5 +++-- .../playlists/playlist-item.component.tsx | 9 +++++++-- .../edit-playlist-modal.component.tsx | 8 +++++--- .../playlist-details-template.component.tsx | 8 ++++---- 8 files changed, 39 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index ff096c51..2e078703 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "bs-manager", - "version": "1.5.0", + "version": "1.5.0-alpha.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "bs-manager", - "version": "1.5.0", + "version": "1.5.0-alpha.1", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -27,6 +27,7 @@ "electron-store": "^8.1.0", "electron-updater": "^6.2.1", "fast-deep-equal": "^3.1.3", + "format-duration": "^3.0.2", "framer-motion": "^11.2.6", "fs-extra": "^11.2.0", "got": "^14.4.1", @@ -12763,6 +12764,11 @@ "node": ">= 18" } }, + "node_modules/format-duration": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/format-duration/-/format-duration-3.0.2.tgz", + "integrity": "sha512-pKzJDSRgK2lqAiPW3uizDaIJaJnataZclsahz25UMwfdryBGDa+1HlbXGjzpMvX/2kMh4O0sNevFXKaEfCjHsA==" + }, "node_modules/formdata-polyfill": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", diff --git a/package.json b/package.json index 35dec24f..691e131c 100644 --- a/package.json +++ b/package.json @@ -248,6 +248,7 @@ "electron-store": "^8.1.0", "electron-updater": "^6.2.1", "fast-deep-equal": "^3.1.3", + "format-duration": "^3.0.2", "framer-motion": "^11.2.6", "fs-extra": "^11.2.0", "got": "^14.4.1", diff --git a/src/renderer/components/maps-playlists-panel/maps/filter-panel.component.tsx b/src/renderer/components/maps-playlists-panel/maps/filter-panel.component.tsx index 26648c9e..d4b71f31 100644 --- a/src/renderer/components/maps-playlists-panel/maps/filter-panel.component.tsx +++ b/src/renderer/components/maps-playlists-panel/maps/filter-panel.component.tsx @@ -2,8 +2,7 @@ import { BsvMapDetail, MapFilter, MapRequirement, MapSpecificity, MapStyle, MapT import { motion } from "framer-motion"; import { MutableRefObject, useEffect, useRef, useState } from "react"; import { BsmCheckbox } from "../../shared/bsm-checkbox.component"; -import { minToS } from "../../../../shared/helpers/time.helpers"; -import dateFormat from "dateformat"; +import { minToS, sToMs } from "../../../../shared/helpers/time.helpers"; import { BsmRange } from "../../shared/bsm-range.component"; import { useTranslation } from "renderer/hooks/use-translation.hook"; import { MAP_DIFFICULTIES_COLORS } from "shared/models/maps/difficulties-colors"; @@ -13,6 +12,7 @@ import clone from "rfdc"; import { GlowEffect } from "../../shared/glow-effect.component"; import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface"; import { SongDetails } from "shared/models/maps"; +import formatDuration from "format-duration"; export type Props = { className?: string; @@ -60,9 +60,8 @@ export function FilterPanel({ className, ref, playlist = false, filter, localDat if (sec === MAX_DURATION) { return "∞"; } - const date = new Date(0); - date.setSeconds(sec); - return sec > 3600 ? dateFormat(date, "h:MM:ss") : dateFormat(date, "MM:ss"); + const ms = sToMs(sec); + return formatDuration(ms, { leading: true }); })(); return renderLabel(textValue, sec === MAX_DURATION); diff --git a/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx b/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx index 615e5f1c..60e5017d 100644 --- a/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx +++ b/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx @@ -4,7 +4,7 @@ import { BsmLink } from "../../shared/bsm-link.component"; import { BsmIcon } from "../../svgs/bsm-icon.component"; import { BsmButton } from "../../shared/bsm-button.component"; import { AnimatePresence, motion } from "framer-motion"; -import { useState, Fragment, useRef } from "react"; +import { useState, Fragment, useRef, useMemo } from "react"; import { LinkOpenerService } from "renderer/services/link-opener.service"; import dateFormat from "dateformat"; import { AudioPlayerService } from "renderer/services/audio-player.service"; @@ -30,6 +30,8 @@ import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component"; import { BPListDifficulty } from "shared/models/playlists/playlist.interface"; import { useOnUpdate } from "renderer/hooks/use-on-update.hook"; import { cn } from "renderer/helpers/css-class.helpers"; +import { sToMs } from "shared/helpers/time.helpers"; +import formatDuration from "format-duration"; export type MapItemComponentProps = { hash: string; @@ -106,14 +108,13 @@ export function MapItemComponent ({ hash, title, autor, songAutor, return dateFormat(date, "d mmm yyyy"); }); - const durationText = (() => { + const durationText = useMemo(() => { if (!duration) { return null; } - const date = new Date(0); - date.setSeconds(duration); - return duration > 3600 ? dateFormat(date, "h:MM:ss") : dateFormat(date, "MM:ss"); - })(); + const durationMs = sToMs(duration); + return formatDuration(durationMs, { leading: true }); + }, [duration]); const parseDiffLabel = (diffLabel: string) => { if (MAP_DIFFICULTIES.includes(diffLabel as SongDiffName)) { diff --git a/src/renderer/components/maps-playlists-panel/playlists/local-playlist-filter-panel.component.tsx b/src/renderer/components/maps-playlists-panel/playlists/local-playlist-filter-panel.component.tsx index eb3b403d..7571c991 100644 --- a/src/renderer/components/maps-playlists-panel/playlists/local-playlist-filter-panel.component.tsx +++ b/src/renderer/components/maps-playlists-panel/playlists/local-playlist-filter-panel.component.tsx @@ -3,9 +3,9 @@ import { Dispatch, SetStateAction, useState } from "react"; import { BsmRange } from "renderer/components/shared/bsm-range.component"; import { cn } from "renderer/helpers/css-class.helpers" import { useTranslation } from "renderer/hooks/use-translation.hook"; -import dateFormat from "dateformat"; import { hourToS, sToMs } from "shared/helpers/time.helpers"; import { useOnUpdate } from "renderer/hooks/use-on-update.hook"; +import formatDuration from "format-duration"; type Props = { className?: string; @@ -81,7 +81,8 @@ export function LocalPlaylistFilterPanel({ className, filter, onChange }: Props) return "∞"; } - return sec > 3600 ? dateFormat(sToMs(sec), "h:MM:ss") : dateFormat(sToMs(sec), "MM:ss"); + const ms = sToMs(sec); + return formatDuration(ms, { leading: true }); })(); return renderLabel(textValue, sec === MAX_DURATION); diff --git a/src/renderer/components/maps-playlists-panel/playlists/playlist-item.component.tsx b/src/renderer/components/maps-playlists-panel/playlists/playlist-item.component.tsx index b9f89840..749136b6 100644 --- a/src/renderer/components/maps-playlists-panel/playlists/playlist-item.component.tsx +++ b/src/renderer/components/maps-playlists-panel/playlists/playlist-item.component.tsx @@ -5,7 +5,6 @@ import { ClockIcon } from 'renderer/components/svgs/icons/clock-icon.component'; import { MapIcon } from 'renderer/components/svgs/icons/map-icon.component'; import { PersonIcon } from 'renderer/components/svgs/icons/person-icon.component'; import { useThemeColor } from 'renderer/hooks/use-theme-color.hook'; -import dateFormat from 'dateformat'; import { NpsIcon } from 'renderer/components/svgs/icons/nps-icon.component'; import { GlowEffect } from 'renderer/components/shared/glow-effect.component'; import { memo, useState } from 'react'; @@ -18,6 +17,8 @@ import { BsmBasicSpinner } from 'renderer/components/shared/bsm-basic-spinner/bs import defaultImage from "../../../../../assets/images/default-version-img.jpg"; import equal from 'fast-deep-equal'; import { useTranslation } from 'renderer/hooks/use-translation.hook'; +import { sToMs } from 'shared/helpers/time.helpers'; +import formatDuration from 'format-duration'; export type PlaylistItemComponentProps = { title?: string; @@ -79,10 +80,14 @@ export const PlaylistItem = memo(({ title, const showNps = minNps !== undefined && maxNps !== undefined; const durationText = (() => { + + console.log("DURATION", duration); + if (!duration) { return null; } - return duration > 3600 ? dateFormat(duration * 1000, "h:MM:ss") : dateFormat(duration * 1000, "MM:ss"); + const durationMs = sToMs(duration); + return formatDuration(durationMs, { leading: true }); })(); return ( diff --git a/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx b/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx index 000b81fe..bc049861 100644 --- a/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx +++ b/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx @@ -27,7 +27,6 @@ import { MapIcon } from "renderer/components/svgs/icons/map-icon.component"; import { PersonIcon } from "renderer/components/svgs/icons/person-icon.component"; import { ClockIcon } from "renderer/components/svgs/icons/clock-icon.component"; import { NpsIcon } from "renderer/components/svgs/icons/nps-icon.component"; -import dateFormat from 'dateformat'; import { getCorrectTextColor } from "renderer/helpers/correct-text-color"; import { BPList, BPListDifficulty, PlaylistSong } from "shared/models/playlists/playlist.interface"; import { EditPlaylistInfosModal } from "./edit-playlist-infos-modal.component"; @@ -37,6 +36,8 @@ import { BsmImage } from "renderer/components/shared/bsm-image.component"; import BeatWaiting from "../../../../../../../assets/images/apngs/beat-waiting.png"; import BeatConflict from "../../../../../../../assets/images/apngs/beat-conflict.png"; import { findHashInString } from "shared/helpers/string.helpers"; +import { sToMs } from "shared/helpers/time.helpers"; +import formatDuration from "format-duration"; type Props = { maps$: Observable; @@ -362,6 +363,7 @@ export const EditPlaylistModal: ModalComponent = ({ resolver, opt const playlistDuration = useMemo(() => { if(!playlistMaps || Object.keys(playlistMaps).length === 0){ return "0:00"; } + const durations = Object.values(playlistMaps ?? {}).map(playlistMap => { if(!playlistMap?.map){ return 0; } @@ -380,8 +382,8 @@ export const EditPlaylistModal: ModalComponent = ({ resolver, opt return 0; }).filter(duration => !Number.isNaN(duration)); - const totalDuration = durations.reduce((acc, duration) => acc + duration, 0); - return totalDuration > 3600 ? dateFormat(totalDuration * 1000, "H:MM:ss") : dateFormat(totalDuration * 1000, "MM:ss"); + const totalDuration = sToMs(durations.reduce((acc, duration) => acc + duration, 0)); + return formatDuration(totalDuration, { leading: true }); }, [playlistMaps]); const [playlistMinNps, playlistMaxNps] = useMemo(() => { diff --git a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx index 49764418..cd8066dc 100644 --- a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx +++ b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx @@ -1,6 +1,5 @@ import { ReactNode } from "react" import { BsmImage } from "renderer/components/shared/bsm-image.component"; -import dateFormat from "dateformat"; import { MapIcon } from "renderer/components/svgs/icons/map-icon.component"; import { PersonIcon } from "renderer/components/svgs/icons/person-icon.component"; import { ClockIcon } from "renderer/components/svgs/icons/clock-icon.component"; @@ -9,6 +8,8 @@ import { useThemeColor } from "renderer/hooks/use-theme-color.hook"; import { ThemeColorGradientSpliter } from "renderer/components/shared/theme-color-gradient-spliter.component"; import { CrossIcon } from "renderer/components/svgs/icons/cross-icon.component"; import { useTranslation } from "renderer/hooks/use-translation.hook"; +import { sToMs } from "shared/helpers/time.helpers"; +import formatDuration from "format-duration"; export type PlaylistDetailsTemplateProps = { title: string; @@ -40,9 +41,8 @@ export function PlaylistDetailsTemplate({title, imagebase64, imageUrl, author, d if (!duration) { return null; } - const date = new Date(0); - date.setSeconds(duration); - return duration > 3600 ? dateFormat(date, "h:MM:ss") : dateFormat(date, "MM:ss"); + const durationMs = sToMs(duration); + return formatDuration(durationMs, { leading: true }); })(); return (