diff options
| -rw-r--r-- | css/icons.scss | 10 | ||||
| -rw-r--r-- | src/FilesSidebarCallViewApp.vue | 39 |
2 files changed, 42 insertions, 7 deletions
diff --git a/css/icons.scss b/css/icons.scss index 20d03346c..82a0ee6c9 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -8,7 +8,8 @@ @include icon-black-white('emoji-smile', 'spreed', 1); @include icon-black-white('lobby', 'spreed', 1); -.app-Talk { +.app-Talk, +#call-container { // We always want to use the white icons, this is why we don't use var(--color-white) here. .icon-public { background-image: url(icon-color-path('public', 'actions', 'fff', 1, true)); @@ -87,3 +88,10 @@ color: var(--color-primary-text); } } + +.app-files { + // Needed to use white color also in dark mode. + .app-sidebar__close.forced-white { + background-image: url(icon-color-path('close', 'actions', 'fff', 1, true)); + } +} diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue index b663a7cd7..65802f3c6 100644 --- a/src/FilesSidebarCallViewApp.vue +++ b/src/FilesSidebarCallViewApp.vue @@ -19,18 +19,21 @@ --> <template> - <p v-show="isInCall"> - Call in progress - </p> + <CallView v-show="isInCall" :token="token" /> </template> <script> import { PARTICIPANT } from './constants' +import CallView from './components/CallView/CallView' export default { name: 'FilesSidebarCallViewApp', + components: { + CallView, + }, + data() { return { // Needed for reactivity. @@ -108,7 +111,7 @@ export default { // property in styleSheet objects. Therefore it is necessary to // check the rules themselves, but as the order is undefined a // matching rule needs to be looked for in all of them. - if (sheet.cssRules.length !== 1) { + if (sheet.cssRules.length !== 2) { continue } @@ -126,6 +129,12 @@ export default { // "insertRule" calls below need to be kept in sync with the // condition above. + // Shadow is added to forced white icons to ensure that they are + // visible even against a bright video background. + // White color of forced white icons needs to be set in "icons.scss" + // file to be able to use the SCSS functions. + style.sheet.insertRule('.app-sidebar-header .forced-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); }', 0) + style.sheet.insertRule('.app-sidebar-header .hidden-by-call { display: none !important; }', 0) }, @@ -144,7 +153,9 @@ export default { for (let i = 0; i < header.children.length; i++) { const headerChild = header.children[i] - if (!headerChild.classList.contains('app-sidebar__close')) { + if (headerChild.classList.contains('app-sidebar__close')) { + headerChild.classList.add('forced-white') + } else { headerChild.classList.add('hidden-by-call') } } @@ -165,7 +176,9 @@ export default { for (let i = 0; i < header.children.length; i++) { const headerChild = header.children[i] - if (!headerChild.classList.contains('app-sidebar__close')) { + if (headerChild.classList.contains('app-sidebar__close')) { + headerChild.classList.remove('forced-white') + } else { headerChild.classList.remove('hidden-by-call') } } @@ -178,3 +191,17 @@ export default { }, } </script> + +<style lang="scss" scoped> +#call-container { + position: relative; + + /* Prevent shadows of videos from leaking on other elements. */ + overflow: hidden; + + /* Show the call container in a 16/9 proportion based on the sidebar + * width. */ + padding-bottom: 56.25%; + max-height: 56.25%; +} +</style> |