From 05ecce9c74679c2cc92b0b40910e2f3ea69fcb70 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 23 May 2022 18:11:07 +0200
Subject: [PATCH] feat(ui): add urlref bad to subheader

---
 frontend/app/components/Session/WebPlayer.js  |  2 +-
 .../components/Session_/Autoplay/Autoplay.js  | 11 ++++---
 .../app/components/Session_/PlayerBlock.js    |  9 +++---
 frontend/app/components/Session_/Subheader.js | 32 ++++++++++++++++---
 frontend/app/components/ui/Icon/Icon.js       | 17 ++++++----
 5 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.js b/frontend/app/components/Session/WebPlayer.js
index a9a61536c..888283da4 100644
--- a/frontend/app/components/Session/WebPlayer.js
+++ b/frontend/app/components/Session/WebPlayer.js
@@ -25,7 +25,7 @@ const InitLoader = connectPlayer(state => ({
 }))(Loader);
 
 const PlayerContentConnected = connectPlayer(state => ({
-  showEvents: !state.showEvents
+  showEvents: !state.showEvents,
 }))(PlayerContent);
 
 
diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index a5fb019e6..109c65d2f 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -12,7 +12,7 @@ function Autoplay(props) {
   useEffect(() => {
     props.setAutoplayValues()
   }, [])
-  console.log(previousId, nextId)
+
   return (
     <div className="flex items-center">
       <div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2">
@@ -25,11 +25,12 @@ function Autoplay(props) {
         <span className="ml-2">Auto-Play</span>
       </div>
 
-      <Link to={ sessionRoute(previousId) } disabled={!previousId}>
-		  	<Icon name="prev1" size="16" color="teal" />
+      <Link className="mr-1 cursor-pointer p-2 bg-tealx-light rounded-full color-tealx font-medium" to={ sessionRoute(previousId) } disabled={!previousId}>
+		  	<Icon name="prev1" className="hover:fill-teal" color="inherit" size="16" />
 		  </Link>
-      <Link to={ sessionRoute(nextId) } disabled={!nextId}>
-		  	<Icon name="next1" size="16" color="teal" />
+
+      <Link className="cursor-pointer p-2 bg-tealx-light rounded-full color-tealx font-medium" to={ sessionRoute(nextId) } disabled={!nextId}>
+		  	<Icon name="next1" className="hover:fill-teal" color="inherit" size="16" />
 		  </Link>
     </div>
   )
diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index cd04f52d5..4feb95508 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -16,7 +16,6 @@ import {
   LONGTASKS,
   INSPECTOR,
 } from 'Duck/components/player';
-import { setAutoplayValues } from 'Duck/sessions'
 import Player from './Player';
 import Network from './Network';
 import Console from './Console/Console';
@@ -52,10 +51,10 @@ export default class PlayerBlock extends React.PureComponent {
 
     return (
       <div className={ cn(styles.playerBlock, "flex flex-col") }>
-        <SubHeader
-          sessionId={sessionId}
-          disabled={disabled}
-        />
+          <SubHeader
+            sessionId={sessionId}
+            disabled={disabled}
+          />
         <Player
           className="flex-1"
           bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 31ef51705..e75bc3198 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -1,15 +1,37 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Icon, TextEllipsis, Tooltip } from 'UI';
 import Autoplay from './Autoplay';
 import Bookmark from 'Shared/Bookmark'
 import SharePopup from '../shared/SharePopup/SharePopup';
+import { connectPlayer } from 'Player';
+import copy from 'copy-to-clipboard';
 
 function SubHeader(props) {
-    const isAssist = window.location.pathname.includes('/assist/');
+    const [isCopied, setCopied] = React.useState(false);
 
+    const isAssist = window.location.pathname.includes('/assist/');
     if (isAssist) return null;
+
+    const location = props.currentLocation && props.currentLocation.length > 60 ? `${props.currentLocation.slice(0, 60)}...` : props.currentLocation
     return (
-        <div className="w-full p-4">
+        <div className="w-full px-4 py-2 flex items-center">
+            {location && (
+                <div
+                    className="flex items-center cursor-pointer color-gray-medium text-lg"
+                    onClick={() => {
+                        copy(props.currentLocation);
+                        setCopied(true)
+                    }}
+                >
+                    <Icon size="20" name="event/link" className="mr-1" />
+                    <Tooltip
+                        maxWidth={500}
+                        position="bottom center"
+                        trigger={location}
+                        tooltip={isCopied ? 'URL Copied to clipboard' : undefined}
+                    />
+                </div>
+            )}
             <div className="ml-auto flex items-center color-gray-medium" style={{ width: 'max-content' }}>
                 <div className="cursor-pointer">
                     <SharePopup
@@ -43,4 +65,6 @@ function SubHeader(props) {
     )
 }
 
-export default React.memo(SubHeader)
+const SubH = connectPlayer(state => ({ currentLocation: state.location }))(SubHeader)
+
+export default React.memo(SubH)
diff --git a/frontend/app/components/ui/Icon/Icon.js b/frontend/app/components/ui/Icon/Icon.js
index 8f2e3bf10..7fc6ffee9 100644
--- a/frontend/app/components/ui/Icon/Icon.js
+++ b/frontend/app/components/ui/Icon/Icon.js
@@ -4,29 +4,32 @@ import SVG from 'UI/SVG';
 import styles from './icon.module.css';
 
 const Icon = ({
-  name, 
-  size = 12, 
+  name,
+  size = 12,
   height = size,
   width = size,
-  color = 'gray-medium', 
+  color = 'gray-medium',
   className = '',
   style={},
-  marginRight, 
+  marginRight,
   inline = false,
   ...props
 }) => {
-  const _style = { 
-    width: `${ width }px`, 
+  const _style = {
+    width: `${ width }px`,
     height: `${ height }px`,
     ...style,
   };
   if (marginRight){
     _style.marginRight = `${ marginRight }px`;
   }
+
+  const additionalStyles = color === 'inherit' ? { fill: 'currentcolor' } : {}
+
   return (
     <span
       { ...props }
-      style={ _style }
+      style={{..._style, ...additionalStyles }}
       className={ cn(className, styles.wrapper, `fill-${ color }`) }
       data-inline={ inline }
     >