@micromag/element-video 0.2.286

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -0
  2. package/es/index.js +191 -0
  3. package/lib/index.js +201 -0
  4. package/package.json +67 -0
package/assets/css/styles.css ADDED
@@ -0,0 +1 @@
1
+ .micromag-element-video-container.micromag-element-video-withSize video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-video-container{position:relative}.micromag-element-video-container video{display:block;width:100%}
package/es/index.js ADDED
@@ -0,0 +1,191 @@
1
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import React, { useEffect } from 'react';
4
+ import PropTypes$1 from 'prop-types';
5
+ import classNames from 'classnames';
6
+ import { PropTypes } from '@micromag/core';
7
+ import { useUserInteracted } from '@micromag/core/contexts';
8
+ import { useMediaApi } from '@micromag/core/hooks';
9
+
10
+ var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize"};
11
+
12
+ var propTypes = {
13
+ media: PropTypes.videoMedia,
14
+ width: PropTypes$1.number,
15
+ height: PropTypes$1.number,
16
+ apiRef: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.shape({
17
+ current: PropTypes$1.any
18
+ })]),
19
+ initialMuted: PropTypes$1.oneOf(['auto', true, false]),
20
+ autoPlay: PropTypes$1.bool,
21
+ loop: PropTypes$1.bool,
22
+ playsInline: PropTypes$1.bool,
23
+ preload: PropTypes$1.string,
24
+ withoutCors: PropTypes$1.bool,
25
+ className: PropTypes$1.string,
26
+ onReady: PropTypes$1.func,
27
+ onPlay: PropTypes$1.func,
28
+ onPause: PropTypes$1.func,
29
+ onEnded: PropTypes$1.func,
30
+ onSeeked: PropTypes$1.func,
31
+ onTimeUpdate: PropTypes$1.func,
32
+ onProgressStep: PropTypes$1.func,
33
+ onDurationChanged: PropTypes$1.func,
34
+ onVolumeChanged: PropTypes$1.func,
35
+ onPosterLoaded: PropTypes$1.func
36
+ };
37
+ var defaultProps = {
38
+ media: null,
39
+ width: null,
40
+ height: null,
41
+ apiRef: null,
42
+ initialMuted: 'auto',
43
+ autoPlay: false,
44
+ loop: false,
45
+ playsInline: true,
46
+ preload: undefined,
47
+ withoutCors: false,
48
+ className: null,
49
+ onReady: null,
50
+ onPlay: null,
51
+ onPause: null,
52
+ onEnded: null,
53
+ onSeeked: null,
54
+ onTimeUpdate: null,
55
+ onProgressStep: null,
56
+ onDurationChanged: null,
57
+ onVolumeChanged: null,
58
+ onPosterLoaded: null
59
+ };
60
+
61
+ var Video = function Video(_ref) {
62
+ var _ref4;
63
+
64
+ var media = _ref.media,
65
+ width = _ref.width,
66
+ height = _ref.height,
67
+ apiRef = _ref.apiRef,
68
+ initialMuted = _ref.initialMuted,
69
+ autoPlay = _ref.autoPlay,
70
+ loop = _ref.loop,
71
+ playsInline = _ref.playsInline,
72
+ preload = _ref.preload,
73
+ withoutCors = _ref.withoutCors,
74
+ className = _ref.className,
75
+ onReady = _ref.onReady,
76
+ onPlay = _ref.onPlay,
77
+ onPause = _ref.onPause,
78
+ onEnded = _ref.onEnded,
79
+ onSeeked = _ref.onSeeked,
80
+ onTimeUpdate = _ref.onTimeUpdate,
81
+ onProgressStep = _ref.onProgressStep,
82
+ onDurationChanged = _ref.onDurationChanged,
83
+ onVolumeChanged = _ref.onVolumeChanged,
84
+ onPosterLoaded = _ref.onPosterLoaded;
85
+
86
+ var _ref2 = media || {},
87
+ _ref2$url = _ref2.url,
88
+ url = _ref2$url === void 0 ? null : _ref2$url,
89
+ _ref2$files = _ref2.files,
90
+ files = _ref2$files === void 0 ? null : _ref2$files;
91
+
92
+ var hasFiles = files !== null && typeof files.h264 !== 'undefined' && typeof files.webm !== 'undefined';
93
+ var mediaUrl = hasFiles ? files.h264.url : url;
94
+ var userInteracted = useUserInteracted();
95
+ var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
96
+
97
+ var _useMediaApi = useMediaApi({
98
+ url: mediaUrl,
99
+ initialMuted: finalInitialMuted,
100
+ onPlay: onPlay,
101
+ onPause: onPause,
102
+ onEnded: onEnded,
103
+ onSeeked: onSeeked,
104
+ onTimeUpdate: onTimeUpdate,
105
+ onProgressStep: onProgressStep,
106
+ onDurationChanged: onDurationChanged,
107
+ onVolumeChanged: onVolumeChanged
108
+ }),
109
+ ref = _useMediaApi.ref,
110
+ api = _objectWithoutProperties(_useMediaApi, ["ref"]);
111
+
112
+ if (apiRef !== null) {
113
+ apiRef.current = api;
114
+ apiRef.current.mediaRef = ref;
115
+ }
116
+
117
+ var playing = api.playing,
118
+ muted = api.muted,
119
+ ready = api.ready,
120
+ play = api.play,
121
+ pause = api.pause,
122
+ unMute = api.unMute;
123
+ useEffect(function () {
124
+ if (ready && onReady !== null) {
125
+ onReady();
126
+ }
127
+ }, [ready, onReady]);
128
+ var withSize = width !== null && height !== null;
129
+
130
+ var _ref3 = media || {},
131
+ _ref3$thumbnail_url = _ref3.thumbnail_url,
132
+ thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
133
+
134
+ useEffect(function () {
135
+ if (thumbnailUrl !== null) {
136
+ var img = new Image();
137
+ img.src = thumbnailUrl;
138
+
139
+ img.onload = function () {
140
+ if (onPosterLoaded) {
141
+ onPosterLoaded();
142
+ }
143
+ };
144
+ }
145
+ }, [thumbnailUrl]);
146
+ useEffect(function () {
147
+ if (autoPlay) {
148
+ play();
149
+
150
+ if (initialMuted === 'auto' && muted && userInteracted) {
151
+ unMute();
152
+ }
153
+ } else {
154
+ pause();
155
+ }
156
+ }, [autoPlay]);
157
+ return /*#__PURE__*/React.createElement("div", {
158
+ className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.paused, !playing), _defineProperty(_ref4, styles.withSize, withSize), _ref4)]),
159
+ style: withSize ? {
160
+ width: width,
161
+ height: height
162
+ } : null
163
+ }, /*#__PURE__*/React.createElement("video", {
164
+ key: mediaUrl,
165
+ ref: ref,
166
+ src: !hasFiles ? mediaUrl : null,
167
+ autoPlay: autoPlay,
168
+ loop: loop,
169
+ muted: muted,
170
+ poster: thumbnailUrl,
171
+ preload: preload,
172
+ playsInline: playsInline,
173
+ crossOrigin: withoutCors ? 'anonymous' : null
174
+ }, hasFiles ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("source", {
175
+ src: files.webm.url,
176
+ type: "video/webm"
177
+ }), /*#__PURE__*/React.createElement("source", {
178
+ src: files.h264.url,
179
+ type: "video/mp4"
180
+ })) : null));
181
+ };
182
+
183
+ Video.propTypes = propTypes;
184
+ Video.defaultProps = defaultProps;
185
+ var Video$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
186
+ return /*#__PURE__*/React.createElement(Video, Object.assign({
187
+ apiRef: ref
188
+ }, props));
189
+ });
190
+
191
+ export default Video$1;
package/lib/index.js ADDED
@@ -0,0 +1,201 @@
1
+ 'use strict';
2
+
3
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
5
+ var React = require('react');
6
+ var PropTypes = require('prop-types');
7
+ var classNames = require('classnames');
8
+ var core = require('@micromag/core');
9
+ var contexts = require('@micromag/core/contexts');
10
+ var hooks = require('@micromag/core/hooks');
11
+
12
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+
14
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
15
+ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
16
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
18
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
19
+
20
+ var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize"};
21
+
22
+ var propTypes = {
23
+ media: core.PropTypes.videoMedia,
24
+ width: PropTypes__default['default'].number,
25
+ height: PropTypes__default['default'].number,
26
+ apiRef: PropTypes__default['default'].oneOfType([PropTypes__default['default'].func, PropTypes__default['default'].shape({
27
+ current: PropTypes__default['default'].any
28
+ })]),
29
+ initialMuted: PropTypes__default['default'].oneOf(['auto', true, false]),
30
+ autoPlay: PropTypes__default['default'].bool,
31
+ loop: PropTypes__default['default'].bool,
32
+ playsInline: PropTypes__default['default'].bool,
33
+ preload: PropTypes__default['default'].string,
34
+ withoutCors: PropTypes__default['default'].bool,
35
+ className: PropTypes__default['default'].string,
36
+ onReady: PropTypes__default['default'].func,
37
+ onPlay: PropTypes__default['default'].func,
38
+ onPause: PropTypes__default['default'].func,
39
+ onEnded: PropTypes__default['default'].func,
40
+ onSeeked: PropTypes__default['default'].func,
41
+ onTimeUpdate: PropTypes__default['default'].func,
42
+ onProgressStep: PropTypes__default['default'].func,
43
+ onDurationChanged: PropTypes__default['default'].func,
44
+ onVolumeChanged: PropTypes__default['default'].func,
45
+ onPosterLoaded: PropTypes__default['default'].func
46
+ };
47
+ var defaultProps = {
48
+ media: null,
49
+ width: null,
50
+ height: null,
51
+ apiRef: null,
52
+ initialMuted: 'auto',
53
+ autoPlay: false,
54
+ loop: false,
55
+ playsInline: true,
56
+ preload: undefined,
57
+ withoutCors: false,
58
+ className: null,
59
+ onReady: null,
60
+ onPlay: null,
61
+ onPause: null,
62
+ onEnded: null,
63
+ onSeeked: null,
64
+ onTimeUpdate: null,
65
+ onProgressStep: null,
66
+ onDurationChanged: null,
67
+ onVolumeChanged: null,
68
+ onPosterLoaded: null
69
+ };
70
+
71
+ var Video = function Video(_ref) {
72
+ var _ref4;
73
+
74
+ var media = _ref.media,
75
+ width = _ref.width,
76
+ height = _ref.height,
77
+ apiRef = _ref.apiRef,
78
+ initialMuted = _ref.initialMuted,
79
+ autoPlay = _ref.autoPlay,
80
+ loop = _ref.loop,
81
+ playsInline = _ref.playsInline,
82
+ preload = _ref.preload,
83
+ withoutCors = _ref.withoutCors,
84
+ className = _ref.className,
85
+ onReady = _ref.onReady,
86
+ onPlay = _ref.onPlay,
87
+ onPause = _ref.onPause,
88
+ onEnded = _ref.onEnded,
89
+ onSeeked = _ref.onSeeked,
90
+ onTimeUpdate = _ref.onTimeUpdate,
91
+ onProgressStep = _ref.onProgressStep,
92
+ onDurationChanged = _ref.onDurationChanged,
93
+ onVolumeChanged = _ref.onVolumeChanged,
94
+ onPosterLoaded = _ref.onPosterLoaded;
95
+
96
+ var _ref2 = media || {},
97
+ _ref2$url = _ref2.url,
98
+ url = _ref2$url === void 0 ? null : _ref2$url,
99
+ _ref2$files = _ref2.files,
100
+ files = _ref2$files === void 0 ? null : _ref2$files;
101
+
102
+ var hasFiles = files !== null && typeof files.h264 !== 'undefined' && typeof files.webm !== 'undefined';
103
+ var mediaUrl = hasFiles ? files.h264.url : url;
104
+ var userInteracted = contexts.useUserInteracted();
105
+ var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
106
+
107
+ var _useMediaApi = hooks.useMediaApi({
108
+ url: mediaUrl,
109
+ initialMuted: finalInitialMuted,
110
+ onPlay: onPlay,
111
+ onPause: onPause,
112
+ onEnded: onEnded,
113
+ onSeeked: onSeeked,
114
+ onTimeUpdate: onTimeUpdate,
115
+ onProgressStep: onProgressStep,
116
+ onDurationChanged: onDurationChanged,
117
+ onVolumeChanged: onVolumeChanged
118
+ }),
119
+ ref = _useMediaApi.ref,
120
+ api = _objectWithoutProperties__default['default'](_useMediaApi, ["ref"]);
121
+
122
+ if (apiRef !== null) {
123
+ apiRef.current = api;
124
+ apiRef.current.mediaRef = ref;
125
+ }
126
+
127
+ var playing = api.playing,
128
+ muted = api.muted,
129
+ ready = api.ready,
130
+ play = api.play,
131
+ pause = api.pause,
132
+ unMute = api.unMute;
133
+ React.useEffect(function () {
134
+ if (ready && onReady !== null) {
135
+ onReady();
136
+ }
137
+ }, [ready, onReady]);
138
+ var withSize = width !== null && height !== null;
139
+
140
+ var _ref3 = media || {},
141
+ _ref3$thumbnail_url = _ref3.thumbnail_url,
142
+ thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
143
+
144
+ React.useEffect(function () {
145
+ if (thumbnailUrl !== null) {
146
+ var img = new Image();
147
+ img.src = thumbnailUrl;
148
+
149
+ img.onload = function () {
150
+ if (onPosterLoaded) {
151
+ onPosterLoaded();
152
+ }
153
+ };
154
+ }
155
+ }, [thumbnailUrl]);
156
+ React.useEffect(function () {
157
+ if (autoPlay) {
158
+ play();
159
+
160
+ if (initialMuted === 'auto' && muted && userInteracted) {
161
+ unMute();
162
+ }
163
+ } else {
164
+ pause();
165
+ }
166
+ }, [autoPlay]);
167
+ return /*#__PURE__*/React__default['default'].createElement("div", {
168
+ className: classNames__default['default']([styles.container, (_ref4 = {}, _defineProperty__default['default'](_ref4, className, className !== null), _defineProperty__default['default'](_ref4, styles.paused, !playing), _defineProperty__default['default'](_ref4, styles.withSize, withSize), _ref4)]),
169
+ style: withSize ? {
170
+ width: width,
171
+ height: height
172
+ } : null
173
+ }, /*#__PURE__*/React__default['default'].createElement("video", {
174
+ key: mediaUrl,
175
+ ref: ref,
176
+ src: !hasFiles ? mediaUrl : null,
177
+ autoPlay: autoPlay,
178
+ loop: loop,
179
+ muted: muted,
180
+ poster: thumbnailUrl,
181
+ preload: preload,
182
+ playsInline: playsInline,
183
+ crossOrigin: withoutCors ? 'anonymous' : null
184
+ }, hasFiles ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("source", {
185
+ src: files.webm.url,
186
+ type: "video/webm"
187
+ }), /*#__PURE__*/React__default['default'].createElement("source", {
188
+ src: files.h264.url,
189
+ type: "video/mp4"
190
+ })) : null));
191
+ };
192
+
193
+ Video.propTypes = propTypes;
194
+ Video.defaultProps = defaultProps;
195
+ var Video$1 = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
196
+ return /*#__PURE__*/React__default['default'].createElement(Video, Object.assign({
197
+ apiRef: ref
198
+ }, props));
199
+ });
200
+
201
+ module.exports = Video$1;
package/package.json ADDED
@@ -0,0 +1,67 @@
1
+ {
2
+ "name": "@micromag/element-video",
3
+ "version": "0.2.286",
4
+ "description": "",
5
+ "keywords": [
6
+ "javascript"
7
+ ],
8
+ "homepage": "https://github.com/urbania-media/micromag-js",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "git+https://github.com/urbania-media/micromag-js.git"
12
+ },
13
+ "author": {
14
+ "name": "Folklore",
15
+ "email": "info@folklore.email"
16
+ },
17
+ "contributors": [
18
+ {
19
+ "name": "David Mongeau-Petitpas",
20
+ "email": "dmp@folklore.email"
21
+ },
22
+ {
23
+ "name": "Nicolas Roy-Bourdages",
24
+ "email": "nrb@folklore.email"
25
+ },
26
+ {
27
+ "name": "Julien Carignan",
28
+ "email": "jc@folklore.email"
29
+ }
30
+ ],
31
+ "license": "ISC",
32
+ "main": "lib/index.js",
33
+ "module": "es/index.js",
34
+ "files": [
35
+ "lib",
36
+ "es",
37
+ "assets"
38
+ ],
39
+ "scripts": {
40
+ "prepare": "../../scripts/prepare-package.sh"
41
+ },
42
+ "devDependencies": {
43
+ "react": "^16.8.0",
44
+ "react-dom": "^16.8.0"
45
+ },
46
+ "peerDependencies": {
47
+ "react": "^16.8.0",
48
+ "react-dom": "^16.8.0"
49
+ },
50
+ "dependencies": {
51
+ "@babel/runtime": "^7.13.10",
52
+ "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
+ "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
+ "@fortawesome/react-fontawesome": "^0.1.13",
55
+ "@micromag/core": "^0.2.286",
56
+ "@micromag/element-closed-captions": "^0.2.286",
57
+ "@micromag/element-media-controls": "^0.2.286",
58
+ "classnames": "^2.2.6",
59
+ "prop-types": "^15.7.2",
60
+ "react-intl": "^5.12.1",
61
+ "uuid": "^8.3.2"
62
+ },
63
+ "publishConfig": {
64
+ "access": "public"
65
+ },
66
+ "gitHead": "380a52b4b3f57dc2535014af6241032f09055d40"
67
+ }