paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 05:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

videos: Present identical buttons for all video types.

Browse Source 
This displays the same Play button with the same hover styles on
all videos, whether YouTube, embedded, or uploaded.
This commit is contained in:
Karl Stolley
2025-03-05 14:01:32 -06:00
committed by Tim Abbott
parent 80dcd53b59
commit 1b9f1d2163
2 changed files with 2 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/message_list_hover.ts
View File

@@ -109,39 +109,6 @@ export function initialize(): void {
},
);
function handle_video_preview_mouseenter($elem: JQuery): void {
// Set image height and css vars for play button position, if not done already
const setPosition = !$elem.data("entered-before");
if (setPosition) {
const imgW = $elem.find("img")[0]!.width;
const imgH = $elem.find("img")[0]!.height;
// Ensure height doesn't change on mouse enter
$elem.css("height", `${imgH}px`);
// variables to set play button position
const marginLeft = (imgW - 30) / 2;
const marginTop = (imgH - 26) / 2;
$elem.css("--margin-left", `${marginLeft}px`).css("--margin-top", `${marginTop}px`);
$elem.data("entered-before", true);
}
$elem.addClass("fa fa-play");
}
$("#main_div").on("mouseenter", ".youtube-video a", function (this: HTMLElement) {
handle_video_preview_mouseenter($(this));
});
$("#main_div").on("mouseleave", ".youtube-video a", function () {
$(this).removeClass("fa fa-play");
});
$("#main_div").on("mouseenter", ".embed-video a", function (this: HTMLElement) {
handle_video_preview_mouseenter($(this));
});
$("#main_div").on("mouseleave", ".embed-video a", function () {
$(this).removeClass("fa fa-play");
});
$("body").on("mouseover", ".message_edit_content", function () {
$(this).closest(".message_row").find(".copy_message").show();
});

17
web/styles/rendered_markdown.css
View File

@@ -606,7 +606,8 @@
}
.message_inline_video,
.message_inline_animated_image_still {
.message_inline_animated_image_still,
.youtube-video a[data-id] {
&:hover {
&::after {
transform: scale(1);
@@ -638,20 +639,6 @@
}
}
.youtube-video .fa-play::before,
.embed-video .fa-play::before {
position: absolute;
margin: var(--margin-top, 32px) 0 0 var(--margin-left, 45px);
padding: 5px 8px 5px 10px;
font-size: 12px;
border-radius: 4px;
background-color: hsl(0deg 0% 0%);
color: hsl(0deg 0% 100%);
opacity: 0.7;
top: 0;
left: 0;
}
.message_embed {
display: block;
position: relative;