Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support wider relay layouts #14938

Draft
wants to merge 12 commits into
base: master
Choose a base branch
from
Draft

Support wider relay layouts #14938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d98b351
layout tweaks for testy
schlawg Mar 19, 2024
276f382
refactor dupe code
schlawg Mar 19, 2024
1e5b831
better resizing
schlawg Mar 19, 2024
ac302b2
fix move list margin
schlawg Mar 19, 2024
db297cf
action menu wont grow
schlawg Mar 20, 2024
4562a95
fix grid collapse on action menu and video in tour view
schlawg Mar 21, 2024
88ea2de
cleanup
schlawg Mar 21, 2024
b731aaa
bite sized miniboards, no scroll UI when watching stream
schlawg Apr 2, 2024
ae2a975
merge from upstream/master
schlawg Apr 12, 2024
d22dbce
partial fullscreen
schlawg Apr 12, 2024
1e1867c
integrate fullscreen support from canary
schlawg Apr 12, 2024
909ae36
Merge branch 'master' into four-column-relay-hack
ornicar May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion app/controllers/RelayRound.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,12 @@ final class RelayRound(
pinnedStreamer <- rt.tour.pinnedStreamer.so(env.streamer.api.find)
streamer <- embed.so(env.streamer.api.find)
stream <- streamer.soFu(env.streamer.liveStreamApi.of)
videoUrls = stream.flatMap(_.stream).map(_.urls(netDomain))
videoUrls =
if embed.contains("fake") then
lila.streamer.Stream
.Urls(s"https://www.youtube.com/embed/zeo3AmLAuZc?autoplay=1&disablekb=1&color=white", "")
.some
else stream.flatMap(_.stream).map(_.urls(netDomain))
crossSiteIsolation = videoUrls.isEmpty
data = env.relay.jsonView.makeData(
rt.tour.withRounds(rounds.map(_.round)),
Expand Down
1 change: 0 additions & 1 deletion ui/analyse/css/_analyse.base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,4 @@
@import 'side';
@import 'context-menu';
@import 'player-clock';
@import 'persistence';
@import 'keyboard';
24 changes: 0 additions & 24 deletions ui/analyse/css/_persistence.scss
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions ui/analyse/css/_tools.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,6 @@
transition: visibility 0s;
}

.persistence {
color: $c-good;
@media (max-width: at-most($xx-small)) {
display: none;
}
}

.active {
margin-top: -3px;
padding-top: 3px;
Expand Down
154 changes: 140 additions & 14 deletions ui/analyse/css/study/relay/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,22 @@ body {
main.is-relay {
.relay-tour {
grid-area: relay-tour;
&__side {
grid-area: side;
}
.relay-tour__side {
grid-area: side;
}
.relay-tour__header__image {
display: flex;
&.video {
display: block;
}
justify-content: end;
> img {
width: unset;
max-height: 200px;
}
}

.analyse__round-training,
.relay-admin__container {
grid-area: relay-admin;
Expand All @@ -29,11 +41,48 @@ main.is-relay {
.mchat {
flex: 1 1 50%;
}

&.wide .spacer {
// empty div used to maximize grid container sizing of rightmost column(s)
width: 9999px;
visibility: hidden;
}
}
}

main.is-relay.wide {
.now-playing {
grid-template-columns: repeat(auto-fill, minmax(min(100%/3, max(220px, 100%/8)), 1fr));
}
}

main.is-relay.wide.with-video {
max-height: calc(100vh - $site-header-outer-height - $block-gap);

.relay-tour {
@extend %flex-column;
overflow: hidden;
}
.relay-tour__header {
flex-shrink: 0;
}
.relay-tour__header__image {
display: block !important;
}

.study__multiboard {
overflow-y: auto;
min-height: 0;
}
}

/* tour overview */
main.is-relay.has-relay-tour {
#video-player-placeholder {
width: unset;
height: 100%;
}

grid-template-rows: auto;
grid-template-areas:
'relay-tour'
Expand All @@ -44,9 +93,11 @@ main.is-relay.has-relay-tour {
}

@include mq-at-least-col2 {
grid-template-rows: 80vh;
grid-template-rows: 50vh 30vh;
grid-template-areas:
'relay-tour . side'
'relay-tour . chat'
'relay-tour . uchat'
'relay-tour . relay-admin';
.mchat {
margin-top: $analyse-block-gap;
Expand All @@ -59,10 +110,16 @@ main.is-relay.has-relay-tour {

@include mq-at-least-col3 {
grid-template-columns: $col3-uniboard-side $analyse-block-gap var(---col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
grid-template-rows: $mq-col3-side-height;
grid-template-rows: repeat(2, calc($mq-col3-side-height / 2));
grid-template-areas:
'side . relay-tour relay-tour relay-tour'
'chat . relay-tour relay-tour relay-tour'
'uchat . relay-tour relay-tour relay-tour'
'relay-admin . relay-tour relay-tour relay-tour';

&.wide {
grid-template-columns: $col3-uniboard-side $analyse-block-gap 1fr;
}
}
}

Expand All @@ -77,18 +134,21 @@ main.analyse.is-relay:not(.has-relay-tour) {
'side'
'relay-admin'
'under';

.mchat,
.chat__members {
display: none;
}

@include mq-at-least-col2 {
grid-template-rows: repeat(2, calc(var(---cg-height) / 2)) 2.5em;
grid-template-areas:
'board gauge side'
'board gauge tools'
'board . controls'
'under under under'
'relay-admin . .';
'board gauge side'
'board gauge tools'
'board . controls'
'under under under'
'relay-admin . .';

.analyse__underboard {
margin-top: unset;
.is3d & {
Expand All @@ -99,25 +159,91 @@ main.analyse.is-relay:not(.has-relay-tour) {
flex-wrap: nowrap;
}
}

@include mq-at-least-col3 {
grid-template-rows: var(---cg-height) 2.5em;
grid-template-rows: calc(var(---cg-height) * 0.6) calc(var(---cg-height) * 0.4) 2.5em fit-content(0);
grid-template-areas:
'side . board gauge tools'
'side . board . controls'
'side . under under under'
'relay-admin . under under under';
'side . board gauge tools'
'chat . board gauge tools'
'chat . board . controls'
'chat . under under under'
'uchat . under under under'
'relay-admin . under under under';

.relay-tour__side {
max-height: $mq-col3-side-height;
}

.mchat,
.chat__members {
display: flex;
}

.mchat {
margin-top: $analyse-block-gap;
flex: 5 0 30%;
}

&.wide {
grid-template-rows: var(--cg-height) 2.5em 1fr auto;
grid-template-columns: $col3-uniboard-side $analyse-block-gap var(--col3-uniboard-width) $analyse-block-gap 1fr 1fr;
grid-template-areas:
'side . board gauge tools chat'
'side . board . controls uchat'
'side . under under under under'
'relay-admin . under under under under';

.mchat,
.chat__members {
margin-top: 0;
margin-inline-start: $analyse-block-gap;
}

#video-player-placeholder {
grid-area: video;
height: 100%;
}
}

&.wide.with-video {
overflow: hidden;
grid-template-rows: calc(var(--cg-height) * 9 / 16) calc(var(--cg-height) * 7 / 16) 2.5em;
grid-template-areas:
'side . board gauge video video'
'side . board gauge tools chat'
'side . board . controls uchat'
'side . under under under under'
'relay-admin . under under under under';

.analyse__tools,
.mchat {
margin-top: $analyse-block-gap;
}
.analyse__underboard {
display: flex;
flex-flow: column;
overflow-y: hidden;
}
}

&.wide.with-video.tiny-board {
grid-template-rows: repeat(2, calc(var(--cg-height) / 2)) 2.5em;
grid-template-areas:
'side . board gauge tools video'
'side . board gauge tools chat'
'side . board . controls uchat'
'side . under under under under'
'relay-admin . under under under under';
.analyse__tools {
margin-top: 0;
}

#video-player-placeholder {
margin-inline-start: $analyse-block-gap;
}
}
}

.eval-chart-and-training {
@extend %flex-center;
gap: $analyse-block-gap;
Expand Down
13 changes: 13 additions & 0 deletions ui/analyse/src/ctrl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,19 @@ export default class AnalyseCtrl {
this.persistence?.save();
};

fullscreen = () => {
const el = document.getElementById('main-wrap') as any;
//const doc = document as any;
if (document.fullscreenElement) document.exitFullscreen();
//else if (doc.webkitFullscreenElement) doc.webkitExitFullscreen();
//else if (doc.mozFullScreenElement) doc.mozCancelFullScreen();
//else if (doc.msFullscreenElement) doc.msExitFullscreen();
else if (el.requestFullscreen) el.requestFullscreen();
//else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
//else if (el.mozRequestFullScreen) el.mozRequestFullScreen();
//else if (el.msRequestFullscreen) el.msRequestFullscreen();
};

flip = () => {
this.flipped = !this.flipped;
this.study?.onFlip();
Expand Down
1 change: 1 addition & 0 deletions ui/analyse/src/keyboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const bind = (ctrl: AnalyseCtrl) => {
if (ctrl.studyPractice) return;

kbd
.bind('F', ctrl.fullscreen)
.bind('f', ctrl.flip)
.bind('?', () => {
ctrl.keyboardHelp = !ctrl.keyboardHelp;
Expand Down
6 changes: 3 additions & 3 deletions ui/analyse/src/study/relay/relayCtrl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import RelayTeams from './relayTeams';
import RelayLeaderboard from './relayLeaderboard';
import { StudyChapters } from '../studyChapters';
import { MultiCloudEval } from '../multiCloudEval';
import { onWindowResize as videoPlayerOnWindowResize } from './videoPlayerView';
import { addResizeListener } from './relayView';

export const relayTabs = ['overview', 'boards', 'teams', 'leaderboard'] as const;
export type RelayTab = (typeof relayTabs)[number];
Expand Down Expand Up @@ -52,7 +52,7 @@ export default class RelayCtrl {
setInterval(() => this.redraw(true), 1000);

const pinned = data.pinned;
if (data.videoUrls) videoPlayerOnWindowResize(this.redraw);
addResizeListener(this.redraw);
if (pinned && this.pinStreamer()) this.streams.push([pinned.userId, pinned.name]);

site.pubsub.on('socket.in.crowd', d => {
Expand Down Expand Up @@ -123,7 +123,7 @@ export default class RelayCtrl {
window.location.replace(url);
};

isShowingPinnedImage = () => site.storage.get(`relay.hide-image.${this.id}`) !== 'true';
allowPinnedImageOnUniboards = () => site.storage.get(`relay.hide-image.${this.id}`) !== 'true';

private socketHandlers = {
relayData: (d: RelayData) => {
Expand Down
Loading
Loading