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

Update video sharing to display correct images and text

Browse Source 
Introduce a crawler detection middleware to serve Open Graph and Twitter Card metadata for social media sharing, and update the client-side sharing logic to utilize a dedicated share endpoint.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1a172d71-eb2c-471b-871f-cbf561747bbf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/lDvepVp
This commit is contained in:
sebastjanartic
2026-01-10 16:29:52 +00:00
parent ff0cc42fa2
commit 9ceb8d3fc6
2 changed files with 122 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/VideoPage.tsx
+13 -12
View File
@@ -308,23 +308,24 @@ export default function VideoPage() {
};
// Share URL uses special endpoint with proper OG meta tags for social media previews
// This URL shows thumbnail, title, and description when shared on Facebook, Viber, WhatsApp, etc.
const getShareUrl = () => {
if (!currentVideo?.id) return window.location.origin;
// Use custom domain if set, otherwise current domain
const baseUrl = import.meta.env.VITE_SHARE_DOMAIN || window.location.origin;
return `${baseUrl}/video/${currentVideo.id}`;
};
// Facebook share URL uses special endpoint with proper OG meta tags
const getFacebookShareUrl = () => {
if (!currentVideo?.id) return window.location.origin;
const baseUrl = 'https://video.folx.tv';
return `${baseUrl}/share/video/${currentVideo.id}`;
};
// Direct video URL (for display purposes)
const getVideoUrl = () => {
if (!currentVideo?.id) return window.location.origin;
const baseUrl = 'https://video.folx.tv';
return `${baseUrl}/video/${currentVideo.id}`;
};
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(getFacebookShareUrl());
await navigator.clipboard.writeText(getShareUrl());
const notification = document.createElement('div');
notification.textContent = 'Link kopiert!';
notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-opacity duration-300';
@@ -739,19 +740,19 @@ export default function VideoPage() {
{showShareMenu && (
<div className="absolute right-0 top-full mt-2 bg-gray-800 rounded-lg shadow-lg py-2 z-50 min-w-[200px]">
<FacebookShareButton url={getFacebookShareUrl()}>
<FacebookShareButton url={getShareUrl()}>
<div className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2 cursor-pointer">
<FacebookIcon size={16} round />
Facebook
</div>
</FacebookShareButton>
<TwitterShareButton url={getFacebookShareUrl()} title={`Watch "${currentVideo.title}" on video.folx.tv`}>
<TwitterShareButton url={getShareUrl()} title={`Watch "${currentVideo.title}" on video.folx.tv`}>
<div className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2 cursor-pointer">
<TwitterIcon size={16} round />
Twitter
</div>
</TwitterShareButton>
<WhatsappShareButton url={getFacebookShareUrl()} title={`Watch "${currentVideo.title}" on video.folx.tv`}>
<WhatsappShareButton url={getShareUrl()} title={`Watch "${currentVideo.title}" on video.folx.tv`}>
<div className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2 cursor-pointer">
<WhatsappIcon size={16} round />
WhatsApp