/
edit.js
141 lines (130 loc) · 3.58 KB
/
edit.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/**
* External dependencies
*/
import classNames from 'classnames';
import { get, pick } from 'lodash';
/**
* WordPress dependencies
*/
import { createElement, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { isBlobURL } from '@wordpress/blob';
import { useDispatch } from '@wordpress/data';
import { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';
import { withNotices } from '@wordpress/components';
/**
* Internal dependencies
*/
import { icon } from '.';
import Controls from './controls';
import StoryPlayer from './player';
import './editor.scss';
const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
export const pickRelevantMediaFiles = ( media, sizeSlug = 'large' ) => {
const mediaProps = pick( media, [
'alt',
'id',
'link',
'type',
'mime',
'caption',
'width',
'height',
] );
mediaProps.url =
get( media, [ 'sizes', sizeSlug, 'url' ] ) ||
get( media, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
get( media, [ 'media_details', 'videopress', 'original' ] ) ||
get( media, [ 'media_details', 'original', 'url' ] ) ||
media.url;
mediaProps.type = media.media_type || media.type;
mediaProps.mime = media.mime_type || media.mime;
mediaProps.width = mediaProps.width || get( media, [ 'media_details', 'width' ] );
mediaProps.height = mediaProps.height || get( media, [ 'media_details', 'height' ] );
return mediaProps;
};
export default withNotices( function StoryEdit( {
attributes,
className,
isSelected,
noticeOperations,
noticeUI,
setAttributes,
} ) {
const { mediaFiles } = attributes;
const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
const lockName = 'storyBlockLock';
const onSelectMedia = newMediaFiles => {
const allMedia = newMediaFiles.map( file => pickRelevantMediaFiles( file ) );
const uploadedMedias = allMedia.filter( media => ! isBlobURL( media.url ) );
// prevent saving blob urls in mediaFiles block attribute
if ( allMedia.length !== uploadedMedias.length ) {
lockPostSaving( lockName );
} else {
unlockPostSaving( lockName );
}
setAttributes( {
mediaFiles: allMedia,
} );
};
const controls = (
<Controls
allowedMediaTypes={ ALLOWED_MEDIA_TYPES }
attributes={ attributes }
onSelectMedia={ onSelectMedia }
/>
);
const hasImages = !! mediaFiles.length;
const mediaPlaceholder = (
<MediaPlaceholder
addToGallery={ hasImages }
isAppender={ hasImages }
className={ className }
disableMediaButtons={ hasImages && ! isSelected }
icon={ ! hasImages && <BlockIcon icon={ icon } /> }
labels={ {
title: ! hasImages && __( 'Story', 'jetpack' ),
instructions:
! hasImages &&
__(
'Drag images and videos, upload new ones or select files from your library.',
'jetpack'
),
} }
onSelect={ onSelectMedia }
accept={ ALLOWED_MEDIA_TYPES.map( type => type + '/*' ).join( ',' ) }
allowedTypes={ ALLOWED_MEDIA_TYPES }
multiple
value={ mediaFiles }
notices={ hasImages ? undefined : noticeUI }
onError={ noticeOperations.createErrorNotice }
/>
);
if ( ! hasImages ) {
return (
<Fragment>
{ controls }
{ mediaPlaceholder }
</Fragment>
);
}
return (
<Fragment>
{ controls }
{ noticeUI }
<div className={ classNames( 'wp-block-jetpack-story', 'wp-story', className ) }>
<StoryPlayer
slides={ mediaFiles }
disabled={ ! isSelected }
shadowDOM={ {
enabled: false,
} }
playInFullscreen={ false }
tapToPlayPause={ false }
playOnNextSlide={ false }
/>
</div>
{ isSelected && mediaPlaceholder }
</Fragment>
);
} );