github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 13:41:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Style video elements, show descriptions (#10040)

Browse Source 
It's a stop gap – ideally we would generate a thumbnail for uploaded videos. For now, a bit of intentionality in the style and a pinch of context should do.
This commit is contained in:
Jarek Radosz 2020-06-17 12:38:00 +02:00 committed by GitHub
parent a859d507e7
commit 7d289a4f3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js
View File

@ -147,6 +147,7 @@ function videoHTML(token, opts) {
const preloadType = opts.secureMedia ? "none" : "metadata"; const preloadType = opts.secureMedia ? "none" : "metadata";
const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : ""; const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : "";
return `<div class="video-container"> return `<div class="video-container">
<p class="video-description">${opts.alt}</p>
<video width="100%" height="100%" preload="${preloadType}" controls> <video width="100%" height="100%" preload="${preloadType}" controls>
<source src="${src}" ${dataOrigSrcAttr}> <source src="${src}" ${dataOrigSrcAttr}>
<a href="${src}">${src}</a> <a href="${src}">${src}</a>
@ -176,7 +177,8 @@ function renderImageOrPlayableMedia(tokens, idx, options, env, slf) {
// see https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer // see https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
// handles |video and |audio alt transformations for image tags // handles |video and |audio alt transformations for image tags
const mediaOpts = { const mediaOpts = {
secureMedia: options.discourse.limitedSiteSettings.secureMedia secureMedia: options.discourse.limitedSiteSettings.secureMedia,
alt: split[0]
}; };
if (split[1] === "video") { if (split[1] === "video") {
return videoHTML(token, mediaOpts); return videoHTML(token, mediaOpts);

1
app/assets/javascripts/pretty-text/addon/white-lister.js
View File

@ -185,6 +185,7 @@ export const DEFAULT_LIST = [
"span.excerpt", "span.excerpt",
"div.excerpt", "div.excerpt",
"div.video-container", "div.video-container",
"p.video-description",
"span.hashtag", "span.hashtag",
"span.mention", "span.mention",
"strike", "strike",

9
app/assets/stylesheets/common/base/onebox.scss
View File

@ -703,6 +703,9 @@ aside.onebox.stackexchange .onebox-body {
// Force oneboxed videos to 16:9 aspect ratio // Force oneboxed videos to 16:9 aspect ratio
.onebox.video-onebox, .onebox.video-onebox,
.video-container { .video-container {
background: $primary-very-low;
border: 1px solid $primary-low;
border-radius: 2px;
position: relative; position: relative;
padding: 0 0 56.25% 0; padding: 0 0 56.25% 0;
width: 100%; width: 100%;
@ -714,6 +717,12 @@ aside.onebox.stackexchange .onebox-body {
} }
} }
.video-description {
color: $primary-medium;
margin: 1rem;
position: absolute;
}
.onebox-placeholder-container { .onebox-placeholder-container {
position: relative; position: relative;
width: 100%; width: 100%;

3
test/javascripts/lib/pretty-text-test.js
View File

@ -1030,6 +1030,7 @@ QUnit.test("video - secure media enabled", assert => {
"![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)", "![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
{ siteSettings: { secure_media: true } }, { siteSettings: { secure_media: true } },
`<p><div class="video-container"> `<p><div class="video-container">
<p class="video-description">baby shark</p>
<video width="100%" height="100%" preload="none" controls> <video width="100%" height="100%" preload="none" controls>
<source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4"> <source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
<a href="/404">/404</a> <a href="/404">/404</a>
@ -1055,6 +1056,7 @@ QUnit.test("video", assert => {
assert.cooked( assert.cooked(
"![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)", "![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
`<p><div class="video-container"> `<p><div class="video-container">
<p class="video-description">baby shark</p>
<video width="100%" height="100%" preload="metadata" controls> <video width="100%" height="100%" preload="metadata" controls>
<source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4"> <source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
<a href="/404">/404</a> <a href="/404">/404</a>
@ -1081,6 +1083,7 @@ QUnit.test("video - mapped url - secure media enabled", assert => {
lookupUploadUrls: lookupUploadUrls lookupUploadUrls: lookupUploadUrls
}, },
`<p><div class="video-container"> `<p><div class="video-container">
<p class="video-description">baby shark</p>
<video width="100%" height="100%" preload="none" controls> <video width="100%" height="100%" preload="none" controls>
<source src="/secure-media-uploads/original/3X/c/b/test.mp4"> <source src="/secure-media-uploads/original/3X/c/b/test.mp4">
<a href="/secure-media-uploads/original/3X/c/b/test.mp4">/secure-media-uploads/original/3X/c/b/test.mp4</a> <a href="/secure-media-uploads/original/3X/c/b/test.mp4">/secure-media-uploads/original/3X/c/b/test.mp4</a>