ShareActions
ShareActions is the two things people do first with their video: send the link and save the file. Download makes an MP4 in the page from the player's own stage, shows how far it is and how long is left, and can be stopped. It is the row WrappedView puts above the settings, on its own for a page you build yourself.
0:00 / 0:00
Download really makes the file: a short video, drawn frame by frame in this page.
Installation
pnpm add @react-wrapped/player @react-wrapped/core gsapUsage
import { type CSSProperties, useRef, useState } from "react";
import type { SceneInstance, WrappedConfig, WrappedSubject } from "@react-wrapped/core";
import { ShareActions, WrappedPlayer, type WrappedPlayerHandle } from "@react-wrapped/player";
// Side by side where there is room, stacked on a phone.
const COLUMNS: CSSProperties = { display: "flex", flexWrap: "wrap", gap: 24, alignItems: "flex-start" };
const ROOM: CSSProperties = { display: "grid", height: 520, flex: "1 1 260px", minWidth: 0 };
const SIDE: CSSProperties = { flex: "1 1 280px", minWidth: 0 };
export function VideoWithShare({
subject,
seed,
scenes,
config,
}: {
subject: WrappedSubject;
seed: string;
scenes: readonly SceneInstance[];
config: WrappedConfig;
}) {
// The same ref goes to the player and to the row: the row borrows the player's stage to make the file.
const player = useRef<WrappedPlayerHandle>(null);
// While the file is made the stage is filmed frame by frame, so the player is kept out of reach.
const [rendering, setRendering] = useState(false);
return (
<div style={COLUMNS}>
<div style={ROOM} inert={rendering}>
<WrappedPlayer ref={player} subject={subject} seed={seed} scenes={scenes} config={config} autoplay={false} />
</div>
<div style={SIDE}>
<ShareActions player={player} config={config} fileName="ada-wrapped.mp4" onRendering={setRendering} />
</div>
</div>
);
}The from parts example uses it this way, next to the settings panel.
Props
| Prop | Type | What it does |
|---|---|---|
player | RefObject<WrappedPlayerHandle | null> | The player to film: the same ref you gave WrappedPlayer. The row borrows its stage while the file is made. |
config | WrappedConfig | The video's config. The file is made in its format, at full size. |
fileName | string | What the saved file is called, extension included: ada-wrapped.mp4. |
onRendering? | (rendering: boolean) => void | Says when a file starts and stops being made, so the page can keep its hands off the video meanwhile. |
onError? | (message: string) => void | Told why a video could not be made. Left out, the reason is shown under the buttons. |
className? | string | A class for the row's own box, for the card you put around it. |
classNames? | SlotClassNames<ShareActionsSlot> | A class per part, by slot name: "share-copy", "share-download". See styling. |
Good to know
- The file is not a screen recording. Every frame is drawn at the video's real size and encoded by the browser, so it is sharp on any machine. See video export for how, and for making the file without this row.
- Copy link copies the page's address. Keep the config in the URL and the link is the video: see the config in the URL.
- Its words are labels:
share.copyLink,share.downloadand the rest can be replaced through `WrappedProvider`.
