PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-30 14:57:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Video upload previews (#141)

Browse source
This commit is contained in:
liamwhite 2021-10-05 21:31:50 -04:00 committed by GitHub
parent f6a4474fec
commit 10fc962da6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/views/_images.scss
View file

@ -286,7 +286,7 @@ span.spoiler div.image-container {
&:empty { &:empty {
display: none; display: none;
} }
img { img, video {
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
} }

19
assets/js/upload.js
View file

@ -6,12 +6,26 @@ import { fetchJson, handleError } from './utils/requests';
import { $, $$, hideEl, showEl, makeEl, clearEl } from './utils/dom'; import { $, $$, hideEl, showEl, makeEl, clearEl } from './utils/dom';
import { addTag } from './tagsinput'; import { addTag } from './tagsinput';
const MATROSKA_MAGIC = 0x1a45dfa3;
function scrapeUrl(url) { function scrapeUrl(url) {
return fetchJson('POST', '/images/scrape', { url }) return fetchJson('POST', '/images/scrape', { url })
.then(handleError) .then(handleError)
.then(response => response.json()); .then(response => response.json());
} }
function elementForEmbeddedImage({ camo_url }) {
// The upload was fetched from the scraper and is a path name
if (typeof camo_url === 'string') {
return makeEl('img', { className: 'scraper-preview--image', src: camo_url });
}
// The upload was fetched from a file input and is an ArrayBuffer
const objectUrl = URL.createObjectURL(new Blob([camo_url]));
const tagName = new DataView(camo_url).getUint32(0) === MATROSKA_MAGIC ? 'video' : 'img';
return makeEl(tagName, { className: 'scraper-preview--image', src: objectUrl });
}
function setupImageUpload() { function setupImageUpload() {
const imgPreviews = $('#js-image-upload-previews'); const imgPreviews = $('#js-image-upload-previews');
if (!imgPreviews) return; if (!imgPreviews) return;
@ -26,8 +40,7 @@ function setupImageUpload() {
clearEl(imgPreviews); clearEl(imgPreviews);
images.forEach((image, index) => { images.forEach((image, index) => {
const img = makeEl('img', { className: 'scraper-preview--image' }); const img = elementForEmbeddedImage(image);
img.src = image.camo_url;
const imgWrap = makeEl('span', { className: 'scraper-preview--image-wrapper' }); const imgWrap = makeEl('span', { className: 'scraper-preview--image-wrapper' });
imgWrap.appendChild(img); imgWrap.appendChild(img);
@ -72,7 +85,7 @@ function setupImageUpload() {
}); });
// Watch for files added to the form // Watch for files added to the form
fileField.addEventListener('change', () => { fileField.files.length && reader.readAsDataURL(fileField.files[0]); }); fileField.addEventListener('change', () => { fileField.files.length && reader.readAsArrayBuffer(fileField.files[0]); });
// Watch for [Fetch] clicks // Watch for [Fetch] clicks
fetchButton.addEventListener('click', () => { fetchButton.addEventListener('click', () => {

4
lib/philomena_web/plugs/content_security_policy_plug.ex
View file

@ -31,8 +31,8 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
{:frame_src, frame_src || ["'none'"]}, {:frame_src, frame_src || ["'none'"]},
{:form_action, ["'self'"]}, {:form_action, ["'self'"]},
{:manifest_src, ["'self'"]}, {:manifest_src, ["'self'"]},
{:img_src, ["'self'", "data:", cdn_uri, camo_uri]}, {:img_src, ["'self'", "blob:", "data:", cdn_uri, camo_uri]},
{:media_src, ["'self'", "data:", cdn_uri, camo_uri]}, {:media_src, ["'self'", "blob:", "data:", cdn_uri, camo_uri]},
{:block_all_mixed_content, []} {:block_all_mixed_content, []}
] ]