diff options
author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2021-02-16 14:46:58 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-16 14:46:58 +0300 |
commit | 6a1f7ecda9674d7f2d70ac6d819cfac10d074064 (patch) | |
tree | d50d3a6c268a91f51fa184618910149ddab98970 | |
parent | b98f55cf6ddec7ca8c5be309e17b0b680d3a9984 (diff) | |
parent | fcd6d3d31eec7d1491826aa6d301824d476e3148 (diff) |
Merge pull request #5186 from nextcloud/techdebt/noid/screenshot-mode
Add a screenshot mode with images and fake audio/video states
-rw-r--r-- | docs/screenshotplaceholders/placeholder-0.jpeg | bin | 0 -> 693130 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-1.jpeg | bin | 0 -> 459033 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-2.jpeg | bin | 0 -> 878183 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-3.jpeg | bin | 0 -> 480170 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-4.jpeg | bin | 0 -> 702889 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-5.jpeg | bin | 0 -> 581323 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-6.jpeg | bin | 0 -> 560811 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-7.jpeg | bin | 0 -> 523170 bytes | |||
-rw-r--r-- | docs/screenshotplaceholders/placeholder-8.jpeg | bin | 0 -> 529489 bytes | |||
-rw-r--r-- | src/components/CallView/CallView.vue | 2 | ||||
-rw-r--r-- | src/components/CallView/Grid/Grid.vue | 128 |
11 files changed, 119 insertions, 11 deletions
diff --git a/docs/screenshotplaceholders/placeholder-0.jpeg b/docs/screenshotplaceholders/placeholder-0.jpeg Binary files differnew file mode 100644 index 000000000..a0499dc4e --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-0.jpeg diff --git a/docs/screenshotplaceholders/placeholder-1.jpeg b/docs/screenshotplaceholders/placeholder-1.jpeg Binary files differnew file mode 100644 index 000000000..ecf5bfede --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-1.jpeg diff --git a/docs/screenshotplaceholders/placeholder-2.jpeg b/docs/screenshotplaceholders/placeholder-2.jpeg Binary files differnew file mode 100644 index 000000000..81e820538 --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-2.jpeg diff --git a/docs/screenshotplaceholders/placeholder-3.jpeg b/docs/screenshotplaceholders/placeholder-3.jpeg Binary files differnew file mode 100644 index 000000000..3af445876 --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-3.jpeg diff --git a/docs/screenshotplaceholders/placeholder-4.jpeg b/docs/screenshotplaceholders/placeholder-4.jpeg Binary files differnew file mode 100644 index 000000000..32f68d856 --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-4.jpeg diff --git a/docs/screenshotplaceholders/placeholder-5.jpeg b/docs/screenshotplaceholders/placeholder-5.jpeg Binary files differnew file mode 100644 index 000000000..0c8b36cd1 --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-5.jpeg diff --git a/docs/screenshotplaceholders/placeholder-6.jpeg b/docs/screenshotplaceholders/placeholder-6.jpeg Binary files differnew file mode 100644 index 000000000..ec1913984 --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-6.jpeg diff --git a/docs/screenshotplaceholders/placeholder-7.jpeg b/docs/screenshotplaceholders/placeholder-7.jpeg Binary files differnew file mode 100644 index 000000000..4082fa44e --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-7.jpeg diff --git a/docs/screenshotplaceholders/placeholder-8.jpeg b/docs/screenshotplaceholders/placeholder-8.jpeg Binary files differnew file mode 100644 index 000000000..4a50de2cc --- /dev/null +++ b/docs/screenshotplaceholders/placeholder-8.jpeg diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index 764d8c738..ab190aef3 100644 --- a/src/components/CallView/CallView.vue +++ b/src/components/CallView/CallView.vue @@ -174,7 +174,7 @@ export default { type: String, required: true, }, - // Determines wether this component is used in the sidebar + // Determines whether this component is used in the sidebar isSidebar: { type: Boolean, default: false, diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue index 4a62a524f..60dab1c36 100644 --- a/src/components/CallView/Grid/Grid.vue +++ b/src/components/CallView/Grid/Grid.vue @@ -79,16 +79,35 @@ <!-- Grid developer mode --> <template v-if="devMode"> <div - v-for="video in displayedVideos" + v-for="(video, key) in displayedVideos" :key="video" class="dev-mode-video video" - v-text="video" /> - <h1 class="dev-mode__title"> + :class="{'dev-mode-screenshot': screenshotMode}"> + <img :src="placeholderImage(key)"> + <VideoBottomBar + :has-shadow="false" + :model="placeholderModel(key)" + :shared-data="placeholderSharedData(key)" + :token="token" + :participant-name="placeholderName(key)" /> + </div> + <h1 v-if="!screenshotMode" class="dev-mode__title"> Dev mode on ;-) </h1> + <div v-else + class="dev-mode-video--self video" + :style="{'background': 'url(' + placeholderImage(8) + ')'}"> + <LocalMediaControls + :has-shadow="false" + :model="placeholderModel(8)" + :local-call-participant-model="placeholderModel(8)" + :shared-data="placeholderSharedData(8)" + :token="token" + :participant-name="placeholderName(8)" /> + </div> </template> <LocalVideo - v-if="!isStripe" + v-if="!isStripe && !screenshotMode" ref="localVideo" class="video" :is-grid="true" @@ -110,7 +129,7 @@ </button> </div> <LocalVideo - v-if="isStripe" + v-if="isStripe && !screenshotMode" ref="localVideo" class="video" :fit-video="true" @@ -130,7 +149,7 @@ class="pages-indicator__dot" :class="{'pages-indicator__dot--active': index === currentPage }" /> </div> - <div v-if="devMode" class="dev-mode__data"> + <div v-if="devMode && !screenshotMode" class="dev-mode__data"> <p>GRID INFO</p> <p>Videos (total): {{ videosCount }}</p> <p>Displayed videos n: {{ displayedVideos.length }}</p> @@ -153,20 +172,25 @@ import debounce from 'debounce' import Video from '../shared/Video' import LocalVideo from '../shared/LocalVideo' import { subscribe, unsubscribe } from '@nextcloud/event-bus' +import { generateFilePath } from '@nextcloud/router' import EmptyCallView from '../shared/EmptyCallView' +import VideoBottomBar from '../shared/VideoBottomBar' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' import ChevronRight from 'vue-material-design-icons/ChevronRight' import ChevronLeft from 'vue-material-design-icons/ChevronLeft' import ChevronUp from 'vue-material-design-icons/ChevronUp' import ChevronDown from 'vue-material-design-icons/ChevronDown' +import LocalMediaControls from '../shared/LocalMediaControls' export default { name: 'Grid', components: { + LocalMediaControls, Video, LocalVideo, EmptyCallView, + VideoBottomBar, ChevronRight, ChevronLeft, ChevronUp, @@ -211,12 +235,16 @@ export default { type: Boolean, default: false, }, + screenshotMode: { + type: Boolean, + default: false, + }, /** * The number of dummy videos in dev mode */ dummies: { type: Number, - default: 10, + default: 8, }, /** * Display the overflow of videos in separate pages; @@ -510,6 +538,67 @@ export default { } }, + placeholderImage(i) { + return generateFilePath('spreed', 'docs', 'screenshotplaceholders/placeholder-' + i + '.jpeg') + }, + + placeholderName(i) { + switch (i) { + case 0: + return 'Sandra' + case 1: + return 'Chris' + case 2: + return 'Edeltraut' + case 3: + return 'Arthur' + case 4: + return 'Roeland' + case 5: + return 'Vanessa' + case 6: + return 'Emily' + case 7: + return 'Tobias' + case 8: + return 'Vincent' + } + }, + + placeholderModel(i) { + return { + attributes: { + audioAvailable: i === 1 || i === 2 || i === 4 || i === 5 || i === 6 || i === 7 || i === 8, + audioEnabled: i === 8, + videoAvailable: true, + screen: false, + currentVolume: 0.75, + volumeThreshold: 0.75, + localScreen: false, + raisedHand: { + state: i === 0 || i === 1 || i === 6, + }, + }, + forceMute: () => {}, + on: () => {}, + off: () => {}, + getWebRtc: () => { + return { + connection: { + getSendVideoIfAvailable: () => {}, + }, + } + }, + } + }, + + placeholderSharedData() { + return { + videoEnabled: true, + screenVisible: false, + } + }, + // whenever the document is resized, re-set the 'clientWidth' variable handleResize(event) { // TODO: properly handle resizes when not on first page: @@ -737,12 +826,31 @@ export default { } .dev-mode-video { - border: 1px solid #00FF41; - color: #00FF41; + &:not(.dev-mode-screenshot) { + border: 1px solid #00FF41; + color: #00FF41; + } font-size: 30px; text-align: center; vertical-align: middle; - padding-top: 80px; + position: relative; + + &--self { + background-size: cover !important; + + & > div { + width: 100%; + bottom: calc(-100% + 50px); + position: relative; + left: calc(50% - 88px); + } + } + + img { + object-fit: cover; + height: 100%; + width: 100% + } } .dev-mode__title { |