jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - assist ui - review

Browse source
This commit is contained in:
Shekar Siri 2022-02-22 21:53:02 +01:00
parent 6800c19a90
commit 2ce2ae092d
14 changed files with 47 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
View file

@ -84,7 +84,8 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
<div
className={
cn(
'cursor-pointer p-2 mr-2 flex items-center',
'cursor-pointer p-2 flex items-center',
{[stl.disabled]: cannotCall}
)
}
onClick={ requestReleaseRemoteControl }
@ -98,13 +99,13 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
<span className={cn("ml-2", { 'color-green' : remoteControlStatus === RemoteControlStatus.Enabled })}>{ 'Remote Control' }</span> */}
<IconButton label={`${remoteActive ? 'Stop ' : ''} Remote Control`} icon="remote-control" primaryText redText={remoteActive} />
</div>
<div className="divider" />
<Popup
trigger={
<div
className={
cn(
'cursor-pointer p-2 mr-2 flex items-center',
'cursor-pointer p-2 flex items-center',
{[stl.disabled]: cannotCall}
)
}

10
frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
View file

@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react';
import { SlideModal, Icon } from 'UI';
import { SlideModal, Avatar, Icon } from 'UI';
import SessionList from '../SessionList';
import stl from './assistTabs.css'
interface Props {
userId: any,
userNumericHash: any,
}
const AssistTabs = (props: Props) => {
@ -16,14 +17,15 @@ const AssistTabs = (props: Props) => {
{props.userId && (
<>
<div className="flex items-center mr-3">
<Icon name="user-alt" color="gray-darkest" />
<div className="ml-2">{props.userId}</div>
{/* <Icon name="user-alt" color="gray-darkest" /> */}
<Avatar iconSize="20" width="30px" height="30px" seed={ props.userNumericHash } />
<div className="ml-2 font-medium">{props.userId}'s</div>
</div>
<div
className={stl.btnLink}
onClick={() => setShowMenu(!showMenu)}
>
All Active Sessions
Active Sessions
</div>
</>
)}

8
frontend/app/components/Session_/Player/Controls/Controls.js
View file

@ -297,7 +297,7 @@ export default class Controls extends React.Component {
>
<div>{ speed + 'x' }</div>
</button>
<div className={ styles.divider } />
<button
className={ cn(styles.skipIntervalButton, { [styles.withCheckIcon]: skip }) }
onClick={ this.props.toggleSkip }
@ -308,7 +308,9 @@ export default class Controls extends React.Component {
</button>
</React.Fragment>
}
<div className={ styles.divider } />
{ !live && <div className={ styles.divider } /> }
{ !live &&
<ControlButton
disabled={ disabled }
@ -413,7 +415,7 @@ export default class Controls extends React.Component {
icon="business-time"
/>
} */}
<div className={ styles.divider } />
{ !live &&
<React.Fragment>
<ControlButton

7
frontend/app/components/Session_/PlayerBlockHeader.js
View file

@ -62,7 +62,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
<div className="flex items-center">
{ width || 'x' } <Icon name="close" size="12" className="mx-1" /> { height || 'x' }
</div>
) : <span className="text-sm">Not Available</span>;
) : <span className="">Resolution N/A</span>;
}
backHandler = () => {
@ -87,6 +87,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
sessionId,
userCountry,
userId,
userNumericHash,
favorite,
startedAt,
userBrowser,
@ -120,7 +121,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
<BackLink onClick={this.backHandler} label="Back" />
<div className={ stl.divider } />
{ _live && <AssistTabs userId={userId} />}
{ _live && <AssistTabs userId={userId} userNumericHash={userNumericHash} />}
{/* <div className="mx-4 flex items-center">
<CountryFlag country={ userCountry } />
@ -144,7 +145,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
</>
)}
{ live && (
{ _live && (
<>
<SessionMetaList className="" metaList={_metaList} />
<div className={ stl.divider } />

4
frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
View file

@ -17,8 +17,8 @@ export default function SessionInfoItem(props: Props) {
{ icon && <Icon name={icon} size="16" /> }
{ comp && comp }
</div>
<div className="px-2 whitespace-nowrap capitalize" style={{ minWidth: '130px' }}>{label}</div>
<div className="color-gray-medium px-2" style={{ minWidth: '100px' }}>{value}</div>
<div className="px-2 capitalize" style={{ minWidth: '160px' }}>{label}</div>
<div className="color-gray-medium px-2" style={{ minWidth: '130px' }}>{value}</div>
</div>
)
}

9
frontend/app/components/Session_/playerBlockHeader.css
View file

@ -14,13 +14,6 @@
.liveSwitchButton {
cursor: pointer;
padding: 3px 8px;
border: solid thin $green;
color: $green;
border-radius: 3px;
margin-right: 10px;
&:hover {
background-color: $green;
color: white;
}
text-decoration: underline;
}

1
frontend/app/components/shared/DropdownPlain/DropdownPlain.tsx
View file

@ -21,6 +21,7 @@ export default function DropdownPlain(props: Props) {
direction={direction}
options={ options }
onChange={ props.onChange }
scrolling
// defaultValue={ value }
icon={ icon ? <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> : null }
/>

2
frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
View file

@ -18,7 +18,7 @@ interface Props {
function FilterAutoCompleteLocal(props: Props) {
const {
showCloseButton = false,
placeholder = 'Type to search',
placeholder = 'Enter',
showOrButton = false,
onRemoveValue = () => null,
onAddValue = () => null,

8
frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
View file

@ -19,13 +19,13 @@ export default function MetaMoreButton(props: Props) {
) }
content={
<div className="flex flex-col">
{list.slice(maxLength).map(({ label, value }, index) => (
<MetaItem key={index} label={label} value={value} className="mb-3" />
))}
{list.slice(maxLength).map(({ label, value }, index) => (
<MetaItem key={index} label={label} value={value} className="mb-3" />
))}
</div>
}
on="click"
position="top right"
position="center center"
hideOnScroll
/>
)

7
frontend/app/components/shared/SessionItem/SessionItem.js
View file

@ -21,6 +21,7 @@ import { withRouter } from 'react-router-dom';
import SessionMetaList from './SessionMetaList';
import ErrorBars from './ErrorBars';
import { assist as assistRoute, isRoute } from "App/routes";
import { capitalize } from 'App/utils';
const ASSIST_ROUTE = assistRoute();
@ -114,15 +115,15 @@ export default class SessionItem extends React.PureComponent {
<CountryFlag country={ userCountry } className="mr-2" label />
<div className="color-gray-medium flex items-center">
<span className="capitalize" style={{ maxWidth: '70px'}}>
<TextEllipsis text={ userBrowser } popupProps={{ inverted: true, size: "tiny" }} />
<TextEllipsis text={ capitalize(userBrowser) } popupProps={{ inverted: true, size: "tiny" }} />
</span>
<div className="mx-2 text-4xl">·</div>
<span className="capitalize" style={{ maxWidth: '70px'}}>
<TextEllipsis text={ userOs } popupProps={{ inverted: true, size: "tiny" }} />
<TextEllipsis text={ capitalize(userOs) } popupProps={{ inverted: true, size: "tiny" }} />
</span>
<div className="mx-2 text-4xl">·</div>
<span className="capitalize" style={{ maxWidth: '70px'}}>
<TextEllipsis text={ userDeviceType } popupProps={{ inverted: true, size: "tiny" }} />
<TextEllipsis text={ capitalize(userDeviceType) } popupProps={{ inverted: true, size: "tiny" }} />
</span>
</div>
</div>

7
frontend/app/components/ui/CountryFlag/CountryFlag.js
View file

@ -13,7 +13,12 @@ const CountryFlag = React.memo(({ country, className, style = {}, label = false
<Popup
trigger={ knownCountry
? <div className={ cn(`flag flag-${ countryFlag }`, className, stl.default) } />
: <Icon name="flag-na" size="22" className="" />
: (
<div className="flex items-center w-full">
<Icon name="flag-na" size="22" className="" />
<div className="ml-2 leading-none" style={{ whiteSpace: 'nowrap'}}>Unknown Country</div>
</div>
)
// : <div className={ cn('text-sm', className) }>{ "N/A" }</div>
}
content={ countryName }

2
frontend/app/components/ui/IconButton/iconButton.css
View file

@ -67,7 +67,7 @@
&.primary {
background-color: $teal;
box-shadow: 0 0 0 1px rgba(62, 170, 175, .8) inset !important;
box-shadow: 0 0 0 1px $teal inset !important;
& .icon {
fill: white;

2
frontend/app/components/ui/Loader/loader.css
View file

@ -1,7 +1,7 @@
.loader {
display: block;
margin: auto;
background-image: svg-load(openreplay-preloader.svg, fill=#CCC);
background-image: svg-load(openreplay-preloader.svg, fill=#ffffff00);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;

8
frontend/app/svg/openreplay-preloader.svg
View file

@ -1 +1,7 @@
<svg id="e8s3e2insbce1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><style><![CDATA[#e8s3e2insbce2_tr {animation: e8s3e2insbce2_tr__tr 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce2_tr__tr { 0% {transform: translate(35px,35px) rotate(-359deg)} 50% {transform: translate(35px,35px) rotate(0deg)} 100% {transform: translate(35px,35px) rotate(359deg)} }#e8s3e2insbce2_ts {animation: e8s3e2insbce2_ts__ts 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce2_ts__ts { 0% {transform: scale(0.510000,0.510000)} 50% {transform: scale(1,1)} 100% {transform: scale(0.510000,0.510000)} }#e8s3e2insbce3 {animation: e8s3e2insbce3_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce3_c_o { 0% {opacity: 0} 27.272727% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 100% {opacity: 0} }#e8s3e2insbce4 {animation: e8s3e2insbce4_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce4_c_o { 0% {opacity: 0} 18.181818% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 90.909091% {opacity: 0} 100% {opacity: 0} }#e8s3e2insbce5 {animation: e8s3e2insbce5_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce5_c_o { 0% {opacity: 0} 9.090909% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 81.818182% {opacity: 0} 100% {opacity: 0} }#e8s3e2insbce6 {animation: e8s3e2insbce6_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce6_c_o { 0% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 72.727273% {opacity: 0} 100% {opacity: 0} }]]></style><g id="e8s3e2insbce2_tr" transform="translate(35,35) rotate(-359)"><g id="e8s3e2insbce2_ts" transform="scale(0.510000,0.510000)"><g id="e8s3e2insbce2" transform="translate(-35,-35)"><circle id="e8s3e2insbce3" r="10.500000" transform="matrix(1 0 0 1 19.50000000000000 50.50000000000000)" opacity="0" fill="rgb(66,174,94)" fill-rule="evenodd" stroke="none" stroke-width="1"/><circle id="e8s3e2insbce4" r="10.500000" transform="matrix(1 0 0 1 50.50000000000000 50.50000000000000)" opacity="0" fill="rgb(57,177,255)" fill-rule="evenodd" stroke="none" stroke-width="1"/><circle id="e8s3e2insbce5" r="10.500000" transform="matrix(1 0 0 1 50.50000000000000 19.50000000000000)" opacity="0" fill="rgb(57,78,255)" fill-rule="evenodd" stroke="none" stroke-width="1"/><circle id="e8s3e2insbce6" r="10.500000" transform="matrix(1 0 0 1 19.50000000000000 19.50000000000000)" opacity="0" fill="rgb(0,145,147)" fill-rule="evenodd" stroke="none" stroke-width="1"/></g></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55" fill="none" height="55" width="55"><style>
@keyframes uro78awc4tzn00dgpjdreb25_t { 0% { transform: translate(27.5px,27.5px) rotate(0deg) scale(1,1) translate(0px,0px); } 100% { transform: translate(27.5px,27.5px) rotate(355deg) scale(1,1) translate(0px,0px); } }
@keyframes uro78awc4tzn00dgpjdreb25_sw { 0% { stroke-width: 3px; } 100% { stroke-width: 3px; } }
@keyframes xsc8rs7q380bevvc8x83et5f_t { 0% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } 50% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } 100% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } }
@keyframes xsc8rs7q380bevvc8x83et5f_o { 0% { opacity: .1; } 50% { opacity: 1; } 100% { opacity: .1; } }
@keyframes xsc8rs7q380bevvc8x83et5f_d { 0% { d: path('M20.2,18L9.8,11.9L9.8,24.1L20.2,18ZM21.7,16.7C21.9,16.9,22.1,17.1,22.2,17.3C22.3,17.5,22.4,17.7,22.4,18C22.4,18.3,22.3,18.5,22.2,18.7C22.1,18.9,21.9,19.1,21.7,19.3L10.2,25.9C9.3,26.4,8,25.8,8,24.6L8,11.4C8,10.2,9.3,9.6,10.2,10.1L21.7,16.7Z'); } 50% { d: path('M23,18L6.9,8.7L6.9,27.3L23,18ZM25.2,16.1C25.5,16.3,25.8,16.5,26,16.9C26.2,17.2,26.3,17.6,26.3,18C26.3,18.4,26.2,18.8,26,19.1C25.8,19.5,25.5,19.7,25.2,19.9L7.5,30.2C6.1,31,4.1,30,4.1,28.2L4.1,7.8C4.1,6,6.1,5,7.5,5.8L25.2,16.1Z'); } 100% { d: path('M20.2,18L9.8,11.9L9.8,24.1L20.2,18ZM21.7,16.7C21.9,16.9,22.1,17.1,22.2,17.3C22.3,17.5,22.4,17.7,22.4,18C22.4,18.3,22.3,18.5,22.2,18.7C22.1,18.9,21.9,19.1,21.7,19.3L10.2,25.9C9.3,26.4,8,25.8,8,24.6L8,11.4C8,10.2,9.3,9.6,10.2,10.1L21.7,16.7Z'); } }
</style><ellipse stroke="#6070f8" stroke-width="3" stroke-dasharray="6 6" rx="25" ry="25" transform="translate(27.5,27.5)" style="animation: 1s linear infinite both uro78awc4tzn00dgpjdreb25_t, 1s linear infinite both uro78awc4tzn00dgpjdreb25_sw;"/><path d="M20.2 18l-10.4-6.1v12.2l10.4-6.1Zm1.5-1.3c.2 .2 .4 .4 .5 .6c.1 .2 .2 .4 .2 .7c0 .3-0.1 .5-0.2 .7c-0.1 .2-0.3 .4-0.5 .6l-11.5 6.6c-0.9 .5-2.2-0.1-2.2-1.3v-13.2c0-1.2 1.3-1.8 2.2-1.3l11.5 6.6Z" fill="#122af5" opacity=".1" transform="translate(29.7,27.5) translate(-15.2,-18)" style="animation: 1s linear infinite both xsc8rs7q380bevvc8x83et5f_t, 1s linear infinite both xsc8rs7q380bevvc8x83et5f_o, 1s linear infinite both xsc8rs7q380bevvc8x83et5f_d;"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB