aaarmstark ideas

lichess-org · Dec 18, 2024 · d3554c5 · d3554c5
1 parent 916b6e9
commit d3554c5
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 49 deletions.
diff --git a/public/images/icons/play-btn-twitch.svg b/public/images/icons/play-btn-twitch.svg
diff --git a/public/images/icons/play-btn-youtube.svg b/public/images/icons/play-btn-youtube.svg
diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss
@@ -12,6 +12,7 @@ body {
 main.is-relay {
   .relay-tour {
     grid-area: relay-tour;
+    overflow: visible;
     &__side {
       grid-area: side;
     }

diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
@@ -117,7 +117,7 @@ $hover-bg: $m-primary_bg--mix-30;
         flex: 0 0 50%;
       }
       line-height: 0;
-      img {
+      > img {
         width: 100%;
         @include broken-img(2 / 1);
       }

diff --git a/ui/analyse/css/study/relay/_video-player.scss b/ui/analyse/css/study/relay/_video-player.scss
@@ -30,42 +30,70 @@
 
 #video-player-placeholder.link {
   cursor: pointer;
+  outline-offset: -3px;
+  outline: 3px solid $m-bad--alpha-50;
+  --c-stream-link-hover: #{$c-bad};
+
+  &.twitch {
+    outline-color: $m-clas--alpha-70;
+    --c-stream-link-hover: #{$c-clas};
+  }
 
   .image {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    background: center / cover;
+    overflow: hidden;
+    inset: 0;
+    filter: blur(4px) brightness(0.8);
   }
+
   .play-button {
     position: absolute;
     pointer-events: none;
+    transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0.6;
+    width: 112px;
   }
-  .text {
+
+  &:has(.text-box) .play-button {
+    top: 56%;
+  }
+
+  .text-box {
     @extend %flex-column;
     position: absolute;
+    pointer-events: none;
     justify-content: center;
     align-items: center;
-    bottom: 5%;
+    top: 10%;
     left: 10%;
     right: 10%;
-    pointer-events: none;
   }
-  .text div {
+
+  .text-box div {
     margin: auto;
     pointer-events: none;
     border-radius: 5px;
     border: 1px solid #888;
-    padding: 5px;
+    padding: 5px 8px;
     text-align: center;
     line-height: normal;
-    color: #222e;
-    background-color: #dddd;
+    color: #ddde;
+    background-color: #333d;
+    font-family: 'Noto Sans';
+    font-size: 1.2em;
   }
-  &:hover:not(:has(.video-player-close:hover)) .play-button {
-    opacity: 1;
+
+  &:hover:not(:has(.video-player-close:hover)) {
+    box-shadow:
+      0 0 5px var(--c-stream-link-hover),
+      0 0 20px var(--c-stream-link-hover);
+    .play-button {
+      filter: brightness(1.2);
+    }
+    .image {
+      filter: blur(4px) brightness(0.7);
+    }
   }
 }
diff --git a/ui/analyse/src/study/relay/videoPlayer.ts b/ui/analyse/src/study/relay/videoPlayer.ts
@@ -67,58 +67,33 @@ export class VideoPlayer {
   };
 
   render = () => {
+    const platform = !this.o.redirect?.includes('twitch.tv') ? 'youtube' : 'twitch';
     return this.o.embed
       ? h('div#video-player-placeholder', {
           hook: {
             insert: (vnode: VNode) => this.cover(vnode.elm as HTMLElement),
             update: (_, vnode: VNode) => this.cover(vnode.elm as HTMLElement),
           },
         })
-      : h('div#video-player-placeholder.link', {}, [
-          h('img.image', {
-            attrs: { src: this.o.image! },
+      : h(`div#video-player-placeholder.link.${platform}`, {}, [
+          h('div.image', {
+            attrs: { style: `background-image: url(${this.o.image})` },
             hook: onInsert((el: HTMLElement) => {
               el.addEventListener('click', e => {
                 if (e.ctrlKey || e.shiftKey) window.open(this.o.redirect, '_blank');
                 else this.onEmbed('ps');
               });
-              el.addEventListener('contextmenu', () => window.open(this.o.redirect, '_blank'));
+              //el.addEventListener('contextmenu', () => window.open(this.o.redirect, '_blank'));
             }),
           }),
           h('img.video-player-close', {
             attrs: { src: site.asset.flairSrc('symbols.cancel') },
             hook: onInsert((el: HTMLElement) => el.addEventListener('click', () => this.onEmbed('no'))),
           }),
-          this.o.text && h('div.text', h('div', this.o.text)),
-          h(
-            'svg.play-button',
-            {
-              attrs: {
-                xmlns: 'http://www.w3.org/2000/svg',
-                viewBox: '0 0 100 100',
-                width: '100',
-                height: '100',
-              },
-            },
-            [
-              h('circle', {
-                attrs: {
-                  cx: '50',
-                  cy: '50',
-                  r: '40',
-                  stroke: '#666',
-                  'stroke-width': '10',
-                  fill: '#dddd',
-                },
-              }),
-              h('path', {
-                attrs: {
-                  d: 'M 32 28 A 5 5 0 0 1 37 23 L 75 45 A 6 6 0 0 1 75 55 L 37 77 A 5 5 0 0 1 32 72 Z',
-                  fill: '#666',
-                },
-              }),
-            ],
-          ),
+          this.o.text && h('div.text-box', h('div', this.o.text)),
+          h('img.play-button', {
+            attrs: { src: site.asset.url(`images/icons/play-btn-${platform}.svg`) },
+          }),
         ]);
   };