Clean up video styling (#160461)

This commit is contained in:
Matt Bierner 2022-09-08 17:28:14 -07:00 committed by GitHub
parent 151ba12384
commit d7d18aa0da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 22 deletions

View file

@ -3,7 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
html, body {
html {
width: 100%;
height: 100%;
text-align: center;
@ -11,25 +11,15 @@ html, body {
body {
padding: 5px 10px;
box-sizing: border-box;
width: calc(100% - 20px);
height: calc(100% - 10px);
display: flex;
justify-content: center;
align-items: center;
-webkit-user-select: none;
user-select: none;
}
.video-container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container.loading,
.container.error {
display: flex;
justify-content: center;
align-items: center;
}
.loading-indicator {
width: 30px;
height: 30px;

View file

@ -26,10 +26,6 @@
let hasLoadedMedia = false;
// Elements
const container = document.createElement('div');
container.className = 'video-container';
document.body.appendChild(container);
const video = document.createElement('video');
if (settings.src !== null) {
video.src = settings.src;
@ -44,7 +40,7 @@
document.body.classList.remove('loading');
document.body.classList.add('ready');
container.append(video);
document.body.append(video);
}
video.addEventListener('error', e => {

View file

@ -79,7 +79,7 @@ class VideoPreview extends MediaPreview {
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data: ${cspSource}; media-src ${cspSource}; script-src 'nonce-${nonce}'; style-src ${cspSource} 'nonce-${nonce}';">
<meta id="settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
</head>
<body class="container loading">
<body class="loading">
<div class="loading-indicator"></div>
<div class="loading-error">
<p>${localize('preview.videoLoadError', "An error occurred while loading the video file.")}</p>