Add open in tab option in publisher video context menu (#754)

.gitignore

@@ -72,3 +72,6 @@ yarn-error.log
 
 # vscode/extensions
 .history
+
+# JetBrains
+.idea

src/components/VideoPreview.tsx

@@ -92,6 +92,7 @@ export const VideoPreviewPublisher: React.FC<VideoPreviewWPublisherProps> = ({
       hasThumbnailUploadFailed={hasThumbnailUploadFailed}
       channelHref={id ? absoluteRoutes.viewer.channel(video?.channel.id) : undefined}
       isLoading={loading}
+      onOpenInTabClick={isDraft || !id ? undefined : () => window.open(absoluteRoutes.viewer.video(id))?.focus()}
       onCopyVideoURLClick={isDraft ? undefined : () => copyToClipboard(videoHref ? location.origin + videoHref : '')}
       videoPublishState={video?.isPublic || video?.isPublic === undefined ? 'default' : 'unlisted'}
       isDraft={isDraft}

src/shared/components/VideoPreviewBase/VideoPreviewBase.tsx

@@ -15,6 +15,7 @@ import {
   SvgLargeEdit,
   SvgOutlineVideo,
   SvgLargeUploadFailed,
+  SvgGlyphPlay,
 } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 import { formatDateAgo, formatDurationShort } from '@/utils/time'
@@ -73,6 +74,7 @@ export type VideoPreviewPublisherProps =
       isDraft?: boolean
       videoPublishState?: 'default' | 'unlisted'
       onPullupClick?: (e: React.MouseEvent<HTMLElement>) => void
+      onOpenInTabClick?: () => void
       onEditVideoClick?: () => void
       onCopyVideoURLClick?: () => void
       onDeleteVideoClick?: () => void
@@ -83,6 +85,7 @@ export type VideoPreviewPublisherProps =
       isDraft?: undefined
       videoPublishState?: undefined
       onPullupClick?: undefined
+      onOpenInTabClick?: undefined
       onEditVideoClick?: undefined
       onCopyVideoURLClick?: undefined
       onDeleteVideoClick?: undefined
@@ -144,6 +147,7 @@ const VideoPreviewBase: React.FC<VideoPreviewBaseProps> = ({
   onRemoveButtonClick,
   contentKey,
   className,
+  onOpenInTabClick,
   onEditVideoClick,
   onCopyVideoURLClick,
   onDeleteVideoClick,
@@ -345,9 +349,9 @@ const VideoPreviewBase: React.FC<VideoPreviewBaseProps> = ({
                   <SvgGlyphMore />
                 </KebabMenuIconContainer>
                 <ContextMenu contextMenuOpts={contextMenuOpts}>
-                  {onEditVideoClick && (
-                    <ContextMenuItem icon={<SvgGlyphEdit />} onClick={onEditVideoClick}>
-                      {isDraft ? 'Edit draft' : 'Edit video'}
+                  {onOpenInTabClick && (
+                    <ContextMenuItem icon={<SvgGlyphPlay />} onClick={onOpenInTabClick}>
+                      Play in Joystream
                     </ContextMenuItem>
                   )}
                   {onCopyVideoURLClick && (
@@ -355,6 +359,11 @@ const VideoPreviewBase: React.FC<VideoPreviewBaseProps> = ({
                       Copy video URL
                     </ContextMenuItem>
                   )}
+                  {onEditVideoClick && (
+                    <ContextMenuItem icon={<SvgGlyphEdit />} onClick={onEditVideoClick}>
+                      {isDraft ? 'Edit draft' : 'Edit video'}
+                    </ContextMenuItem>
+                  )}
                   {onDeleteVideoClick && (
                     <ContextMenuItem icon={<SvgGlyphTrash />} onClick={onDeleteVideoClick}>
                       {isDraft ? 'Delete draft' : 'Delete video'}