reformat all ts code via prettier
This commit is contained in:
@@ -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]);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user