Use Preview image in my votes tab

__tests__/components/brain/my-stream/votes/MyStreamWaveMyVote.test.tsx

@@ -1,68 +1,78 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import MyStreamWaveMyVote from '@/components/brain/my-stream/votes/MyStreamWaveMyVote';
+import MyStreamWaveMyVote from "@/components/brain/my-stream/votes/MyStreamWaveMyVote";
+import { fireEvent, render } from "@testing-library/react";
 
-jest.mock('@/components/drops/view/item/content/media/DropListItemContentMedia', () => ({
+jest.mock("@/components/drops/view/item/content/media/MediaDisplay", () => ({
   __esModule: true,
   default: () => <div data-testid="media" />,
 }));
 
-jest.mock('@/components/brain/my-stream/votes/MyStreamWaveMyVoteVotes', () => ({
+jest.mock("@/components/brain/my-stream/votes/MyStreamWaveMyVoteVotes", () => ({
   __esModule: true,
   default: () => <div data-testid="votes" />,
 }));
 
-jest.mock('@/components/brain/my-stream/votes/MyStreamWaveMyVoteInput', () => ({
+jest.mock("@/components/brain/my-stream/votes/MyStreamWaveMyVoteInput", () => ({
   __esModule: true,
   default: () => <div data-testid="input" />,
 }));
 
-jest.mock('@/components/user/utils/UserCICAndLevel', () => ({
+jest.mock("@/components/user/utils/UserCICAndLevel", () => ({
   __esModule: true,
   default: () => <div data-testid="cic" />,
-  UserCICAndLevelSize: { SMALL: 'SMALL' },
+  UserCICAndLevelSize: { SMALL: "SMALL" },
 }));
 
-jest.mock('@/components/waves/drop/SingleWaveDropPosition', () => ({
+jest.mock("@/components/waves/drop/SingleWaveDropPosition", () => ({
   __esModule: true,
-  SingleWaveDropPosition: ({ rank }: any) => <div data-testid="pos">{rank}</div>,
-  default: ({ rank }: any) => <div data-testid="pos">{rank}</div>
+  SingleWaveDropPosition: ({ rank }: any) => (
+    <div data-testid="pos">{rank}</div>
+  ),
+  default: ({ rank }: any) => <div data-testid="pos">{rank}</div>,
 }));
 
-describe('MyStreamWaveMyVote', () => {
+describe("MyStreamWaveMyVote", () => {
   const drop: any = {
-    id: 'd1',
-    title: 'Drop Title',
-    parts: [{ media: [{ url: 'a', mime_type: 'image/jpeg' }] }],
-    author: { handle: 'alice', cic: 1, level: 2 },
+    id: "d1",
+    title: "Drop Title",
+    parts: [{ media: [{ url: "a", mime_type: "image/jpeg" }] }],
+    author: { handle: "alice", cic: 1, level: 2 },
     rating: 0,
     raters_count: 3,
   };
 
-  it('triggers onDropClick when no text selected', () => {
+  it("triggers onDropClick when no text selected", () => {
     const onDropClick = jest.fn();
-    (window.getSelection as any) = () => ({ toString: () => '' });
-    const { container } = render(<MyStreamWaveMyVote drop={drop} onDropClick={onDropClick} />);
+    (globalThis.getSelection as any) = () => ({ toString: () => "" });
+    const { container } = render(
+      <MyStreamWaveMyVote drop={drop} onDropClick={onDropClick} />
+    );
     fireEvent.click(container.firstChild!);
     expect(onDropClick).toHaveBeenCalledWith(drop);
   });
 
-  it('does not trigger onDropClick when text selected', () => {
+  it("does not trigger onDropClick when text selected", () => {
     const onDropClick = jest.fn();
-    (window.getSelection as any) = () => ({ toString: () => 'sel' });
-    const { container } = render(<MyStreamWaveMyVote drop={drop} onDropClick={onDropClick} />);
+    (globalThis.getSelection as any) = () => ({ toString: () => "sel" });
+    const { container } = render(
+      <MyStreamWaveMyVote drop={drop} onDropClick={onDropClick} />
+    );
     fireEvent.click(container.firstChild!);
     expect(onDropClick).not.toHaveBeenCalled();
   });
 
-  it('calls onToggleCheck when checkbox clicked', () => {
+  it("calls onToggleCheck when checkbox clicked", () => {
     const onToggleCheck = jest.fn();
-    (window.getSelection as any) = () => ({ toString: () => '' });
+    (globalThis.getSelection as any) = () => ({ toString: () => "" });
     const { container } = render(
-      <MyStreamWaveMyVote drop={drop} onDropClick={jest.fn()} isChecked={false} onToggleCheck={onToggleCheck} />
+      <MyStreamWaveMyVote
+        drop={drop}
+        onDropClick={jest.fn()}
+        isChecked={false}
+        onToggleCheck={onToggleCheck}
+      />
     );
-    const checkbox = container.querySelector('.tw-flex-shrink-0');
+    const checkbox = container.querySelector(".tw-flex-shrink-0");
     fireEvent.click(checkbox!);
-    expect(onToggleCheck).toHaveBeenCalledWith('d1');
+    expect(onToggleCheck).toHaveBeenCalledWith("d1");
   });
 });

components/brain/my-stream/votes/MyStreamWaveMyVote.tsx

@@ -1,5 +1,5 @@
 import MediaTypeBadge from "@/components/drops/media/MediaTypeBadge";
-import DropListItemContentMedia from "@/components/drops/view/item/content/media/DropListItemContentMedia";
+import MediaDisplay from "@/components/drops/view/item/content/media/MediaDisplay";
 import UserCICAndLevel, {
   UserCICAndLevelSize,
 } from "@/components/user/utils/UserCICAndLevel";
@@ -8,8 +8,9 @@ import { SingleWaveDropPosition } from "@/components/waves/drop/SingleWaveDropPo
 import { formatNumberWithCommas } from "@/helpers/Helpers";
 import { ImageScale } from "@/helpers/image.helpers";
 import type { ExtendedDrop } from "@/helpers/waves/drop.helpers";
+import { getDropPreviewImageUrl } from "@/helpers/waves/drop.helpers";
 import Link from "next/link";
-import React from "react";
+import React, { useMemo } from "react";
 import { Tooltip } from "react-tooltip";
 import MyStreamWaveMyVoteInput from "./MyStreamWaveMyVoteInput";
 import MyStreamWaveMyVoteVotes from "./MyStreamWaveMyVoteVotes";
@@ -30,6 +31,10 @@ const MyStreamWaveMyVote: React.FC<MyStreamWaveMyVoteProps> = ({
   isResetting = false,
 }) => {
   const artWork = drop.parts.at(0)?.media.at(0);
+  const previewImageUrl = useMemo(
+    () => getDropPreviewImageUrl(drop.metadata),
+    [drop.metadata]
+  );
 
   const handleClick = () => {
     if (window.getSelection()?.toString()) {
@@ -89,11 +94,12 @@ const MyStreamWaveMyVote: React.FC<MyStreamWaveMyVoteProps> = ({
           <div className="tw-relative tw-flex tw-h-full tw-w-full tw-transform tw-items-center tw-justify-center tw-duration-300 tw-ease-out desktop-hover:hover:tw-scale-105">
             <div className="tw-absolute tw-inset-0 tw-z-[1]">
               {artWork && (
-                <DropListItemContentMedia
+                <MediaDisplay
                   media_mime_type={artWork.mime_type}
                   media_url={artWork.url}
                   imageScale={ImageScale.AUTOx450}
-                  isCompetitionDrop={true}
+                  previewImageUrl={previewImageUrl}
+                  disableMediaInteraction={true}
                 />
               )}
             </div>