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

Add social media sharing previews for videos

Browse Source 
Implement a server-side API to generate dynamic social media shareable image thumbnails for videos and update the client to utilize this new API for open graph and Twitter meta tags.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ab9cd02a-d0b2-4288-9ceb-1964d0059648
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/ab9cd02a-d0b2-4288-9ceb-1964d0059648/mbX83Mu
This commit is contained in:
sebastjanartic
2025-08-31 20:44:31 +00:00
parent 87e07be40f
commit 0425cb899a
3 changed files with 172 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/VideoPage.tsx
+10 -4
View File
@@ -127,9 +127,12 @@ export default function VideoPage() {
updateMetaTag('og:title', currentVideo.title);
updateMetaTag('og:description', currentVideo.description || `Watch ${currentVideo.title} on go4.video`);
// Use custom thumbnail if available, otherwise video thumbnail, fallback to social share image
const thumbnailForSharing = currentVideo.customThumbnailUrl || currentVideo.thumbnailUrl || '/go4-video-social-share.png';
updateMetaTag('og:image', thumbnailForSharing);
// Uporabljamo nov javni thumbnail API za social media deljenje
const socialThumbnail = `${window.location.origin}/api/video-thumbnail/${currentVideo.id}`;
updateMetaTag('og:image', socialThumbnail);
updateMetaTag('og:image:width', '1200');
updateMetaTag('og:image:height', '630');
updateMetaTag('og:image:type', 'image/png');
updateMetaTag('og:url', window.location.href);
updateMetaTag('og:type', 'video.other');
updateMetaTag('og:video:duration', currentVideo.duration.toString());
@@ -145,9 +148,12 @@ export default function VideoPage() {
meta.setAttribute('content', content);
};
updateTwitterTag('twitter:card', 'summary_large_image');
updateTwitterTag('twitter:title', currentVideo.title);
updateTwitterTag('twitter:description', currentVideo.description || `Watch ${currentVideo.title} on go4.video`);
updateTwitterTag('twitter:image', thumbnailForSharing);
updateTwitterTag('twitter:image', socialThumbnail);
updateTwitterTag('twitter:image:width', '1200');
updateTwitterTag('twitter:image:height', '630');
}
}, [currentVideo]);