fixes for pinned image on mobile (round 1) (rebased)

lichess-org · Apr 5, 2024 · ee19525 · ee19525
1 parent 627ac01
commit ee19525
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 62 deletions.
diff --git a/ui/analyse/src/study/relay/relayTourView.ts b/ui/analyse/src/study/relay/relayTourView.ts
@@ -11,31 +11,29 @@ import StudyCtrl from '../studyCtrl';
 import { toggle } from 'common/controls';
 import * as xhr from 'common/xhr';
 import { teamsView } from './relayTeams';
-import { makeChat } from '../../view/components';
+import { makeChat, type RelayViewContext } from '../../view/components';
 import { gamesList } from './relayGames';
 import { renderStreamerMenu, renderPinnedImage } from './relayView';
 import { renderVideoPlayer } from './videoPlayerView';
 import { leaderboardView } from './relayLeaderboard';
 import { gameLinksListener } from '../studyChapters';
 
-export default function (ctrl: AnalyseCtrl): VNode | undefined {
-  const study = ctrl.study,
-    relay = study?.relay;
-  if (!study || !relay?.tourShow()) return undefined;
-  const tab = relay.tab();
+export function renderRelayTour(ctx: RelayViewContext): VNode | undefined {
+  const tab = ctx.relay.tab();
   const content =
     tab == 'overview'
-      ? overview(relay, ctrl)
+      ? overview(ctx)
       : tab == 'boards'
-      ? games(relay, study, ctrl)
+      ? games(ctx)
       : tab == 'teams'
-      ? teams(relay, study, ctrl)
-      : leaderboard(relay, ctrl);
+      ? teams(ctx)
+      : leaderboard(ctx);
 
   return h('div.box.relay-tour', content);
 }
 
-export const tourSide = (ctrl: AnalyseCtrl, study: StudyCtrl, relay: RelayCtrl) => {
+export const tourSide = (ctx: RelayViewContext) => {
+  const { ctrl, study, relay } = ctx;
   const empty = study.chapters.list.looksNew();
   return h(
     'aside.relay-tour__side',
@@ -95,18 +93,18 @@ const startCountdown = (relay: RelayCtrl) => {
   ]);
 };
 
-const leaderboard = (relay: RelayCtrl, ctrl: AnalyseCtrl) => [
-  ...header(relay, ctrl),
-  relay.leaderboard && leaderboardView(relay.leaderboard),
+const leaderboard = (ctx: RelayViewContext) => [
+  ...header(ctx),
+  ctx.relay.leaderboard && leaderboardView(ctx.relay.leaderboard),
 ];
 
-const overview = (relay: RelayCtrl, ctrl: AnalyseCtrl) => [
-  ...header(relay, ctrl),
-  relay.data.tour.markup
+const overview = (ctx: RelayViewContext) => [
+  ...header(ctx),
+  ctx.relay.data.tour.markup
     ? h('div.relay-tour__markup', {
-        hook: innerHTML(relay.data.tour.markup, () => relay.data.tour.markup!),
+        hook: innerHTML(ctx.relay.data.tour.markup, () => ctx.relay.data.tour.markup!),
       })
-    : h('div.relay-tour__markup', relay.data.tour.description),
+    : h('div.relay-tour__markup', ctx.relay.data.tour.description),
 ];
 
 const groupSelect = (relay: RelayCtrl, group: RelayGroup) => {
@@ -181,22 +179,22 @@ const roundSelect = (relay: RelayCtrl, study: StudyCtrl) => {
   ]);
 };
 
-const games = (relay: RelayCtrl, study: StudyCtrl, ctrl: AnalyseCtrl) => [
-  ...header(relay, ctrl),
-  study.chapters.list.looksNew() ? undefined : multiBoardView(study.multiBoard, study),
+const games = (ctx: RelayViewContext) => [
+  ...header(ctx),
+  ctx.study.chapters.list.looksNew() ? undefined : multiBoardView(ctx.study.multiBoard, ctx.study),
 ];
 
-const teams = (relay: RelayCtrl, study: StudyCtrl, ctrl: AnalyseCtrl) => [
-  ...header(relay, ctrl),
-  relay.teams && teamsView(relay.teams, study.chapters.list),
+const teams = (ctx: RelayViewContext) => [
+  ...header(ctx),
+  ctx.relay.teams && teamsView(ctx.relay.teams, ctx.study.chapters.list),
 ];
 
-const header = (relay: RelayCtrl, ctrl: AnalyseCtrl) => {
+const header = (ctx: RelayViewContext) => {
+  const { ctrl, relay, allowVideo } = ctx;
   const d = relay.data,
     study = ctrl.study!,
     group = d.group,
-    embedVideo =
-      d.videoUrls && window.getComputedStyle(document.body).getPropertyValue('--allow-video') === 'true';
+    embedVideo = d.videoUrls && allowVideo;
 
   return [
     h('div.relay-tour__header', [
@@ -212,7 +210,7 @@ const header = (relay: RelayCtrl, ctrl: AnalyseCtrl) => {
         embedVideo
           ? renderVideoPlayer(relay)
           : relay.pinStreamer() && d.pinned?.image
-          ? renderPinnedImage(relay)
+          ? renderPinnedImage(ctx)
           : d.tour.image
           ? h('img', { attrs: { src: d.tour.image } })
           : study.members.isOwner()

diff --git a/ui/analyse/src/study/relay/relayView.ts b/ui/analyse/src/study/relay/relayView.ts
@@ -1,11 +1,11 @@
 import { view as cevalView } from 'ceval';
 import { onClickAway } from 'common';
-import { looseH as h, onInsert, bind } from 'common/snabbdom';
+import { looseH as h, onInsert, bind, MaybeVNode, VNode } from 'common/snabbdom';
 import * as licon from 'common/licon';
 import AnalyseCtrl from '../../ctrl';
 import { view as keyboardView } from '../../keyboard';
-import type * as studyDeps from '../../study/studyDeps';
-import { tourSide } from '../../study/relay/relayTourView';
+import type * as studyDeps from '../studyDeps';
+import { tourSide, renderRelayTour } from './relayTourView';
 import { renderVideoPlayer } from './videoPlayerView';
 import {
   type RelayViewContext,
@@ -23,19 +23,19 @@ export function relayView(
   study: studyDeps.StudyCtrl,
   relay: RelayCtrl,
   deps: typeof studyDeps,
-) {
-  const ctx: RelayViewContext = { ...viewContext(ctrl, deps), study, deps, relay };
+): VNode {
+  const ctx: RelayViewContext = { ...viewContext(ctrl, deps), study, deps, relay, allowVideo: allowVideo() };
 
-  const renderTourView = () => [ctx.tourUi, tourSide(ctrl, study, relay), deps.relayManager(relay, study)];
+  const renderTourView = () => [renderRelayTour(ctx), tourSide(ctx), deps.relayManager(relay, study)];
 
   return renderMain(ctx, [
     ctrl.keyboardHelp && keyboardView(ctrl),
     deps.studyView.overboard(study),
-    ...(ctx.tourUi ? renderTourView() : renderBoardView(ctx)),
+    ...(ctx.hasRelayTour ? renderTourView() : renderBoardView(ctx)),
   ]);
 }
 
-export function renderStreamerMenu(relay: RelayCtrl) {
+export function renderStreamerMenu(relay: RelayCtrl): VNode {
   const makeUrl = (id: string) => {
     const url = new URL(location.href);
     url.searchParams.set('embed', id);
@@ -60,14 +60,14 @@ export function renderStreamerMenu(relay: RelayCtrl) {
   );
 }
 
-export function renderPinnedImage(relay: RelayCtrl) {
+export function renderPinnedImage(ctx: RelayViewContext): MaybeVNode {
+  const { allowVideo, relay } = ctx;
   if (!relay.pinStreamer() || !relay.data.pinned?.image) return undefined;
   return h('img.link', {
     attrs: { src: relay.data.pinned.image },
     hook: bind('click', () => {
-      if (window.getComputedStyle(document.body).getPropertyValue('--allow-video') !== 'true') {
-        const url = `${window.location.origin}/streamer/${relay.data.pinned!.userId}`;
-        window.open(url, '_blank', 'noopener'); //if (!window.open(url, '_blank', 'noopener')) window.location.href = url; //safari
+      if (!allowVideo) {
+        window.open(`${window.location.origin}/streamer/${relay.data.pinned!.userId}`, '_blank', 'noopener');
         return;
       }
       const url = new URL(location.href);
@@ -77,22 +77,27 @@ export function renderPinnedImage(relay: RelayCtrl) {
   });
 }
 
+export function allowVideo(): boolean {
+  return window.getComputedStyle(document.body).getPropertyValue('--allow-video') === 'true';
+}
+
 function renderBoardView(ctx: RelayViewContext) {
   const { ctrl, deps, study, gaugeOn, relay } = ctx;
   return [
     renderBoard(ctx),
     gaugeOn && cevalView.renderGauge(ctrl),
-    renderTools(
-      ctx,
-      relay.data.videoUrls
-        ? renderVideoPlayer(relay)
-        : relay.isShowingPinnedImage()
-        ? renderPinnedImage(relay)
-        : undefined,
-    ),
+    renderTools(ctx, renderEmbedPlaceholder(ctx)),
     renderControls(ctrl),
     renderUnderboard(ctx),
-    tourSide(ctrl, study, relay),
+    tourSide(ctx),
     deps.relayManager(relay, study),
   ];
 }
+
+function renderEmbedPlaceholder(ctx: RelayViewContext): MaybeVNode {
+  return ctx.relay.data.videoUrls
+    ? renderVideoPlayer(ctx.relay)
+    : ctx.relay.isShowingPinnedImage()
+    ? renderPinnedImage(ctx)
+    : undefined;
+}
diff --git a/ui/analyse/src/study/relay/videoPlayerView.ts b/ui/analyse/src/study/relay/videoPlayerView.ts
@@ -1,5 +1,6 @@
 import RelayCtrl from './relayCtrl';
 import { looseH as h, Redraw, VNode } from 'common/snabbdom';
+import { allowVideo } from './relayView';
 
 let player: VideoPlayer;
 
@@ -19,7 +20,7 @@ export function onWindowResize(redraw: Redraw) {
   window.addEventListener(
     'resize',
     () => {
-      const allow = window.getComputedStyle(document.body).getPropertyValue('--allow-video') === 'true';
+      const allow = allowVideo();
       const placeholder = document.getElementById('video-player-placeholder') ?? undefined;
       player?.cover(allow ? placeholder : undefined);
       if (showingVideo === allow && !!placeholder) return;

diff --git a/ui/analyse/src/study/studyDeps.ts b/ui/analyse/src/study/studyDeps.ts
@@ -1,9 +1,8 @@
 import relayManager from './relay/relayManagerView';
-import relayTour from './relay/relayTourView';
 import renderPlayerBars from './playerBars';
 import StudyCtrl from './studyCtrl';
 
-export { relayManager, relayTour, renderPlayerBars, StudyCtrl };
+export { relayManager, renderPlayerBars, StudyCtrl };
 
 export * as gbEdit from './gamebook/gamebookEdit';
 export * as gbPlay from './gamebook/gamebookPlayView';

diff --git a/ui/analyse/src/view/components.ts b/ui/analyse/src/view/components.ts
@@ -3,7 +3,15 @@ import { VNode } from 'snabbdom';
 import { parseFen } from 'chessops/fen';
 import { defined } from 'common';
 import * as licon from 'common/licon';
-import { bind, bindNonPassive, onInsert, dataIcon, VNodeKids, looseH as h } from 'common/snabbdom';
+import {
+  bind,
+  bindNonPassive,
+  onInsert,
+  dataIcon,
+  VNodeKids,
+  looseH as h,
+  MaybeVNode,
+} from 'common/snabbdom';
 import { playable } from 'game';
 import { bindMobileMousedown, isMobile } from 'common/device';
 import * as materialView from 'game/view/material';
@@ -28,7 +36,6 @@ import { render as renderTreeView } from '../treeView/treeView';
 import * as gridHacks from './gridHacks';
 import { dispatchChessgroundResize } from 'common/resize';
 import serverSideUnderboard from '../serverSideUnderboard';
-
 import StudyCtrl from '../study/studyCtrl';
 import RelayCtrl from '../study/relay/relayCtrl';
 import type * as studyDeps from '../study/studyDeps';
@@ -38,6 +45,7 @@ export interface ViewContext {
   deps?: typeof studyDeps;
   study?: StudyCtrl;
   relay?: RelayCtrl;
+  allowVideo?: boolean;
   concealOf?: ConcealOf;
   showCevalPvs: boolean;
   menuIsOpen: boolean;
@@ -46,14 +54,17 @@ export interface ViewContext {
   playerStrips: [VNode, VNode] | undefined;
   gaugeOn: boolean;
   needsInnerCoords: boolean;
-  tourUi?: VNode;
+  hasRelayTour: boolean;
 }
+
 export interface StudyViewContext extends ViewContext {
   study: StudyCtrl;
   deps: typeof studyDeps;
 }
+
 export interface RelayViewContext extends StudyViewContext {
   relay: RelayCtrl;
+  allowVideo: boolean;
 }
 
 export function viewContext(ctrl: AnalyseCtrl, deps?: typeof studyDeps): ViewContext {
@@ -71,12 +82,12 @@ export function viewContext(ctrl: AnalyseCtrl, deps?: typeof studyDeps): ViewCon
     playerStrips: playerBars ? undefined : renderPlayerStrips(ctrl),
     gaugeOn: ctrl.showEvalGauge(),
     needsInnerCoords: ctrl.data.pref.showCaptured || !!ctrl.showEvalGauge() || !!playerBars,
-    tourUi: deps?.relayTour(ctrl),
+    hasRelayTour: ctrl.study?.relay?.tourShow() || false,
   };
 }
 
 export function renderMain(
-  { ctrl, playerBars, gaugeOn, gamebookPlayView, needsInnerCoords, tourUi }: ViewContext,
+  { ctrl, playerBars, gaugeOn, gamebookPlayView, needsInnerCoords, hasRelayTour }: ViewContext,
   kids: VNodeKids,
 ): VNode {
   return h(
@@ -89,7 +100,7 @@ export function renderMain(
           if (!!playerBars != document.body.classList.contains('header-margin')) {
             $('body').toggleClass('header-margin', !!playerBars);
           }
-          !tourUi && makeChat(ctrl, c => elm.appendChild(c));
+          !hasRelayTour && makeChat(ctrl, c => elm.appendChild(c));
           gridHacks.start(elm);
         },
         update(_, _2) {
@@ -105,7 +116,7 @@ export function renderMain(
         'gauge-on': gaugeOn,
         'has-players': !!playerBars,
         'gamebook-play': !!gamebookPlayView,
-        'has-relay-tour': !!tourUi,
+        'has-relay-tour': hasRelayTour,
         'is-relay': ctrl.study?.relay !== undefined,
         'analyse-hunter': ctrl.opts.hunter,
         'analyse--wiki': !!ctrl.wiki && !ctrl.study,
@@ -115,9 +126,9 @@ export function renderMain(
   );
 }
 
-export function renderTools({ ctrl, deps, concealOf }: ViewContext, videoPlayer?: VNode) {
+export function renderTools({ ctrl, deps, concealOf, allowVideo }: ViewContext, embedded?: MaybeVNode) {
   return h(addChapterId(ctrl.study, 'div.analyse__tools'), [
-    videoPlayer,
+    allowVideo && embedded,
     ...(ctrl.actionMenu()
       ? [actionMenu(ctrl)]
       : [