Disable spotlight for poll options

fixes #603

packages/app/src/Element/HyperText.tsx

@@ -26,7 +26,14 @@ import NostrLink from "Element/NostrLink";
 import RevealMedia from "Element/RevealMedia";
 import MagnetLink from "Element/MagnetLink";
 
-export default function HyperText({ link, creator, depth }: { link: string; creator: string; depth?: number }) {
+interface HypeTextProps {
+  link: string;
+  creator: string;
+  depth?: number;
+  disableMediaSpotlight?: boolean;
+}
+
+export default function HyperText({ link, creator, depth, disableMediaSpotlight }: HypeTextProps) {
   const a = link;
   try {
     const url = new URL(a);
@@ -42,7 +49,7 @@ export default function HyperText({ link, creator, depth }: { link: string; crea
     const isWavlakeLink = WavlakeRegex.test(a);
     const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
     if (extension && !isAppleMusicLink) {
-      return <RevealMedia link={a} creator={creator} />;
+      return <RevealMedia link={a} creator={creator} disableSpotlight={disableMediaSpotlight} />;
     } else if (tweetId) {
       return (
         <div className="tweet" key={tweetId}>

packages/app/src/Element/MediaElement.tsx

@@ -28,6 +28,7 @@ interface MediaElementProps {
   magnet?: string;
   sha256?: string;
   blurHash?: string;
+  disableSpotlight?: boolean;
 }
 
 interface L402Object {
@@ -166,11 +167,15 @@ export function MediaElement(props: MediaElementProps) {
   }
 
   if (props.mime.startsWith("image/")) {
-    return (
-      <SpotlightMedia>
-        <ProxyImg key={props.url} src={url} onError={() => probeFor402()} />
-      </SpotlightMedia>
-    );
+    if (!(props.disableSpotlight ?? false)) {
+      return (
+        <SpotlightMedia>
+          <ProxyImg key={props.url} src={url} onError={() => probeFor402()} />
+        </SpotlightMedia>
+      );
+    } else {
+      return <ProxyImg key={props.url} src={url} onError={() => probeFor402()} />;
+    }
   } else if (props.mime.startsWith("audio/")) {
     return <audio key={props.url} src={url} controls onError={() => probeFor402()} />;
   } else if (props.mime.startsWith("video/")) {

packages/app/src/Element/Poll.tsx

@@ -114,7 +114,11 @@ export default function Poll(props: PollProps) {
           return (
             <div key={a[1]} className="flex" onClick={e => zapVote(e, opt)}>
               <div className="f-grow">
-                {opt === voting ? <Spinner /> : <Text content={desc} tags={props.ev.tags} creator={props.ev.pubkey} />}
+                {opt === voting ? (
+                  <Spinner />
+                ) : (
+                  <Text content={desc} tags={props.ev.tags} creator={props.ev.pubkey} disableMediaSpotlight={true} />
+                )}
               </div>
               {showResults && (
                 <>

packages/app/src/Element/RevealMedia.tsx

@@ -8,6 +8,7 @@ import { MediaElement } from "Element/MediaElement";
 interface RevealMediaProps {
   creator: string;
   link: string;
+  disableSpotlight?: boolean;
 }
 
 export default function RevealMedia(props: RevealMediaProps) {
@@ -52,10 +53,12 @@ export default function RevealMedia(props: RevealMediaProps) {
     return (
       <Reveal
         message={<FormattedMessage defaultMessage="Click to load content from {link}" values={{ link: hostname }} />}>
-        <MediaElement mime={`${type}/${extension}`} url={url.toString()} />
+        <MediaElement mime={`${type}/${extension}`} url={url.toString()} disableSpotlight={props.disableSpotlight} />
       </Reveal>
     );
   } else {
-    return <MediaElement mime={`${type}/${extension}`} url={url.toString()} />;
+    return (
+      <MediaElement mime={`${type}/${extension}`} url={url.toString()} disableSpotlight={props.disableSpotlight} />
+    );
   }
 }

packages/app/src/Element/Text.tsx

@@ -24,10 +24,11 @@ export interface TextProps {
   creator: HexKey;
   tags: Array<Array<string>>;
   disableMedia?: boolean;
+  disableMediaSpotlight?: boolean;
   depth?: number;
 }
 
-export default function Text({ content, tags, creator, disableMedia, depth }: TextProps) {
+export default function Text({ content, tags, creator, disableMedia, depth, disableMediaSpotlight }: TextProps) {
   const location = useLocation();
 
   function extractLinks(fragments: Fragment[]) {
@@ -57,7 +58,9 @@ export default function Text({ content, tags, creator, disableMedia, depth }: Te
                   </a>
                 );
               }
-              return <HyperText link={a} creator={creator} depth={depth} />;
+              return (
+                <HyperText link={a} creator={creator} depth={depth} disableMediaSpotlight={disableMediaSpotlight} />
+              );
             }
             return a;
           });