@times-components/video 4.12.2 → 4.13.1
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.
- package/CHANGELOG.md +27 -0
- package/README.md +3 -5
- package/babel.config.js +6 -2
- package/dist/inline-video-player.js +281 -1
- package/dist/is-paid-subscriber.js +15 -1
- package/dist/styles.js +54 -1
- package/dist/video-360-icon.js +26 -1
- package/dist/video-error.js +32 -1
- package/dist/video-prop-types.js +33 -1
- package/dist/video.js +54 -1
- package/package.json +13 -25
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.13.1](https://github.com/newsuk/times-components/compare/@times-components/video@4.13.0...@times-components/video@4.13.1) (2022-09-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @times-components/video
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [4.13.0](https://github.com/newsuk/times-components/compare/@times-components/video@4.12.3...@times-components/video@4.13.0) (2022-08-18)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **TDP-1712:** remove react-native foreverrrrr ([#3064](https://github.com/newsuk/times-components/issues/3064)) ([2a20cb5](https://github.com/newsuk/times-components/commit/2a20cb5abc10a4e7ca2d62487967f8fcf4eccb62)), closes [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3050](https://github.com/newsuk/times-components/issues/3050) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3057](https://github.com/newsuk/times-components/issues/3057) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3065](https://github.com/newsuk/times-components/issues/3065) [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3069](https://github.com/newsuk/times-components/issues/3069) [#3068](https://github.com/newsuk/times-components/issues/3068) [#3070](https://github.com/newsuk/times-components/issues/3070) [#3072](https://github.com/newsuk/times-components/issues/3072) [#3073](https://github.com/newsuk/times-components/issues/3073) [#3071](https://github.com/newsuk/times-components/issues/3071) [#3074](https://github.com/newsuk/times-components/issues/3074) [#3076](https://github.com/newsuk/times-components/issues/3076) [#3079](https://github.com/newsuk/times-components/issues/3079) [#3078](https://github.com/newsuk/times-components/issues/3078) [#3083](https://github.com/newsuk/times-components/issues/3083) [#3087](https://github.com/newsuk/times-components/issues/3087) [#3091](https://github.com/newsuk/times-components/issues/3091) [#3096](https://github.com/newsuk/times-components/issues/3096) [#3102](https://github.com/newsuk/times-components/issues/3102) [#3105](https://github.com/newsuk/times-components/issues/3105) [#3108](https://github.com/newsuk/times-components/issues/3108) [#3111](https://github.com/newsuk/times-components/issues/3111) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3113](https://github.com/newsuk/times-components/issues/3113) [#3114](https://github.com/newsuk/times-components/issues/3114) [#3120](https://github.com/newsuk/times-components/issues/3120) [#3119](https://github.com/newsuk/times-components/issues/3119) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3127](https://github.com/newsuk/times-components/issues/3127) [#3116](https://github.com/newsuk/times-components/issues/3116) [#3128](https://github.com/newsuk/times-components/issues/3128) [#3132](https://github.com/newsuk/times-components/issues/3132) [#3133](https://github.com/newsuk/times-components/issues/3133)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [4.12.3](https://github.com/newsuk/times-components/compare/@times-components/video@4.12.2...@times-components/video@4.12.3) (2022-08-05)
|
|
26
|
+
|
|
27
|
+
**Note:** Version bump only for package @times-components/video
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
## [4.12.2](https://github.com/newsuk/times-components/compare/@times-components/video@4.12.1...@times-components/video@4.12.2) (2022-07-19)
|
|
7
34
|
|
|
8
35
|
**Note:** Version bump only for package @times-components/video
|
package/README.md
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
# Video
|
|
2
2
|
|
|
3
|
-
This package displays video content
|
|
4
|
-
inline video player using the brightcove SDK.
|
|
5
|
-
splash image and play icon, and invokes a supplied callback when the image is
|
|
6
|
-
tapped.
|
|
3
|
+
This package displays video content. It shows an
|
|
4
|
+
inline video player using the brightcove SDK.
|
|
7
5
|
|
|
8
6
|
## Contributing
|
|
9
7
|
|
|
@@ -25,7 +23,7 @@ yarn lint
|
|
|
25
23
|
|
|
26
24
|
## Testing
|
|
27
25
|
|
|
28
|
-
Testing can be done
|
|
26
|
+
Testing can be done by running"
|
|
29
27
|
|
|
30
28
|
```
|
|
31
29
|
yarn test:web
|
package/babel.config.js
CHANGED
|
@@ -3,8 +3,12 @@ module.exports = api => {
|
|
|
3
3
|
return {
|
|
4
4
|
plugins: [
|
|
5
5
|
"babel-plugin-styled-components",
|
|
6
|
-
"@babel/plugin-
|
|
6
|
+
"@babel/plugin-proposal-class-properties"
|
|
7
7
|
],
|
|
8
|
-
presets: [
|
|
8
|
+
presets: [
|
|
9
|
+
"@babel/preset-env",
|
|
10
|
+
"@babel/preset-react",
|
|
11
|
+
"@babel/preset-typescript"
|
|
12
|
+
]
|
|
9
13
|
};
|
|
10
14
|
};
|
|
@@ -1 +1,281 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _utils = require("@times-components/utils");
|
|
13
|
+
|
|
14
|
+
var _videoPropTypes = require("./video-prop-types");
|
|
15
|
+
|
|
16
|
+
var _video360Icon = _interopRequireDefault(require("./video-360-icon"));
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
+
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
22
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
+
|
|
24
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
|
+
|
|
26
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
27
|
+
|
|
28
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
29
|
+
|
|
30
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
31
|
+
|
|
32
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
33
|
+
|
|
34
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
35
|
+
|
|
36
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
37
|
+
|
|
38
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
39
|
+
|
|
40
|
+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
41
|
+
|
|
42
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
43
|
+
|
|
44
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
45
|
+
|
|
46
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
47
|
+
|
|
48
|
+
var css = "\n div[data-is-360=\"true\"] button.vjs-big-play-button {\n display: none !important;\n }\n\n .video-js .vjs-big-play-button {\n width: 70px;\n height: 70px;\n margin-top: -35px;\n margin-left: -35px;\n\n background: rgba(0, 0, 0, 0.4);\n\n line-height: 65px;\n\n border-radius: 0;\n border-style: solid;\n border-width: 3px;\n border-color: white;\n }\n\n .video-js .vjs-big-play-button:before {\n font-size: 60px;\n left: -2px;\n }\n\n .video-js .vjs-dock-text {\n visibility: hidden;\n }\n\n .video-js .vjs-poster {\n background-size: cover;\n }\n\n .video-js .vjs-tech {\n position: relative;\n }\n";
|
|
49
|
+
|
|
50
|
+
var InlineVideoPlayer = /*#__PURE__*/function (_Component) {
|
|
51
|
+
_inherits(InlineVideoPlayer, _Component);
|
|
52
|
+
|
|
53
|
+
var _super = _createSuper(InlineVideoPlayer);
|
|
54
|
+
|
|
55
|
+
function InlineVideoPlayer(props) {
|
|
56
|
+
var _this;
|
|
57
|
+
|
|
58
|
+
_classCallCheck(this, InlineVideoPlayer);
|
|
59
|
+
|
|
60
|
+
_this = _super.call(this, props);
|
|
61
|
+
|
|
62
|
+
_defineProperty(_assertThisInitialized(_this), "handleError", function () {
|
|
63
|
+
_this.setState({
|
|
64
|
+
error: true
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
_defineProperty(_assertThisInitialized(_this), "handlePlay", function () {
|
|
69
|
+
_this.setState({
|
|
70
|
+
hasVideoPlayed: true
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
InlineVideoPlayer.activePlayers.forEach(function (video) {
|
|
74
|
+
if (video !== _assertThisInitialized(_this) && video.player) {
|
|
75
|
+
video.player.pause();
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
_this.state = {
|
|
81
|
+
error: null,
|
|
82
|
+
hasVideoPlayed: false
|
|
83
|
+
};
|
|
84
|
+
_this.id = "".concat(props.videoId, "-").concat(props.accountId, "-").concat(props.id);
|
|
85
|
+
_this.videoContainerRef = _react["default"].createRef();
|
|
86
|
+
_this.observer = null;
|
|
87
|
+
return _this;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
_createClass(InlineVideoPlayer, [{
|
|
91
|
+
key: "componentDidMount",
|
|
92
|
+
value: function componentDidMount() {
|
|
93
|
+
this.observer = this.createIntersectionObserver();
|
|
94
|
+
|
|
95
|
+
if (this.observer && this.videoContainerRef) {
|
|
96
|
+
this.observer.observe(this.videoContainerRef.current);
|
|
97
|
+
} else {
|
|
98
|
+
this.loadBrightcoveSDKIfRequired();
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (InlineVideoPlayer.scriptLoadError) {
|
|
102
|
+
this.handleError(InlineVideoPlayer.scriptLoadError);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
InlineVideoPlayer.activePlayers.push(this);
|
|
106
|
+
|
|
107
|
+
if (InlineVideoPlayer.brightcoveSDKHasLoaded()) {
|
|
108
|
+
this.initBrightcove();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}, {
|
|
112
|
+
key: "componentWillUnmount",
|
|
113
|
+
value: function componentWillUnmount() {
|
|
114
|
+
InlineVideoPlayer.activePlayers.splice(InlineVideoPlayer.activePlayers.indexOf(this));
|
|
115
|
+
|
|
116
|
+
if (this.player) {
|
|
117
|
+
this.player.dispose();
|
|
118
|
+
this.player = null;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
if (this.observer) {
|
|
122
|
+
this.observer.disconnect();
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}, {
|
|
126
|
+
key: "createIntersectionObserver",
|
|
127
|
+
value: function createIntersectionObserver() {
|
|
128
|
+
var _this2 = this;
|
|
129
|
+
|
|
130
|
+
return "IntersectionObserver" in window ? new window.IntersectionObserver(function (entries) {
|
|
131
|
+
if (entries[0].isIntersecting) {
|
|
132
|
+
_this2.loadBrightcoveSDKIfRequired();
|
|
133
|
+
}
|
|
134
|
+
}) : null;
|
|
135
|
+
}
|
|
136
|
+
}, {
|
|
137
|
+
key: "loadBrightcoveSDKIfRequired",
|
|
138
|
+
value: function loadBrightcoveSDKIfRequired() {
|
|
139
|
+
if (!InlineVideoPlayer.brightcoveSDKLoadedStarted) {
|
|
140
|
+
InlineVideoPlayer.brightcoveSDKLoadedStarted = true;
|
|
141
|
+
var s = this.createBrightcoveScript();
|
|
142
|
+
|
|
143
|
+
s.onload = function () {
|
|
144
|
+
InlineVideoPlayer.activePlayers.forEach(function (player) {
|
|
145
|
+
return player.initVideojs();
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
s.onerror = function () {
|
|
150
|
+
InlineVideoPlayer.scriptLoadError = "Brightcove script failed to load";
|
|
151
|
+
InlineVideoPlayer.activePlayers.forEach(function (player) {
|
|
152
|
+
return player.handleError();
|
|
153
|
+
});
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
InlineVideoPlayer.appendScript(s);
|
|
157
|
+
InlineVideoPlayer.attachStyles();
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}, {
|
|
161
|
+
key: "createBrightcoveScript",
|
|
162
|
+
value: function createBrightcoveScript() {
|
|
163
|
+
var _this$props = this.props,
|
|
164
|
+
accountId = _this$props.accountId,
|
|
165
|
+
playerId = _this$props.playerId;
|
|
166
|
+
var s = document.createElement("script");
|
|
167
|
+
s.src = "//players.brightcove.net/".concat(accountId, "/").concat(playerId, "_default/index.min.js");
|
|
168
|
+
s.defer = true;
|
|
169
|
+
return s;
|
|
170
|
+
}
|
|
171
|
+
}, {
|
|
172
|
+
key: "initVideojs",
|
|
173
|
+
value: function initVideojs() {
|
|
174
|
+
var _this3 = this;
|
|
175
|
+
|
|
176
|
+
this.player = window.videojs(this.id);
|
|
177
|
+
this.player.ready(function () {
|
|
178
|
+
_this3.player.contextmenu({
|
|
179
|
+
disabled: true
|
|
180
|
+
});
|
|
181
|
+
});
|
|
182
|
+
this.player.on("error", this.handleError);
|
|
183
|
+
this.player.on("play", this.handlePlay);
|
|
184
|
+
}
|
|
185
|
+
}, {
|
|
186
|
+
key: "initBrightcove",
|
|
187
|
+
value: function initBrightcove() {
|
|
188
|
+
window.bc(document.getElementById(this.id));
|
|
189
|
+
this.initVideojs();
|
|
190
|
+
}
|
|
191
|
+
}, {
|
|
192
|
+
key: "render",
|
|
193
|
+
value: function render() {
|
|
194
|
+
var _this$props2 = this.props,
|
|
195
|
+
width = _this$props2.width,
|
|
196
|
+
height = _this$props2.height,
|
|
197
|
+
poster = _this$props2.poster,
|
|
198
|
+
videoId = _this$props2.videoId,
|
|
199
|
+
accountId = _this$props2.accountId,
|
|
200
|
+
playerId = _this$props2.playerId,
|
|
201
|
+
is360 = _this$props2.is360;
|
|
202
|
+
var _this$state = this.state,
|
|
203
|
+
error = _this$state.error,
|
|
204
|
+
hasVideoPlayed = _this$state.hasVideoPlayed;
|
|
205
|
+
|
|
206
|
+
if (error) {
|
|
207
|
+
throw new Error("Can't load video"); // caught by parent ErrorView
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
return (
|
|
211
|
+
/*#__PURE__*/
|
|
212
|
+
|
|
213
|
+
/* eslint jsx-a11y/media-has-caption: "off" */
|
|
214
|
+
// Added a wrapping div as brightcove adds siblings to the video tag
|
|
215
|
+
_react["default"].createElement("div", {
|
|
216
|
+
"data-is-360": is360,
|
|
217
|
+
"data-testid": "video-component",
|
|
218
|
+
ref: this.videoContainerRef,
|
|
219
|
+
style: {
|
|
220
|
+
height: height,
|
|
221
|
+
width: width
|
|
222
|
+
}
|
|
223
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
224
|
+
style: {
|
|
225
|
+
height: height,
|
|
226
|
+
width: width,
|
|
227
|
+
position: "relative"
|
|
228
|
+
}
|
|
229
|
+
}, !hasVideoPlayed && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, is360 && /*#__PURE__*/_react["default"].createElement(_video360Icon["default"], null)), /*#__PURE__*/_react["default"].createElement("video", _extends({
|
|
230
|
+
id: this.id,
|
|
231
|
+
style: {
|
|
232
|
+
height: height,
|
|
233
|
+
width: width
|
|
234
|
+
}
|
|
235
|
+
}, poster ? {
|
|
236
|
+
poster: (0, _utils.appendToImageURL)(poster.uri, "resize", 960)
|
|
237
|
+
} : {}, {
|
|
238
|
+
className: "video-js",
|
|
239
|
+
controls: true,
|
|
240
|
+
"data-account": accountId,
|
|
241
|
+
"data-application-id": true,
|
|
242
|
+
"data-embed": "default",
|
|
243
|
+
"data-player": playerId,
|
|
244
|
+
"data-video-id": videoId
|
|
245
|
+
}))))
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
}], [{
|
|
249
|
+
key: "brightcoveSDKHasLoaded",
|
|
250
|
+
value: function brightcoveSDKHasLoaded() {
|
|
251
|
+
return !!(window.bc && window.videojs);
|
|
252
|
+
}
|
|
253
|
+
}, {
|
|
254
|
+
key: "appendScript",
|
|
255
|
+
value: function appendScript(s) {
|
|
256
|
+
document.body.appendChild(s);
|
|
257
|
+
}
|
|
258
|
+
}, {
|
|
259
|
+
key: "attachStyles",
|
|
260
|
+
value: function attachStyles() {
|
|
261
|
+
var styleTag = document.createElement("style");
|
|
262
|
+
styleTag.type = "text/css";
|
|
263
|
+
var cssText = document.createTextNode(css);
|
|
264
|
+
styleTag.appendChild(cssText);
|
|
265
|
+
document.head.appendChild(styleTag);
|
|
266
|
+
}
|
|
267
|
+
}]);
|
|
268
|
+
|
|
269
|
+
return InlineVideoPlayer;
|
|
270
|
+
}(_react.Component);
|
|
271
|
+
|
|
272
|
+
_defineProperty(InlineVideoPlayer, "scriptLoadError", false);
|
|
273
|
+
|
|
274
|
+
_defineProperty(InlineVideoPlayer, "activePlayers", []);
|
|
275
|
+
|
|
276
|
+
_defineProperty(InlineVideoPlayer, "brightcoveSDKLoadedStarted", false);
|
|
277
|
+
|
|
278
|
+
InlineVideoPlayer.defaultProps = _videoPropTypes.defaultProps;
|
|
279
|
+
InlineVideoPlayer.propTypes = _videoPropTypes.propTypes;
|
|
280
|
+
var _default = InlineVideoPlayer;
|
|
281
|
+
exports["default"] = _default;
|
|
@@ -1 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var IsPaidSubscriber = _react["default"].createContext(true);
|
|
13
|
+
|
|
14
|
+
var _default = IsPaidSubscriber;
|
|
15
|
+
exports["default"] = _default;
|
package/dist/styles.js
CHANGED
|
@@ -1 +1,54 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.NoSubscriptionMessage = exports.NoSubscriptionWrapper = exports.VideoErrorBody = exports.VideoErrorHeading = exports.VideoErrorContainer = exports.Video360Container = void 0;
|
|
7
|
+
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
|
|
10
|
+
var _tsStyleguide = require("@times-components/ts-styleguide");
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
+
|
|
14
|
+
var Video360Container = _styledComponents["default"].div.withConfig({
|
|
15
|
+
displayName: "styles__Video360Container",
|
|
16
|
+
componentId: "sc-1b2p9l4-0"
|
|
17
|
+
})(["border-radius:100%;left:50%;position:absolute;height:100px;top:50%;transform:translate(-50%,-50%);width:100px;z-index:1;pointer-events:none;[data-is-360=\"true\"]:hover &{background:rgba(0,0,0,0.2);}"]);
|
|
18
|
+
|
|
19
|
+
exports.Video360Container = Video360Container;
|
|
20
|
+
|
|
21
|
+
var VideoErrorContainer = _styledComponents["default"].div.withConfig({
|
|
22
|
+
displayName: "styles__VideoErrorContainer",
|
|
23
|
+
componentId: "sc-1b2p9l4-1"
|
|
24
|
+
})(["display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:", ";"], _tsStyleguide.colours.functional.transparentBlack);
|
|
25
|
+
|
|
26
|
+
exports.VideoErrorContainer = VideoErrorContainer;
|
|
27
|
+
|
|
28
|
+
var VideoErrorHeading = _styledComponents["default"].span.withConfig({
|
|
29
|
+
displayName: "styles__VideoErrorHeading",
|
|
30
|
+
componentId: "sc-1b2p9l4-2"
|
|
31
|
+
})(["color:white;font-family:", ";font-size:20px;height:auto;width:auto;margin-bottom:", ";text-align:center;"], _tsStyleguide.fonts.headline, (0, _tsStyleguide.spacing)(2));
|
|
32
|
+
|
|
33
|
+
exports.VideoErrorHeading = VideoErrorHeading;
|
|
34
|
+
|
|
35
|
+
var VideoErrorBody = _styledComponents["default"].span.withConfig({
|
|
36
|
+
displayName: "styles__VideoErrorBody",
|
|
37
|
+
componentId: "sc-1b2p9l4-3"
|
|
38
|
+
})(["color:rgba(255,255,255,0.8);font-family:", ";font-size:14px;height:auto;max-width:80%;text-align:center;width:410px;"], _tsStyleguide.fonts.body);
|
|
39
|
+
|
|
40
|
+
exports.VideoErrorBody = VideoErrorBody;
|
|
41
|
+
|
|
42
|
+
var NoSubscriptionWrapper = _styledComponents["default"].div.withConfig({
|
|
43
|
+
displayName: "styles__NoSubscriptionWrapper",
|
|
44
|
+
componentId: "sc-1b2p9l4-4"
|
|
45
|
+
})(["position:absolute;height:65px;left:0;right:0;top:50%;margin-top:-32px;"]);
|
|
46
|
+
|
|
47
|
+
exports.NoSubscriptionWrapper = NoSubscriptionWrapper;
|
|
48
|
+
|
|
49
|
+
var NoSubscriptionMessage = _styledComponents["default"].span.withConfig({
|
|
50
|
+
displayName: "styles__NoSubscriptionMessage",
|
|
51
|
+
componentId: "sc-1b2p9l4-5"
|
|
52
|
+
})(["background-color:rgba(0,0,0,0.7);color:", ";margin-left:auto;margin-right:auto;max-width:80%;padding:", ";text-align:center;width:300px;font-family:", ";font-size:14px;"], _tsStyleguide.colours.functional.contrast, (0, _tsStyleguide.spacing)(2), _tsStyleguide.fonts.body);
|
|
53
|
+
|
|
54
|
+
exports.NoSubscriptionMessage = NoSubscriptionMessage;
|
package/dist/video-360-icon.js
CHANGED
|
@@ -1 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _icons = require("@times-components/icons");
|
|
11
|
+
|
|
12
|
+
var _tsStyleguide = require("@times-components/ts-styleguide");
|
|
13
|
+
|
|
14
|
+
var _styles = require("./styles");
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
+
|
|
18
|
+
var video360Icon = function video360Icon() {
|
|
19
|
+
return /*#__PURE__*/_react["default"].createElement(_styles.Video360Container, null, /*#__PURE__*/_react["default"].createElement(_icons.IconVideo360Player, {
|
|
20
|
+
fillColour: _tsStyleguide.colours.functional.white,
|
|
21
|
+
height: 100
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var _default = video360Icon;
|
|
26
|
+
exports["default"] = _default;
|
package/dist/video-error.js
CHANGED
|
@@ -1 +1,32 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _styles = require("./styles");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
|
|
16
|
+
var VideoError = function VideoError(_ref) {
|
|
17
|
+
var height = _ref.height,
|
|
18
|
+
width = _ref.width;
|
|
19
|
+
return /*#__PURE__*/_react["default"].createElement(_styles.VideoErrorContainer, {
|
|
20
|
+
style: {
|
|
21
|
+
height: height,
|
|
22
|
+
width: width
|
|
23
|
+
}
|
|
24
|
+
}, /*#__PURE__*/_react["default"].createElement(_styles.VideoErrorHeading, null, "Video unable to play"), /*#__PURE__*/_react["default"].createElement(_styles.VideoErrorBody, null, "Please check your network connection and try refreshing the page. If that doesn't work, please try again later"));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
VideoError.propTypes = {
|
|
28
|
+
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
|
|
29
|
+
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired
|
|
30
|
+
};
|
|
31
|
+
var _default = VideoError;
|
|
32
|
+
exports["default"] = _default;
|
package/dist/video-prop-types.js
CHANGED
|
@@ -1 +1,33 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.defaultProps = exports.propTypes = void 0;
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var numberOrString = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
|
|
13
|
+
|
|
14
|
+
var propTypes = {
|
|
15
|
+
accountId: _propTypes["default"].string.isRequired,
|
|
16
|
+
height: numberOrString.isRequired,
|
|
17
|
+
id: _propTypes["default"].string,
|
|
18
|
+
is360: _propTypes["default"].bool,
|
|
19
|
+
playerId: _propTypes["default"].string,
|
|
20
|
+
policyKey: _propTypes["default"].string.isRequired,
|
|
21
|
+
poster: _propTypes["default"].shape({
|
|
22
|
+
uri: _propTypes["default"].string.isRequired
|
|
23
|
+
}),
|
|
24
|
+
videoId: _propTypes["default"].string.isRequired,
|
|
25
|
+
width: numberOrString.isRequired
|
|
26
|
+
};
|
|
27
|
+
exports.propTypes = propTypes;
|
|
28
|
+
var defaultProps = {
|
|
29
|
+
is360: false,
|
|
30
|
+
playerId: "default",
|
|
31
|
+
poster: null
|
|
32
|
+
};
|
|
33
|
+
exports.defaultProps = defaultProps;
|
package/dist/video.js
CHANGED
|
@@ -1 +1,54 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.IsPaidSubscriberContext = exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _image = _interopRequireDefault(require("@times-components/image"));
|
|
11
|
+
|
|
12
|
+
var _errorView = _interopRequireDefault(require("@times-components/error-view"));
|
|
13
|
+
|
|
14
|
+
var _inlineVideoPlayer = _interopRequireDefault(require("./inline-video-player"));
|
|
15
|
+
|
|
16
|
+
var _isPaidSubscriber = _interopRequireDefault(require("./is-paid-subscriber"));
|
|
17
|
+
|
|
18
|
+
var _videoError = _interopRequireDefault(require("./video-error"));
|
|
19
|
+
|
|
20
|
+
var _videoPropTypes = require("./video-prop-types");
|
|
21
|
+
|
|
22
|
+
var _styles = require("./styles");
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
|
+
|
|
26
|
+
var Video = function Video(props) {
|
|
27
|
+
var height = props.height,
|
|
28
|
+
poster = props.poster,
|
|
29
|
+
width = props.width;
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement(_errorView["default"], null, function (_ref) {
|
|
31
|
+
var hasError = _ref.hasError;
|
|
32
|
+
return hasError ? /*#__PURE__*/_react["default"].createElement(_videoError["default"], {
|
|
33
|
+
height: height,
|
|
34
|
+
width: width
|
|
35
|
+
}) : /*#__PURE__*/_react["default"].createElement(_isPaidSubscriber["default"].Consumer, null, function (isPaidSubscriber) {
|
|
36
|
+
return !isPaidSubscriber ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
37
|
+
style: {
|
|
38
|
+
height: height,
|
|
39
|
+
width: width
|
|
40
|
+
}
|
|
41
|
+
}, /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
42
|
+
aspectRatio: width / height,
|
|
43
|
+
uri: poster.uri
|
|
44
|
+
}), /*#__PURE__*/_react["default"].createElement(_styles.NoSubscriptionWrapper, null, /*#__PURE__*/_react["default"].createElement(_styles.NoSubscriptionMessage, null, "We are sorry, you need to be a subscriber to watch this video"))) : /*#__PURE__*/_react["default"].createElement(_inlineVideoPlayer["default"], props);
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
Video.defaultProps = _videoPropTypes.defaultProps;
|
|
50
|
+
Video.propTypes = _videoPropTypes.propTypes;
|
|
51
|
+
var _default = Video;
|
|
52
|
+
exports["default"] = _default;
|
|
53
|
+
var IsPaidSubscriberContext = _isPaidSubscriber["default"].Provider;
|
|
54
|
+
exports.IsPaidSubscriberContext = IsPaidSubscriberContext;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/video",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.13.1",
|
|
4
4
|
"main": "dist/video",
|
|
5
5
|
"dev": "src/video",
|
|
6
6
|
"scripts": {
|
|
@@ -8,21 +8,13 @@
|
|
|
8
8
|
"prettier:diff": "prettier --list-different '**/*.*'",
|
|
9
9
|
"depcheck": "depcheck --ignores='@babel/*,babel-*,depcheck,eslint,jest,prettier,react-art,webpack*' --ignore-bin-package=false --skip-missing",
|
|
10
10
|
"lint": "eslint . && yarn prettier:diff && yarn depcheck",
|
|
11
|
-
"test:web": "jest --config='./__tests__/
|
|
11
|
+
"test:web": "jest --config='./__tests__/jest.config.js'",
|
|
12
12
|
"prepublishOnly": "yarn transpile && yarn bundle",
|
|
13
13
|
"cleanup-dist": "rm -rf dist",
|
|
14
14
|
"transpile": "yarn cleanup-dist && babel src -d dist",
|
|
15
15
|
"watch": "watch 'yarn bundle' ./src --ignoreDotFiles --ignoreUnreadable",
|
|
16
16
|
"bundle": "NODE_ENV=production webpack -p"
|
|
17
17
|
},
|
|
18
|
-
"jest": {
|
|
19
|
-
"rootDir": "../..",
|
|
20
|
-
"coverageDirectory": "<rootDir>/packages/video/coverage/",
|
|
21
|
-
"testEnvironment": "jsdom",
|
|
22
|
-
"testMatch": [
|
|
23
|
-
"<rootDir>/packages/video/__tests__/*.test.js"
|
|
24
|
-
]
|
|
25
|
-
},
|
|
26
18
|
"repository": {
|
|
27
19
|
"type": "git",
|
|
28
20
|
"url": "git+https://github.com/newsuk/times-components.git"
|
|
@@ -41,32 +33,28 @@
|
|
|
41
33
|
"devDependencies": {
|
|
42
34
|
"@babel/core": "7.4.4",
|
|
43
35
|
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
44
|
-
"@times-components/jest-configurator": "
|
|
45
|
-
"@times-components/jest-serializer": "3.
|
|
46
|
-
"@times-components/storybook": "4.
|
|
47
|
-
"@times-components/test-utils": "2.
|
|
36
|
+
"@times-components/jest-configurator-web": "0.8.0",
|
|
37
|
+
"@times-components/jest-serializer": "3.4.0",
|
|
38
|
+
"@times-components/storybook": "4.5.0",
|
|
39
|
+
"@times-components/test-utils": "2.4.0",
|
|
48
40
|
"babel-jest": "24.8.0",
|
|
49
41
|
"babel-loader": "8.0.5",
|
|
50
|
-
"babel-plugin-add-react-displayname": "0.0.5",
|
|
51
|
-
"babel-plugin-styled-components": "1.10.6",
|
|
52
42
|
"depcheck": "0.6.9",
|
|
53
43
|
"enzyme": "3.9.0",
|
|
54
44
|
"eslint": "5.9.0",
|
|
55
45
|
"jest": "24.8.0",
|
|
56
46
|
"prettier": "1.14.3",
|
|
57
47
|
"react": "16.9.0",
|
|
58
|
-
"react-art": "16.6.3",
|
|
59
48
|
"react-dom": "16.9.0",
|
|
60
49
|
"react-test-renderer": "16.9.0",
|
|
61
|
-
"webpack": "4.30.0"
|
|
62
|
-
"webpack-cli": "3.3.1"
|
|
50
|
+
"webpack": "4.30.0"
|
|
63
51
|
},
|
|
64
52
|
"dependencies": {
|
|
65
|
-
"@times-components/error-view": "2.
|
|
66
|
-
"@times-components/icons": "2.
|
|
67
|
-
"@times-components/image": "6.
|
|
68
|
-
"@times-components/ts-styleguide": "1.
|
|
69
|
-
"@times-components/utils": "6.
|
|
53
|
+
"@times-components/error-view": "2.5.0",
|
|
54
|
+
"@times-components/icons": "2.19.0",
|
|
55
|
+
"@times-components/image": "6.13.1",
|
|
56
|
+
"@times-components/ts-styleguide": "1.37.0",
|
|
57
|
+
"@times-components/utils": "6.15.0",
|
|
70
58
|
"prop-types": "15.7.2",
|
|
71
59
|
"styled-components": "4.3.2"
|
|
72
60
|
},
|
|
@@ -86,5 +74,5 @@
|
|
|
86
74
|
"publishConfig": {
|
|
87
75
|
"access": "public"
|
|
88
76
|
},
|
|
89
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "3df88abd59cac767ff875c11dab2eb7cc553af9a"
|
|
90
78
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t){e.exports=require("@babel/runtime/helpers/interopRequireDefault")},function(e,t){e.exports=require("react")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.NoSubscriptionMessage=t.NoSubscriptionWrapper=t.VideoErrorBody=t.VideoErrorHeading=t.VideoErrorContainer=t.Video360Container=void 0;var i=n(r(20)),o=r(5),a=i.default.div.withConfig({displayName:"styles__Video360Container",componentId:"sc-1b2p9l4-0"})(['border-radius:100%;left:50%;position:absolute;height:100px;top:50%;transform:translate(-50%,-50%);width:100px;z-index:1;pointer-events:none;[data-is-360="true"]:hover &{background:rgba(0,0,0,0.2);}']);t.Video360Container=a;var l=i.default.div.withConfig({displayName:"styles__VideoErrorContainer",componentId:"sc-1b2p9l4-1"})(["display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:",";"],o.colours.functional.transparentBlack);t.VideoErrorContainer=l;var u=i.default.span.withConfig({displayName:"styles__VideoErrorHeading",componentId:"sc-1b2p9l4-2"})(["color:white;font-family:",";font-size:20px;height:auto;width:auto;margin-bottom:",";text-align:center;"],o.fonts.headline,(0,o.spacing)(2));t.VideoErrorHeading=u;var d=i.default.span.withConfig({displayName:"styles__VideoErrorBody",componentId:"sc-1b2p9l4-3"})(["color:rgba(255,255,255,0.8);font-family:",";font-size:14px;height:auto;max-width:80%;text-align:center;width:410px;"],o.fonts.body);t.VideoErrorBody=d;var s=i.default.div.withConfig({displayName:"styles__NoSubscriptionWrapper",componentId:"sc-1b2p9l4-4"})(["position:absolute;height:65px;left:0;right:0;top:50%;margin-top:-32px;"]);t.NoSubscriptionWrapper=s;var c=i.default.span.withConfig({displayName:"styles__NoSubscriptionMessage",componentId:"sc-1b2p9l4-5"})(["background-color:rgba(0,0,0,0.7);color:",";margin-left:auto;margin-right:auto;max-width:80%;padding:",";text-align:center;width:300px;font-family:",";font-size:14px;"],o.colours.functional.contrast,(0,o.spacing)(2),o.fonts.body);t.NoSubscriptionMessage=c},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.defaultProps=t.propTypes=void 0;var i=n(r(4)),o=i.default.oneOfType([i.default.string,i.default.number]),a={accountId:i.default.string.isRequired,height:o.isRequired,id:i.default.string,is360:i.default.bool,playerId:i.default.string,policyKey:i.default.string.isRequired,poster:i.default.shape({uri:i.default.string.isRequired}),videoId:i.default.string.isRequired,width:o.isRequired};t.propTypes=a;t.defaultProps={is360:!1,playerId:"default",poster:null}},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.IsPaidSubscriberContext=t.default=void 0;var i=n(r(1)),o=n(r(7)),a=n(r(8)),l=n(r(9)),u=n(r(21)),d=n(r(22)),s=r(3),c=r(2),f=function(e){var t=e.height,r=e.poster,n=e.width;return i.default.createElement(a.default,null,(function(a){return a.hasError?i.default.createElement(d.default,{height:t,width:n}):i.default.createElement(u.default.Consumer,null,(function(a){return a?i.default.createElement(l.default,e):i.default.createElement("div",{style:{height:t,width:n}},i.default.createElement(o.default,{aspectRatio:n/t,uri:r.uri}),i.default.createElement(c.NoSubscriptionWrapper,null,i.default.createElement(c.NoSubscriptionMessage,null,"We are sorry, you need to be a subscriber to watch this video")))}))}))};f.defaultProps=s.defaultProps;var p=f;t.default=p;var h=u.default.Provider;t.IsPaidSubscriberContext=h},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t){e.exports=require("@times-components/error-view/rnw")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=n(r(10)),o=n(r(11)),a=n(r(12)),l=n(r(13)),u=n(r(14)),d=n(r(15)),s=n(r(16)),c=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=v(t);if(r&&r.has(e))return r.get(e);var n={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var a=i?Object.getOwnPropertyDescriptor(e,o):null;a&&(a.get||a.set)?Object.defineProperty(n,o,a):n[o]=e[o]}n.default=e,r&&r.set(e,n);return n}(r(1)),f=r(17),p=r(3),h=n(r(18));function v(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(v=function(e){return e?r:t})(e)}function y(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=(0,s.default)(e);if(t){var i=(0,s.default)(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return(0,d.default)(this,r)}}var b=function(e){(0,u.default)(r,e);var t=y(r);function r(e){var n;return(0,o.default)(this,r),(n=t.call(this,e)).handleError=function(){n.setState({error:!0})},n.handlePlay=function(){n.setState({hasVideoPlayed:!0}),r.activePlayers.forEach((function(e){e!==(0,l.default)(n)&&e.player&&e.player.pause()}))},n.state={error:null,hasVideoPlayed:!1},n.id=e.videoId+"-"+e.accountId+"-"+e.id,n.videoContainerRef=c.default.createRef(),n.observer=null,n}return(0,a.default)(r,[{key:"componentDidMount",value:function(){this.observer=this.createIntersectionObserver(),this.observer&&this.videoContainerRef?this.observer.observe(this.videoContainerRef.current):this.loadBrightcoveSDKIfRequired(),r.scriptLoadError&&this.handleError(r.scriptLoadError),r.activePlayers.push(this),r.brightcoveSDKHasLoaded()&&this.initBrightcove()}},{key:"componentWillUnmount",value:function(){r.activePlayers.splice(r.activePlayers.indexOf(this)),this.player&&(this.player.dispose(),this.player=null),this.observer&&this.observer.disconnect()}},{key:"createIntersectionObserver",value:function(){var e=this;return"IntersectionObserver"in window?new window.IntersectionObserver((function(t){t[0].isIntersecting&&e.loadBrightcoveSDKIfRequired()})):null}},{key:"loadBrightcoveSDKIfRequired",value:function(){if(!r.brightcoveSDKLoadedStarted){r.brightcoveSDKLoadedStarted=!0;var e=this.createBrightcoveScript();e.onload=function(){r.activePlayers.forEach((function(e){return e.initVideojs()}))},e.onerror=function(){r.scriptLoadError="Brightcove script failed to load",r.activePlayers.forEach((function(e){return e.handleError()}))},r.appendScript(e),r.attachStyles()}}},{key:"createBrightcoveScript",value:function(){var e=this.props,t=e.accountId,r=e.playerId,n=document.createElement("script");return n.src="//players.brightcove.net/"+t+"/"+r+"_default/index.min.js",n.defer=!0,n}},{key:"initVideojs",value:function(){var e=this;this.player=window.videojs(this.id),this.player.ready((function(){e.player.contextmenu({disabled:!0})})),this.player.on("error",this.handleError),this.player.on("play",this.handlePlay)}},{key:"initBrightcove",value:function(){window.bc(document.getElementById(this.id)),this.initVideojs()}},{key:"render",value:function(){var e=this.props,t=e.width,r=e.height,n=e.poster,o=e.videoId,a=e.accountId,l=e.playerId,u=e.is360,d=this.state,s=d.error,p=d.hasVideoPlayed;if(s)throw new Error("Can't load video");return c.default.createElement("div",{"data-is-360":u,"data-testid":"video-component",ref:this.videoContainerRef,style:{height:r,width:t}},c.default.createElement("div",{style:{height:r,width:t,position:"relative"}},!p&&c.default.createElement(c.Fragment,null,u&&c.default.createElement(h.default,null)),c.default.createElement("video",(0,i.default)({id:this.id,style:{height:r,width:t}},n?{poster:(0,f.appendToImageURL)(n.uri,"resize",960)}:{},{className:"video-js",controls:!0,"data-account":a,"data-application-id":!0,"data-embed":"default","data-player":l,"data-video-id":o}))))}}],[{key:"brightcoveSDKHasLoaded",value:function(){return!(!window.bc||!window.videojs)}},{key:"appendScript",value:function(e){document.body.appendChild(e)}},{key:"attachStyles",value:function(){var e=document.createElement("style");e.type="text/css";var t=document.createTextNode('\n div[data-is-360="true"] button.vjs-big-play-button {\n display: none !important;\n }\n\n .video-js .vjs-big-play-button {\n width: 70px;\n height: 70px;\n margin-top: -35px;\n margin-left: -35px;\n\n background: rgba(0, 0, 0, 0.4);\n\n line-height: 65px;\n\n border-radius: 0;\n border-style: solid;\n border-width: 3px;\n border-color: white;\n }\n\n .video-js .vjs-big-play-button:before {\n font-size: 60px;\n left: -2px;\n }\n\n .video-js .vjs-dock-text {\n visibility: hidden;\n }\n\n .video-js .vjs-poster {\n background-size: cover;\n }\n\n .video-js .vjs-tech {\n position: relative;\n }\n');e.appendChild(t),document.head.appendChild(e)}}]),r}(c.Component);b.scriptLoadError=!1,b.activePlayers=[],b.brightcoveSDKLoadedStarted=!1,b.defaultProps=p.defaultProps;var g=b;t.default=g},function(e,t){e.exports=require("@babel/runtime/helpers/extends")},function(e,t){e.exports=require("@babel/runtime/helpers/classCallCheck")},function(e,t){e.exports=require("@babel/runtime/helpers/createClass")},function(e,t){e.exports=require("@babel/runtime/helpers/assertThisInitialized")},function(e,t){e.exports=require("@babel/runtime/helpers/inherits")},function(e,t){e.exports=require("@babel/runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("@babel/runtime/helpers/getPrototypeOf")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=n(r(1)),o=r(19),a=r(5),l=r(2),u=function(){return i.default.createElement(l.Video360Container,null,i.default.createElement(o.IconVideo360Player,{fillColour:a.colours.functional.white,height:100}))};t.default=u},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=n(r(1)).default.createContext(!0);t.default=i},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=n(r(1)),o=(n(r(4)),r(2)),a=function(e){var t=e.height,r=e.width;return i.default.createElement(o.VideoErrorContainer,{style:{height:t,width:r}},i.default.createElement(o.VideoErrorHeading,null,"Video unable to play"),i.default.createElement(o.VideoErrorBody,null,"Please check your network connection and try refreshing the page. If that doesn't work, please try again later"))};t.default=a}]);
|
|
1
|
+
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=8)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t){e.exports=require("@times-components/error-view/rnw")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),i=n(4),a=n.n(i),c=n(5),s=n.n(c),l=n(6),u=n(1),d=n.n(u),p=d.a.oneOfType([d.a.string,d.a.number]),f=(d.a.string.isRequired,p.isRequired,d.a.string,d.a.bool,d.a.string,d.a.string.isRequired,d.a.shape({uri:d.a.string.isRequired}),d.a.string.isRequired,p.isRequired,{is360:!1,playerId:"default",poster:null}),h=n(7),y=n(2),v=n(3),b=n.n(v),m=b.a.div.withConfig({displayName:"styles__Video360Container",componentId:"sc-1b2p9l4-0"})(['border-radius:100%;left:50%;position:absolute;height:100px;top:50%;transform:translate(-50%,-50%);width:100px;z-index:1;pointer-events:none;[data-is-360="true"]:hover &{background:rgba(0,0,0,0.2);}']),g=b.a.div.withConfig({displayName:"styles__VideoErrorContainer",componentId:"sc-1b2p9l4-1"})(["display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:",";"],y.colours.functional.transparentBlack),w=b.a.span.withConfig({displayName:"styles__VideoErrorHeading",componentId:"sc-1b2p9l4-2"})(["color:white;font-family:",";font-size:20px;height:auto;width:auto;margin-bottom:",";text-align:center;"],y.fonts.headline,Object(y.spacing)(2)),x=b.a.span.withConfig({displayName:"styles__VideoErrorBody",componentId:"sc-1b2p9l4-3"})(["color:rgba(255,255,255,0.8);font-family:",";font-size:14px;height:auto;max-width:80%;text-align:center;width:410px;"],y.fonts.body),E=b.a.div.withConfig({displayName:"styles__NoSubscriptionWrapper",componentId:"sc-1b2p9l4-4"})(["position:absolute;height:65px;left:0;right:0;top:50%;margin-top:-32px;"]),j=b.a.span.withConfig({displayName:"styles__NoSubscriptionMessage",componentId:"sc-1b2p9l4-5"})(["background-color:rgba(0,0,0,0.7);color:",";margin-left:auto;margin-right:auto;max-width:80%;padding:",";text-align:center;width:300px;font-family:",";font-size:14px;"],y.colours.functional.contrast,Object(y.spacing)(2),y.fonts.body),S=function(){return o.a.createElement(m,null,o.a.createElement(h.IconVideo360Player,{fillColour:y.colours.functional.white,height:100}))};function O(e){return(O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function P(){return(P=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function I(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function _(e,t){return(_=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function k(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=q(e);if(t){var o=q(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return C(this,n)}}function C(e,t){return!t||"object"!==O(t)&&"function"!=typeof t?R(e):t}function R(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function q(e){return(q=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function B(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var V=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_(e,t)}(c,e);var t,n,i,a=k(c);function c(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),B(R(t=a.call(this,e)),"handleError",(function(){t.setState({error:!0})})),B(R(t),"handlePlay",(function(){t.setState({hasVideoPlayed:!0}),c.activePlayers.forEach((function(e){e!==R(t)&&e.player&&e.player.pause()}))})),t.state={error:null,hasVideoPlayed:!1},t.id="".concat(e.videoId,"-").concat(e.accountId,"-").concat(e.id),t.videoContainerRef=o.a.createRef(),t.observer=null,t}return t=c,i=[{key:"brightcoveSDKHasLoaded",value:function(){return!(!window.bc||!window.videojs)}},{key:"appendScript",value:function(e){document.body.appendChild(e)}},{key:"attachStyles",value:function(){var e=document.createElement("style");e.type="text/css";var t=document.createTextNode('\n div[data-is-360="true"] button.vjs-big-play-button {\n display: none !important;\n }\n\n .video-js .vjs-big-play-button {\n width: 70px;\n height: 70px;\n margin-top: -35px;\n margin-left: -35px;\n\n background: rgba(0, 0, 0, 0.4);\n\n line-height: 65px;\n\n border-radius: 0;\n border-style: solid;\n border-width: 3px;\n border-color: white;\n }\n\n .video-js .vjs-big-play-button:before {\n font-size: 60px;\n left: -2px;\n }\n\n .video-js .vjs-dock-text {\n visibility: hidden;\n }\n\n .video-js .vjs-poster {\n background-size: cover;\n }\n\n .video-js .vjs-tech {\n position: relative;\n }\n');e.appendChild(t),document.head.appendChild(e)}}],(n=[{key:"componentDidMount",value:function(){this.observer=this.createIntersectionObserver(),this.observer&&this.videoContainerRef?this.observer.observe(this.videoContainerRef.current):this.loadBrightcoveSDKIfRequired(),c.scriptLoadError&&this.handleError(c.scriptLoadError),c.activePlayers.push(this),c.brightcoveSDKHasLoaded()&&this.initBrightcove()}},{key:"componentWillUnmount",value:function(){c.activePlayers.splice(c.activePlayers.indexOf(this)),this.player&&(this.player.dispose(),this.player=null),this.observer&&this.observer.disconnect()}},{key:"createIntersectionObserver",value:function(){var e=this;return"IntersectionObserver"in window?new window.IntersectionObserver((function(t){t[0].isIntersecting&&e.loadBrightcoveSDKIfRequired()})):null}},{key:"loadBrightcoveSDKIfRequired",value:function(){if(!c.brightcoveSDKLoadedStarted){c.brightcoveSDKLoadedStarted=!0;var e=this.createBrightcoveScript();e.onload=function(){c.activePlayers.forEach((function(e){return e.initVideojs()}))},e.onerror=function(){c.scriptLoadError="Brightcove script failed to load",c.activePlayers.forEach((function(e){return e.handleError()}))},c.appendScript(e),c.attachStyles()}}},{key:"createBrightcoveScript",value:function(){var e=this.props,t=e.accountId,n=e.playerId,r=document.createElement("script");return r.src="//players.brightcove.net/".concat(t,"/").concat(n,"_default/index.min.js"),r.defer=!0,r}},{key:"initVideojs",value:function(){var e=this;this.player=window.videojs(this.id),this.player.ready((function(){e.player.contextmenu({disabled:!0})})),this.player.on("error",this.handleError),this.player.on("play",this.handlePlay)}},{key:"initBrightcove",value:function(){window.bc(document.getElementById(this.id)),this.initVideojs()}},{key:"render",value:function(){var e=this.props,t=e.width,n=e.height,i=e.poster,a=e.videoId,c=e.accountId,s=e.playerId,u=e.is360,d=this.state,p=d.error,f=d.hasVideoPlayed;if(p)throw new Error("Can't load video");return o.a.createElement("div",{"data-is-360":u,"data-testid":"video-component",ref:this.videoContainerRef,style:{height:n,width:t}},o.a.createElement("div",{style:{height:n,width:t,position:"relative"}},!f&&o.a.createElement(r.Fragment,null,u&&o.a.createElement(S,null)),o.a.createElement("video",P({id:this.id,style:{height:n,width:t}},i?{poster:Object(l.appendToImageURL)(i.uri,"resize",960)}:{},{className:"video-js",controls:!0,"data-account":c,"data-application-id":!0,"data-embed":"default","data-player":s,"data-video-id":a}))))}}])&&I(t.prototype,n),i&&I(t,i),c}(r.Component);B(V,"scriptLoadError",!1),B(V,"activePlayers",[]),B(V,"brightcoveSDKLoadedStarted",!1),V.defaultProps=f;var L=V,N=o.a.createContext(!0),D=function(e){var t=e.height,n=e.width;return o.a.createElement(g,{style:{height:t,width:n}},o.a.createElement(w,null,"Video unable to play"),o.a.createElement(x,null,"Please check your network connection and try refreshing the page. If that doesn't work, please try again later"))};n.d(t,"IsPaidSubscriberContext",(function(){return z}));var K=function(e){var t=e.height,n=e.poster,r=e.width;return o.a.createElement(s.a,null,(function(i){return i.hasError?o.a.createElement(D,{height:t,width:r}):o.a.createElement(N.Consumer,null,(function(i){return i?o.a.createElement(L,e):o.a.createElement("div",{style:{height:t,width:r}},o.a.createElement(a.a,{aspectRatio:r/t,uri:n.uri}),o.a.createElement(E,null,o.a.createElement(j,null,"We are sorry, you need to be a subscriber to watch this video")))}))}))};K.defaultProps=f;t.default=K;var z=N.Provider}]);
|