MediaProviders
2 weeks ago
ProvidersPlaceholder
2 weeks ago
audioPresets
2 weeks ago
branding
7 months ago
chapters
2 years ago
components
2 weeks ago
media
2 weeks ago
overlays
2 weeks ago
presets
2 weeks ago
services
4 years ago
settings
2 months ago
styles
2 years ago
tracks
2 weeks ago
BlockInspectorControls.js
2 weeks ago
BlockInspectorControls.scss
2 weeks ago
Editing.js
2 years ago
LinkPlaceholder.js
2 months ago
Player.js
1 month ago
Preview.js
2 years ago
ProUpgradeModal.js
1 month ago
VisibilityEditor.js
7 months ago
audio-placeholder.js
2 weeks ago
helpers.js
5 years ago
options.js
2 weeks ago
placeholder.js
2 weeks ago
options.js
51 lines
| 1 | const { useEffect, useState } = wp.element; |
| 2 | const { useSelect } = wp.data; |
| 3 | import { usePrevious } from "@/admin/blocks/util"; |
| 4 | |
| 5 | export default function ({ attributes, setAttributes }) { |
| 6 | const { chapters, poster } = attributes; |
| 7 | const [presetData, setPresetData] = useState({}); |
| 8 | const data = { |
| 9 | branding: {}, |
| 10 | loading: false, |
| 11 | presets: [], |
| 12 | presetData: {}, |
| 13 | }; |
| 14 | |
| 15 | data.branding = useSelect((select) => { |
| 16 | return select("presto-player/player").branding(); |
| 17 | }); |
| 18 | data.loading = useSelect((select) => { |
| 19 | return select("presto-player/player").presetsLoading(); |
| 20 | }); |
| 21 | data.presets = useSelect((select) => { |
| 22 | return select("presto-player/player").getPresets(); |
| 23 | }); |
| 24 | |
| 25 | // set preset data when presets are loaded |
| 26 | useEffect(() => { |
| 27 | const thisPreset = data.presets.find((preset) => { |
| 28 | return preset.id === attributes?.preset; |
| 29 | }); |
| 30 | data.presetData = thisPreset; |
| 31 | }, [data.presets, attributes?.preset]); |
| 32 | |
| 33 | // This will reload the player to show the controls |
| 34 | let [count, setCount] = useState(1); |
| 35 | useEffect(() => { |
| 36 | setCount(count + 1); |
| 37 | }, [poster, data.presetData]); |
| 38 | |
| 39 | // re-render only if times change |
| 40 | const prevChapters = usePrevious(chapters); |
| 41 | useEffect(() => { |
| 42 | let times = chapters?.map((item) => item.time); |
| 43 | let prevTimes = prevChapters?.map((item) => item.time); |
| 44 | if (_.difference(times, prevTimes).length) { |
| 45 | setCount(count + 1); |
| 46 | } |
| 47 | }, [chapters]); |
| 48 | |
| 49 | return data; |
| 50 | } |
| 51 |