浏览代码

ref(layout): use css to make video layout containers fit window

Instead of using JS, just use CSS 100% width and height. This
also resolves a jitter that occurs on edge when a modal's
container appends to the body.
j8
Leonard Kim 7 年前
父节点
当前提交
12d7ab9026
共有 3 个文件被更改,包括 8 次插入23 次删除
  1. 7
    0
      css/_videolayout_default.scss
  2. 0
    8
      modules/UI/videolayout/LargeVideoManager.js
  3. 1
    15
      modules/UI/videolayout/VideoLayout.js

+ 7
- 0
css/_videolayout_default.scss 查看文件

4
 
4
 
5
 #videospace {
5
 #videospace {
6
     display: block;
6
     display: block;
7
+    height: 100%;
8
+    width: 100%;
7
     min-height: 100%;
9
     min-height: 100%;
8
     position: absolute;
10
     position: absolute;
9
     top: 0px;
11
     top: 0px;
224
     text-align: center;
226
     text-align: center;
225
 }
227
 }
226
 
228
 
229
+#largeVideoContainer {
230
+    height: 100%;
231
+    width: 100%;
232
+}
233
+
227
 #largeVideoWrapper {
234
 #largeVideoWrapper {
228
     box-shadow: 0 0 20px -2px #444;
235
     box-shadow: 0 0 20px -2px #444;
229
 }
236
 }

+ 0
- 8
modules/UI/videolayout/LargeVideoManager.js 查看文件

399
         // resize all containers
399
         // resize all containers
400
         Object.keys(this.containers)
400
         Object.keys(this.containers)
401
             .forEach(type => this.resizeContainer(type, animate));
401
             .forEach(type => this.resizeContainer(type, animate));
402
-
403
-        this.$container.animate({
404
-            width: this.width,
405
-            height: this.height
406
-        }, {
407
-            queue: false,
408
-            duration: animate ? 500 : 0
409
-        });
410
     }
402
     }
411
 
403
 
412
     /**
404
     /**

+ 1
- 15
modules/UI/videolayout/VideoLayout.js 查看文件

857
      * TODO: Remove the "animate" param as it is no longer passed in as true.
857
      * TODO: Remove the "animate" param as it is no longer passed in as true.
858
      *
858
      *
859
      * @param forceUpdate indicates that hidden thumbnails will be shown
859
      * @param forceUpdate indicates that hidden thumbnails will be shown
860
-     * @param completeFunction a function to be called when the video area is
861
-     * resized.
862
      */
860
      */
863
     resizeVideoArea(
861
     resizeVideoArea(
864
             forceUpdate = false,
862
             forceUpdate = false,
865
-            animate = false,
866
-            completeFunction = null) {
863
+            animate = false) {
867
         if (largeVideo) {
864
         if (largeVideo) {
868
             largeVideo.updateContainerSize();
865
             largeVideo.updateContainerSize();
869
             largeVideo.resize(animate);
866
             largeVideo.resize(animate);
879
 
876
 
880
         // Resize the thumbnails first.
877
         // Resize the thumbnails first.
881
         this.resizeThumbnails(forceUpdate);
878
         this.resizeThumbnails(forceUpdate);
882
-
883
-        // Resize the video area element.
884
-        $('#videospace').animate({
885
-            right: window.innerWidth - availableWidth,
886
-            width: availableWidth,
887
-            height: availableHeight
888
-        }, {
889
-            queue: false,
890
-            duration: animate ? 500 : 1,
891
-            complete: completeFunction
892
-        });
893
     },
879
     },
894
 
880
 
895
     getSmallVideo(id) {
881
     getSmallVideo(id) {

正在加载...
取消
保存