branding
5 years ago
chapters
5 years ago
components
5 years ago
media
5 years ago
presets
5 years ago
settings
5 years ago
styles
5 years ago
tracks
5 years ago
BlockInspectorControls.js
5 years ago
LinkPlaceholder.js
5 years ago
Player.js
5 years ago
ProUpgradeModal.js
5 years ago
VisibilityEditor.js
5 years ago
helpers.js
5 years ago
options.js
5 years ago
placeholder.js
5 years ago
options.js
55 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 | useEffect(() => { |
| 19 | document.body.style.setProperty("--plyr-color-main", data.branding?.color); |
| 20 | }, [data.branding?.color]); |
| 21 | |
| 22 | data.loading = useSelect((select) => { |
| 23 | return select("presto-player/player").presetsLoading(); |
| 24 | }); |
| 25 | data.presets = useSelect((select) => { |
| 26 | return select("presto-player/player").getPresets(); |
| 27 | }); |
| 28 | |
| 29 | // set preset data when presets are loaded |
| 30 | useEffect(() => { |
| 31 | const thisPreset = data.presets.find((preset) => { |
| 32 | return preset.id === attributes?.preset; |
| 33 | }); |
| 34 | data.presetData = thisPreset; |
| 35 | }, [data.presets, attributes?.preset]); |
| 36 | |
| 37 | // This will reload the player to show the controls |
| 38 | let [count, setCount] = useState(1); |
| 39 | useEffect(() => { |
| 40 | setCount(count + 1); |
| 41 | }, [poster, data.presetData]); |
| 42 | |
| 43 | // re-render only if times change |
| 44 | const prevChapters = usePrevious(chapters); |
| 45 | useEffect(() => { |
| 46 | let times = chapters?.map((item) => item.time); |
| 47 | let prevTimes = prevChapters?.map((item) => item.time); |
| 48 | if (_.difference(times, prevTimes).length) { |
| 49 | setCount(count + 1); |
| 50 | } |
| 51 | }, [chapters]); |
| 52 | |
| 53 | return data; |
| 54 | } |
| 55 |