@wyscout/video-player
v3.0.11
Published
New video player
Keywords
Readme
Wyscout video player
@wyscout/video-player is the shared component to play match related videos inside the wyscout apps ecosystem, built for React
Relevant changelog
v3 requires styled-components and [email protected] as dependencies.
Features
- Overlay match info and playback controls
- Overlay comments and match anlysis images
- Camera angle selection
- Relevant match information (events, teams, score, players, coaches, referees, modules etc.)
- Video quality selection
- Add watched clips to playlists or clips library
- Downlad and share clips
- Save video frames
- Clips recording
- 6 different types of source:
playlist,library,selector,match,uploadandcustom
Feature: Disegno veloce video player
- Jira: VIDPL-54
1. Descrizione
TODO
2. Aggiunte al progetto
- Styleguidist: storybook little child
- react-transition-group: animate transition in a declarative and react-ish way
3. Implementazione
Aggiunto una sezione dentro la cartella components con dentro tutti i componenti react necessari.
3.1 Componenti React
Aggiunta una cartella Drawing con dentro tutti i nuovi componenti creati appositamente per gestire la funzionalità.
Installation
- Install the video player as a dependency
$ yarn add @wyscout/video-player- Import the react component
// ES6
import VideoPlayer from '@wyscout/video-player'Examples
playlist source
import VideoPlayer from '@wyscout/video-player';
render = () => (
<VideoPlayer
token="ab3de7dbc24bef9b51def6g8"
userId="90142"
groupId="200"
subgroupId="1589"
language="it"
environment="dev"
quality="fullhd"
source="playlist"
input="1072315"
/>
);selector source
import VideoPlayer from '@wyscout/video-player';
render = () => (
<VideoPlayer
token="ab3de7dbc24bef9b51def6g8"
userId="90142"
groupId="200"
subgroupId="1589"
language="it"
environment="dev"
quality="fullhd"
source="selector"
input={
{
target_type: 'referee',
target_id: '12345',
match_ids: ['1220123'],
target_label: 'A. Damato',
selector_ids: ['123', '321'],
selector_labels: ['Yellow Card', 'Penalty']
}
}
/>
);match source
import VideoPlayer from '@wyscout/video-player';
render = () => (
<VideoPlayer
token="ab3de7dbc24bef9b51def6g8"
userId="90142"
groupId="200"
subgroupId="1589"
language="it"
environment="dev"
quality="fullhd"
source="match"
input="1220123"
/>
);upload source
import VideoPlayer from '@wyscout/video-player';
render = () => (
<VideoPlayer
token="ab3de7dbc24bef9b51def6g8"
userId="90142"
groupId="200"
subgroupId="1589"
language="it"
environment="dev"
quality="fullhd"
source="upload"
input={
{
obj_type: 'training',
id: '172302'
}
}
/>
);custom source
import VideoPlayer from '@wyscout/video-player';
render = () => (
<VideoPlayer
token="ab3de7dbc24bef9b51def6g8"
userId="90142"
groupId="200"
subgroupId="1589"
language="it"
environment="dev"
quality="fullhd"
source="custom"
input={
[
{
id: '12345',
name: '',
team: {
id: '123',
name: 'Roma'
},
player: {
id: '321',
name: 'F. Totti'
},
event: {
id: '12',
label: 'Goal - Right Foot'
},
match: {
id: '1220123',
date: '2016-05-04',
score_a: 2,
score_b: 1,
team_a: {
id: '123',
name: 'Roma',
thumb: 'https://restbeta.wyscout.com/v1/media/images/team/123.png',
color: '#FFFF00'
},
team_b: {
id: '231',
name: 'Atalanta',
thumb: 'https://restbeta.wyscout.com/v1/media/images/team/231.png',
color: '#00FFFF'
},
},
version: 0,
type: 0,
privacy_level: 0,
start_offset: 1235,
end_offset: 1254,
media_versions: [
{
type: 0,
type_label: 'Tv broadcast',
privacy_level: 0,
version: 0,
sources: {
fullhd: 'https://cdn5akm2.wyscout.com/streaming/...',
hd: 'https://cdn5akm2.wyscout.com/streaming/...',
sd: 'https://cdn5akm2.wyscout.com/streaming/...',
lq: 'https://cdn5akm2.wyscout.com/streaming/...'
},
offsets: {
'1t_sec': 123,
'2t_sec': 2390,
'3t_sec': 3021,
'4t_sec': 0,
'5t_sec': 0,
'1t_end': 2200,
'2t_end': 2900,
'3t_end': 3250,
'4t_end': 0,
'5t_end': 0
}
}
],
analysis: [
{
id: '1637',
version: 0,
privacy_level: 0,
type: 0,
screenshot: 'https://...',
svgsource: '<svg ...',
pngsource: 'data:image/png;base64,...',
position: 24.02,
duration: 4,
stops: true,
raw_data: 'DRAWING#{"2430938":...'
}
]
}
]
}
/>
);Props
|Name|Type|Required|Description| |:---:|:---:|:---:|---| |token|string|yes|Oauth2 access token| |userId|string|number|yes|Platform use id| |groupId|string|number|yes|Cerebrum group id| |subgroupId|string|number|yes|Cerebrum subgroup id| |language|string|no|2 letters language code for localization| |theme|'default'|'dark-theme'|no|Styles theme. Notice: it shouldn't be necessary because the component's style will detect the theme css class of an ancestor element.| |environment|'dev'|'rc'|'prod'|no|Current execution environment. Notice: not required because it is not used yet. The current code detects process.env.RC/NODE_ENV variables if present, or defaults to prod otherwise.| |quality|'fullhd'|'hd'|'sd'|'lq'|no|Most recent user's video quality setting| |autoplay|bool|no|Determines if video will start playing on load/skip| |hideList|bool|no|If set, the list of clip on the side will be hidden| |hideTools|bool|no|If set, the bottom toolbar will be hidden| |source|'playlist'|'library'|'selector'|'match'|'upload'|'custom'|yes|type of data source, which may trigger a different player behaviour.| |input|number|string|object|array|yes|The source id or data, depending on the selected source type| |onTokenExpiration|func|yes|Will be invoked with no arguments on token expiration detection and it is expected to trigger a change of the token prop| |onClipEnded|func|no|Optional callback invoked when the video head reaches the end of the current clip. It takes the current clip id as first argument and the next clip id (if any) as second argument| |onClipsEnded|func|no|Optional callback invoked when the video head reaches the end of the last clip in the list. It takes the last clip id as argument.| |onQualityChange|func|no|Optional callback invoked when the user selects a quality from settings menu. It takes the selected quality code as argument. Quality code will be in the set { 'lq', 'sd', 'hd', 'fullhd'}| |onDownloadClips|func|yes|Callback invoked when the user tries to download one or more clips. It takes, in order, an array containing the selected clip ids, the value of the source prop and the value of the input prop.| |onShareClips|func|yes|Callback invoked when the user tries to share one or more clips. It takes, in order, an array containing the selected clip ids, the value of the source prop and the value of the input prop.| |onOpenTagger|func|yes|Callback invoked when the user clicks the "Open with tagger" button. It takes, in order, the active clip id, the value of the source prop and the value of the input prop.| |onClosePlayer|func|no|Callback invoked when the user clicks the X icon at the top right corner of the sidebar. It takes no arguments.|
Use cases / source types
Playlist
<VideoPlayer
{ ...otherProps }
source="playlist"
input={12345 /* playlist id (required) */ }
/>Library (My clips)
<VideoPlayer
{ ...otherProps }
source="library"
{ /* no input prop required */ }
/>Match
<VideoPlayer
{ ...otherProps }
source="match"
input={12345 /* match id (required) */ }
/>Selector
<VideoPlayer
{ ...otherProps }
source="selector"
input={
{
target_type: 'player', // 'player', 'team' or 'referee' (required)
target_id: 927, // id of the chosen target (required)
target_label: 'F. Totti', // name of the chosen target (required)
selector_ids: [ 21, 72, 344 ], // array of target related selector ids (optional)
selector_labels: [ 'Goals', 'Key Passes', 'Duels' ] // array of selector labels in the same order as selector_ids (optional)
match_ids: [ 1220123, 3210221 ] // array of target related match ids (optional)
}
}
/>Upload
<VideoPlayer
{ ...otherProps }
source="upload"
input={
{
obj_type: 'training', // 'my_match', 'wy_match_private' or 'training' (required)
id: 22162 // id of the uploaded video (required)
}
}
/>Custom
<VideoPlayer
{ ...otherProps }
source="custom"
input={
[ // array of custom clips
{
id: '12345', // arbitrary clip id, must be unique over this list (required)
name: '', // clip name (optional)
team: { // data of this clip's associated team (optional)
id: '123',
name: 'Roma'
},
player: { // data of this clip's associated player (optional)
id: '321',
name: 'F. Totti'
},
event: { // data of this clip's associated event (optional)
id: '12',
label: 'Goal - Right Foot'
},
match: { // match data (required)
id: '1220123', // match id (required)
date: '2016-05-04', // match date (required)
score_a: 2, // first team score (required)
score_b: 1, // second team score (required)
team_a: { // first team data (required)
id: '123', // team id (required)
name: 'Roma', // team name (required)
thumb: 'https://restbeta.wyscout.com/v1/media/images/team/123.png', // team image (data)url (required)
color: '#FFFF00' // css color to distinguish this team from the other during this match (optional)
},
team_b: { // second team data (required)
id: '231',
name: 'Atalanta',
thumb: 'https://restbeta.wyscout.com/v1/media/images/team/231.png',
color: '#00FFFF'
},
},
version: 0, // clip media version id (required)
type: 0, // clip media type id (required)
privacy_level: 0, // clip media privacy flag (required)
start_offset: 1235, // clip start offset, seconds (required)
end_offset: 1254, // clip end offset, seconds (required)
media_versions: [ // array of available media versions of the same video (required)
{
type: 0, // media type id (required)
type_label: 'Tv broadcast', // media type description (required)
privacy_level: 0, // media privacy flag (required)
version: 0, // media version id (required)
sources: { // streaming urls for this version of the clip (required)
fullhd: 'https://cdn5akm2.wyscout.com/streaming/...',
hd: 'https://cdn5akm2.wyscout.com/streaming/...',
sd: 'https://cdn5akm2.wyscout.com/streaming/...',
lq: 'https://cdn5akm2.wyscout.com/streaming/...'
},
offsets: { // whole video match offsets (secs) for this version (required)
'1t_sec': 123, // first half start
'2t_sec': 2390, // second half start
'3t_sec': 3021, // first extra time start
'4t_sec': 0, // second extra time start
'5t_sec': 0, // third extra time start
'1t_end': 2200, // first half end
'2t_end': 2900, // second half end
'3t_end': 3250, // first extra time end
'4t_end': 0, // second extra time end
'5t_end': 0 // third extra time end
}
}
],
analysis: [ // array of clip overlays (optional)
{
id: '1637', // unique id over this list (required)
version: 0, // media version id to apply this overlay to (optional)
privacy_level: 0, // privacy flag to apply this overlay to (optional)
type: 0, // media type id to apply this overlay to (optional)
screenshot: 'https://...', // screenshot (data)url of the overlay cue point (optional)
svgsource: '<svg ...', // svg source of the picture to show (required)
pngsource: 'data:image/png;base64,...', // png data uri of the picture to show (optional)
position: 24.02, // cue point, in secs, with respect to the clip (required)
duration: 4, // overlay duration (required)
stops: true, // whether video should stop on the cue point or not (required)
raw_data: 'DRAWING#{"2430938":...' // metadata to pass to the drawing tool in order to edit the picture (optional)
}
]
}
]
}
/>