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

This reverts commit 7d289a4f3e.

Now that 36bad0c31f is in and we have video previews on all platforms, the commit that's being reverted is no longer needed. In the worst case scenario, the video description is clipped under the video poster if the video aspect ratio is other than 16:9. This commit removes descriptions and the custom style for the video elements.

# Conflicts:
#	app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js
#	test/javascripts/lib/pretty-text-test.js
This commit is contained in:
Jarek Radosz 2020-07-17 23:31:01 +02:00 committed by GitHub
parent 72c44b3b19
commit de79f19947
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 2 additions and 18 deletions

View File

@ -141,12 +141,11 @@ export function extractDataAttribute(str) {
// videoHTML and audioHTML follow the same HTML syntax
// as oneboxer.rb when dealing with these formats
function videoHTML(token, opts) {
function videoHTML(token) {
const src = token.attrGet("src");
const origSrc = token.attrGet("data-orig-src");
const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : "";
return `<div class="video-container">
<p class="video-description">${opts.alt}</p>
<video width="100%" height="100%" preload="metadata" controls>
<source src="${src}" ${dataOrigSrcAttr}>
<a href="${src}">${src}</a>
@ -174,11 +173,8 @@ function renderImageOrPlayableMedia(tokens, idx, options, env, slf) {
// markdown-it supports returning HTML instead of continuing to render the current token
// see https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
// handles |video and |audio alt transformations for image tags
const mediaOpts = {
alt: split[0]
};
if (split[1] === "video") {
return videoHTML(token, mediaOpts);
return videoHTML(token);
} else if (split[1] === "audio") {
return audioHTML(token);
}

View File

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

View File

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

View File

@ -1029,7 +1029,6 @@ QUnit.test("video", assert => {
assert.cooked(
"![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
`<p><div class="video-container">
<p class="video-description">baby shark</p>
<video width="100%" height="100%" preload="metadata" controls>
<source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
<a href="/404">/404</a>
@ -1056,7 +1055,6 @@ QUnit.test("video - mapped url - secure media enabled", assert => {
lookupUploadUrls: lookupUploadUrls
},
`<p><div class="video-container">
<p class="video-description">baby shark</p>
<video width="100%" height="100%" preload="metadata" controls>
<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>