Skip to content

Commit

Permalink
fixing the navigation to preview
Browse files Browse the repository at this point in the history
  • Loading branch information
nnecla committed Oct 11, 2024
1 parent 90f6a4d commit b304944
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 38 deletions.
18 changes: 11 additions & 7 deletions src/browser/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,23 @@ import ReactDOM from 'react-dom'

import AppInit, { setupSentry } from './AppInit'
import './init'
import { navigateToPreview } from './modules/Stream/StartPreviewFrame'

setupSentry()
;(async () => {
const doesPreferQuery = localStorage.getItem('prefersOldBrowser') === 'false'

const response = await fetch('/preview/manifest.json')
if (response.status === 200) {
if (doesPreferQuery) {
window.location.pathname = '/preview/'
try {
const response = await fetch('./preview/manifest.json')
if (response.status === 200) {
if (doesPreferQuery) {
navigateToPreview()
} else {
localStorage.setItem('previewAvailable', 'true')
}
} else {
localStorage.setItem('previewAvailable', 'true')
localStorage.setItem('previewAvailable', 'false')
}
} else {
} catch (e) {
localStorage.setItem('previewAvailable', 'false')
}

Expand Down
22 changes: 6 additions & 16 deletions src/browser/modules/Stream/PlayFrame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,6 @@ import { getEdition, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
import { DARK_THEME } from 'shared/modules/settings/settingsDuck'
import { LAST_GUIDE_SLIDE } from 'shared/modules/udc/udcDuck'
import { PreviewFrame } from './StartPreviewFrame'
import {
experimentalFeaturePreviewName,
showFeature
} from 'shared/modules/experimentalFeatures/experimentalFeaturesDuck'

const AuraPromotion = () => {
const theme = useContext(ThemeContext)
Expand Down Expand Up @@ -93,15 +89,13 @@ type PlayFrameProps = {
showPromotion: boolean
isFullscreen: boolean
isCollapsed: boolean
isAdvertiseFlagOn: boolean
}
export function PlayFrame({
stack,
bus,
showPromotion,
isFullscreen,
isCollapsed,
isAdvertiseFlagOn
isCollapsed
}: PlayFrameProps): JSX.Element {
const [stackIndex, setStackIndex] = useState(0)
const [atSlideStart, setAtSlideStart] = useState<boolean | null>(null)
Expand Down Expand Up @@ -130,8 +124,7 @@ export function PlayFrame({
bus,
onSlide,
initialPlay,
showPromotion,
isAdvertiseFlagOn
showPromotion
)
if (stillMounted) {
setInitialPlay(false)
Expand Down Expand Up @@ -214,8 +207,7 @@ function generateContent(
bus: Bus,
onSlide: any,
shouldUseSlidePointer: boolean,
showPromotion = false,
isAdvertiseFlagOn: boolean
showPromotion = false
): Content | Promise<Content> {
// Not found
if (stackFrame.response && stackFrame.response.status === 404) {
Expand Down Expand Up @@ -298,17 +290,16 @@ function generateContent(
if (isPlayChapter(guideName)) {
const isPreviewAvailable =
localStorage.getItem('previewAvailable') === 'true'
const showAdvertiseTile = isAdvertiseFlagOn && isPreviewAvailable
const { content, title, subtitle, slides = null } = chapters[guideName]

const isPlayStart = stackFrame.cmd.trim() === ':play start'
const updatedContent =
isPlayStart && showPromotion ? (
<>
{showAdvertiseTile ? <PreviewFrame /> : content}
{isPreviewAvailable ? <PreviewFrame /> : content}
<AuraPromotion />
</>
) : showAdvertiseTile ? (
) : isPreviewAvailable ? (
<PreviewFrame />
) : (
content
Expand Down Expand Up @@ -392,8 +383,7 @@ const mapStateToProps = (state: GlobalState) => ({
(getEdition(state) !== null &&
!isEnterprise(state) &&
!isConnectedAuraHost(state)) ||
inDesktop(state),
isAdvertiseFlagOn: showFeature(state, experimentalFeaturePreviewName)
inDesktop(state)
})

export default connect(mapStateToProps)(withBus(PlayFrame))
18 changes: 10 additions & 8 deletions src/browser/modules/Stream/StartPreviewFrame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@
*/
import React from 'react'

export const navigateToPreview = (): void => {
const path = window.location.pathname
if (!path.endsWith('/preview/')) {
window.location.pathname = `${path}${path.endsWith('/') ? '' : '/'}preview/`
}
}

export const PreviewFrame = () => {
return (
<>
Expand All @@ -27,15 +34,10 @@ export const PreviewFrame = () => {
<img src="./assets/images/clusters.svg" className="img-advertise" />
<h3>Discover the new Browser experience! ✨</h3>
<p>
Take a tour of our redesigned interface, built for faster navigation
and ease of use.
Switch to our redesigned interface, built for faster navigation and
ease of use.
</p>
<button
onClick={() => {
window.location.pathname = '/preview/'
}}
className="btn btn-advertise"
>
<button onClick={navigateToPreview} className="btn btn-advertise">
Switch to new experience
</button>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,13 @@ export const showFeature = (state: any, name: any) =>
!!(state[NAME][name] || {}).on

export const experimentalFeatureSelfName = 'showSelf'
export const experimentalFeaturePreviewName = 'advertisePreview'

export const initialState = {
[experimentalFeatureSelfName]: {
name: experimentalFeatureSelfName,
on: true,
displayName: 'Show experimental features',
tooltip: 'Show feature section in settings drawer'
},
[experimentalFeaturePreviewName]: {
name: experimentalFeaturePreviewName,
on: false,
displayName: 'Advertise preview of new browser',
tooltip: 'Enable the advertisement tile of the new browser'
}
}

Expand Down

0 comments on commit b304944

Please sign in to comment.