浏览代码

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

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

@@ -399,14 +399,6 @@ export default class LargeVideoManager {
399 399
         // resize all containers
400 400
         Object.keys(this.containers)
401 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,13 +857,10 @@ const VideoLayout = {
857 857
      * TODO: Remove the "animate" param as it is no longer passed in as true.
858 858
      *
859 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 861
     resizeVideoArea(
864 862
             forceUpdate = false,
865
-            animate = false,
866
-            completeFunction = null) {
863
+            animate = false) {
867 864
         if (largeVideo) {
868 865
             largeVideo.updateContainerSize();
869 866
             largeVideo.resize(animate);
@@ -879,17 +876,6 @@ const VideoLayout = {
879 876
 
880 877
         // Resize the thumbnails first.
881 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 881
     getSmallVideo(id) {

正在加载...
取消
保存