Skip to content

Commit 08f04bc

Browse files
nnarhinennnarhinen
authored
Merge pull request #35 from flowplayer/fix/previews
Fix/previews
2 parents 9ffbe86 + a433f21 commit 08f04bc

File tree

7 files changed

+143
-89
lines changed

7 files changed

+143
-89
lines changed

‎demo/config.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/// Store all constants
2+
3+
export const ANIMATED_PREVIEW = [
4+
{
5+
src: "http://l3video.lwcdn.com/preview/0edd6c9a-62f6-44a1-9382-36845a0003f4/ap-277c1297-4a63-4e8c-9b90-0d01e69042b5_360.webp",
6+
type: "image/webp",
7+
dimensions: {
8+
width: 640,
9+
height: 360,
10+
},
11+
},
12+
{
13+
src: "http://l3video.lwcdn.com/preview/0edd6c9a-62f6-44a1-9382-36845a0003f4/ap-277c1297-4a63-4e8c-9b90-0d01e69042b5_270.webp",
14+
type: "image/webp",
15+
dimensions: {
16+
width: 480,
17+
height: 270,
18+
},
19+
},
20+
{
21+
src: "http://l3video.lwcdn.com/preview/0edd6c9a-62f6-44a1-9382-36845a0003f4/ap-277c1297-4a63-4e8c-9b90-0d01e69042b5_720.webp",
22+
type: "image/webp",
23+
dimensions: {
24+
width: 1280,
25+
height: 720,
26+
},
27+
},
28+
];
29+
30+
export const DEMO_TOKEN =
31+
"eyJraWQiOiJiRmFRNEdUam9lNVEiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJiRmFRNEdUam9lNVFcIixcImRvbWFpblwiOltcImJ1aWxkcy5mbG93cGxheWVyLmNvbVwiXX0iLCJpc3MiOiJGbG93cGxheWVyIn0.upfvSSPnB-v2ADHfbWG8ye9jDQhgwnMhZWQUqDS2DOLQbldCt9N8Atbq-gRm4GbqRRS7zoBFvvf6CgYWaV93nw";
32+
33+
export const SOURCES = [
34+
"//edge.flowplayer.org/bauhaus.mp4",
35+
"//edge.flowplayer.org/functional.mp4"
36+
];

‎demo/demo.tsx‎

Lines changed: 81 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,89 @@
1-
import ReactDom from "react-dom"
2-
import React, { useEffect, useRef, useState } from "react"
3-
import Flowplayer, { useFlowplayer } from "../src"
4-
import { PAUSE, PLAYING } from "@flowplayer/player/core/events"
1+
import "@flowplayer/player/flowplayer.css";
52

6-
import "@flowplayer/player/flowplayer.css"
3+
import ReactDom from "react-dom";
4+
import React, { useEffect, useRef, useState } from "react";
5+
import flowplayer from "@flowplayer/player";
6+
import Flowplayer, { useFlowplayer } from "../src";
7+
import PreviewPlugin from "@flowplayer/player/plugins/preview";
78

8-
const DEMO_TOKEN = "eyJraWQiOiJiRmFRNEdUam9lNVEiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJiRmFRNEdUam9lNVFcIixcImRvbWFpblwiOltcImJ1aWxkcy5mbG93cGxheWVyLmNvbVwiXX0iLCJpc3MiOiJGbG93cGxheWVyIn0.upfvSSPnB-v2ADHfbWG8ye9jDQhgwnMhZWQUqDS2DOLQbldCt9N8Atbq-gRm4GbqRRS7zoBFvvf6CgYWaV93nw"
9+
import { PAUSE, PLAYING } from "@flowplayer/player/core/events";
10+
import { SOURCES, DEMO_TOKEN, ANIMATED_PREVIEW } from "./config";
911

12+
// - Load plugins
13+
flowplayer(PreviewPlugin);
1014

11-
const SOURCES = ["//edge.flowplayer.org/bauhaus.mp4", "//edge.flowplayer.org/functional.mp4"]
12-
15+
// - Component
1316
const Main = () => {
14-
15-
// Get API handle in an asynchronous manner
16-
const playerRef = useRef<HTMLDivElement | null>(null);
17-
const playerApi = useFlowplayer(playerRef)
18-
19-
const [demoPlaybackState, setDemoPlaybackState] = useState("paused")
20-
const [demoSrc, setDemoSrc] = useState(SOURCES[0])
21-
22-
const togglePlay = () => {
23-
if (!playerApi) return // No API available
24-
playerApi.togglePlay()
25-
}
26-
27-
const toggleSrc = () => {
28-
const nextIndex = SOURCES.indexOf(demoSrc) + 1
29-
setDemoSrc(SOURCES[nextIndex] || SOURCES[0])
30-
}
31-
32-
33-
// Listen to player events for the demo
34-
useEffect(() => {
35-
if (!playerApi) return
36-
function stateHandler(ev: Event) {
37-
if (ev.type === PAUSE)
38-
setDemoPlaybackState("paused")
39-
if (ev.type === PLAYING)
40-
setDemoPlaybackState("playing")
41-
}
42-
43-
playerApi.on([PAUSE, PLAYING], stateHandler)
44-
45-
return () => { // Cleanup on unmount
46-
if (!playerApi) return
47-
playerApi.off(PAUSE, stateHandler)
48-
playerApi.off(PLAYING, stateHandler)
49-
}
50-
}, [playerApi])
51-
52-
//if (!Flowplayer) return null
53-
54-
55-
return (
56-
<div className="container">
57-
<h1>Flowplayer React Demo</h1>
58-
<div className="row">
59-
<div className="column">
60-
<Flowplayer src={demoSrc} token={DEMO_TOKEN} ref={playerRef} />
61-
</div>
62-
</div>
63-
<div className="row">
64-
<div className="column">
65-
Playback state is: { demoPlaybackState }
66-
</div>
67-
</div>
68-
<div className="row">
69-
<div className="column">
70-
<h2>API handles</h2>
71-
<button onClick={togglePlay}>Play / pause</button>
72-
</div>
73-
<div className="column">
74-
<h2>Configuration changes</h2>
75-
<button onClick={toggleSrc}>Toggle source</button>
76-
</div>
77-
</div>
17+
// Get API handle in an asynchronous manner
18+
const playerRef = useRef<HTMLDivElement | null>(null);
19+
const playerApi = useFlowplayer(playerRef);
20+
21+
const [demoPlaybackState, setDemoPlaybackState] = useState("paused");
22+
const [demoSrc, setDemoSrc] = useState(SOURCES[0]);
23+
24+
const togglePlay = () => {
25+
if (!playerApi) return; // No API available
26+
playerApi.togglePlay();
27+
};
28+
29+
const toggleSrc = () => {
30+
const nextIndex = SOURCES.indexOf(demoSrc) + 1;
31+
setDemoSrc(SOURCES[nextIndex] || SOURCES[0]);
32+
};
33+
34+
function stateHandler(ev: Event) {
35+
if (ev.type === PAUSE) setDemoPlaybackState("paused");
36+
if (ev.type === PLAYING) setDemoPlaybackState("playing");
37+
}
38+
39+
// Listen to player events for the demo
40+
useEffect(() => {
41+
if (!playerApi) return;
42+
playerApi.on([PAUSE, PLAYING], stateHandler);
43+
44+
return () => {
45+
// Cleanup on unmount
46+
if (!playerApi) return;
47+
playerApi.off(PAUSE, stateHandler);
48+
playerApi.off(PLAYING, stateHandler);
49+
};
50+
}, [playerApi]);
51+
52+
return (
53+
<div className="container">
54+
<h1>Flowplayer React Demo</h1>
55+
<div className="row">
56+
<div className="column">
57+
<Flowplayer
58+
src={demoSrc}
59+
token={DEMO_TOKEN}
60+
ref={playerRef}
61+
opts={{
62+
title: "Example title",
63+
description: "Example description",
64+
poster: { },
65+
preview: { src: ANIMATED_PREVIEW }
66+
}}
67+
/>
68+
</div>
69+
</div>
70+
<div className="row">
71+
<div className="column">Playback state is: {demoPlaybackState}</div>
72+
</div>
73+
<div className="row">
74+
<div className="column">
75+
<h2>API handles</h2>
76+
<button onClick={togglePlay}>Play / pause</button>
77+
</div>
78+
<div className="column">
79+
<h2>Configuration changes</h2>
80+
<button onClick={toggleSrc}>Toggle source</button>
7881
</div>
79-
)
80-
}
82+
</div>
83+
</div>
84+
);
85+
};
8186

82-
const container = document.querySelector("#main")
87+
const container = document.querySelector("#main");
8388

84-
ReactDom.render(<Main />, container)
89+
ReactDom.render(<Main />, container);

‎demo/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module '@flowplayer/player/plugins/preview';

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@flowplayer/react-flowplayer",
3-
"version": "1.1.1",
3+
"version": "1.2.0",
44
"description": "Flowplayer React Component",
55
"main": "lib/index.js",
66
"repository": "git@github.com:flowplayer/react-flowplayer.git",
@@ -19,17 +19,17 @@
1919
},
2020
"devDependencies": {
2121
"@flowplayer/player": "^3.2.4",
22-
"@types/react-dom": "^16.9.9",
2322
"@types/react": "^16.9.55",
23+
"@types/react-dom": "^16.9.9",
2424
"css-loader": "^5.0.1",
2525
"react": "^17.0.2",
2626
"react-dom": "^17.0.2",
2727
"style-loader": "^2.0.0",
2828
"ts-loader": "^9.3.1",
2929
"typescript": "^4.7.4",
30+
"webpack": "^5.73.0",
3031
"webpack-cli": "^4.10.0",
31-
"webpack-dev-server": "4.9.2",
32-
"webpack": "^5.73.0"
32+
"webpack-dev-server": "4.9.2"
3333
},
3434
"dependencies": {},
3535
"files": [

‎src/flowplayer.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import type { ForwardedRef } from "react";
2-
import type { Config } from "@flowplayer/player";
2+
import type { Config, ConfigWith } from "@flowplayer/player";
33

44
import React, { useEffect, forwardRef, useRef, useImperativeHandle } from "react";
55
import flowplayer from "@flowplayer/player";
66

7-
const Flowplayer = (props: Config, receivedRef: ForwardedRef<HTMLDivElement>) => {
7+
// - Types
8+
type Props = {
9+
token: Config["token"],
10+
src: Config["src"],
11+
opts?: Omit<ConfigWith<any>, "token" | "src">
12+
}
13+
14+
// - Components
15+
const Flowplayer = (props: Props, receivedRef: ForwardedRef<HTMLDivElement>) => {
16+
const { token, src, opts } = props;
817
const ref = useRef<HTMLDivElement | null>(null);
9-
const { token, src, ...rest } = props;
1018
const playerApi = () => (ref?.current ? flowplayer(ref.current) : null);
1119

1220
useImperativeHandle(receivedRef, () => ref?.current as any);
@@ -17,17 +25,18 @@ const Flowplayer = (props: Config, receivedRef: ForwardedRef<HTMLDivElement>) =>
1725
if (!ref) return;
1826
if (!ref.current) return;
1927
if (!token) return;
20-
const api = flowplayer(ref?.current, { token, ...props });
28+
const api = flowplayer(ref?.current, { token, ...opts });
2129
return () => {
2230
api.destroy();
2331
if (ref?.current) ref.current.innerHTML = "";
2432
};
2533
}, [token, ref]);
2634

2735
useEffect(() => {
36+
if (!opts) return;
2837
const api = playerApi();
29-
api?.setOpts(rest);
30-
}, [props]);
38+
api?.setOpts(opts);
39+
}, [opts]);
3140

3241
useEffect(() => {
3342
if (!src) return;
@@ -38,5 +47,7 @@ const Flowplayer = (props: Config, receivedRef: ForwardedRef<HTMLDivElement>) =>
3847
return <div ref={ref} />;
3948
};
4049

50+
// - Exports
4151
Flowplayer.displayName = "Flowplayer";
42-
export default forwardRef<HTMLDivElement, Config>(Flowplayer);
52+
export type FlowplayerProps = Props;
53+
export default forwardRef<HTMLDivElement, Props>(Flowplayer);

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"include": [
3-
"src/*"
3+
"src/*",
4+
"demo/index.d.ts"
45
],
56
"compilerOptions": {
67
"target": "es2015",

‎yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2175,7 +2175,7 @@ wbuf@^1.1.0, wbuf@^1.7.3:
21752175

21762176
webpack-cli@^4.10.0:
21772177
version "4.10.0"
2178-
resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz"
2178+
resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.10.0.tgz#37c1d69c8d85214c5a65e589378f53aec64dab31"
21792179
integrity sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==
21802180
dependencies:
21812181
"@discoveryjs/json-ext" "^0.5.0"

0 commit comments

Comments
 (0)