Post Embed

1import React from 'react';
2import { cn } from '@/lib/utils/deso';
3import { Tweet } from 'react-tweet';
4import Image from 'next/image';
5 
6interface PostEmbedProps {
7  url: string;
8  className?: string;
9}
10 
11const getYouTubeVideoId = (url: string) => {
12  try {
13    const urlObj = new URL(url);
14    if (urlObj.hostname === 'youtu.be') {
15      return urlObj.pathname.slice(1);
16    }
17    if (
18      urlObj.hostname === 'www.youtube.com' ||
19      urlObj.hostname === 'youtube.com'
20    ) {
21      if (urlObj.pathname === '/watch') {
22        return urlObj.searchParams.get('v');
23      }
24      if (urlObj.pathname.startsWith('/embed/')) {
25        return urlObj.pathname.slice(7);
26      }
27    }
28  } catch (error) {
29    console.error('Invalid YouTube URL:', error);
30  }
31  return null;
32};
33 
34const getSpotifyEmbedUrl = (url: string) => {
35  try {
36    const urlObj = new URL(url);
37    if (urlObj.hostname === 'open.spotify.com') {
38      return `https://open.spotify.com/embed${urlObj.pathname}`;
39    }
40  } catch (error) {
41    console.error('Invalid Spotify URL:', error);
42  }
43  return null;
44};
45 
46const getTweetId = (url: string) => {
47  try {
48    const urlObj = new URL(url);
49    if (
50      urlObj.hostname === 'twitter.com' ||
51      urlObj.hostname === 'x.com'
52    ) {
53      const match = urlObj.pathname.match(/\/status\/(\d+)/);
54      if (match) {
55        return match[1];
56      }
57    }
58  } catch (error) {
59    console.error('Invalid Twitter URL:', error);
60  }
61  return null;
62};
63 
64export const PostEmbed: React.FC<PostEmbedProps> = ({ url, className }) => {
65  const youtubeVideoId = getYouTubeVideoId(url);
66  if (youtubeVideoId) {
67    return (
68      <div className={cn('mt-2 rounded-lg overflow-hidden', className)}>
69        <iframe
70          width="100%"
71          height="315"
72          src={`https://www.youtube.com/embed/${youtubeVideoId}`}
73          title="YouTube video player"
74          frameBorder="0"
75          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
76          allowFullScreen
77        ></iframe>
78      </div>
79    );
80  }
81 
82  const spotifyEmbedUrl = getSpotifyEmbedUrl(url);
83  if (spotifyEmbedUrl) {
84    return (
85      <div className={cn('mt-2 rounded-[20px] overflow-hidden', className)}>
86        <iframe
87          src={spotifyEmbedUrl}
88          width="100%"
89          height="152"
90          frameBorder="0"
91          allow="encrypted-media"
92          className="rounded-[20px]"
93        ></iframe>
94      </div>
95    );
96  }
97 
98// … truncated