mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-18 21:09:42 -05:00
feat: Video Trimmer and more
This commit is contained in:
Markos Gogoulos
GitHub
82
templates/cms/crispy_custom_field.html
Normal file
82
templates/cms/crispy_custom_field.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{% load crispy_forms_field %}
|
||||
|
||||
|
||||
<style>
|
||||
/* Form group styling */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Control label container styling */
|
||||
.control-label-container {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Label styling */
|
||||
.control-label {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Help text styling */
|
||||
.help-text-inline {
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
margin-left: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Full width fields */
|
||||
.controls.full-width input,
|
||||
.controls.full-width textarea,
|
||||
.controls.full-width select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Error styling */
|
||||
.invalid-feedback {
|
||||
color: #dc3545;
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
button[type="submit"],
|
||||
input[type="submit"] {
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover,
|
||||
input[type="submit"]:hover {
|
||||
background-color: #218838;
|
||||
border-color: #1e7e34;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="form-group{% if field.errors %} has-error{% endif %}">
|
||||
<div class="control-label-container">
|
||||
{% if field.label %}
|
||||
<label for="{{ field.id_for_label }}" class="control-label">
|
||||
{{ field.label }}
|
||||
{% if field.help_text %}
|
||||
<span class="help-text-inline">- {{ field.help_text|safe }}</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="controls {% if field.name == 'title' or field.name == 'new_tags' or field.name == 'description' %}full-width{% endif %}">
|
||||
{% crispy_field field %}
|
||||
{% if field.errors %}
|
||||
<div class="error-container">
|
||||
{% for error in field.errors %}
|
||||
<p class="invalid-feedback">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
44
templates/cms/edit_chapters.html
Normal file
44
templates/cms/edit_chapters.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{% extends "base.html" %}
|
||||
{% load crispy_forms_tags %}
|
||||
{% load static %}
|
||||
|
||||
{% block headtitle %}Edit video chapters - {{PORTAL_NAME}}{% endblock headtitle %}
|
||||
|
||||
{% block topimports %}
|
||||
<link href="{% static "video_editor/video-editor.css" %}" rel="preload" as="style">
|
||||
<link href="{% static "video_editor/video-editor.css" %}" rel="stylesheet">
|
||||
<script>
|
||||
window.MEDIA_DATA = {
|
||||
videoUrl: "",
|
||||
mediaId: "{{ media_id }}",
|
||||
chapters: [
|
||||
{
|
||||
id: "1",
|
||||
title: "Chapter AAA",
|
||||
timestamp: 0
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Chapter BBB",
|
||||
timestamp: 10
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Chapter CCC",
|
||||
timestamp: 20
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<script src="{% static 'video_editor/video-editor.js' %}"></script>
|
||||
{%endblock topimports %}
|
||||
|
||||
{% block innercontent %}
|
||||
|
||||
<div class="user-action-form-wrap">
|
||||
{% include "cms/media_nav.html" with active_tab="chapters" %}
|
||||
<div class="user-action-form-inner" style="max-width: 1280px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);">
|
||||
<div id="video-editor-chapters-root"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock innercontent %}
|
||||
@@ -7,16 +7,12 @@
|
||||
{% block headermeta %}{% endblock headermeta %}
|
||||
|
||||
{% block innercontent %}
|
||||
|
||||
<div class="user-action-form-wrap">
|
||||
<div class="user-action-form-inner">
|
||||
<h1>Edit Media</h1>
|
||||
<form enctype="multipart/form-data" action="" method="post" class="post-form">
|
||||
<div class="user-action-form-wrap">
|
||||
{% include "cms/media_nav.html" with active_tab="metadata" %}
|
||||
<div style="max-width: 900px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);">
|
||||
{% csrf_token %}
|
||||
{{ form|crispy }}
|
||||
<button class="primaryAction" type="submit">Update Media</button>
|
||||
</form>
|
||||
</div>
|
||||
{% crispy form %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock innercontent %}
|
||||
|
||||
{% endblock innercontent %}
|
||||
33
templates/cms/edit_video.html
Normal file
33
templates/cms/edit_video.html
Normal file
@@ -0,0 +1,33 @@
|
||||
{% extends "base.html" %}
|
||||
{% load crispy_forms_tags %}
|
||||
{% load static %}
|
||||
|
||||
{% block headtitle %}Edit video - {{PORTAL_NAME}}{% endblock headtitle %}
|
||||
|
||||
{% block topimports %}
|
||||
<link href="{% static "video_editor/video-editor.css" %}" rel="preload" as="style">
|
||||
<link href="{% static "video_editor/video-editor.css" %}" rel="stylesheet">
|
||||
|
||||
<script src="{% static 'video_editor/video-editor.js' %}"></script>
|
||||
|
||||
<script>
|
||||
window.MEDIA_DATA = {
|
||||
videoUrl: "{{ media_file_path }}",
|
||||
mediaId: "{{ media_object.friendly_token }}",
|
||||
redirectURL: "{{ media_object.get_absolute_url }}",
|
||||
redirectUserMediaURL: "{{ media_object.user.get_absolute_url }}"
|
||||
};
|
||||
</script>
|
||||
{%endblock topimports %}
|
||||
|
||||
{% block innercontent %}
|
||||
|
||||
<div class="user-action-form-wrap">
|
||||
{% include "cms/media_nav.html" with active_tab="trim" %}
|
||||
<div class="user-action-form-inner" style="max-width: 1280px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);">
|
||||
<div id="video-editor-trim-root"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock innercontent %}
|
||||
34
templates/cms/media_nav.html
Normal file
34
templates/cms/media_nav.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<div class="media-edit-nav" style="background-color: #f0f0f0; padding: 10px 0; margin-bottom: 20px;">
|
||||
<ul style="list-style: none; display: flex; justify-content: space-around; margin: 0; padding: 0;">
|
||||
<li style="display: inline-block;">
|
||||
<a href="{% url 'edit_media' %}?m={{media_object.friendly_token}}"
|
||||
style="text-decoration: none; {% if active_tab == 'metadata' %}font-weight: bold; color: #333; padding-bottom: 3px; border-bottom: 2px solid #333;{% else %}color: #666;{% endif %}">
|
||||
Metadata
|
||||
</a>
|
||||
</li>
|
||||
{% if media_object.media_type == 'video' %}
|
||||
<li style="display: inline-block;">
|
||||
<a href="{% url 'edit_video' %}?m={{media_object.friendly_token}}"
|
||||
|
||||
style="text-decoration: none; {% if active_tab == 'trim' %}font-weight: bold; color: #333; padding-bottom: 3px; border-bottom: 2px solid #333;{% else %}color: #666;{% endif %}">
|
||||
Trim
|
||||
</a>
|
||||
</li>
|
||||
{% comment %}
|
||||
<li style="display: inline-block;">
|
||||
<a href="{% url 'edit_chapters' %}?m={{media_object.friendly_token}}"
|
||||
|
||||
style="text-decoration: none; {% if active_tab == 'chapters' %}font-weight: bold; color: #333; padding-bottom: 3px; border-bottom: 2px solid #333;{% else %}color: #666;{% endif %}">
|
||||
Chapters
|
||||
</a>
|
||||
</li>
|
||||
{% endcomment %}
|
||||
{% endif %}
|
||||
<li style="display: inline-block;">
|
||||
<a href="{% url 'publish_media' %}?m={{media_object.friendly_token}}"
|
||||
style="text-decoration: none; {% if active_tab == 'publish' %}font-weight: bold; color: #333; padding-bottom: 3px; border-bottom: 2px solid #333;{% else %}color: #666;{% endif %}">
|
||||
Publish
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
17
templates/cms/publish_media.html
Normal file
17
templates/cms/publish_media.html
Normal file
@@ -0,0 +1,17 @@
|
||||
{% extends "base.html" %}
|
||||
{% load crispy_forms_tags %}
|
||||
{% load static %}
|
||||
|
||||
{% block headtitle %}Publish media - {{PORTAL_NAME}}{% endblock headtitle %}
|
||||
|
||||
{% block headermeta %}{% endblock headermeta %}
|
||||
|
||||
{% block innercontent %}
|
||||
<div class="user-action-form-wrap">
|
||||
{% include "cms/media_nav.html" with active_tab="publish" %}
|
||||
<div style="max-width: 900px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);">
|
||||
{% csrf_token %}
|
||||
{% crispy form %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock innercontent %}
|
||||
Reference in New Issue
Block a user