Skip to content

Commit

Permalink
🔀 merge branch 'main' into jerembdn/youtube-api
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerembdn
jerembdn committed Jul 11, 2024
2 parents f1dc590 + fa7a744 commit 35709cd
Show file tree
Hide file tree
Showing 6 changed files with 357 additions and 286 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"axios": "^1.6.8",
"dotenv-cli": "^7.3.0",
"framer-motion": "10.6.1",
"html-to-image": "^1.11.11",
"micro": "^10.0.1",
"micro-cors": "^0.1.1",
"next": "^14.2.1",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

309 changes: 155 additions & 154 deletions src/components/product/previsualization/card/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,175 +8,176 @@ import { AnimatePresence, motion } from "framer-motion";
import { useMeasure } from "@/hooks/use-measure";

const roboto = Roboto({
subsets: ["latin"],
weight: ["400", "500", "700"],
variable: "--font-roboto",
subsets: ["latin"],
weight: ["400", "500", "700"],
variable: "--font-roboto",
});

type PrevisualizationCardProps = {
video: Video;
options: {
theme: "light" | "dark";
activeWidgets: Widget[];
display: Display;
textSize: number;
cornerRadius: number;
spacing: number;
};
video: Video;
options: {
theme: "light" | "dark";
activeWidgets: Widget[];
display: Display;
textSize: number;
cornerRadius: number;
spacing: number;
};
};

const PrevisualizationCard = React.forwardRef<
HTMLDivElement,
PrevisualizationCardProps
HTMLDivElement,
PrevisualizationCardProps
>(({ video, options }: PrevisualizationCardProps) => {
const buildFooter = () => {
const viewsCount =
isActiveWidgets(options.activeWidgets, "videoViews") && video.viewsCount;
const publishedAt =
isActiveWidgets(options.activeWidgets, "videoPublishedAt") &&
video.publishedAt;
const hasSeparator = viewsCount && publishedAt;
const buildFooter = () => {
const viewsCount =
isActiveWidgets(options.activeWidgets, "videoViews") && video.viewsCount;
const publishedAt =
isActiveWidgets(options.activeWidgets, "videoPublishedAt") &&
video.publishedAt;
const hasSeparator = viewsCount && publishedAt;

return `${viewsCount ? `${viewsCount} vues` : ""}${
hasSeparator ? " • " : ""
}${publishedAt ? "Il y a 16 heures" : ""}`;
};
return `${viewsCount ? `${viewsCount} vues` : ""}${
hasSeparator ? " • " : ""
}${publishedAt ? "Il y a 16 heures" : ""}`;
};

return (
<motion.div
transition={{
type: "spring",
stiffness: 100,
damping: 10,
duration: 0.1,
}}
key={"container"}
className={cx(
roboto.className,
css({
display: "flex",
flexDirection: "column",
gap: "12px",
backgroundColor: options.theme === "light" ? "#fff" : "#000",
userSelect: "none",
overflow: "hidden",
}),
)}
style={{
maxWidth: `calc(310px + ${options.spacing * 2}px)`,
borderRadius: `${options.cornerRadius}px`,
padding: `${options.spacing}px`,
}}
>
<div
className={css({
position: "relative",
display: "flex",
overflow: "hidden",
borderRadius: "12px",
})}
>
<Image
className={css({
width: "310px",
height: "175px",
borderRadius: "12px",
})}
src={video.thumbnailUrl}
alt={"Miniature de la vidéo"}
width={1280}
height={720}
/>
return (
<motion.div
transition={{
type: "spring",
stiffness: 100,
damping: 10,
duration: 0.1,
}}
id="image-to-download"
key={"container"}
className={cx(
roboto.className,
css({
display: "flex",
flexDirection: "column",
gap: "12px",
backgroundColor: options.theme === "light" ? "#fff" : "#000",
userSelect: "none",
overflow: "hidden",
})
)}
style={{
maxWidth: `calc(310px + ${options.spacing * 2}px)`,
borderRadius: `${options.cornerRadius}px`,
padding: `${options.spacing}px`,
}}
>
<div
className={css({
position: "relative",
display: "flex",
overflow: "hidden",
borderRadius: "12px",
})}
>
<Image
className={css({
width: "310px",
height: "175px",
borderRadius: "12px",
})}
src={video.thumbnailUrl}
alt={"Miniature de la vidéo"}
width={1280}
height={720}
/>

{isActiveWidgets(options.activeWidgets, "videoDuration") && (
<div
className={css({
position: "absolute",
bottom: "10px",
right: "10px",
padding: "3px 4px",
borderRadius: "4px",
backgroundColor: "rgba(0, 0, 0, 0.6)",
color: "#FFF",
fontSize: "12px",
fontWeight: "medium",
})}
>
??:??
</div>
)}
{isActiveWidgets(options.activeWidgets, "videoDuration") && (
<div
className={css({
position: "absolute",
bottom: "10px",
right: "10px",
padding: "3px 4px",
borderRadius: "4px",
backgroundColor: "rgba(0, 0, 0, 0.6)",
color: "#FFF",
fontSize: "12px",
fontWeight: "medium",
})}
>
??:??
</div>
)}

{isActiveWidgets(options.activeWidgets, "videoProgressBar") && (
<progress
className={css({
position: "absolute",
bottom: 0,
left: 0,
width: "100%",
height: "4px",
"&::-webkit-progress-bar": {
backgroundColor: "#717171",
},
"&::-webkit-progress-value": {
backgroundColor: "#FF0000",
},
})}
value={18}
max={100}
/>
)}
</div>
{isActiveWidgets(options.activeWidgets, "videoProgressBar") && (
<progress
className={css({
position: "absolute",
bottom: 0,
left: 0,
width: "100%",
height: "4px",
"&::-webkit-progress-bar": {
backgroundColor: "#717171",
},
"&::-webkit-progress-value": {
backgroundColor: "#FF0000",
},
})}
value={18}
max={100}
/>
)}
</div>

<div
className={css({
display: "flex",
gap: "10px",
})}
>
{isActiveWidgets(options.activeWidgets, "channelLogo") && (
<Image
className={css({
width: "38px",
height: "38px",
borderRadius: "50%",
})}
src={video.channelLogoUrl}
alt={`Logo de chaîne YouTube de ${video.channelName}`}
width={38}
height={38}
/>
)}
<div
className={css({
display: "flex",
gap: "10px",
})}
>
{isActiveWidgets(options.activeWidgets, "channelLogo") && (
<Image
className={css({
width: "38px",
height: "38px",
borderRadius: "50%",
})}
src={video.channelLogoUrl}
alt={`Logo de chaîne YouTube de ${video.channelName}`}
width={38}
height={38}
/>
)}

<div
className={css({
display: "flex",
flexDirection: "column",
gap: "6px",
fontWeight: "normal",
color: options.theme === "light" ? "#606060" : "#fff",
flex: 1,
lineHeight: "normal",
})}
>
<div
className={css({
fontSize: `${options.textSize}px`,
fontWeight: "bold",
color: options.theme === "light" ? "#0F0F0F" : "#fff",
})}
>
{video.title}
</div>
<div
className={css({
display: "flex",
flexDirection: "column",
gap: "6px",
fontWeight: "normal",
color: options.theme === "light" ? "#606060" : "#fff",
flex: 1,
lineHeight: "normal",
})}
>
<div
className={css({
fontSize: `${options.textSize}px`,
fontWeight: "bold",
color: options.theme === "light" ? "#0F0F0F" : "#fff",
})}
>
{video.title}
</div>

{isActiveWidgets(options.activeWidgets, "channelName") && (
<div>{video.channelName}</div>
)}
{isActiveWidgets(options.activeWidgets, "channelName") && (
<div>{video.channelName}</div>
)}

<div>{buildFooter()}</div>
</div>
</div>
</motion.div>
);
<div>{buildFooter()}</div>
</div>
</div>
</motion.div>
);
});

export default PrevisualizationCard;
Loading

0 comments on commit 35709cd

Please sign in to comment.