diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx index 580efb071..1efb37c44 100644 --- a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx +++ b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx @@ -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' diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx index 0eb3090ef..049da5be7 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx @@ -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) => i.token); }, [props.integrations]); - const viewportWidth = window.innerWidth; - - const baseMenuItems = [ - { - key: 1, - component: , - }, - { - key: 2, - component: , - }, - ] - const menuItems = viewportWidth > 1400 ? baseMenuItems : baseMenuItems.concat({ - key: 3, - component: , - }) + console.log(props.isIOS, props.session) return ( <>
- MOBILE BETA + {props.isIOS ? 'iOS' : 'ANDROID'} BETA
- {viewportWidth > 1400 ? : null} + {enabledIntegration && } + - + + + + +
} /> -
{/* @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)); diff --git a/frontend/app/components/Session/Player/MobilePlayer/ReplayWindow.tsx b/frontend/app/components/Session/Player/MobilePlayer/ReplayWindow.tsx index 64a08bb49..6f3b76a6c 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/ReplayWindow.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/ReplayWindow.tsx @@ -12,11 +12,19 @@ interface Props { screenHeight: number; } -const appleIcon = ` +const appleIcon = ` `; +const androidIcon = ` + + + + + +` + function ReplayWindow({ videoURL, userDevice, screenHeight, screenWidth, isAndroid }: Props) { const playerContext = React.useContext(MobilePlayerContext); const videoRef = React.useRef(); @@ -24,7 +32,7 @@ function ReplayWindow({ videoURL, userDevice, screenHeight, screenWidth, isAndro const containerRef = React.useRef(); const { time, currentSnapshot, mode } = playerContext.store.get(); - // TODO: add android styles + let phoneShell: string; let styles: Record; 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'; diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index 2a8914514..6e6f697f9 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/frontend/app/components/Session_/Subheader.js @@ -101,8 +101,6 @@ function SubHeader(props) { {enabledIntegration && } diff --git a/frontend/app/components/shared/SharePopup/SharePopup.tsx b/frontend/app/components/shared/SharePopup/SharePopup.tsx index 9070e9e65..896168c49 100644 --- a/frontend/app/components/shared/SharePopup/SharePopup.tsx +++ b/frontend/app/components/shared/SharePopup/SharePopup.tsx @@ -24,7 +24,7 @@ const SharePopup = ({ trigger, showCopyLink = false, }: { - trigger: string; + trigger: React.ReactNode; showCopyLink?: boolean; }) => { const { store } = React.useContext(PlayerContext); diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts index f47a51e37..3f7e2991a 100644 --- a/frontend/app/types/session/session.ts +++ b/frontend/app/types/session/session.ts @@ -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),