diff --git a/public/images/icons/play-btn-twitch.svg b/public/images/icons/play-btn-twitch.svg
new file mode 100644
index 000000000000..0d3c56c58596
--- /dev/null
+++ b/public/images/icons/play-btn-twitch.svg
@@ -0,0 +1,15 @@
+
+
diff --git a/public/images/icons/play-btn-youtube.svg b/public/images/icons/play-btn-youtube.svg
new file mode 100644
index 000000000000..a757e4dbd0c7
--- /dev/null
+++ b/public/images/icons/play-btn-youtube.svg
@@ -0,0 +1,21 @@
+
+
+
\ No newline at end of file
diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss
index f6c9fdc79f63..9dc2b3f68aa5 100644
--- 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
index 039efc9d0162..f134b983b6e9 100644
--- 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
index 8d8c27623bb3..dcd5691ba570 100644
--- 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
index 3d125e653bfe..b1ed4631c892 100644
--- a/ui/analyse/src/study/relay/videoPlayer.ts
+++ b/ui/analyse/src/study/relay/videoPlayer.ts
@@ -67,6 +67,7 @@ export class VideoPlayer {
};
render = () => {
+ const platform = !this.o.redirect?.includes('twitch.tv') ? 'youtube' : 'twitch';
return this.o.embed
? h('div#video-player-placeholder', {
hook: {
@@ -74,51 +75,25 @@ export class VideoPlayer {
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`) },
+ }),
]);
};