sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ability to display video thumbnail images when sharing on social media

Browse Source 
Implement video thumbnail capture and integration for social sharing using canvas and `toDataURL`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 11420304-80a9-4ef2-adff-cbdaa418ffa8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/11420304-80a9-4ef2-adff-cbdaa418ffa8/gJQZE4U
This commit is contained in:
sebastjanartic
2025-08-05 06:14:56 +00:00
parent 5465e174e7
commit 08484e19b3
2 changed files with 40 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/video-modal.tsx
+39
View File
@@ -61,6 +61,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
const videoRef = useRef<HTMLVideoElement>(null);
const playerRef = useRef<any>(null);
const [showShareMenu, setShowShareMenu] = useState(false);
const [videoThumbnail, setVideoThumbnail] = useState<string | null>(null);
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
@@ -139,6 +140,11 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
player.ready(() => {
console.log('Video.js player ready with source');
// Capture video thumbnail when ready
setTimeout(() => {
captureVideoThumbnail(player);
}, 2000); // Wait 2 seconds for video to load
});
player.on('error', (error: any) => {
@@ -181,6 +187,27 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
};
}, [isOpen, video]);
// Function to capture video thumbnail
const captureVideoThumbnail = (player: any) => {
try {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const videoElement = player.tech().el();
if (videoElement && ctx) {
canvas.width = videoElement.videoWidth || 640;
canvas.height = videoElement.videoHeight || 360;
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
const thumbnailUrl = canvas.toDataURL('image/jpeg', 0.8);
setVideoThumbnail(thumbnailUrl);
console.log('Video thumbnail captured');
}
} catch (error) {
console.log('Failed to capture video thumbnail:', error);
}
};
const handleVideoPlay = async () => {
@@ -279,11 +306,22 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
<div className="flex flex-col gap-2">
<div className="pb-2 border-b border-gray-200 dark:border-gray-600">
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">Share Video</span>
{videoThumbnail && (
<div className="mt-2">
<img
src={videoThumbnail}
alt="Video preview"
className="w-full h-20 object-cover rounded border"
/>
<span className="text-xs text-gray-600 dark:text-gray-400 mt-1 block">Preview image for sharing</span>
</div>
)}
</div>
<FacebookShareButton
url={getShareUrl()}
hashtag="#video"
picture={videoThumbnail || undefined}
>
<div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
<FacebookIcon size={20} round />
@@ -294,6 +332,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
<TwitterShareButton
url={getShareUrl()}
title={`Watch: ${video.title}`}
media={videoThumbnail || undefined}
>
<div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
<TwitterIcon size={20} round />