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.

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,22 @@ 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 onUploadPage =
+        location?.pathname?.startsWith(`/$/${PAGES.UPLOAD}`) || location?.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/claimMenuList/view.jsx

@@ -341,6 +341,7 @@ function ClaimMenuList(props: Props) {
     };
 
     const ToggleLastUsedCollectionMenuItems = () => {
+      if (!lastUsedCollections || !Array.isArray(lastUsedCollections)) return null;
       return lastUsedCollections.map((lastUsedCollection) => {
         return (
           <MenuItem

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.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}
         />
       )}