Enhances embed functionality for channels/playlists

Extends the embed component to support homepage, channels, playlists, and markdown content.

For channel embeds, it now displays a grid of the latest uploads.
Playlist embeds showcase the cover and a playable list.
Adds support for rendering markdown content within embeds, fetching the content and displaying it.

Also configures the homepage embed to point Mini App action to the homepage embed.

Simplify unsaved settings warning logic
remove comment

Removed embed menu item to maintain focus on current changes.
Improves embed and channel page handling

Addresses issues related to embed path detection and homepage update loops.

- Ensures correct embed path detection by checking for a valid pathname.
- Prevents repeated 'isHome' updates on the homepage by using a bounded set, avoiding potential loops.
- Extracts and memoizes the channel page wrapper component to prevent unnecessary re-renders.
- Improves playlist ID detection for collection handling in embed wrappers.

Improves embed and upload page handling

Addresses several issues and improves the user experience.

- Ensures the active uploads warning only appears when not on the upload page by checking the pathname more reliably.
- Corrects collection redirection logic by adding a code block.
- Removes duplicate URI building logic in embed wrappers.
- Enhances Farcaster embed functionality by including the SDK and ready script only on embed pages to avoid unnecessary overhead on other pages.

Improves Farcaster embed handling and OG image.

Enhances Farcaster integration by adding an iframe check to the embed script, ensuring it only runs when not in a top-level browsing context.

Updates the Open Graph image URL used for Farcaster frames to use the thumbnail card CDN URL if available, falling back to other defined URLs, which delivers a richer visual experience.

Allows iframing for homepage

Permits iframing of the homepage to support embedding in
Farcaster miniapps, in addition to existing embed pages and API.

This change enhances integration possibilities with external platforms.

Adds debug logging for action URLs

Adds console logs to output the generated fcActionUrl
to aid in debugging mini app integrations on the homepage.
This helps to verify the correct URL is being used,
especially during development with different origins.

Adds debug logging to build OG metadata

Adds a console log statement to output the override options
passed into the buildBasicOgMetadata function. This will aid
in debugging issues related to Open Graph metadata generation
during development.

Improves embed player UI and URI handling

Adds a dedicated CSS class for the reactions overlay in the embedded video player, improving styling and maintainability.

Refactors URI handling in the embed wrapper to prioritize incoming URI for live/latest content, ensuring correct content resolution.

Uses resolved URL in embed mode with live path

In embed mode when viewing a live/latest stream, uses the resolved URL
from lbry.tv instead of the channel URL. This ensures the correct stream
is displayed when the user navigates from a live stream to its archived
version.

Enables playlist support in embed mode

Adds support for playlist URLs in embed mode by redirecting to the first item in the playlist with a collection ID parameter.

This allows users to view playlists in an embedded player, providing a better user experience.
It also handles the initial loading state for playlist URLs.

Additionally, the middleware is updated to allow iframing for playlist pages.

Fixes channel page navigation in embed mode

Ensures correct URL construction for channel pages when viewed in embed mode.
It checks if the current path is within the embed context and prepends `/$/embed` to the base URL.
This adjustment ensures proper navigation and link generation within the embedded player.

Author: tzarebczan

.gitignore

@@ -41,3 +41,5 @@ package-lock.json
 .env.lbrytv
 analyzeResults*.html
 ecosystem.config.js
+
+.claude/settings.local.json

config.js

@@ -115,6 +115,8 @@ const config = {
   // FROM COMMAND LINE
   COMMIT_ID: process.env.COMMIT_ID,
   NODE_ENV: process.env.NODE_ENV,
+  // Dev/staged feature gating
+  DYNAMIC_ROUTES_FIRST: process.env.DYNAMIC_ROUTES_FIRST === 'true',
 };
 
 config.SDK_API_PATH = `${config.LBRY_WEB_API}/api/v1`;

package.json

@@ -27,7 +27,7 @@
     "dev": "yarn dev:electron",
     "dev:electron": "cross-env NODE_ENV=development node ./electron/devServer.js",
     "dev:web": "yarn copyenv && cd web && yarn dev",
-    "dev:web-server": "cross-env NODE_ENV=development yarn compile:web && concurrently \"cross-env NODE_ENV=development yarn compile:web --watch\" \"cd web && yarn dev:server\"",
+    "dev:web-server": "cross-env NODE_ENV=development DYNAMIC_ROUTES_FIRST=true yarn compile:web && cross-env NODE_ENV=development DYNAMIC_ROUTES_FIRST=true concurrently \"yarn compile:web --watch\" \"cd web && yarn dev:server\"",
     "dev:internal-apis": "LBRY_API_URL='http://localhost:8080' yarn dev:electron",
     "dev:iatv": "LBRY_API_URL='http://localhost:15400' SDK_API_URL='http://localhost:15100' yarn dev:web",
     "run:web-server": "cross-env NODE_ENV=production yarn compile:web && cd web && yarn dev:server",

ui/component/app/view.jsx

@@ -225,6 +225,24 @@ function App(props: Props) {
 
     // Only 1 nag is possible, so show the most important:
 
+    // Active uploads warning (show globally so users know why the browser prompts on leave)
+    if (uploadCount > 0 && !embedPath) {
+      const pathname = location && location.pathname;
+      const onUploadPage =
+        (pathname && pathname.startsWith(`/$/${PAGES.UPLOAD}`)) ||
+        (pathname && pathname.startsWith(`/$/${PAGES.UPLOADS}`));
+      if (!onUploadPage) {
+        return (
+          <Nag
+            type="helpful"
+            message={__('Upload in progress. Closing or reloading may interrupt your upload.')}
+            actionText={__('View Uploads')}
+            onClick={() => history.push(`/$/${PAGES.UPLOADS}`)}
+          />
+        );
+      }
+    }
+
     if (user === null && !embedPath) {
       return <NagNoUser />;
     }

ui/component/claimTilesDiscover/view.jsx

@@ -116,7 +116,8 @@ function ClaimTilesDiscover(props: Props) {
   const uris = (prefixUris || []).concat(claimSearchUris);
   if (prefixUris && prefixUris.length) uris.splice(prefixUris.length * -1, prefixUris.length);
 
-  if (window.location.pathname === '/') {
+  // Treat the embed homepage the same as the main homepage for pin injection.
+  if (window.location.pathname === '/' || window.location.pathname === '/$/embed/home') {
     injectPinUrls(uris, pins, resolvedPinUris);
   }
 

ui/component/embedTextArea/view.jsx

@@ -23,6 +23,9 @@ export default function EmbedTextArea(props: Props) {
     props;
 
   const [embedAutoplay, setEmbedAutoplay] = React.useState(false);
+  const isChannel = claim && claim.value_type === 'channel';
+  const isCollection = claim && claim.value_type === 'collection';
+  const showAutoplayToggle = !isChannel && !isCollection && !newestType;
 
   const { canonical_url: canonicalUri } = claim;
   const input = useRef();
@@ -66,15 +69,17 @@ export default function EmbedTextArea(props: Props) {
         readOnly
       />
 
-      <div className="margin-vertical-medium">
-        <FormField
-          name={'embed-autoplay' + (newestType ? ' ' + newestType : '')}
-          type="checkbox"
-          label={__('Enable Autoplay')}
-          checked={embedAutoplay}
-          onChange={() => setEmbedAutoplay((prev) => !prev)}
-        />
-      </div>
+      {showAutoplayToggle && (
+        <div className="margin-vertical-medium">
+          <FormField
+            name={'embed-autoplay' + (newestType ? ' ' + newestType : '')}
+            type="checkbox"
+            label={__('Enable Autoplay')}
+            checked={embedAutoplay}
+            onChange={() => setEmbedAutoplay((prev) => !prev)}
+          />
+        </div>
+      )}
 
       <div className="section__actions">
         <Button

ui/component/fileActions/view.jsx

@@ -90,8 +90,13 @@ export default function FileActions(props: Props) {
   const channelName = signingChannel && signingChannel.name;
   const fileName = value && value.source && value.source.name;
   const claimType = isLivestreamClaim ? 'livestream' : isPostClaim ? 'post' : 'upload';
-
-  const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
+  const isCollectionClaim = claim && claim.value_type === 'collection';
+  const isChannel = claim && claim.value_type === 'channel';
+  const webShareable =
+    (costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode)) ||
+    RENDER_MODES.TEXT_MODES.includes(renderMode) ||
+    isCollectionClaim ||
+    isChannel;
   const urlParams = new URLSearchParams(search);
   const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
 

ui/component/header/view.jsx

@@ -55,6 +55,7 @@ type Props = {
   openChangelog: ({}) => void,
   setSidebarOpen: (boolean) => void,
   signOut: () => void,
+  hideSidebarToggle?: boolean,
 };
 
 const Header = (props: Props) => {
@@ -116,7 +117,9 @@ const Header = (props: Props) => {
 
   // Sign out if they click the "x" when they are on the password prompt
   const authHeaderAction = syncError && { onClick: signOut };
-  const homeButtonNavigationProps = (isVerifyPage && {}) || (authHeader && authHeaderAction) || { navigate: '/' };
+  const isEmbedPath = pathname && pathname.startsWith('/$/embed');
+  const homeButtonNavigationProps = (isVerifyPage && {}) ||
+    (authHeader && authHeaderAction) || { navigate: isEmbedPath ? '/$/embed/home' : '/' };
   const sidebarLabel = sidebarOpen
     ? __('Close sidebar - hide channels you are following.')
     : __('Expand sidebar - view channels you are following.');
@@ -244,7 +247,7 @@ const Header = (props: Props) => {
             <div className="header__menu--left">
               <SkipNavigationButton />
 
-              {!authHeader && (
+              {!authHeader && !props.hideSidebarToggle && (
                 <span style={{ position: 'relative' }}>
                   <Button
                     aria-label={sidebarLabel}
@@ -262,7 +265,7 @@ const Header = (props: Props) => {
                 aria-label={__('Home')}
                 className="header__navigationItem--logo"
                 onClick={() => {
-                  if (pathname === '/') {
+                  if (pathname === '/' || pathname === '/$/embed/home') {
                     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
                     doClearClaimSearch();
                   }

ui/component/page/view.jsx

@@ -101,6 +101,7 @@ function Page(props: Props) {
           sidebarOpen={sidebarOpen}
           isAbsoluteSideNavHidden={isAbsoluteSideNavHidden}
           setSidebarOpen={openSidebar}
+          hideSidebarToggle={noSideNavigation}
         />
       )}
 

ui/component/router/view.jsx

@@ -162,6 +162,7 @@ type Props = {
     length: number,
     location: { pathname: string },
     push: (string) => void,
+    replace: (string) => void,
     state: {},
     replaceState: ({}, string, string) => void,
     listen: (any) => () => void,
@@ -356,7 +357,9 @@ function AppRouter(props: Props) {
   // in the browser causing a redirect loop
   const decodedUrl = decodeURIComponent(pathname) + search;
   if (decodedUrl !== pathname + search) {
-    return <Redirect to={decodedUrl} />;
+    // Use history.replace instead of <Redirect> to avoid adding extra entries.
+    history.replace(decodedUrl);
+    return null;
   }
 
   // Try to support strange cases where url has html encoding
@@ -478,6 +481,7 @@ function AppRouter(props: Props) {
 
         <Route path={`/$/${PAGES.POPOUT}/:channelName/:streamName`} component={PopoutChatPage} />
 
+        <Route path={`/$/${PAGES.EMBED}/home`} exact component={HomePage} />
         <Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
         <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />