Multimedia Viewer

Multimedia Viewer

Default Multimedia Viewer

<MultimediaViewer mediaAssets={[
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-4c1fba4b-929c-49fe-a88e-614f648af822.jpg",
                                           highRes: "/test1.dzi"
                                       },
                                       description: "Image of passenger side hood"
                                   },
                                   {
                                       category: "EXT",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-759d0896-a742-42bf-9f5e-18fd5048f45b.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-759d0896-a742-42bf-9f5e-18fd5048f45b.jpg"
                                       },
                                       description: "Image of outer back side"
                                   },
                                   {
                                       category: "INT",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-29d9346d-e47c-4ace-ab09-e91023d4a8ba.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-29d9346d-e47c-4ace-ab09-e91023d4a8ba.jpg"
                                       },
                                       description: "Image of driver interior"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-1347e382-1839-4e89-bf90-45565fc5676a.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-1347e382-1839-4e89-bf90-45565fc5676a.jpg"
                                       },
                                       description: "Image of digital display"
                                   },
                                   {
                                       category: "VIDEO",
                                       src: {
                                           thumbnail: "https://cdn.fyusion.com/group/1vdj5604xh76ef51/6bd1lyzurnc4t/tags/vid_ededc7.jpg",
                                           video: "https://cdn.fyusion.com/group/1vdj5604xh76ef51/6bd1lyzurnc4t/tags/vid_ededc7.mp4"
                                       },
                                       description: "Image of odometer"
                                   },
                                   {
                                       category: "AUDIO",
                                       src: {
                                           thumbnail: "https://cdn.fyusion.com/group/5w9xrdzw9mcl1cei/1htckpi7x2da6/tags/aud_689b20.jpg",
                                           lowRes: "https://cdn.fyusion.com/group/5w9xrdzw9mcl1cei/1htckpi7x2da6/tags/aud_689b20.jpg",
                                           audio: "https://cdn.fyusion.com/group/5w9xrdzw9mcl1cei/1htckpi7x2da6/tags/aud_689b20.mp3"
                                       },
                                       description: "Image of vin sticker"
                                   },
                                   {
                                       category: "360",
                                       src: {
                                           thumbnail: "https://cdn.fyusion.com/thumb/03kfyg7s1y?width=300&height=200",
                                           360: "03kfyg7s1y"
                                       },
                                       description: "Full 360 degree view of vehicle taken on December 12, 2019 at 5:03:00 AM"
                                   },
                                   {
                                       category: "360",
                                       src: {
                                           thumbnail: "https://cdn.fyusion.com/thumb/8sxqyl1gc5?width=300&height=200",
                                           360: "8sxqyl1gc5"
                                       },
                                       description: "Image of interior trunk"
                                   },
                                   {
                                       category: "360",
                                       src: {
                                           thumbnail: "https://cdn.fyusion.com/thumb/0uecwxbf2r?width=300&height=200",
                                           360: "0uecwxbf2r"
                                       },
                                       description: "Image of interior trunk"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-a0b800da-d50b-4360-8a5d-755e198e73f6.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-a0b800da-d50b-4360-8a5d-755e198e73f6.jpg"
                                       },
                                       description: "Image of interior trunk"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-08963bd7-2c14-4435-a943-a1f41839d26a.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-08963bd7-2c14-4435-a943-a1f41839d26a.jpg"
                                       },
                                       description: "Image of bumper"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-0d12c4c9-32b5-4f78-ba35-d75a9e35e471.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-0d12c4c9-32b5-4f78-ba35-d75a9e35e471.jpg"
                                       },
                                       description: "Image of exterior trunk"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-01e18311-7a38-4dd8-931f-331356b2509b.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-01e18311-7a38-4dd8-931f-331356b2509b.jpg"
                                       },
                                       description: "Image of exterior driver door"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-9c64c024-9460-4daf-8caa-3ae8e5b1852f.jpg",
                                           highRes: "/test2.dzi"
                                       },
                                       description: "Image of passenger side hood"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-2007d0e1-b97c-44de-99c6-39a15682dfb4.jpg",
                                           highRes: "/test3.dzi"
                                       },
                                       description: "Image of passenger side hood"
                                   }
                               ]} />

Multimedia Viewer without any assets

<MultimediaViewer mediaAssets={[]} />

Multimedia Viewer with Grid View and Custom Buttons

<MultimediaViewer showGrid={true}
                  hideFilters={true}
                  customButtons={[ {icon: "heart", onClick: () => alert('Heart Clicked') } ]}
                  mediaAssets={[
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-4c1fba4b-929c-49fe-a88e-614f648af822.jpg",
                                           highRes: "/test1.dzi"
                                       },
                                       description: "Image of passenger side hood"
                                   },
                                   {
                                       category: "EXT",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-759d0896-a742-42bf-9f5e-18fd5048f45b.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-759d0896-a742-42bf-9f5e-18fd5048f45b.jpg"
                                       },
                                       description: "Image of outer back side"
                                   },
                                   {
                                       category: "INT",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-29d9346d-e47c-4ace-ab09-e91023d4a8ba.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-29d9346d-e47c-4ace-ab09-e91023d4a8ba.jpg"
                                       },
                                       description: "Image of driver interior"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-1347e382-1839-4e89-bf90-45565fc5676a.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-1347e382-1839-4e89-bf90-45565fc5676a.jpg"
                                       },
                                       description: "Image of digital display"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-a0b800da-d50b-4360-8a5d-755e198e73f6.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-a0b800da-d50b-4360-8a5d-755e198e73f6.jpg"
                                       },
                                       description: "Image of interior trunk"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-08963bd7-2c14-4435-a943-a1f41839d26a.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-08963bd7-2c14-4435-a943-a1f41839d26a.jpg"
                                       },
                                       description: "Image of bumper"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-0d12c4c9-32b5-4f78-ba35-d75a9e35e471.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-0d12c4c9-32b5-4f78-ba35-d75a9e35e471.jpg"
                                       },
                                       description: "Image of exterior trunk"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-01e18311-7a38-4dd8-931f-331356b2509b.jpg",
                                           lowRes: "https://images.cdn.manheim.com/20191108215115-01e18311-7a38-4dd8-931f-331356b2509b.jpg"
                                       },
                                       description: "Image of exterior driver door"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-9c64c024-9460-4daf-8caa-3ae8e5b1852f.jpg",
                                           highRes: "/test2.dzi"
                                       },
                                       description: "Image of passenger side hood"
                                   },
                                   {
                                       category: "DMG",
                                       src: {
                                           thumbnail: "https://images.cdn.manheim.com/20191108215115-2007d0e1-b97c-44de-99c6-39a15682dfb4.jpg",
                                           highRes: "/test3.dzi"
                                       },
                                       description: "Image of passenger side hood"
                                   }
                               ]} />

Props

MultimediaViewer

NameTypeDefaultDescription
customButtonsarray[]Properties for custom buttons to be displayed in the Image Count area. See customButtons section.
disableFiltersboolfalseRenders filters in a disabled state
hideAddOnsboolfalseHides Filters row and Thumbnail Filmstrip or Image Grid
hideFiltersboolfalseHides Filters row
mediaAssetsarraynullRequired. Defines Category, Source, and Description of images to be displayed.
showGridboolfalseImage carousel is displayed in as a Grid instead of a Filmstrip
Component Prop Descriptions

customButtons

NameTypeDefaultDescription
iconstringnullRequired. Prism icon to be displayed as button
onClickfuncnullRequired. Function to be performed on button click