Commit 03b6d693 authored by Seb's avatar Seb
Browse files

Styling changes

parent 3307ecb8
......@@ -25,7 +25,7 @@ class WagtailVideoField(FileField):
# Error messages
self.error_messages['invalid_video_format'] = _(
"Not a valid video."
"Not a valid video. Content type was %s."
)
self.error_messages['file_too_large'] = _(
......@@ -38,7 +38,7 @@ class WagtailVideoField(FileField):
def check_video_file_format(self, f):
if not f.content_type.startswith('video'):
raise ValidationError(self.error_messages['invalid_video_format'])
raise ValidationError(self.error_messages['invalid_video_format'] % f.content_type)
def check_video_file_size(self, f):
# Upload size checking can be disabled by setting max upload size to None
......
......@@ -6,11 +6,9 @@ import shutil
import subprocess
import tempfile
import threading
from tempfile import NamedTemporaryFile
import django
from django.conf import settings
from django.core.exceptions import ImproperlyConfigured
from django.core.files.base import ContentFile
from django.core.urlresolvers import reverse
from django.db import models
......@@ -18,8 +16,6 @@ from django.db.models.signals import pre_delete
from django.dispatch.dispatcher import receiver
from django.utils.encoding import python_2_unicode_compatible
from django.utils.translation import ugettext_lazy as _
from enum import Enum
from PIL import Image
from taggit.managers import TaggableManager
from unidecode import unidecode
from wagtail.wagtailadmin.taggable import TagSearchable
......@@ -122,7 +118,7 @@ class AbstractVideo(CollectionMember, TagSearchable):
self.file.field.storage.base_location,
self.get_upload_to(self.filename()))
try:
output_dir = tempfile.mkdtemp()
......@@ -188,7 +184,8 @@ class AbstractVideo(CollectionMember, TagSearchable):
if transcode.processing is False:
transcode.processing = True
transcode.save(update_fields=['processing']) # Lock the transcode model
transcode.error_messages = ''
transcode.save(update_fields=['processing', 'error_message']) # Lock the transcode model
TranscodingThread(transcode).start()
else:
pass # TODO Queue?
......@@ -205,7 +202,7 @@ class Video(AbstractVideo):
'tags',
)
# TODO move out to utils.py or somewhere appropriate
class TranscodingThread(threading.Thread):
def __init__(self, transcode, **kwargs):
super().__init__(**kwargs)
......@@ -233,7 +230,7 @@ class TranscodingThread(threading.Thread):
output_file,
], stdin=FNULL, stderr=subprocess.STDOUT)
elif media_format is MediaFormats.mp4:
subprocess.check_call(args + [
subprocess.check_output(args + [
'-codec:v', 'libx264',
'-preset', 'slow', # TODO Checkout other presets
'-crf', '22',
......@@ -241,7 +238,7 @@ class TranscodingThread(threading.Thread):
output_file,
], stdin=FNULL, stderr=subprocess.STDOUT)
elif media_format is MediaFormats.webm:
subprocess.check_call(args + [
subprocess.check_output(args + [
'-codec:v', 'libvpx',
'-crf', '10',
'-b:v', '1M',
......
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden:active, .visuallyhidden:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.visuallyvisible {
clip: none;
height: auto;
width: auto;
margin: auto;
overflow: visible;
position: initial;
}
.replace-file-input {
display: inline-block;
position: relative;
overflow: hidden;
padding-bottom: 2px;
}
.replace-file-input [type=file] {
padding: 0;
opacity: 0;
position: absolute;
top: 0;
right: 0;
direction: ltr;
width: auto;
display: block;
font-size: 5em;
}
.replace-file-input [type=file]:hover {
cursor: pointer;
}
.replace-file-input:hover {
cursor: pointer;
}
.replace-file-input:hover button {
background-color: #358c8b;
}
.upload-list > li {
padding: 1em;
}
.upload-list .left {
text-align: center;
}
.upload-list .preview {
width: 150px;
min-height: 150px;
display: block;
position: relative;
text-align: center;
max-width: 100%;
margin: auto;
}
.upload-list .progress,
.upload-list .thumb,
.upload-list .thumb:before,
.upload-list canvas,
.upload-list img {
position: absolute;
max-width: 100%;
}
.upload-list .progress {
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
z-index: 4;
top: 60%;
left: 20%;
right: 20%;
width: 60%;
}
.upload-list .thumb {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
}
.upload-list .thumb:before,
.upload-list canvas,
.upload-list img {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.upload-list .thumb:before {
z-index: 2;
top: 0;
width: 1em;
font-size: 10em;
line-height: 1.4em;
color: #f0f0f0;
}
.upload-list canvas,
.upload-list img {
z-index: 3;
}
.upload-list .hasthumb:before {
display: none;
}
.upload-list .status-msg {
display: none;
}
.upload-list .upload-complete .progress {
opacity: 0;
}
.upload-list .upload-success .status-msg.success {
display: block;
}
.upload-list .upload-failure {
border-color: #cd3238;
}
.upload-list .upload-failure .preview {
display: none;
}
.upload-list .upload-failure .status-msg.failure {
display: block;
}
.transcode-error {
color: red;
}
.processing {
opacity: 0.8;
font-weight: bold;
}
@import 'wagtailadmin/scss/variables';
@import 'wagtailadmin/scss/mixins';
@import 'wagtailadmin/scss/grid';
.replace-file-input {
display: inline-block;
position: relative;
overflow: hidden;
padding-bottom: 2px;
[type=file] {
padding: 0;
opacity: 0;
position: absolute;
top: 0;
right: 0;
direction: ltr;
width: auto;
display: block;
font-size: 5em;
&:hover {
cursor: pointer;
}
}
&:hover {
cursor: pointer;
button {
background-color: $color-teal-darker;
}
}
}
.upload-list {
> li {
padding: 1em;
}
.left {
text-align: center;
}
.preview {
width: 150px;
min-height: 150px;
display: block;
position: relative;
text-align: center;
max-width: 100%;
margin: auto;
}
.progress,
.thumb,
.thumb:before,
canvas,
img {
position: absolute;
max-width: 100%;
}
.progress {
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
z-index: 4;
top: 60%;
left: 20%;
right: 20%;
width: 60%;
}
.thumb {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
}
.thumb:before,
canvas,
img {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.thumb:before {
z-index: 2;
top: 0;
width: 1em;
font-size: 10em;
line-height: 1.4em;
color: lighten($color-grey-4, 4%);
}
canvas,
img {
z-index: 3;
}
.hasthumb {
&:before {
display: none;
}
}
.status-msg {
display: none;
}
.upload-complete {
.progress {
opacity: 0;
}
}
.upload-success {
.status-msg.success {
display: block;
}
}
.upload-failure {
border-color: $color-red;
.preview {
display: none;
}
.status-msg.failure {
display: block;
}
}
}
......@@ -3,8 +3,8 @@
{% block titletag %}{% trans "Add multiple videos" %}{% endblock %}
{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'wagtailvideos/css/add-multiple.css' %}" type="text/css" />
<!-- it's cheating but we're just going to use wagtailimages css since they should look identical anyways -->
<link rel="stylesheet" href="{% static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />
{% endblock %}
{% block content %}
......
......@@ -2,6 +2,11 @@
{% load staticfiles i18n wagtailvideos_tags %}
{% block titletag %}{% blocktrans with title=video.title %}Editing video {{ title }}{% endblocktrans %}{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'wagtailvideos/css/edit-video.css' %}" type="text/css" />
{% endblock %}
{% block extra_js %}
{{ block.super }}
......@@ -26,7 +31,6 @@
{% csrf_token %}
<ul class="fields">
{% for field in form %}
{% if field.name == 'file' %}
{% include "wagtailvideos/videos/_file_field_as_li.html" %}
{% elif field.is_hidden %}
......@@ -34,7 +38,6 @@
{% else %}
{% include "wagtailadmin/shared/field_as_li.html" %}
{% endif %}
{% endfor %}
<li>
<input type="submit" class="button" value="{% trans 'Save' %}" />
......@@ -56,12 +59,18 @@
{% for transcode in transcodes %}
<li>
{{ transcode.media_format }}
{% if transcode.processing %} (Processing... hold tight) {% endif %}
{% if transcode.error_message %} <pre> {{ transcode.error_message }}</pre> {% endif %}
{% if transcode.processing %} <span class='processing'>(Processing... hold tight) </span>{% endif %}
{% if transcode.error_message %}
<span class='transcode-error'>ERROR:</span>
<div class='transcode-error'>
<pre> {{ transcode.error_message }}</pre>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
<h3 class="label">Create transcode</h3>
<form action="{% url 'wagtailvideos:create_transcode' video.id %}" method="POST">
<ul class="fields">
{% csrf_token %}
......
......@@ -36,10 +36,13 @@ class VideoNode(template.Node):
def render(self, context):
video = self.video.resolve(context)
sources = ["<source src='{1}' type='video/{2}'>"
.format(flatatt(self.attrs), video.url, video.file_ext)] # TODO get mimetype properly (extension is not always reliable)
for transcode in video.transcodes.exclude(processing=True, file=''):
sources.append("<source src='{0}' type='video/{1}' >".format(transcode.media_format.value, transcode.media_format.name))
sources = ["<source src='{0}' type='video/{1}'>"
.format(video.url, video.file_ext)] # TODO get mimetype properly (extension is not always reliable)
transcodes = video.transcodes.exclude(processing=True).filter(error_message__exact='')
for transcode in transcodes:
sources.append("<source src='{0}' type='video/{1}' >".format(transcode.url, transcode.media_format.name))
sources.append("<p>Sorry, your browser doesn't support playback for this video</p>")
return mark_safe(
"<video {0}>{1}</video>".format(flatatt(self.attrs), "\n".join(sources)))
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment