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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. // @flow
  2. import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
  3. import { ColorPalette } from '../../../base/styles';
  4. import { SMALL_THUMBNAIL_SIZE } from '../../constants';
  5. /**
  6. * Size for the Avatar.
  7. */
  8. export const AVATAR_SIZE = 50;
  9. /**
  10. * The styles of the feature filmstrip.
  11. */
  12. export default {
  13. /**
  14. * The FlatList content container styles
  15. */
  16. contentContainer: {
  17. alignItems: 'center',
  18. justifyContent: 'center',
  19. flex: 0
  20. },
  21. /**
  22. * The display name container.
  23. */
  24. displayNameContainer: {
  25. alignSelf: 'center',
  26. bottom: 0,
  27. flex: 1,
  28. margin: 4,
  29. position: 'absolute'
  30. },
  31. /**
  32. * The style of the narrow {@link Filmstrip} version which displays
  33. * thumbnails in a row at the bottom of the screen.
  34. */
  35. filmstripNarrow: {
  36. flexDirection: 'row',
  37. flexGrow: 0,
  38. justifyContent: 'flex-end',
  39. marginBottom: 5
  40. },
  41. /**
  42. * The style of the wide {@link Filmstrip} version which displays thumbnails
  43. * in a column on the short size of the screen.
  44. *
  45. * NOTE: width is calculated based on the children, but it should also align
  46. * to {@code FILMSTRIP_SIZE}.
  47. */
  48. filmstripWide: {
  49. bottom: 0,
  50. flexDirection: 'column',
  51. flexGrow: 0,
  52. position: 'absolute',
  53. right: 0,
  54. top: 0
  55. },
  56. /**
  57. * The styles for the FlatList container.
  58. */
  59. flatListContainer: {
  60. flexGrow: 1,
  61. flexShrink: 1,
  62. flex: 0
  63. },
  64. /**
  65. * The styles for the FlatList.
  66. */
  67. flatList: {
  68. flex: 0
  69. },
  70. /**
  71. * Container of the {@link LocalThumbnail}.
  72. */
  73. localThumbnail: {
  74. alignContent: 'stretch',
  75. alignSelf: 'stretch',
  76. aspectRatio: 1,
  77. flexShrink: 0,
  78. flexDirection: 'row'
  79. },
  80. moderatorIndicatorContainer: {
  81. bottom: 4,
  82. position: 'absolute',
  83. right: 4
  84. },
  85. /**
  86. * The style of the scrollview containing the remote thumbnails.
  87. */
  88. scrollView: {
  89. flexGrow: 0
  90. },
  91. /**
  92. * The style of a participant's Thumbnail which renders either the video or
  93. * the avatar of the associated participant.
  94. */
  95. thumbnail: {
  96. alignItems: 'stretch',
  97. backgroundColor: ColorPalette.appBackground,
  98. borderColor: '#424242',
  99. borderRadius: 3,
  100. borderStyle: 'solid',
  101. borderWidth: 1,
  102. flex: 1,
  103. height: SMALL_THUMBNAIL_SIZE,
  104. justifyContent: 'center',
  105. margin: 2,
  106. maxHeight: SMALL_THUMBNAIL_SIZE,
  107. maxWidth: SMALL_THUMBNAIL_SIZE,
  108. overflow: 'hidden',
  109. position: 'relative',
  110. width: SMALL_THUMBNAIL_SIZE
  111. },
  112. /**
  113. * The thumbnails indicator container.
  114. */
  115. thumbnailIndicatorContainer: {
  116. alignSelf: 'stretch',
  117. bottom: 4,
  118. flex: 1,
  119. flexDirection: 'row',
  120. left: 4,
  121. position: 'absolute'
  122. },
  123. thumbnailTopIndicatorContainer: {
  124. padding: 4,
  125. position: 'absolute',
  126. top: 0
  127. },
  128. thumbnailTopLeftIndicatorContainer: {
  129. left: 0
  130. },
  131. thumbnailTopRightIndicatorContainer: {
  132. right: 0
  133. }
  134. };
  135. /**
  136. * Color schemed styles for the @{code Thumbnail} component.
  137. */
  138. ColorSchemeRegistry.register('Thumbnail', {
  139. /**
  140. * Tinting style of the on-stage participant thumbnail.
  141. */
  142. activeThumbnailTint: {
  143. backgroundColor: schemeColor('activeParticipantTint')
  144. },
  145. /**
  146. * Coloring if the thumbnail background.
  147. */
  148. participantViewStyle: {
  149. backgroundColor: schemeColor('background')
  150. },
  151. /**
  152. * Pinned video thumbnail style.
  153. */
  154. thumbnailPinned: {
  155. borderColor: schemeColor('activeParticipantHighlight'),
  156. shadowColor: schemeColor('activeParticipantHighlight'),
  157. shadowOffset: {
  158. height: 5,
  159. width: 5
  160. },
  161. shadowRadius: 5
  162. }
  163. });