feat: Major Upgrade to Video.js v8 — Chapters Functionality, Fixes and Improvements

templates/cms/edit_chapters.html

@@ -5,40 +5,28 @@
 {% 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">
+<link href="{% static "chapters_editor/chapters-editor.css" %}" rel="preload" as="style">
+<link href="{% static "chapters_editor/chapters-editor.css" %}" rel="stylesheet">
+
+<script src="{% static 'chapters_editor/chapters-editor.js' %}"></script>
+
 <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
-		}
-	]
-};
+    window.MEDIA_DATA = {
+		videoUrl: "{{ media_file_path }}",
+		posterUrl: "{{ media_object.poster_url }}",
+		mediaId: "{{ media_object.friendly_token }}",
+		redirectURL: "{{ media_object.get_absolute_url }}",
+		redirectUserMediaURL: "{{ media_object.user.get_absolute_url }}",
+		chapters: {{ chapters|safe }},
+    };
 </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 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="chapters-editor-root"></div>
 		</div>
+	</div>
 {% endblock innercontent %}

templates/cms/edit_video.html

@@ -13,6 +13,7 @@
 <script>
 window.MEDIA_DATA = {
     videoUrl: "{{ media_file_path }}",
+	posterUrl: "{{ media_object.poster_url }}",
 	mediaId: "{{ media_object.friendly_token }}",
 	redirectURL: "{{ media_object.get_absolute_url }}",
 	redirectUserMediaURL: "{{ media_object.user.get_absolute_url }}"

templates/cms/embed.html

@@ -1,11 +1,6 @@
 {% extends "root.html" %}
 {% load static %}
 
-{% block topimports %}
-<link href="{% static "css/embed.css" %}" rel="preload" as="style">
-<link href="{% static "css/embed.css" %}" rel="stylesheet">
-{%endblock topimports %}
-
 {% block content %}<div id="page-embed"></div>{% endblock content %}
 
 {% block bottomimports %}

templates/cms/media_nav.html

@@ -11,7 +11,7 @@
                 {{ "Metadata" | custom_translate:LANGUAGE_CODE}}
             </a>
         </li>
-        {% if media_object.media_type == 'video' %}
+        {% if media_object.media_type == 'video' or media_object.media_type == 'audio' %} 
             <li style="display: inline-block;">
                 <a href="{% url 'edit_video' %}?m={{media_object.friendly_token}}"
 
@@ -25,6 +25,14 @@
                     {{ "Captions" | custom_translate:LANGUAGE_CODE}}
                 </a>
             </li>
+            <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>
             {% comment %}
                 <li style="display: inline-block;">
                     <a href="{% url 'edit_chapters' %}?m={{media_object.friendly_token}}"

templates/config/installation/site.html

@@ -3,6 +3,7 @@ MediaCMS.site = {
     title: "{{PORTAL_NAME}}",
     url: '{{FRONTEND_HOST}}',
     api: '{{FRONTEND_HOST}}/api/v1',
+    useRoundedCorners: {% if USE_ROUNDED_CORNERS %}true{% else %}false{% endif %},
     theme: {
     	mode: '{{DEFAULT_THEME}}',
 		switch: {

templates/root.html

@@ -23,7 +23,6 @@
 
         {% include "config/index.html" %}
 
-
         {% if not USE_ROUNDED_CORNERS %}
         <style>
             .viewer-container .player-container, .item-thumb, a.item-thumb {
@@ -32,7 +31,6 @@
         </style>
         {% endif %}
 
-        
     {% endblock head %}
 
 </head>
@@ -48,12 +46,6 @@
 
     {% block aftercontent %}{% endblock %}
 
-    {% if LOAD_FROM_CDN %}
-    <script src="https://vjs.zencdn.net/7.20.2/video.min.js"></script>
-    {% else %}
-    <script src="{% static "lib/video-js/7.20.2/video.min.js" %}"></script>
-    {% endif %}
-
     {% block externalscripts %}{% endblock externalscripts %}
 
     {% include "common/body-scripts.html" %}