/** * WordPress dependencies */ import { Button, Disabled, DropdownMenu, Spinner, Toolbar, withNotices, BaseControl, Placeholder, ToggleControl, } from "@wordpress/components"; import { BlockControls, InspectorControls } from "@wordpress/block-editor"; import { __ } from "@wordpress/i18n"; import { compose } from "@wordpress/compose"; import { useEffect, useState, Fragment } from "@wordpress/element"; import { dispatch } from "@wordpress/data"; import { signURL } from "../../shared/services/bunny"; // hocs import withPlayerEdit from "../with-player-edit"; import withPlayerData from "../with-player-data"; /** * Internal dependencies */ import TracksEditor from "@/admin/blocks/shared/tracks/TracksEditor"; import StorageMedia from "./StorageMedia"; import StreamMedia from "./StreamMedia"; import APIPlaceholder from "./APIPlaceholder"; import BlockInspectorControls from "@/admin/blocks/shared/BlockInspectorControls"; import Player from "@/admin/blocks/shared/Player"; import Editing from "../../shared/Editing"; export default compose([withPlayerData(), withPlayerEdit()])( withNotices( ({ attributes, setAttributes, noticeOperations, branding, isSelected, presetData, createVideo, lockSave, unlockSave, onRemoveSrc, renderKey, defaultPreset, }) => { const { poster, src, id, tracks, visibility, previewSrc, thumbnail } = attributes; const [mediaPopup, setMediaPopup] = useState(""); const [loading, setLoading] = useState(false); // What setup screen should we show const [setup, setSetup] = useState(""); const [isSetup, setIsSetup] = useState({ stream: false, storage: false, }); const [disableStream, setDisableStream] = useState(false); // setup and api const [isAPILoaded, setIsAPILoaded] = useState(false); const [fetchingSettings, setFetchingSettings] = useState(false); const [autoSubmitStream, setAutoSubmitStream] = useState(false); const userCanReadSettings = wp.data.useSelect((select) => select("core").canUser("read", "settings") ); // is this private const isPrivate = visibility === "private"; // is legacy storage disabled const disableLegacyStorage = prestoPlayerAdmin?.bunny?.disable_legacy_storage; // set privacy option in store useEffect(() => { dispatch("presto-player/bunny-popup").setIsPrivate( visibility === "private" ); }, [visibility]); useEffect(() => { setIsSetup({ storage: prestoPlayerAdmin?.isSetup?.bunny?.storage, stream: prestoPlayerAdmin?.isSetup?.bunny?.stream, }); }, []); function selectVideo(media, ...args) { if (!media.url) { // in this case there was an error // previous attributes should be removed // because they may be temporary blob urls setAttributes({ src: undefined, id: undefined }); return; } // set preset attributes setAttributes({ src: media.url, preset: defaultPreset?.id, ...(media?.thumbnail ? { thumbnail: media.thumbnail } : {}), ...(media?.preview ? { preview: media.preview } : {}), }); // create video setLoading(true); lockSave(); createVideo({ src: media.url, type: "bunny", title: media.title, ...(media?.guid ? { external_id: media.guid } : {}), }) .catch((e) => { setAttributes({ src: "" }); console.error(e); }) .finally(() => { unlockSave(); setLoading(false); }); } // fetch settings const fetchSettings = async () => { try { const { presto_player_bunny_pull_zones, presto_player_bunny_storage_zones, presto_player_bunny_stream_private, presto_player_bunny_stream_public, } = await wp.apiFetch({ path: `wp/v2/settings`, }); setIsAPILoaded(true); if (!presto_player_bunny_stream_private) { setDisableStream(true); } // is this set up? const isSetup = (option) => { return !!(option?.private_id && option?.public_id); }; const storageSetup = isSetup(presto_player_bunny_pull_zones) || isSetup(presto_player_bunny_storage_zones); const streamSetup = presto_player_bunny_stream_private?.pull_zone_url && presto_player_bunny_stream_public?.pull_zone_url; setIsSetup({ storage: storageSetup, stream: streamSetup, }); if (!storageSetup && !streamSetup) { setSetup("stream"); } else { setSetup(""); } } finally { setFetchingSettings(false); } }; // mounted useEffect(() => { if (userCanReadSettings) { fetchSettings(); } else { setIsAPILoaded(true); } }, [userCanReadSettings]); const setPreview = async () => { if (isPrivate) { let previewSrc = await signURL(src); setAttributes({ previewSrc }); } else { setAttributes({ previewSrc: src }); } }; useEffect(() => { setPreview(); }, [src]); const setThumbnail = async () => { if (isPrivate) { let previewThumbnail = await signURL(thumbnail); if (previewThumbnail) { setAttributes({ previewThumbnail }); } } else { setAttributes({ previewThumbnail: thumbnail }); } }; useEffect(() => { setThumbnail(); }, [thumbnail]); const placeholderButtons = () => { return ( {isSetup.stream && ( setMediaPopup("stream")}> {isPrivate ? __("Add/Select Private Video Stream", "presto-player") : __("Add/Select Video Stream", "presto-player")} )} {!disableLegacyStorage && isSetup.storage && ( setMediaPopup("storage")} > {isPrivate ? __("Add/Select Private Video (Classic)", "presto-player") : __("Add/Select Video (Classic)", "presto-player")} )} {!isSetup.stream && !disableStream && isSetup.storage && ( { setAutoSubmitStream(true); setSetup("stream"); }} > {__("Enable Bunny.net Stream!", "presto-player")} )} {!!userCanReadSettings && moreButtons()} ); }; const moreButtons = () => { const controls = []; !disableStream && controls.push({ title: isSetup.stream ? __("Reconnect Stream", "presto-player") : __("Connect Stream", "presto-player"), onClick: () => { setSetup("stream"); setAutoSubmitStream(false); }, }); !disableLegacyStorage && controls.push({ title: isSetup.storage ? __("Reconnect Storage (Classic)", "presto-player") : __("Connect Storage (Classic)", "presto-player"), onClick: () => setSetup("storage"), }); return ( ); }; if (loading || !isAPILoaded) { return ( ); } if (setup === "stream") { return ( { setIsAPILoaded(false); fetchSettings(); }} /> ); } if (setup === "storage") { return ( { setIsAPILoaded(false); fetchSettings(); }} /> ); } if (!id) { return ( ) : ( ) } instructions={__( "Add or select a Bunny.net video", "presto-player" )} > { setAttributes({ visibility: isPrivate ? "private" : "public", }); }} /> {placeholderButtons()} {mediaPopup === "storage" && ( setMediaPopup("")} noticeOperations={noticeOperations} onSelect={selectVideo} /> )} {mediaPopup === "stream" && ( setMediaPopup("")} noticeOperations={noticeOperations} onSelect={selectVideo} /> )} ); } return ( <> { setAttributes({ tracks: newTracks }); }} /> onRemoveSrc()}> {__("Replace", "presto-player")} {/* Disable the video tag so the user clicking on it won't play the video when the controls are enabled. */} > ); } ) ); 0 By on