reformat all ts code via prettier

This commit is contained in:
david_bai
2025-06-22 21:34:54 +08:00
parent 8baf16ee8c
commit f09452ac2a
78 changed files with 2779 additions and 2307 deletions
@@ -1,14 +1,14 @@
// The pop-up dialog will appear automatically when conditions are met, and ensures it only appears once.
'use client';
"use client";
import { useEffect, useState } from 'react';
import { useEffect, useState } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from '@/components/ui/dialog';
} from "@/components/ui/dialog";
interface AutoPopupDialogProps {
// Unique identifier for localStorage
@@ -32,11 +32,11 @@ export function AutoPopupDialog({
useEffect(() => {
// Check if it has been shown before using localStorage
const hasShown = localStorage.getItem(storageKey);
if (!hasShown && condition()) {
setOpen(true);
// Mark as shown
localStorage.setItem(storageKey, 'true');
localStorage.setItem(storageKey, "true");
}
}, [storageKey, condition]);
+33 -33
View File
@@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect } from 'react';
import { Play } from 'lucide-react';
import React, { useState, useEffect } from "react";
import { Play } from "lucide-react";
interface YouTubePlayerProps {
videoId: string;
@@ -9,12 +9,12 @@ interface YouTubePlayerProps {
const YouTubePlayer: React.FC<YouTubePlayerProps> = ({
videoId,
className = ''
className = "",
}) => {
const [isPlaying, setIsPlaying] = useState<boolean>(false);
const [thumbnailLoaded, setThumbnailLoaded] = useState<boolean>(false);
const [currentThumbnail, setCurrentThumbnail] = useState<string>('');
const [currentThumbnail, setCurrentThumbnail] = useState<string>("");
const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
const fallbackUrl = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
@@ -34,39 +34,39 @@ const YouTubePlayer: React.FC<YouTubePlayerProps> = ({
return (
<div className={`relative w-full max-w-5xl mx-auto ${className}`}>
<div className="relative pb-[56.25%]">
{!isPlaying ? (
{!isPlaying ? (
<div className="absolute top-0 left-0 w-full h-full">
{currentThumbnail && (
<img
src={currentThumbnail}
alt="Video thumbnail"
className="w-full h-full object-cover"
/>
)}
{thumbnailLoaded && (
<button
onClick={() => setIsPlaying(true)}
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
{currentThumbnail && (
<img
src={currentThumbnail}
alt="Video thumbnail"
className="w-full h-full object-cover"
/>
)}
{thumbnailLoaded && (
<button
onClick={() => setIsPlaying(true)}
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
bg-black bg-opacity-70 hover:bg-opacity-90 rounded-full p-4
transition-all duration-300 ease-in-out z-10"
aria-label="Play video"
>
<Play size={48} className="text-white" />
</button>
)}
</div>
) : (
<iframe
src={embedUrl}
className="absolute top-0 left-0 w-full h-full"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
title="YouTube video player"
/>
)}
aria-label="Play video"
>
<Play size={48} className="text-white" />
</button>
)}
</div>
) : (
<iframe
src={embedUrl}
className="absolute top-0 left-0 w-full h-full"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
title="YouTube video player"
/>
)}
</div>
</div>
);
};
export default YouTubePlayer;
export default YouTubePlayer;