@desynova-digital/player 3.13.5 → 3.13.6
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 +45 -12
- package/components/Video.js +1 -1
- package/package.json +1 -1
package/components/AudioMeter.js
CHANGED
|
@@ -241,28 +241,61 @@ 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.
|
|
244
273
|
this.getNoOfStacks();
|
|
245
274
|
var myVideo = document.querySelector('video');
|
|
246
275
|
this.audioCtx = this.audioCtx || new window.AudioContext();
|
|
247
|
-
|
|
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.
|
|
248
281
|
this.gainL = this.audioCtx.createGain();
|
|
249
282
|
this.gainR = this.audioCtx.createGain();
|
|
283
|
+
|
|
284
|
+
// Create a ChannelMergerNode object.
|
|
250
285
|
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);
|
|
254
286
|
|
|
255
|
-
//Connect
|
|
256
|
-
|
|
257
|
-
|
|
287
|
+
// Connect the source node to the two GainNode objects.
|
|
288
|
+
this.sourceNode.connect(this.gainL);
|
|
289
|
+
this.sourceNode.connect(this.gainR);
|
|
258
290
|
|
|
259
|
-
|
|
260
|
-
*Connect Left and Right Nodes to the output
|
|
261
|
-
*Assuming stereo as initial status
|
|
262
|
-
*/
|
|
291
|
+
// Connect the two GainNode objects to the ChannelMergerNode object.
|
|
263
292
|
this.gainL.connect(this.merger, 0, 0);
|
|
264
293
|
this.gainR.connect(this.merger, 0, 1);
|
|
265
|
-
|
|
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.
|
|
266
299
|
var meterNode = this.createMeterNode();
|
|
267
300
|
this.createMeter(meterNode);
|
|
268
301
|
}
|
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 bottom: 0px;\n width: fit-content;\n overflow-y: scroll;\n max-height: 100px;\n }\n"])), function (props) {
|
|
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 bottom: 0px;\n width: fit-content;\n overflow-y: scroll;\n max-height: 100px;\n width: 100%;\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"])));
|