????
Your IP : 3.17.162.15
const { __ } = wp.i18n;
const { Flex, FlexBlock, FlexItem, Spinner, Button, TextControl } =
wp.components;
import { history } from "@/router/context";
import DatePicker from "../components/DatePicker";
import VideoAverageWatchTime from "../components/VideoAverageWatchTime";
import VideoTimeline from "../components/VideoTimeline";
import VideoViews from "../components/VideoViews";
import Player from "../../blocks/shared/Player";
import { getProvider } from "../../blocks/util";
const { useEffect, useState } = wp.element;
const { apiFetch } = wp;
const Video = ({ route, startDate, endDate, setStartDate, setEndDate }) => {
const [loading, setLoading] = useState(true);
const [video, setVideo] = useState({});
const [error, setError] = useState("");
const [thisName, setThisName] = useState(null);
const [editing, setEditing] = useState(false);
const back = () => {
const { search } = history.location;
history.push(`${search}#/`);
};
const getVideo = async () => {
setLoading(true);
try {
let video = await apiFetch({
url: `${prestoPlayer?.root}${prestoPlayer?.prestoVersionString}videos/${route?.params?.id}`,
});
setVideo(video);
setThisName(video?.title);
} catch (e) {
if (e.code === "rest_no_route") {
setError("Video Not Found");
}
} finally {
setLoading(false);
}
};
const putVideo = async () => {
console.log(`New Video title ${thisName}`);
setLoading(true);
try {
const data = {
...video,
...{ title: thisName },
};
let saved = await wp.apiFetch({
method: "POST",
url: wp.url.addQueryArgs(
`${prestoPlayer.root}${prestoPlayer.prestoVersionString}videos/${video.id}`,
{ _method: "PUT" }
),
data,
});
if (!saved) {
throw genericError;
}
setEditing(false);
setVideo(saved);
} catch (e) {
setError(e?.message ? e.message : genericError);
} finally {
setLoading(false);
}
};
const cancelEditing = () => {
setThisName(video?.title);
setEditing(false);
};
const renderVideoEditableTitle = () => {
if (loading) {
return <Spinner />;
} else if (editing) {
return (
<div className="presto-inline-edit presto-inline-edit--editing">
<TextControl
className="presto-inline-edit__input"
type="text"
value={thisName}
onChange={(title) => setThisName(title)}
/>
<Button
className="presto-inline-edit__button"
isPrimary
onClick={putVideo}
>
{" "}
Save{" "}
</Button>
<Button
className="presto-inline-edit__button"
isSecondary
onClick={cancelEditing}
>
{" "}
Cancel{" "}
</Button>
</div>
);
} else {
return (
<div className="presto-inline-edit">
<h1 className="presto-dashboard__title presto-inline-edit__text">
{video?.title}
</h1>
<button
className="presto-inline-edit__edit"
onClick={() => setEditing(true)}
>
<span className="dashicon dashicons dashicons-edit"></span>
</button>
</div>
);
}
};
useEffect(() => {
getVideo();
}, []);
if (error) {
return (
<div className="presto-flow">
<Flex>
<FlexBlock>
<h2>{error}</h2>
</FlexBlock>
</Flex>
</div>
);
}
return (
<div className="presto-flow">
<Flex>
<FlexBlock>
<Button isSecondary onClick={back}>
← {__("Back to Dashboard", "presto-player")}
</Button>
</FlexBlock>
</Flex>
<Flex wrap>
<FlexBlock>{renderVideoEditableTitle()}</FlexBlock>
<FlexItem>
<DatePicker
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
/>
</FlexItem>
</Flex>
<div className="presto-dashboard presto-flow">
<div className="presto-dashboard__row">
<div className="presto-dashboard__item is-large">
<VideoViews
video_id={route?.params?.id}
startDate={startDate}
endDate={endDate}
/>
</div>
<div className="presto-dashboard__item">
{!!Object.keys(video || {}).length && (
<Player
src={video?.src}
attributes={{
title: video.title,
}}
type={getProvider(video.src)}
preset={{
"play-large": true,
play: true,
progress: true,
rewind: true,
"fast-forward": true,
"current-time": true,
background_color: "#8421cb",
volume: true,
mute: true,
i18n: window.prestoPlayer.i18n,
}}
/>
)}
</div>
<div className="presto-dashboard__item">
<VideoAverageWatchTime
video_id={route?.params?.id}
startDate={startDate}
endDate={endDate}
/>
</div>
</div>
<div className="presto-dashboard__row">
<div className="presto-dashboard__item is-large">
<VideoTimeline
video_id={route?.params?.id}
startDate={startDate}
endDate={endDate}
/>
</div>
</div>
</div>
</div>
);
};
export default Video;