diff --git a/frontend/app/assets/img/spot-demo-cta.jpg b/frontend/app/assets/img/spot-demo-cta.jpg new file mode 100644 index 000000000..c354df3a8 Binary files /dev/null and b/frontend/app/assets/img/spot-demo-cta.jpg differ diff --git a/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx b/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx index fd88fe189..9a816fb7b 100644 --- a/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx +++ b/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx @@ -180,10 +180,9 @@ function SpotVideoContainer({ {isProcessing ? ( } /> ) : prevIsProcessing ? ( @@ -195,9 +194,10 @@ function SpotVideoContainer({ action={ diff --git a/frontend/app/components/Spots/SpotsList/EmptyPage.tsx b/frontend/app/components/Spots/SpotsList/EmptyPage.tsx index e9290b681..b094f07cd 100644 --- a/frontend/app/components/Spots/SpotsList/EmptyPage.tsx +++ b/frontend/app/components/Spots/SpotsList/EmptyPage.tsx @@ -1,11 +1,13 @@ import { ChromeOutlined, ArrowRightOutlined } from '@ant-design/icons'; -import { Alert, Badge, Button } from 'antd'; +import { Alert, Badge, Button, Modal } from 'antd'; import { ArrowUpRight, CirclePlay } from 'lucide-react'; -import React from 'react'; +import React, { useState } from 'react'; function EmptyPage() { const extKey = '__$spot_ext_exist$__'; const [extExist, setExtExist] = React.useState(false); + const [isModalVisible, setIsModalVisible] = useState(false); + React.useEffect(() => { let int: any; const v = localStorage.getItem(extKey); @@ -32,59 +34,75 @@ function EmptyPage() { } }; }, []); + + const handleWatchClick = () => { + setIsModalVisible(true); + }; + + const handleModalClose = () => { + setIsModalVisible(false); + }; + return (
-
Spot your first bug.
- -
Your recordings will appear here.
-
-
- {extExist ? null : ( - } - className="text-lg" - > - Get Chrome Extension - - } - className="w-3/4 justify-between font-medium text-lg rounded-lg" - /> - )} -
-
- {'pin -
- Pin Spot extension -
-
-
- {'start -
- Capture and share a bug -
-
+ +
+ {extExist ? null : ( + } + className="text-lg" + onClick={() => window.open('https://chromewebstore.google.com/detail/openreplay-spot-record-re/ckigbicapkkgfomcfmcbaaplllopgbid?pli=1', '_blank')} + > + Get Chrome Extension + + } + className="w-full justify-between font-medium text-lg rounded-lg border-0" + /> + )} + + + Learn how to use OpenReplay Spot + + +

Your recordings will appear here.

+ + + {isModalVisible && ( +