You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_vertical_filmstrip_overrides.scss 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /**
  2. * Override other styles to support vertical filmstrip mode.
  3. */
  4. .vertical-filmstrip {
  5. .filmstrip {
  6. align-items: flex-end;
  7. box-sizing: border-box;
  8. display: flex;
  9. flex-direction: column-reverse;
  10. height: 100%;
  11. /**
  12. * fixed positioning is necessary for remote menus and tooltips to pop
  13. * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
  14. * a library called popper which will position its elements fixed if
  15. * any parent is also fixed.
  16. */
  17. position: fixed;
  18. /**
  19. * z-index adjusting is needed because the video state indicator has to
  20. * display over the filmstrip when no videos are displayed but still be
  21. * clickable but its inline dialogs must display over the video state
  22. * indicator when videos are displayed.
  23. */
  24. z-index: #{$tooltipsZ + 1};
  25. /**
  26. * Hide videos by making them slight to the right.
  27. */
  28. .filmstrip__videos {
  29. right: 0;
  30. &.hidden {
  31. bottom: auto;
  32. right: -196px;
  33. }
  34. /**
  35. * An id selector is used to match id specificity with existing
  36. * filmstrip styles.
  37. */
  38. &#remoteVideos {
  39. /**
  40. * Remove horizontal filmstrip padding used to prevent videos
  41. * from overlapping the left-side toolbar. An id selector is
  42. * used to match id specificity with filmstrip styles.
  43. */
  44. padding-left: 0;
  45. transition: right 2s;
  46. }
  47. }
  48. /**
  49. * Re-styles the local Video and invite button to better fit the
  50. * vertical filmstrip layout.
  51. */
  52. #filmstripLocalVideo {
  53. bottom: 5px;
  54. flex-direction: column-reverse;
  55. height: auto;
  56. justify-content: flex-start;
  57. .filmstrip__invite {
  58. padding-bottom: 0px;
  59. padding-top: 5px;
  60. z-index: $dropdownZ;
  61. }
  62. }
  63. /**
  64. * Remove unnecssary padding that is normally used to prevent horizontal
  65. * filmstrip from overlapping the left edge of the screen.
  66. */
  67. #filmstripLocalVideo,
  68. #filmstripRemoteVideos {
  69. padding: 0;
  70. }
  71. #filmstripRemoteVideos {
  72. display: flex;
  73. flex: 1;
  74. flex-direction: column;
  75. height: auto;
  76. justify-content: flex-end;
  77. #filmstripRemoteVideosContainer {
  78. flex-direction: column-reverse;
  79. overflow-x: hidden;
  80. }
  81. }
  82. /**
  83. * Rotate the hide filmstrip icon so it points towards the right edge
  84. * of the screen.
  85. */
  86. &__toolbar {
  87. transform: rotate(-90deg);
  88. }
  89. /**
  90. * Move the remote video menu trigger to the bottom left of the
  91. * video thumbnail.
  92. */
  93. .remotevideomenu,
  94. .remote-video-menu-trigger {
  95. bottom: 0;
  96. left: 0;
  97. top: auto;
  98. right: auto;
  99. }
  100. .remote-video-menu-trigger {
  101. margin-bottom: 7px;
  102. }
  103. #remoteVideos {
  104. flex-direction: column;
  105. flex-grow: 1;
  106. }
  107. .videocontainer {
  108. /**
  109. * Move status icons to the bottom right of the thumbnail.
  110. */
  111. &__toolbar {
  112. text-align: right;
  113. .right {
  114. float: none;
  115. margin: auto;
  116. }
  117. }
  118. }
  119. }
  120. &.filmstrip-only {
  121. .filmstrip {
  122. flex-direction: row-reverse;
  123. }
  124. .filmstrip__videos-filmstripOnly {
  125. height: 100%;
  126. }
  127. /**
  128. * In filmstrip only mode, the toolbar is normally displayed in the
  129. * vertical center of the filmstrip strip. In vertical filmstrip mode,
  130. * that alignment makes the toolbar appear floating and detached from
  131. * the filmstrip. So, instead anchor the toolbar next to the local
  132. * video.
  133. */
  134. .toolbar_filmstrip-only {
  135. bottom: 0;
  136. top: auto;
  137. transform: none;
  138. }
  139. }
  140. /**
  141. * These styles are for the video labels that display on the top right. The
  142. * styles adjust the labels' positioning as the filmstrip itself or
  143. * filmstrip's remote videos appear and disappear.
  144. *
  145. * The class with-filmstrip is for when the filmstrip is visible.
  146. * The class without-filmstrip is for when the filmstrip has been toggled to
  147. * be hidden.
  148. * The class opening is for when the filmstrip is transitioning from hidden
  149. * to visible.
  150. */
  151. .video-state-indicator.moveToCorner {
  152. transition: right 0.5s;
  153. &.with-filmstrip {
  154. &#recordingLabel {
  155. right: 200px;
  156. }
  157. &#videoResolutionLabel {
  158. right: 150px;
  159. }
  160. }
  161. &.with-filmstrip.opening {
  162. transition: 0.9s;
  163. transition-timing-function: ease-in-out;
  164. }
  165. &.without-filmstrip {
  166. transition: 1.2s ease-in-out;
  167. transition-delay: 0.1s;
  168. }
  169. }
  170. /**
  171. * Apply hardware acceleration to prevent flickering on scroll. The
  172. * selectors are specific to icon wrappers to prevent fixed position dialogs
  173. * and tooltips from getting a new location context due to translate3d.
  174. */
  175. .connection-indicator,
  176. .remote-video-menu-trigger,
  177. .indicator-icon-container {
  178. transform: translate3d(0, 0, 0);
  179. }
  180. .indicator-container {
  181. float: none;
  182. }
  183. /**
  184. * FIXME: disable pointer to allow any elements moved below to still be
  185. * clickable. The real fix would to make sure those moved elements are
  186. * actually part of the toolbar instead of positioning being faked.
  187. */
  188. .videocontainer__toolbar {
  189. pointer-events: none;
  190. > div {
  191. pointer-events: none;
  192. }
  193. .toolbar-icon {
  194. pointer-events: all;
  195. }
  196. }
  197. }