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

fix ui: fix mobile subheader, loader issues

Browse source
This commit is contained in:
nick-delirium 2024-05-29 16:30:13 +02:00
parent 33e88ebf09
commit ff51e7b430
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
6 changed files with 28 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx
View file

@ -6,6 +6,7 @@ import CircleNumber from '../../CircleNumber';
import { CopyButton } from 'UI';
const installationCommand = `
// make sure to grab latest version from https://github.com/openreplay/ios-tracker
// Cocoapods
pod 'Openreplay', '~> 1.0.5'

44
frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx
View file

@ -1,15 +1,14 @@
import React, { useMemo } from 'react';
import { Button } from 'UI';
import QueueControls from 'Components/Session_/QueueControls';
import Bookmark from 'Shared/Bookmark';
import SharePopup from 'Components/shared/SharePopup/SharePopup';
import Issues from 'Components/Session_/Issues/Issues';
import NotePopup from 'Components/Session_/components/NotePopup';
import ItemMenu from 'Components/Session_/components/HeaderMenu';
import { observer } from 'mobx-react-lite';
import AutoplayToggle from 'Shared/AutoplayToggle';
import { connect } from 'react-redux';
import { Tag } from 'antd'
import { ShareAltOutlined } from '@ant-design/icons';
import { Button as AntButton, Popover } from 'antd';
import SharePopup from 'Components/shared/SharePopup/SharePopup';
function SubHeader(props: any) {
@ -22,48 +21,30 @@ function SubHeader(props: any) {
return integrations.some((i: Record<string, any>) => i.token);
}, [props.integrations]);
const viewportWidth = window.innerWidth;
const baseMenuItems = [
{
key: 1,
component: <AutoplayToggle />,
},
{
key: 2,
component: <Bookmark noMargin sessionId={props.sessionId} />,
},
]
const menuItems = viewportWidth > 1400 ? baseMenuItems : baseMenuItems.concat({
key: 3,
component: <NotePopup />,
})
console.log(props.isIOS, props.session)
return (
<>
<div className="w-full px-4 flex items-center border-b relative">
<Tag color="error">MOBILE BETA</Tag>
<Tag color="error">{props.isIOS ? 'iOS' : 'ANDROID'} BETA</Tag>
<div
className="ml-auto text-sm flex items-center color-gray-medium gap-2"
style={{ width: 'max-content' }}
>
{viewportWidth > 1400 ? <NotePopup /> : null}
<NotePopup />
{enabledIntegration && <Issues sessionId={props.sessionId} />}
<Bookmark sessionId={props.sessionId} />
<SharePopup
entity="sessions"
id={props.sessionId}
showCopyLink={true}
trigger={
<div className="relative">
<Button icon="share-alt" variant="text" className="relative">
Share
</Button>
<Popover content={'Share Session'}>
<AntButton size={'small'} className="flex items-center justify-center">
<ShareAltOutlined />
</AntButton>
</Popover>
</div>
}
/>
<ItemMenu
useSc
items={menuItems}
/>
<div>
{/* @ts-ignore */}
@ -79,4 +60,5 @@ export default connect((state: any) => ({
siteId: state.getIn(['site', 'siteId']),
integrations: state.getIn(['issues', 'list']),
modules: state.getIn(['user', 'account', 'modules']) || [],
isIOS: state.getIn(['sessions', 'current']).platform === 'ios',
}))(observer(SubHeader));

16
frontend/app/components/Session/Player/MobilePlayer/ReplayWindow.tsx
View file

@ -12,11 +12,19 @@ interface Props {
screenHeight: number;
}
const appleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="white" viewBox="0 0 16 16">
const appleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="102" height="102" fill="white" viewBox="0 0 16 16">
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"/>
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"/>
</svg>`;
const androidIcon = `<svg fill="#78C257" xmlns="http://www.w3.org/2000/svg" width="144" height="144" viewBox="0 0 512 512" xml:space="preserve">
<g id="b75708d097f2188dff6617b0f00f7c43">
<path display="inline" d="M120.606,169h270.788v220.663c0,13.109-10.628,23.737-23.721,23.737h-27.123v67.203c0,17.066-13.612,30.897-30.415,30.897c-16.846,0-30.438-13.831-30.438-30.897v-67.203h-47.371v67.203c0,17.066-13.639,30.897-30.441,30.897c-16.799,0-30.437-13.831-30.437-30.897v-67.203h-27.099c-13.096,0-23.744-10.628-23.744-23.737V169z M67.541,167.199c-16.974,0-30.723,13.963-30.723,31.2v121.937c0,17.217,13.749,31.204,30.723,31.204c16.977,0,30.723-13.987,30.723-31.204V198.399C98.264,181.162,84.518,167.199,67.541,167.199z M391.395,146.764H120.606c3.342-38.578,28.367-71.776,64.392-90.998l-25.746-37.804c-3.472-5.098-2.162-12.054,2.946-15.525c5.102-3.471,12.044-2.151,15.533,2.943l28.061,41.232c15.558-5.38,32.446-8.469,50.208-8.469c17.783,0,34.672,3.089,50.229,8.476L334.29,5.395c3.446-5.108,10.41-6.428,15.512-2.957c5.108,3.471,6.418,10.427,2.946,15.525l-25.725,37.804C363.047,74.977,388.055,108.175,391.395,146.764z M213.865,94.345c0-8.273-6.699-14.983-14.969-14.983c-8.291,0-14.99,6.71-14.99,14.983c0,8.269,6.721,14.976,14.99,14.976S213.865,102.614,213.865,94.345z M329.992,94.345c0-8.273-6.722-14.983-14.99-14.983c-8.291,0-14.97,6.71-14.97,14.983c0,8.269,6.679,14.976,14.97,14.976C323.271,109.321,329.992,102.614,329.992,94.345z M444.48,167.156c-16.956,0-30.744,13.984-30.744,31.222v121.98c0,17.238,13.788,31.226,30.744,31.226c16.978,0,30.701-13.987,30.701-31.226v-121.98C475.182,181.14,461.458,167.156,444.48,167.156z">
</path>
</g>
</svg>
`
function ReplayWindow({ videoURL, userDevice, screenHeight, screenWidth, isAndroid }: Props) {
const playerContext = React.useContext<IOSPlayerContext>(MobilePlayerContext);
const videoRef = React.useRef<HTMLVideoElement>();
@ -24,7 +32,7 @@ function ReplayWindow({ videoURL, userDevice, screenHeight, screenWidth, isAndro
const containerRef = React.useRef<HTMLDivElement>();
const { time, currentSnapshot, mode } = playerContext.store.get();
// TODO: add android styles
let phoneShell: string;
let styles: Record<string, any>;
if (!isAndroid) {
@ -85,8 +93,8 @@ function ReplayWindow({ videoURL, userDevice, screenHeight, screenWidth, isAndro
const loadingBar = document.createElement('div');
Object.assign(loadingBar.style, mobileLoadingBarStyle(styles));
// TODO: add android
icon.innerHTML = appleIcon;
icon.innerHTML = isAndroid ? androidIcon : appleIcon;
shell.style.position = 'absolute';
shell.style.top = '0';

2
frontend/app/components/Session_/Subheader.js
View file

@ -101,8 +101,6 @@ function SubHeader(props) {
<NotePopup />
{enabledIntegration && <Issues sessionId={props.sessionId} />}
<SharePopup
entity="sessions"
id={props.sessionId}
showCopyLink={true}
trigger={
<div className="relative">

2
frontend/app/components/shared/SharePopup/SharePopup.tsx
View file

@ -24,7 +24,7 @@ const SharePopup = ({
trigger,
showCopyLink = false,
}: {
trigger: string;
trigger: React.ReactNode;
showCopyLink?: boolean;
}) => {
const { store } = React.useContext(PlayerContext);

1
frontend/app/types/session/session.ts
View file

@ -310,6 +310,7 @@ export default class Session {
frustrationIssues
).sort(sortEvents)
console.log(session.platform)
Object.assign(this, {
...session,
isMobileNative: ['ios', 'android'].includes(session.platform),