-
Notifications
You must be signed in to change notification settings - Fork 800
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
VideoPress dashboard: improve upload error handler (#38769)
* add debug calls, minor code improvements (map -> forEach, await/async functions, etc) * changelog entry * less debug on uploader lib * make onBeforeRequest async (as expected by tus client lib). Add onShouldRetry to abort retries on 400 errors (mostly unrecoverable for now) * add state action/reducer/selector for SET_VIDEO_UPLOADING_ERROR to keep errored videos separate and transient * include errored videos in all dashboard considerations and derived flags * add state action/reducer to clear upload errors * add error components for grid and row views * implement new error components on grid and list * remove unused parameters --------- Co-authored-by: Douglas <[email protected]>
- Loading branch information
Showing
17 changed files
with
492 additions
and
33 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/packages/videopress/changelog/fix-videopress-upload-error-handler
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: changed | ||
|
|
||
| VideoPress: fix upload error handler to be able to hint the user something's gone wrong |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
projects/packages/videopress/src/client/admin/components/video-card/error.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { | ||
| Button, | ||
| Title, | ||
| useBreakpointMatch, | ||
| ActionPopover, | ||
| getRedirectUrl, | ||
| Text, | ||
| } from '@automattic/jetpack-components'; | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Icon, chevronDown, chevronUp, trash } from '@wordpress/icons'; | ||
| import clsx from 'clsx'; | ||
| import { useState } from 'react'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { STORE_ID } from '../../../state'; | ||
| import VideoThumbnail from '../video-thumbnail'; | ||
| import styles from './style.module.scss'; | ||
| import { VideoCardProps } from './types'; | ||
| /** | ||
| * Types | ||
| */ | ||
| import type React from 'react'; | ||
|
|
||
| /** | ||
| * Video Card Error component | ||
| * | ||
| * @param {VideoCardProps} props - Component props. | ||
| * @returns {React.ReactNode} - VideoCardError react component. | ||
| */ | ||
| export const VideoCardError = ( { title, id }: VideoCardProps ) => { | ||
| const { dismissErroredVideo } = useDispatch( STORE_ID ); | ||
| const isBlank = ! title; | ||
|
|
||
| const [ anchor, setAnchor ] = useState( null ); | ||
| const [ isSm ] = useBreakpointMatch( 'sm' ); | ||
| const [ isOpen, setIsOpen ] = useState( false ); | ||
| const [ showError, setShowError ] = useState( false ); | ||
| const disabled = false; | ||
|
|
||
| const handleDismiss = () => dismissErroredVideo( id ); | ||
|
|
||
| const handleErrorHint = () => setShowError( true ); | ||
|
|
||
| const troubleshootUrl = getRedirectUrl( 'jetpack-videopress-dashboard-troubleshoot' ); | ||
|
|
||
| const closeErrorHint = () => setShowError( false ); | ||
|
|
||
| return ( | ||
| <> | ||
| <div | ||
| className={ clsx( styles[ 'video-card__wrapper' ], { | ||
| [ styles[ 'is-blank' ] ]: isBlank, | ||
| [ styles.disabled ]: isSm, | ||
| } ) } | ||
| { ...( isSm && ! disabled && { onClick: () => setIsOpen( wasOpen => ! wasOpen ) } ) } | ||
| > | ||
| { ! isSm && <div className={ styles[ 'video-card__background' ] } /> } | ||
|
|
||
| <VideoThumbnail | ||
| className={ styles[ 'video-card__thumbnail' ] } | ||
| ref={ setAnchor } | ||
| hasError={ true } | ||
| /> | ||
|
|
||
| <div className={ styles[ 'video-card__title-section' ] }> | ||
| { isSm && ( | ||
| <div className={ styles.chevron }> | ||
| { isOpen && <Icon icon={ chevronUp } /> } | ||
| { ! isOpen && <Icon icon={ chevronDown } /> } | ||
| </div> | ||
| ) } | ||
|
|
||
| <Title className={ styles[ 'video-card__title' ] } mb={ 0 } size="small"> | ||
| { title } | ||
| </Title> | ||
| </div> | ||
|
|
||
| { showError && ( | ||
| <ActionPopover | ||
| title={ __( 'Error', 'jetpack-videopress-pkg' ) } | ||
| buttonContent={ __( 'Visit the docs', 'jetpack-videopress-pkg' ) } | ||
| buttonHref={ troubleshootUrl } | ||
| buttonExternalLink | ||
| anchor={ anchor } | ||
| onClose={ closeErrorHint } | ||
| onClick={ closeErrorHint } | ||
| noArrow={ false } | ||
| className={ styles[ 'action-popover' ] } | ||
| > | ||
| <Text> | ||
| { __( | ||
| "There's been an error uploading your video. Try uploading the video again, if the error persists, visit our documentation to troubleshoot the issue or contact support.", | ||
| 'jetpack-videopress-pkg' | ||
| ) } | ||
| </Text> | ||
| </ActionPopover> | ||
| ) } | ||
|
|
||
| { ! isSm && ( | ||
| <div | ||
| className={ clsx( | ||
| styles[ 'video-card__quick-actions-section' ], | ||
| styles[ 'is-blank' ] | ||
| ) } | ||
| > | ||
| <Button variant="primary" size="small" onClick={ handleErrorHint }> | ||
| { __( 'Upload Error!', 'jetpack-videopress-pkg' ) } | ||
| </Button> | ||
|
|
||
| <Button size="small" variant="tertiary" icon={ trash } onClick={ handleDismiss } /> | ||
| </div> | ||
| ) } | ||
| </div> | ||
|
|
||
| { isSm && isOpen && ( | ||
| <div className={ clsx( styles[ 'video-card__quick-actions-section' ], styles.small ) }> | ||
| <Button variant="primary" size="small" onClick={ handleErrorHint }> | ||
| { __( 'Upload Error!', 'jetpack-videopress-pkg' ) } | ||
| </Button> | ||
|
|
||
| <Button size="small" variant="tertiary" icon={ trash } onClick={ handleDismiss } /> | ||
| </div> | ||
| ) } | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default VideoCardError; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.