Add static content for media pages

files/models.py

@@ -8,6 +8,7 @@
 import uuid
 
 import m3u8
+import webvtt
 from django.conf import settings
 from django.contrib.postgres.indexes import GinIndex
 from django.contrib.postgres.search import SearchVectorField
@@ -785,6 +786,34 @@ def subtitles_info(self):
             )
         return ret
 
+    @property
+    def subtitles_info_contents(self):
+        """Property used on serializers
+        Returns subtitles info with file data
+        """
+
+        ret = []
+        for subtitle in self.subtitles.all():
+            contents = open(subtitle.subtitle_file.path, 'r').read()
+            text = ""
+            try:
+                lines = webvtt.read(subtitle.subtitle_file.path)
+                for line in lines:
+                    text += line.text + " "
+            except Exception:
+                pass
+
+            ret.append(
+                {
+                    "src": helpers.url_from_path(subtitle.subtitle_file.path),
+                    "srclang": subtitle.language.code,
+                    "label": subtitle.language.title,
+                    "contents": contents,
+                    "text": text,
+                }
+            )
+        return ret
+
     @property
     def sprites_url(self):
         """Property used on serializers

files/views.py

@@ -221,20 +221,25 @@ def featured_media(request):
     """List featured media view"""
 
     context = {}
+    context["media"] = list(Media.objects.filter(Q(listable=True), featured=True))[:50]
     return render(request, "cms/featured-media.html", context)
 
 
 def index(request):
     """Index view"""
 
     context = {}
+    context["media_featured"] = list(Media.objects.filter(Q(listable=True), featured=True))[:10]
+    context["media_recommended"] = list(show_recommended_media(request, limit=10))
+    context["media_latest"] = list(Media.objects.filter(Q(listable=True)).order_by("-add_date"))[:50]
     return render(request, "cms/index.html", context)
 
 
 def latest_media(request):
     """List latest media view"""
 
     context = {}
+    context["media"] = list(Media.objects.filter(Q(listable=True)).order_by("-add_date"))[:50]
     return render(request, "cms/latest-media.html", context)
 
 
@@ -280,6 +285,7 @@ def recommended_media(request):
     """List recommended media view"""
 
     context = {}
+    context["media"] = list(show_recommended_media(request, limit=50))
     return render(request, "cms/recommended-media.html", context)
 
 
@@ -359,6 +365,7 @@ def view_playlist(request, friendly_token):
 
     context = {}
     context["playlist"] = playlist
+    context["media"] = [c.media for c in PlaylistMedia.objects.filter(playlist=playlist)]
     return render(request, "cms/playlist.html", context)
 
 

frontend/src/static/js/components/media-page/MediaPage.scss

@@ -1944,3 +1944,8 @@
     }
   }
 }
+
+#page-media-metadata {
+  opacity: 0.1;
+  zoom: 0.1;
+}

requirements.txt

@@ -19,3 +19,4 @@ m3u8==3.5.0
 django-ckeditor==6.6.1
 django-debug-toolbar==4.1.0
 django-login-required-middleware==0.9.0
+webvtt-py==0.4.6

templates/cms/featured-media.html

@@ -39,7 +39,20 @@
 {% endblock headermeta %}
 
 {% block content %}
-{% if user %}<div id="page-featured"></div>{% endif %}
+{% if user %}<div id="page-featured">
+        <h2>Featured</h2>
+        <ul>
+        {% for media_object in media %}
+        <li>
+                <h3><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+				{{media_object.title}}</a></h3>
+                <p>Posted by <a href="user/{{media_object.user}}">{{media_object.author_name}}</a></p>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+</div>{% endif %}
 {% endblock %}
 
 {% block bottomimports %}

templates/cms/index.html

@@ -45,7 +45,44 @@
 
 {% endblock headermeta %}
 
-{% block content %}<div id="page-home"></div>{% endblock %}
+{% block content %}<div id="page-home">
+        <h2>Featured <a href="/featured">VIEW ALL</a></h2>
+        <ul>
+        {% for media_object in media_featured %}
+        <li>
+                <h3><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+				{{media_object.title}}</a></h3>
+                <p>Posted by <a href="user/{{media_object.user}}">{{media_object.author_name}}</a></p>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+        <h2>Recommended <a href="/recommended">VIEW ALL</a></h2>
+        <ul>
+        {% for media_object in media_recommended %}
+        <li>
+                <h3><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+				{{media_object.title}}</a></h3>
+                <p>Posted by <a href="user/{{media_object.user}}">{{media_object.author_name}}</a></p>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+        <h2>Latest <a href="/latest">VIEW ALL</a></h2>
+        <ul>
+        {% for media_object in media_latest %}
+        <li>
+                <h3><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+				{{media_object.title}}</a></h3>
+                <p>Posted by <a href="user/{{media_object.user}}">{{media_object.author_name}}</a></p>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+</div>{% endblock %}
 
 {% block bottomimports %}
 <script src="{% static "js/index.js" %}"></script>

templates/cms/latest-media.html

@@ -39,7 +39,20 @@
 {% endblock headermeta %}
 
 {% block content %}
-{% if user %}<div id="page-latest"></div>{% endif %}
+{% if user %}<div id="page-latest">
+        <h2>Recent uploads</h2>
+        <ul>
+        {% for media_object in media %}
+        <li>
+                <h3><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+				{{media_object.title}}</a></h3>
+                <p>Posted by <a href="user/{{media_object.user}}">{{media_object.author_name}}</a></p>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+</div>{% endif %}
 {% endblock %}
 
 {% block bottomimports %}

templates/cms/media.html

@@ -121,7 +121,21 @@
 <link href="{% static "css/media.css" %}" rel="stylesheet">
 {%endblock topimports %}
 
-{% block content %}<div id="page-media"></div>{% endblock content %}
+{% block content %}
+<div id="page-media">
+<div id="media-metadata">
+<h2>{{media_object.title}}</h2>
+<p>Published {{media_object.add_date}}</p>
+<p>{% if media_object.summary %}{{media_object.summary}}{% else %}{{media_object.description}}{% endif %}</p>
+{% for subtitle_object in media_object.subtitles_info_contents %}
+{% if subtitle_object.text != "" %}
+<h3>Transcript in {{ subtitle_object.label }}</h3>
+<p>{{ subtitle_object.text }}</p>
+{% endif %}
+{% endfor %}
+</div>
+</div>
+{% endblock content %}
 
 {% block bottomimports %}
 <script src="{% static "js/media.js" %}"></script>

templates/cms/playlist.html

@@ -9,7 +9,24 @@
 {%endblock topimports %}
 
 {% block content %}
-{% if user %}<div id="page-playlist"></div>{% endif %}
+{% if user %}<div id="page-playlist">
+        <h2>{{playlist.title}}</h2>
+        <p>{{playlist.media_count}} videos</p>
+        <p>Published {{playlist.add_date}}</p>
+        <p>{{playlist.description}}</p>
+        <p><a href="/user/{{playlist.user}}">{{playlist.user}}</a></p>
+        <ol>
+        {% for media_object in media %}
+        <li>
+                <h3><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+                                {{media_object.title}}</a></h3>
+                <p>Posted by <a href="user/{{media_object.user}}">{{media_object.author_name}}</a></p>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ol>
+</div>{% endif %}
 {% endblock %}
 
 {% block bottomimports %}

templates/cms/recommended-media.html

@@ -39,7 +39,20 @@
 {% endblock headermeta %}
 
 {% block content %}
-{% if user %}<div id="page-recommended"></div>{% endif %}
+{% if user %}<div id="page-recommended">
+        <h2>Recommended</h2>
+        <ul>
+        {% for media_object in media %}
+        <li>
+                <h3><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+				{{media_object.title}}</a></h3>
+                <p>Posted by <a href="user/{{media_object.user}}">{{media_object.author_name}}</ae</p>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+</div>{% endif %}
 {% endblock %}
 
 {% block bottomimports %}

templates/cms/user.html

@@ -25,9 +25,27 @@
 {% endblock %}
 
 {% block content %}
-{% if user %}<div id="page-profile-media"></div>{% endif %}
+{% if user %}<div id="page-profile-media">
+        <h2>{{user.name}}</h2>
+        <ul>
+                <li><a href="/user/{{user.username}}/about">ABOUT</a></li>
+                <li><a href="/user/{{user.username}}">MEDIA</a></li>
+                <li><a href="/user/{{user.username}}/playlists">PLAYLISTS</a></li>
+        </ul>
+        <h3>Uploads</h3>
+        <ul>
+        {% for media_object in media %}
+        <li>
+                <h4><a href="/view?m={{media_object.friendly_token}}"><img src="{{media_object.thumbnail_url}}" alt="Thumbnail" title="{{media_object.title}}" loading="lazy" /><br />
+				{{media_object.title}}</a></h4>
+                <p>{{media_object.views}} views</p>
+                <p>Published {{media_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+</div>{% endif %}
 {% endblock %}
 
 {% block bottomimports %}
 <script src="{% static "js/profile-media.js" %}"></script>
-{% endblock bottomimports %}
+{% endblock bottomimports %}

templates/cms/user_about.html

@@ -25,7 +25,16 @@
 {% endblock %}
 
 {% block content %}
-{% if user %}<div id="page-profile-about"></div>{% endif %}
+{% if user %}<div id="page-profile-about">
+        <h2>{{user.name}}</h2>
+        <ul>
+                <li><a href="/user/{{user.username}}/about">ABOUT</a></li>
+                <li><a href="/user/{{user.username}}">MEDIA</a></li>
+                <li><a href="/user/{{user.username}}/playlists">PLAYLISTS</a></li>
+        </ul>
+        <h3>Biography</h3>
+        <p>{{user.description}}</p>
+</div>{% endif %}
 {% endblock %}
 
 {% block bottomimports %}

templates/cms/user_playlists.html

@@ -25,7 +25,25 @@
 {% endblock %}
 
 {% block content %}
-{% if user %}<div id="page-profile-playlists"></div>{% endif %}
+{% if user %}<div id="page-profile-playlists">
+        <h2>{{user.name}}</h2>
+        <ul>
+                <li><a href="/user/{{user.username}}/about">ABOUT</a></li>
+                <li><a href="/user/{{user.username}}">MEDIA</a></li>
+                <li><a href="/user/{{user.username}}/playlists">PLAYLISTS</a></li>
+        </ul>
+        <h3>Created playlists</h3>
+        <ul>
+        {% for playlist_object in playlists %}
+        <li>
+                <h4><a href="/playlists/{{playlist_object.friendly_token}}"><img src="{{playlist_object.thumbnail_url}}" alt="Thumbnail" title="{{playlist_object.title}}" loading="lazy" /><br />
+                                {{playlist_object.title}}</a></h4>
+                <p>{{playlist_object.media_count}} videos</p>
+                <p>Published {{playlist_object.add_date}}</p>
+        </li>
+        {% endfor %}
+        </ul>
+</div>{% endif %}
 {% endblock %}
 
 {% block bottomimports %}

users/views.py

@@ -1,6 +1,7 @@
 from django.conf import settings
 from django.contrib.auth.decorators import login_required
 from django.core.mail import EmailMessage
+from django.db.models import Q
 from django.http import HttpResponseRedirect
 from django.shortcuts import render
 from drf_yasg import openapi as openapi
@@ -21,9 +22,10 @@
 
 from cms.permissions import IsUserOrManager
 from files.methods import is_mediacms_editor, is_mediacms_manager
+from files.models import Playlist
 
 from .forms import ChannelForm, UserForm
-from .models import Channel, User
+from .models import Channel, Media, User
 from .serializers import LoginSerializer, UserDetailSerializer, UserSerializer
 
 
@@ -44,6 +46,7 @@ def view_user(request, username):
     context["CAN_EDIT"] = True if ((user and user == request.user) or is_mediacms_manager(request.user)) else False
     context["CAN_DELETE"] = True if is_mediacms_manager(request.user) else False
     context["SHOW_CONTACT_FORM"] = True if (user.allow_contact or is_mediacms_editor(request.user)) else False
+    context["media"] = list(Media.objects.filter(Q(listable=True)).filter(user__username=username))[:50]
     return render(request, "cms/user.html", context)
 
 
@@ -57,6 +60,7 @@ def view_user_media(request, username):
     context["CAN_EDIT"] = True if ((user and user == request.user) or is_mediacms_manager(request.user)) else False
     context["CAN_DELETE"] = True if is_mediacms_manager(request.user) else False
     context["SHOW_CONTACT_FORM"] = True if (user.allow_contact or is_mediacms_editor(request.user)) else False
+    context["media"] = list(Media.objects.filter(Q(listable=True)).filter(user__username=username))[:50]
     return render(request, "cms/user_media.html", context)
 
 
@@ -70,6 +74,7 @@ def view_user_playlists(request, username):
     context["CAN_EDIT"] = True if ((user and user == request.user) or is_mediacms_manager(request.user)) else False
     context["CAN_DELETE"] = True if is_mediacms_manager(request.user) else False
     context["SHOW_CONTACT_FORM"] = True if (user.allow_contact or is_mediacms_editor(request.user)) else False
+    context["playlists"] = Playlist.objects.filter(user__username=username)
 
     return render(request, "cms/user_playlists.html", context)