@desynova-digital/player 3.13.6 → 3.13.8
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/components/AudioMeter.js +12 -45
- package/components/Video.js +1 -1
- package/package.json +1 -1
package/components/AudioMeter.js
CHANGED
|
@@ -241,61 +241,28 @@ var AudioMeter = /*#__PURE__*/function (_Component) {
|
|
|
241
241
|
}, {
|
|
242
242
|
key: "initializeMeter",
|
|
243
243
|
value: function initializeMeter() {
|
|
244
|
-
// this.getNoOfStacks();
|
|
245
|
-
// const myVideo = document.querySelector('video');
|
|
246
|
-
// this.audioCtx = this.audioCtx || new window.AudioContext();
|
|
247
|
-
// this.audioCtx.createGain =
|
|
248
|
-
// this.audioCtx.createGain || this.audioCtx.createGainNode; //fallback for gain naming
|
|
249
|
-
// this.gainL = this.audioCtx.createGain();
|
|
250
|
-
// this.gainR = this.audioCtx.createGain();
|
|
251
|
-
// this.merger = this.audioCtx.createChannelMerger(2);
|
|
252
|
-
// var splitter = this.audioCtx.createChannelSplitter(2);
|
|
253
|
-
|
|
254
|
-
// this.sourceNode = this.sourceNode || this.audioCtx.createMediaElementSource(myVideo);
|
|
255
|
-
// alert(this.sourceNode.channelCount);
|
|
256
|
-
// this.sourceNode.connect(splitter, 0, 0);
|
|
257
|
-
|
|
258
|
-
// //Connect splitter' outputs to each Gain Nodes
|
|
259
|
-
// splitter.connect(this.gainL, 0);
|
|
260
|
-
// splitter.connect(this.gainR, 1);
|
|
261
|
-
|
|
262
|
-
// /*
|
|
263
|
-
// *Connect Left and Right Nodes to the output
|
|
264
|
-
// *Assuming stereo as initial status
|
|
265
|
-
// */
|
|
266
|
-
// this.gainL.connect(this.merger, 0, 0);
|
|
267
|
-
// this.gainR.connect(this.merger, 0, 1);
|
|
268
|
-
// this.merger.connect(this.audioCtx.destination, 0, 0);
|
|
269
|
-
// const meterNode = this.createMeterNode();
|
|
270
|
-
// this.createMeter(meterNode);
|
|
271
|
-
|
|
272
|
-
// Create an AudioContext object.
|
|
273
244
|
this.getNoOfStacks();
|
|
274
245
|
var myVideo = document.querySelector('video');
|
|
275
246
|
this.audioCtx = this.audioCtx || new window.AudioContext();
|
|
276
|
-
|
|
277
|
-
// Create a source node for the audio signal.
|
|
278
|
-
this.sourceNode = this.sourceNode || this.audioCtx.createMediaElementSource(myVideo);
|
|
279
|
-
|
|
280
|
-
// Create two GainNode objects, one for the left channel and one for the right channel.
|
|
247
|
+
this.audioCtx.createGain = this.audioCtx.createGain || this.audioCtx.createGainNode; //fallback for gain naming
|
|
281
248
|
this.gainL = this.audioCtx.createGain();
|
|
282
249
|
this.gainR = this.audioCtx.createGain();
|
|
283
|
-
|
|
284
|
-
// Create a ChannelMergerNode object.
|
|
285
250
|
this.merger = this.audioCtx.createChannelMerger(2);
|
|
251
|
+
var splitter = this.audioCtx.createChannelSplitter(2);
|
|
252
|
+
this.sourceNode = this.sourceNode || this.audioCtx.createMediaElementSource(myVideo);
|
|
253
|
+
this.sourceNode.connect(splitter, 0, 0);
|
|
286
254
|
|
|
287
|
-
//
|
|
288
|
-
|
|
289
|
-
|
|
255
|
+
//Connect splitter' outputs to each Gain Nodes
|
|
256
|
+
splitter.connect(this.gainL, 0);
|
|
257
|
+
splitter.connect(this.gainR, 1);
|
|
290
258
|
|
|
291
|
-
|
|
259
|
+
/*
|
|
260
|
+
*Connect Left and Right Nodes to the output
|
|
261
|
+
*Assuming stereo as initial status
|
|
262
|
+
*/
|
|
292
263
|
this.gainL.connect(this.merger, 0, 0);
|
|
293
264
|
this.gainR.connect(this.merger, 0, 1);
|
|
294
|
-
|
|
295
|
-
// Connect the ChannelMergerNode object to the destination.
|
|
296
|
-
this.merger.connect(this.audioCtx.destination);
|
|
297
|
-
|
|
298
|
-
// Set the gain of the left and right GainNode objects.
|
|
265
|
+
this.merger.connect(this.audioCtx.destination, 0, 0);
|
|
299
266
|
var meterNode = this.createMeterNode();
|
|
300
267
|
this.createMeter(meterNode);
|
|
301
268
|
}
|
package/components/Video.js
CHANGED
|
@@ -95,7 +95,7 @@ var defaultProps = {
|
|
|
95
95
|
aspectRatio: 'auto',
|
|
96
96
|
crossOrigin: 'anonymous'
|
|
97
97
|
};
|
|
98
|
-
var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n font-family: SFUIText-Regular;\n font-size: 16px;\n bottom: 20px;\n width: 100%;\n display: flex;\n justify-content: center;\n text-align: center;\n color: #ffffff;\n height: 90%;\n align-items: center;\n\n .subtitleContainer {\n border-radius: 4px;\n width: fit-content;\n background: #000000;\n opacity: 0.9;\n padding: ", ";\n line-height: 20px;\n position: absolute;\n }\n .longSubtitleStyles {\n
|
|
98
|
+
var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n font-family: SFUIText-Regular;\n font-size: 16px;\n bottom: 20px;\n width: 100%;\n display: flex;\n justify-content: center;\n text-align: center;\n color: #ffffff;\n height: 90%;\n align-items: center;\n\n .subtitleContainer {\n border-radius: 4px;\n width: fit-content;\n background: #000000;\n opacity: 0.9;\n padding: ", ";\n line-height: 20px;\n position: absolute;\n }\n .longSubtitleStyles {\n overflow-y: scroll;\n height: fit-content;\n max-height: 70px;\n max-width: 75%;\n width: fit-content;\n }\n"])), function (props) {
|
|
99
99
|
return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
|
|
100
100
|
});
|
|
101
101
|
var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n &.video-react-player-block {\n position: relative;\n transition: all 0.1s ease-in-out;\n -moz-transition: all 0.1s ease-in-out;\n -webkit-transition: all 0.1s ease-in-out;\n -ms-transition: all 0.1s ease-in-out;\n -o-transition: all 0.1s ease-in-out;\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n right: 0;\n bottom: 0;\n }\n .audio-tracks {\n position: relative;\n display: flex;\n background: rgba(0, 0, 0, 0.5);\n color: #fff;\n z-index: 10;\n position: absolute;\n width: 100%;\n bottom: 0;\n p {\n cursor: pointer;\n padding: 10px;\n }\n }\n .loader-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: 10;\n background: rgba(0, 0, 0, 0.5);\n }\n }\n &.ratio-border {\n border: 1px solid rgba(255, 255, 255, 0.5);\n &:after {\n content: '16:9 Safe Area';\n position: absolute;\n color: #fff;\n font-family: SFUIText-Regular;\n font-size: 12px;\n transform: rotate(-90deg);\n top: 20%;\n left: -50px;\n }\n }\n"])));
|