Add reflect button

Author: ben221199

.github/workflows/node.js.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x, 23.x, 24.x, 25.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

src/LBRY.tsx

@@ -1,6 +1,7 @@
 const VERSION_2_0: string = "2.0";
 
 const CLAIM_SEARCH: string = "claim_search";
+const FILE_REFLECT: string = "file_reflect";
 const GET: string = "get";
 const PREFERENCE_GET: string = "preference_get";
 const RESOLVE: string = "resolve";
@@ -118,6 +119,7 @@ async function rpc(
 
 export default {
   CLAIM_SEARCH,
+  FILE_REFLECT,
   GET,
   PREFERENCE_GET,
   RESOLVE,

src/components/ChannelClaim.tsx

@@ -183,6 +183,14 @@ function ChannelClaim({ data }: Props & { data: Channel }): JSX.Element {
           : null}
         {tab === "about" ? (
           <section>
+            {data.value.description ? (
+              <div style={{ padding: "16px 8px" }}>
+                <label style={{ display: "block", fontWeight: "bold" }}>
+                  Description
+                </label>
+                <span>{data.value.description}</span>
+              </div>
+            ) : null}
             {data.value.email ? (
               <div style={{ padding: "16px 8px" }}>
                 <label style={{ display: "block", fontWeight: "bold" }}>

src/components/Header.tsx

@@ -87,7 +87,10 @@ function Header({ menuOpen, menuOpenSetter }): JSX.Element {
       },
     };
 
-    navigate(new URL(form.action).pathname + `?q=${encodeURIComponent(query)}`, options);
+    navigate(
+      new URL(form.action).pathname + `?q=${encodeURIComponent(query)}`,
+      options,
+    );
     return false;
   }
 

src/components/StreamClaim.tsx

@@ -1,6 +1,9 @@
 import Props, { JSX, useEffect, useState } from "react";
+import React from "react";
 import Markdown from "react-markdown";
+import { Link } from "react-router";
 import LBRY from "~/LBRY";
+import CustomSVG from "~/components/CustomSVG";
 
 function downloadMarkdownFile(claimGetData, setMarkdown): void {
   const url: string = claimGetData?.streaming_url;
@@ -101,6 +104,51 @@ function StreamClaim({ data }: Props & { data: Stream }): JSX.Element {
   return (
     <div>
       <h1>{data.value?.title}</h1>
+      <Link
+        onClick={(event): void => {
+          event.preventDefault();
+          LBRY.rpc(
+            LBRY.getDaemonRPC(),
+            LBRY.FILE_REFLECT,
+            { stream_hash: claimGetData.stream_hash },
+            undefined,
+            LBRY.isUsingProxy(),
+          ).then((json: object): void => {
+            alert("Reflected " + Array(json).length + " blobs.");
+          });
+        }}
+        style={{ margin: "0 8px" }}
+        to={null}
+      >
+        <button
+          style={{
+            backgroundColor: "rgba(17, 17, 17, 0.4)",
+            // backgroundColorHover: 'rgba(17, 17, 17, 0.7)',
+            border: "none",
+            borderRadius: "6px",
+            color: "white",
+            cursor: "pointer",
+            fontWeight: "700",
+            height: "40px",
+            padding: "0 16px",
+          }}
+        >
+          <CustomSVG
+            icon="publish"
+            viewBox="0 0 24 24"
+            style={{
+              fill: "transparent",
+              height: "18px",
+              paddingRight: "4px",
+              stroke: "white",
+              strokeLinecap: "round",
+              strokeWidth: "2px",
+              verticalAlign: "middle",
+            }}
+          />{" "}
+          <span>Reflect claim file</span>
+        </button>
+      </Link>
       {data.value?.stream_type === "audio" ? (
         <div>
           <audio controls src={claimGetData?.streaming_url || null}></audio>