mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-04 16:05:54 +00:00
Teardown onboarding video tour test (#13351)
GitOrigin-RevId: 215c26fe047ec037f8d1d878eac406c36dbb656b
This commit is contained in:
M Fahru
Copybot
parent
40e27a1636
commit
2e77d4ab65
12 changed files with 0 additions and 349 deletions
|
|
@ -739,21 +739,6 @@ const ProjectController = {
|
|||
cb()
|
||||
})
|
||||
},
|
||||
onboardingVideoTourAssignment(cb) {
|
||||
SplitTestHandler.getAssignment(
|
||||
req,
|
||||
res,
|
||||
'onboarding-video-tour',
|
||||
(error, assignment) => {
|
||||
// do not fail editor load if assignment fails
|
||||
if (error) {
|
||||
cb(null, { variant: 'default' })
|
||||
} else {
|
||||
cb(null, assignment)
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
historyViewAssignment(cb) {
|
||||
SplitTestHandler.getAssignment(
|
||||
req,
|
||||
|
|
@ -869,7 +854,6 @@ const ProjectController = {
|
|||
pdfjsAssignment,
|
||||
editorLeftMenuAssignment,
|
||||
richTextAssignment,
|
||||
onboardingVideoTourAssignment,
|
||||
historyViewAssignment,
|
||||
reviewPanelAssignment,
|
||||
}
|
||||
|
|
@ -987,12 +971,6 @@ const ProjectController = {
|
|||
!userIsMemberOfGroupSubscription &&
|
||||
!userHasInstitutionLicence
|
||||
|
||||
const showOnboardingVideoTour =
|
||||
Features.hasFeature('saas') &&
|
||||
userId &&
|
||||
onboardingVideoTourAssignment.variant === 'active' &&
|
||||
req.session.justRegistered
|
||||
|
||||
const showPersonalAccessToken =
|
||||
!Features.hasFeature('saas') ||
|
||||
req.query?.personal_access_token === 'true'
|
||||
|
|
@ -1086,7 +1064,6 @@ const ProjectController = {
|
|||
useOpenTelemetry: Settings.useOpenTelemetryClient,
|
||||
showCM6SwitchAwaySurvey: Settings.showCM6SwitchAwaySurvey,
|
||||
richTextVariant,
|
||||
showOnboardingVideoTour,
|
||||
historyViewReact: historyViewAssignment.variant === 'react',
|
||||
isReviewPanelReact: reviewPanelAssignment.variant === 'react',
|
||||
showPersonalAccessToken,
|
||||
|
|
|
|||
|
|
@ -52,13 +52,3 @@ else
|
|||
.ui-layout-east
|
||||
aside.chat
|
||||
chat()
|
||||
|
||||
if showOnboardingVideoTour
|
||||
div(
|
||||
ng-if="!state.loading"
|
||||
ng-controller="OnboardingVideoTourModalController"
|
||||
)
|
||||
onboarding-video-tour-modal(
|
||||
close-modal="closeModal"
|
||||
show="show"
|
||||
)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ meta(name="ol-showSupport", data-type="boolean" content=showSupport)
|
|||
meta(name="ol-showTemplatesServerPro", data-type="boolean" content=showTemplatesServerPro)
|
||||
meta(name="ol-showCM6SwitchAwaySurvey", data-type="boolean" content=showCM6SwitchAwaySurvey)
|
||||
meta(name="ol-richTextVariant" content=richTextVariant)
|
||||
meta(name="ol-showOnboardingVideoTour", data-type="boolean" content=showOnboardingVideoTour)
|
||||
meta(name="ol-showPersonalAccessToken", data-type="boolean" content=showPersonalAccessToken)
|
||||
meta(name="ol-isReviewPanelReact", data-type="boolean" content=isReviewPanelReact)
|
||||
if (richTextVariant === 'cm6')
|
||||
|
|
|
|||
|
|
@ -246,8 +246,6 @@
|
|||
"edit_dictionary_empty": "",
|
||||
"edit_dictionary_remove": "",
|
||||
"edit_figure": "",
|
||||
"edit_in_source_to_see_your_entire_latex_code": "",
|
||||
"edit_in_the_left_pane_click_recompile": "",
|
||||
"edit_tag": "",
|
||||
"editing": "",
|
||||
"editing_captions": "",
|
||||
|
|
@ -611,7 +609,6 @@
|
|||
"new_tag_name": "",
|
||||
"new_to_latex_look_at": "",
|
||||
"newsletter": "",
|
||||
"next": "",
|
||||
"next_payment_of_x_collectected_on_y": "",
|
||||
"no_existing_password": "",
|
||||
"no_folder": "",
|
||||
|
|
@ -1074,7 +1071,6 @@
|
|||
"we_logged_you_in": "",
|
||||
"wed_love_you_to_stay": "",
|
||||
"welcome_to_sl": "",
|
||||
"welcome_to_your_first_project": "",
|
||||
"when_you_tick_the_include_caption_box": "",
|
||||
"wide": "",
|
||||
"with_premium_subscription_you_also_get": "",
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
/* eslint-disable jsx-a11y/media-has-caption */
|
||||
import { useCallback, useRef } from 'react'
|
||||
import { Modal } from 'react-bootstrap'
|
||||
import { Trans } from 'react-i18next'
|
||||
import type { OnboardingVideoStep } from '../utils/onboarding-video-step'
|
||||
|
||||
type OnboardingVideoTourModalBodyProps = {
|
||||
step: OnboardingVideoStep
|
||||
}
|
||||
|
||||
export default function OnboardingVideoTourModalBody({
|
||||
step,
|
||||
}: OnboardingVideoTourModalBodyProps) {
|
||||
const firstVideoRef = useRef<HTMLVideoElement>(null)
|
||||
const secondVideoRef = useRef<HTMLVideoElement>(null)
|
||||
|
||||
const handleCanPlayFirstVideo = useCallback(() => {
|
||||
if (firstVideoRef.current) {
|
||||
firstVideoRef.current.playbackRate = 1.5
|
||||
}
|
||||
}, [firstVideoRef])
|
||||
|
||||
const handleCanPlaySecondVideo = useCallback(() => {
|
||||
if (secondVideoRef.current) {
|
||||
secondVideoRef.current.playbackRate = 3.0
|
||||
}
|
||||
}, [secondVideoRef])
|
||||
|
||||
return (
|
||||
<Modal.Body>
|
||||
<p>
|
||||
{step === 'first' ? (
|
||||
<Trans
|
||||
i18nKey="edit_in_the_left_pane_click_recompile"
|
||||
components={[<strong />]} // eslint-disable-line react/jsx-key
|
||||
/>
|
||||
) : (
|
||||
<Trans
|
||||
i18nKey="edit_in_source_to_see_your_entire_latex_code"
|
||||
components={[<strong />]} // eslint-disable-line react/jsx-key
|
||||
/>
|
||||
)}
|
||||
</p>
|
||||
{step === 'first' ? (
|
||||
<video
|
||||
onCanPlay={handleCanPlayFirstVideo}
|
||||
ref={firstVideoRef}
|
||||
autoPlay
|
||||
loop
|
||||
width="100%"
|
||||
src="https://videos.ctfassets.net/nrgyaltdicpt/7MgWt7UdNv4yJcG2OrUene/387ab289e0e408511996f1152fc856d9/onboarding-tour-step-1.mp4"
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
onCanPlay={handleCanPlaySecondVideo}
|
||||
ref={secondVideoRef}
|
||||
autoPlay
|
||||
loop
|
||||
width="100%"
|
||||
src="https://videos.ctfassets.net/nrgyaltdicpt/2wYrdDqILSXaWP1LZScaDd/86a38effaeb400f42b480dba68a84b06/onboarding-tour-step-2.mp4"
|
||||
/>
|
||||
)}
|
||||
</Modal.Body>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
import {
|
||||
type Dispatch,
|
||||
type RefObject,
|
||||
type SetStateAction,
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import { Button, Modal } from 'react-bootstrap'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { Nullable } from '../../../../../types/utils'
|
||||
import { sendMB } from '../../../infrastructure/event-tracking'
|
||||
import customLocalStorage from '../../../infrastructure/local-storage'
|
||||
import type { OnboardingVideoStep } from '../utils/onboarding-video-step'
|
||||
import { calculateWatchingTimeInSecond } from '../utils/watching-time'
|
||||
|
||||
type OnboardingVideoTourModalFooterProps = {
|
||||
step: OnboardingVideoStep
|
||||
setStep: Dispatch<SetStateAction<OnboardingVideoStep>>
|
||||
closeModal: () => void
|
||||
startTimeWatchedFirstVideo: RefObject<number>
|
||||
startTimeWatchedSecondVideo: RefObject<Nullable<number>>
|
||||
}
|
||||
|
||||
export default function OnboardingVideoTourModalFooter({
|
||||
step,
|
||||
setStep,
|
||||
closeModal,
|
||||
startTimeWatchedFirstVideo,
|
||||
startTimeWatchedSecondVideo,
|
||||
}: OnboardingVideoTourModalFooterProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleClickDismiss = useCallback(() => {
|
||||
customLocalStorage.setItem(
|
||||
'has_dismissed_onboarding_video_tour_modal',
|
||||
true
|
||||
)
|
||||
|
||||
const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
|
||||
calculateWatchingTimeInSecond(
|
||||
startTimeWatchedFirstVideo.current ?? 0,
|
||||
startTimeWatchedSecondVideo.current
|
||||
)
|
||||
|
||||
sendMB('onboarding-video-tour-dismiss-button-click', {
|
||||
firstVideoWatchingTimeInSecond,
|
||||
secondVideoWatchingTimeInSecond,
|
||||
})
|
||||
|
||||
closeModal()
|
||||
}, [closeModal, startTimeWatchedFirstVideo, startTimeWatchedSecondVideo])
|
||||
|
||||
const handleClickNext = useCallback(() => {
|
||||
const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
|
||||
calculateWatchingTimeInSecond(
|
||||
startTimeWatchedFirstVideo.current ?? 0,
|
||||
startTimeWatchedSecondVideo.current
|
||||
)
|
||||
|
||||
sendMB('onboarding-video-tour-next-button-click', {
|
||||
firstVideoWatchingTimeInSecond,
|
||||
secondVideoWatchingTimeInSecond,
|
||||
})
|
||||
|
||||
setStep('second')
|
||||
}, [setStep, startTimeWatchedFirstVideo, startTimeWatchedSecondVideo])
|
||||
|
||||
const handleClickDone = useCallback(() => {
|
||||
customLocalStorage.setItem(
|
||||
'has_dismissed_onboarding_video_tour_modal',
|
||||
true
|
||||
)
|
||||
|
||||
const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
|
||||
calculateWatchingTimeInSecond(
|
||||
startTimeWatchedFirstVideo.current ?? 0,
|
||||
startTimeWatchedSecondVideo.current
|
||||
)
|
||||
|
||||
sendMB('onboarding-video-tour-done-button-click', {
|
||||
firstVideoWatchingTimeInSecond,
|
||||
secondVideoWatchingTimeInSecond,
|
||||
})
|
||||
|
||||
closeModal()
|
||||
}, [closeModal, startTimeWatchedFirstVideo, startTimeWatchedSecondVideo])
|
||||
|
||||
return (
|
||||
<Modal.Footer>
|
||||
{step === 'first' ? (
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
bsStyle={null}
|
||||
className="btn-secondary"
|
||||
onClick={handleClickDismiss}
|
||||
>
|
||||
{t('dismiss')}
|
||||
</Button>
|
||||
<Button type="submit" bsStyle="primary" onClick={handleClickNext}>
|
||||
{t('next')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button type="submit" bsStyle="primary" onClick={handleClickDone}>
|
||||
{t('done')}
|
||||
</Button>
|
||||
)}
|
||||
</Modal.Footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import { memo, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { Modal } from 'react-bootstrap'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import AccessibleModal from '../../../shared/components/accessible-modal'
|
||||
import customLocalStorage from '../../../infrastructure/local-storage'
|
||||
import { sendMB } from '../../../infrastructure/event-tracking'
|
||||
import OnboardingVideoTourModalBody from './onboarding-video-tour-modal-body'
|
||||
import type { OnboardingVideoStep } from '../utils/onboarding-video-step'
|
||||
import OnboardingVideoTourModalFooter from './onboarding-video-tour-modal-footer'
|
||||
import { calculateWatchingTimeInSecond } from '../utils/watching-time'
|
||||
import type { Nullable } from '../../../../../types/utils'
|
||||
|
||||
type OnboardingVideoTourModalProps = {
|
||||
show: boolean
|
||||
closeModal: () => void
|
||||
}
|
||||
|
||||
function OnboardingVideoTourModal({
|
||||
show,
|
||||
closeModal,
|
||||
}: OnboardingVideoTourModalProps) {
|
||||
const { t } = useTranslation()
|
||||
const [step, setStep] = useState<OnboardingVideoStep>('first')
|
||||
|
||||
const startTimeWatchedFirstVideo = useRef(Date.now())
|
||||
const startTimeWatchedSecondVideo = useRef<Nullable<number>>(null)
|
||||
|
||||
const handleClickCloseButton = useCallback(() => {
|
||||
customLocalStorage.setItem(
|
||||
'has_dismissed_onboarding_video_tour_modal',
|
||||
true
|
||||
)
|
||||
|
||||
const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
|
||||
calculateWatchingTimeInSecond(
|
||||
startTimeWatchedFirstVideo.current,
|
||||
startTimeWatchedSecondVideo.current
|
||||
)
|
||||
|
||||
sendMB('onboarding-video-tour-close-button-click', {
|
||||
video: step,
|
||||
firstVideoWatchingTimeInSecond,
|
||||
secondVideoWatchingTimeInSecond,
|
||||
})
|
||||
closeModal()
|
||||
}, [closeModal, step])
|
||||
|
||||
useEffect(() => {
|
||||
if (step === 'second') {
|
||||
startTimeWatchedSecondVideo.current = Date.now()
|
||||
}
|
||||
}, [step])
|
||||
|
||||
return (
|
||||
<AccessibleModal
|
||||
onHide={handleClickCloseButton}
|
||||
show={show}
|
||||
backdrop="static"
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{t('welcome_to_your_first_project')}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<OnboardingVideoTourModalBody step={step} />
|
||||
<OnboardingVideoTourModalFooter
|
||||
step={step}
|
||||
setStep={setStep}
|
||||
closeModal={closeModal}
|
||||
startTimeWatchedFirstVideo={startTimeWatchedFirstVideo}
|
||||
startTimeWatchedSecondVideo={startTimeWatchedSecondVideo}
|
||||
/>
|
||||
</AccessibleModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(OnboardingVideoTourModal)
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { react2angular } from 'react2angular'
|
||||
import { rootContext } from '../../../../../frontend/js/shared/context/root-context'
|
||||
import App from '../../../../../frontend/js/base'
|
||||
import getMeta from '../../../utils/meta'
|
||||
import OnboardingVideoTourModal from '../components/onboarding-video-tour-modal'
|
||||
|
||||
export default App.controller(
|
||||
'OnboardingVideoTourModalController',
|
||||
function ($scope, localStorage) {
|
||||
const hasDismissedOnboardingVideoTourModal = localStorage(
|
||||
'has_dismissed_onboarding_video_tour_modal'
|
||||
)
|
||||
const showOnboardingVideoTour = getMeta('ol-showOnboardingVideoTour')
|
||||
|
||||
$scope.show =
|
||||
!hasDismissedOnboardingVideoTourModal && showOnboardingVideoTour
|
||||
|
||||
$scope.closeModal = () => {
|
||||
$scope.$applyAsync(() => {
|
||||
$scope.show = false
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
App.component(
|
||||
'onboardingVideoTourModal',
|
||||
react2angular(rootContext.use(OnboardingVideoTourModal), [
|
||||
'show',
|
||||
'closeModal',
|
||||
])
|
||||
)
|
||||
|
|
@ -1 +0,0 @@
|
|||
export type OnboardingVideoStep = 'first' | 'second'
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import type { Nullable } from '../../../../../types/utils'
|
||||
|
||||
export function calculateWatchingTimeInSecond(
|
||||
startTimeWatchedFirstVideo: number,
|
||||
startTimeWatchedSecondVideo: Nullable<number>
|
||||
) {
|
||||
let firstVideoWatchingTimeInSecond = 0
|
||||
let secondVideoWatchingTimeInSecond = 0
|
||||
if (startTimeWatchedSecondVideo === null) {
|
||||
firstVideoWatchingTimeInSecond = Math.floor(
|
||||
(Date.now() - startTimeWatchedFirstVideo) / 1000
|
||||
)
|
||||
} else {
|
||||
firstVideoWatchingTimeInSecond = Math.floor(
|
||||
(startTimeWatchedSecondVideo - startTimeWatchedFirstVideo) / 1000
|
||||
)
|
||||
secondVideoWatchingTimeInSecond = Math.floor(
|
||||
(Date.now() - startTimeWatchedSecondVideo) / 1000
|
||||
)
|
||||
}
|
||||
|
||||
return { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond }
|
||||
}
|
||||
|
|
@ -68,7 +68,6 @@ import './features/source-editor/controllers/cm6-switch-away-survey-controller'
|
|||
import './features/source-editor/controllers/grammarly-warning-controller'
|
||||
import './features/source-editor/controllers/legacy-editor-warning-controller'
|
||||
import './features/outline/controllers/documentation-button-controller'
|
||||
import './features/onboarding/controllers/onboarding-video-tour-modal-controller'
|
||||
import './features/history/controllers/history-controller'
|
||||
import './features/history/controllers/history-file-tree-controller'
|
||||
import { cleanupServiceWorker } from './utils/service-worker-cleanup'
|
||||
|
|
|
|||
|
|
@ -411,8 +411,6 @@
|
|||
"edit_dictionary_empty": "Your custom dictionary is empty.",
|
||||
"edit_dictionary_remove": "Remove from dictionary",
|
||||
"edit_figure": "Edit figure",
|
||||
"edit_in_source_to_see_your_entire_latex_code": "Edit in <0>Source</0> to see your entire LaTeX code, or choose <0>Rich Text</0> for something more visual.",
|
||||
"edit_in_the_left_pane_click_recompile": "Edit in the left pane. Click <0>Recompile</0> to see the PDF output on the right.",
|
||||
"edit_tag": "Edit Tag",
|
||||
"editing": "Editing",
|
||||
"editing_captions": "Editing captions",
|
||||
|
|
@ -1015,7 +1013,6 @@
|
|||
"newsletter_info_summary": "Every few months we send a newsletter out summarizing the new features available.",
|
||||
"newsletter_info_title": "Newsletter Preferences",
|
||||
"newsletter_info_unsubscribed": "You are currently <0>unsubscribed</0> to the __appName__ newsletter.",
|
||||
"next": "Next",
|
||||
"next_payment_of_x_collectected_on_y": "The next payment of <0>__paymentAmmount__</0> will be collected on <1>__collectionDate__</1>.",
|
||||
"nl": "Dutch",
|
||||
"no": "Norwegian",
|
||||
|
|
@ -1760,7 +1757,6 @@
|
|||
"website_status": "Website status",
|
||||
"wed_love_you_to_stay": "We’d love you to stay",
|
||||
"welcome_to_sl": "Welcome to __appName__!",
|
||||
"welcome_to_your_first_project": "Welcome to your first __appName__ project!",
|
||||
"when_you_tick_the_include_caption_box": "When you tick the box “Include caption” the image will be inserted into your document with a placeholder caption. To edit it, you simply select the placeholder text and type to replace it with your own.",
|
||||
"wide": "Wide",
|
||||
"will_need_to_log_out_from_and_in_with": "You will need to <b>log out</b> from your <b>__email1__</b> account and then log in with <b>__email2__</b>.",
|
||||
|
|
|
|||
Loading…
Reference in a new issue