Pārlūkot izejas kodu

fix(largevideo): show the background video only for video container type

master
hristoterezov 8 gadus atpakaļ
vecāks
revīzija
486d0802a8

+ 10
- 4
modules/UI/videolayout/VideoContainer.js Parādīt failu

214
 
214
 
215
         this.$wrapper = $('#largeVideoWrapper');
215
         this.$wrapper = $('#largeVideoWrapper');
216
 
216
 
217
+        /**
218
+         * FIXME: currently using parent() because I can't come up with name
219
+         * for id. We'll need to probably refactor the HTML related to the large
220
+         * video anyway.
221
+         */
222
+        this.$wrapperParent = this.$wrapper.parent();
223
+
217
         this.avatarHeight = $("#dominantSpeakerAvatar").height();
224
         this.avatarHeight = $("#dominantSpeakerAvatar").height();
218
 
225
 
219
         var onPlayingCallback = function (event) {
226
         var onPlayingCallback = function (event) {
524
         }
531
         }
525
 
532
 
526
         return new Promise((resolve) => {
533
         return new Promise((resolve) => {
527
-            this.$wrapper.css('visibility', 'visible').fadeTo(
534
+            this.$wrapperParent.css('visibility', 'visible').fadeTo(
528
                 FADE_DURATION_MS,
535
                 FADE_DURATION_MS,
529
                 1,
536
                 1,
530
                 () => {
537
                 () => {
539
         // as the container is hidden/replaced by another container
546
         // as the container is hidden/replaced by another container
540
         // hide its avatar
547
         // hide its avatar
541
         this.showAvatar(false);
548
         this.showAvatar(false);
542
-
543
         // its already hidden
549
         // its already hidden
544
         if (!this.isVisible) {
550
         if (!this.isVisible) {
545
             return Promise.resolve();
551
             return Promise.resolve();
546
         }
552
         }
547
 
553
 
548
         return new Promise((resolve) => {
554
         return new Promise((resolve) => {
549
-            this.$wrapper.fadeTo(FADE_DURATION_MS, 0, () => {
550
-                this.$wrapper.css('visibility', 'hidden');
555
+            this.$wrapperParent.fadeTo(FADE_DURATION_MS, 0, () => {
556
+                this.$wrapperParent.css('visibility', 'hidden');
551
                 this.isVisible = false;
557
                 this.isVisible = false;
552
                 resolve();
558
                 resolve();
553
             });
559
             });

+ 25
- 11
react/features/large-video/components/LargeVideo.web.js Parādīt failu

37
                         src = '' />
37
                         src = '' />
38
                 </div>
38
                 </div>
39
                 <span id = 'remoteConnectionMessage' />
39
                 <span id = 'remoteConnectionMessage' />
40
-                <div className = 'video_blurred_container'>
41
-                    <video
42
-                        autoPlay = { true }
43
-                        id = 'largeVideoBackground'
44
-                        muted = 'true' />
45
-                </div>
46
-                <div id = 'largeVideoWrapper'>
47
-                    <video
48
-                        autoPlay = { true }
49
-                        id = 'largeVideo'
50
-                        muted = { true } />
40
+                <div>
41
+                    <div className = 'video_blurred_container'>
42
+                        <video
43
+                            autoPlay = { true }
44
+                            id = 'largeVideoBackground'
45
+                            muted = 'true' />
46
+                    </div>
47
+                    {
48
+
49
+                        /**
50
+                         * FIXME: the architecture of elements related to the
51
+                         * large video and  the naming. The background is not
52
+                         * part of largeVideoWrapper because we are controlling
53
+                         * the size of the video through largeVideoWrapper.
54
+                         * That's why we need another container for the the
55
+                         * background and the largeVideoWrapper in order to
56
+                         * hide/show them.
57
+                         */
58
+                    }
59
+                    <div id = 'largeVideoWrapper'>
60
+                        <video
61
+                            autoPlay = { true }
62
+                            id = 'largeVideo'
63
+                            muted = { true } />
64
+                    </div>
51
                 </div>
65
                 </div>
52
                 <span id = 'localConnectionMessage' />
66
                 <span id = 'localConnectionMessage' />
53
 
67
 

Notiek ielāde…
Atcelt
Saglabāt