refactor(ui): add icons to PlayButton dropdown (#1457)

src/components/Common/PlayButton/index.tsx

@@ -1,5 +1,4 @@
-import { PlayIcon } from '@heroicons/react/outline';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import ButtonWithDropdown from '../ButtonWithDropdown';
 
 interface PlayButtonProps {
@@ -9,6 +8,7 @@ interface PlayButtonProps {
 export interface PlayButtonLink {
   text: string;
   url: string;
+  svg: ReactNode;
 }
 
 const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
@@ -21,8 +21,8 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
       buttonType="ghost"
       text={
         <>
-          <PlayIcon className="w-5 h-5 mr-1" />
-          <span>{links[0].text}</span>
+          {links[0].svg}
+          {links[0].text}
         </>
       }
       onClick={() => {
@@ -39,6 +39,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
               }}
               buttonType="ghost"
             >
+              {link.svg}
               {link.text}
             </ButtonWithDropdown.Item>
           );

src/components/MovieDetails/index.tsx

@@ -1,4 +1,9 @@
-import { ArrowCircleRightIcon, CogIcon } from '@heroicons/react/outline';
+import {
+  ArrowCircleRightIcon,
+  CogIcon,
+  FilmIcon,
+  PlayIcon,
+} from '@heroicons/react/outline';
 import {
   CheckCircleIcon,
   DocumentRemoveIcon,
@@ -111,6 +116,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.playonplex),
       url: data.mediaInfo?.plexUrl,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -123,6 +129,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.play4konplex),
       url: data.mediaInfo?.plexUrl4k,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -135,6 +142,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.watchtrailer),
       url: trailerUrl,
+      svg: <FilmIcon className="w-5 h-5 mr-1" />,
     });
   }
 

src/components/TvDetails/index.tsx

@@ -1,4 +1,9 @@
-import { ArrowCircleRightIcon, CogIcon } from '@heroicons/react/outline';
+import {
+  ArrowCircleRightIcon,
+  CogIcon,
+  FilmIcon,
+  PlayIcon,
+} from '@heroicons/react/outline';
 import {
   CheckCircleIcon,
   DocumentRemoveIcon,
@@ -119,6 +124,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.playonplex),
       url: data.mediaInfo?.plexUrl,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -131,6 +137,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.play4konplex),
       url: data.mediaInfo?.plexUrl4k,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -143,6 +150,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.watchtrailer),
       url: trailerUrl,
+      svg: <FilmIcon className="w-5 h-5 mr-1" />,
     });
   }