瀏覽代碼

ref(local-video): generate html instead of hardcoding in filmstrip

This would better mimic React behavior where each component has
its own markup, instead of relying on markup existing elsewhere.
master
Leonard Kim 7 年之前
父節點
當前提交
ec22329408
共有 2 個檔案被更改,包括 26 行新增18 行删除
  1. 25
    1
      modules/UI/videolayout/LocalVideo.js
  2. 1
    17
      react/features/filmstrip/components/Filmstrip.web.js

+ 25
- 1
modules/UI/videolayout/LocalVideo.js 查看文件

17
 
17
 
18
 function LocalVideo(VideoLayout, emitter) {
18
 function LocalVideo(VideoLayout, emitter) {
19
     this.videoSpanId = "localVideoContainer";
19
     this.videoSpanId = "localVideoContainer";
20
-    this.container = $("#localVideoContainer").get(0);
20
+
21
+    this.container = this.createContainer();
22
+    $("#filmstripLocalVideo").append(this.container);
23
+
21
     this.localVideoId = null;
24
     this.localVideoId = null;
22
     this.bindHoverHandler();
25
     this.bindHoverHandler();
23
     if(config.enableLocalVideoFlip)
26
     if(config.enableLocalVideoFlip)
46
 LocalVideo.prototype = Object.create(SmallVideo.prototype);
49
 LocalVideo.prototype = Object.create(SmallVideo.prototype);
47
 LocalVideo.prototype.constructor = LocalVideo;
50
 LocalVideo.prototype.constructor = LocalVideo;
48
 
51
 
52
+LocalVideo.prototype.createContainer = function () {
53
+    const containerSpan = document.createElement('span');
54
+    containerSpan.classList.add('videocontainer');
55
+    containerSpan.id = this.videoSpanId;
56
+
57
+    containerSpan.innerHTML = `
58
+        <div class = 'videocontainer__background'></div>
59
+        <span id = 'localVideoWrapper'></span>
60
+        <audio
61
+            autoplay = true
62
+            id = 'localAudio'
63
+            muted = true></audio>
64
+        <div class = 'videocontainer__toolbar'></div>
65
+        <div class = 'videocontainer__toptoolbar'></div>
66
+        <div class = 'videocontainer__hoverOverlay'></div>
67
+        <div class = 'displayNameContainer'></div>
68
+        <div class = 'avatar-container'></div>`;
69
+
70
+    return containerSpan;
71
+};
72
+
49
 /**
73
 /**
50
  * Sets the display name for the given video span id.
74
  * Sets the display name for the given video span id.
51
  */
75
  */

+ 1
- 17
react/features/filmstrip/components/Filmstrip.web.js 查看文件

52
                     id = 'remoteVideos'>
52
                     id = 'remoteVideos'>
53
                     <div
53
                     <div
54
                         className = 'filmstrip__videos'
54
                         className = 'filmstrip__videos'
55
-                        id = 'filmstripLocalVideo'>
56
-                        <span
57
-                            className = 'videocontainer'
58
-                            id = 'localVideoContainer'>
59
-                            <div className = 'videocontainer__background' />
60
-                            <span id = 'localVideoWrapper' />
61
-                            <audio
62
-                                autoPlay = { true }
63
-                                id = 'localAudio'
64
-                                muted = { true } />
65
-                            <div className = 'videocontainer__toolbar' />
66
-                            <div className = 'videocontainer__toptoolbar' />
67
-                            <div className = 'videocontainer__hoverOverlay' />
68
-                            <div className = 'displayNameContainer' />
69
-                            <div className = 'avatar-container' />
70
-                        </span>
71
-                    </div>
55
+                        id = 'filmstripLocalVideo' />
72
                     <div
56
                     <div
73
                         className = 'filmstrip__videos'
57
                         className = 'filmstrip__videos'
74
                         id = 'filmstripRemoteVideos'>
58
                         id = 'filmstripRemoteVideos'>

Loading…
取消
儲存