trending: format video duration
continuous-integration/drone/push Build is passing Details

nextui
Guus van Meerveld 8 months ago
parent 42c56c6792
commit 6de055dc50

@ -14,6 +14,7 @@
"@tanstack/react-query": "^5.27.5",
"framer-motion": "^11.0.12",
"ky": "^1.2.2",
"luxon": "^3.4.4",
"next": "14.1.3",
"next-pwa": "^5.6.0",
"react": "^18",
@ -25,6 +26,7 @@
"devDependencies": {
"@tanstack/react-query-devtools": "^5.27.8",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/luxon": "^3.4.2",
"@types/next-pwa": "^5.6.9",
"@types/node": "^20",
"@types/react": "^18",

@ -4,7 +4,8 @@ import { Card, CardFooter, CardBody } from "@nextui-org/card";
import { Image } from "@nextui-org/image";
import { Divider } from "@nextui-org/divider";
import Link from "next/link";
import formatNumber from "@/utils/formatNumbers";
import formatViewCount from "@/utils/formatViewCount";
import formatDuration from "@/utils/formatDuration";
export const VideoCard: Component<{ data: TrendingVideo }> = ({
data: video
@ -21,7 +22,7 @@ export const VideoCard: Component<{ data: TrendingVideo }> = ({
width={600}
/>
<p className="text-small rounded-md z-10 absolute bottom-5 right-5 bg-content2 p-1">
{video.duration}
{formatDuration(video.duration)}
</p>
</CardBody>
<Divider />
@ -39,7 +40,7 @@ export const VideoCard: Component<{ data: TrendingVideo }> = ({
</p>
<p className="text-small tracking-tight text-default-400">
Views: {formatNumber(video.views)}
Views: {formatViewCount(video.views)}
</p>
</div>
</div>

@ -0,0 +1,9 @@
import { Duration } from "luxon";
const formatDuration = (ms: number): string => {
if (ms / (60 * 60 * 1000) >= 1)
return Duration.fromMillis(ms).toFormat("HH:mm:ss");
else return Duration.fromMillis(ms).toFormat("mm:ss");
};
export default formatDuration;

@ -1,4 +1,4 @@
const formatNumber = (num: number): string => {
const formatViewCount = (num: number): string => {
// Nine Zeroes for Billions
return Math.abs(num) >= 1.0e9
? (Math.abs(num) / 1.0e9).toPrecision(3) + "B"
@ -11,4 +11,4 @@ const formatNumber = (num: number): string => {
: Math.abs(num).toString();
};
export default formatNumber;
export default formatViewCount;

@ -3023,6 +3023,11 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
"@types/luxon@^3.4.2":
version "3.4.2"
resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"
integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==
"@types/minimatch@*":
version "5.1.2"
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
@ -5113,6 +5118,11 @@ lru-cache@^6.0.0:
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
luxon@^3.4.4:
version "3.4.4"
resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
magic-string@^0.25.0, magic-string@^0.25.7:
version "0.25.9"
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"

Loading…
Cancel
Save