fix: Convert timeline header styles to CSS classes

Moved inline styles for timeline headers in chapters and video editors to dedicated CSS classes for better maintainability and consistency.

.gitignore

@@ -35,3 +35,4 @@ frontend-tools/video-editor/client/public/videos/sample-video.mp3
 frontend-tools/chapters-editor/client/public/videos/sample-video.mp3
 static/chapters_editor/videos/sample-video.mp3
 static/video_editor/videos/sample-video.mp3
+templates/todo-MS4.md

README.md

@@ -69,7 +69,7 @@ Copyright Markos Gogoulos.
 
 ## Support and paid services
 
-We provide custom installations, development of extra functionality, migration from existing systems, integrations with legacy systems, training and support. Contact us at info@mediacms.io for more information.
+We provide custom installations, development of extra functionality, migration from existing systems, integrations with legacy systems, training and support. Checkout our [services page](https://mediacms.io/#services/) for more information.
 
 ### Commercial Hostings
 **Elestio**

cms/version.py

@@ -1 +1 @@
-VERSION = "7.2.5"
+VERSION = "7.2.2"

files/methods.py

@@ -729,6 +729,4 @@ def copy_media(media):
 def is_media_allowed_type(media):
     if "all" in settings.ALLOWED_MEDIA_UPLOAD_TYPES:
         return True
-    if media.media_type == "playlist":
-        return True
     return media.media_type in settings.ALLOWED_MEDIA_UPLOAD_TYPES

files/migrations/0014_alter_subtitle_options_and_more.py

@@ -1,42 +0,0 @@
-# Generated by Django 5.2.6 on 2025-11-21 12:35
-
-import django.db.models.deletion
-import files.models.utils
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('files', '0013_page_tinymcemedia'),
-    ]
-
-    operations = [
-        migrations.AlterModelOptions(
-            name='subtitle',
-            options={'ordering': ['language__title'], 'verbose_name': 'Caption', 'verbose_name_plural': 'Captions'},
-        ),
-        migrations.AlterModelOptions(
-            name='transcriptionrequest',
-            options={'verbose_name': 'Caption Request', 'verbose_name_plural': 'Caption Requests'},
-        ),
-        migrations.AlterModelOptions(
-            name='videotrimrequest',
-            options={'verbose_name': 'Trim Request', 'verbose_name_plural': 'Trim Requests'},
-        ),
-        migrations.AddField(
-            model_name='media',
-            name='linked_playlist',
-            field=models.ForeignKey(blank=True, help_text='If set, this Media represents a Playlist in listings', null=True, on_delete=django.db.models.deletion.CASCADE, related_name='media_representation', to='files.playlist'),
-        ),
-        migrations.AlterField(
-            model_name='media',
-            name='media_file',
-            field=models.FileField(blank=True, help_text='media file', max_length=500, null=True, upload_to=files.models.utils.original_media_file_path, verbose_name='media file'),
-        ),
-        migrations.AlterField(
-            model_name='media',
-            name='media_type',
-            field=models.CharField(blank=True, choices=[('video', 'Video'), ('image', 'Image'), ('pdf', 'Pdf'), ('audio', 'Audio'), ('playlist', 'Playlist')], db_index=True, default='video', max_length=20),
-        ),
-    ]

files/models/media.py

@@ -85,15 +85,6 @@ class Media(models.Model):
 
     likes = models.IntegerField(db_index=True, default=1)
 
-    linked_playlist = models.ForeignKey(
-        "Playlist",
-        on_delete=models.CASCADE,
-        blank=True,
-        null=True,
-        related_name="media_representation",
-        help_text="If set, this Media represents a Playlist in listings",
-    )
-
     listable = models.BooleanField(default=False, help_text="Whether it will appear on listings")
 
     md5sum = models.CharField(max_length=50, blank=True, null=True, help_text="Not exposed, used internally")
@@ -102,8 +93,6 @@ class Media(models.Model):
         "media file",
         upload_to=original_media_file_path,
         max_length=500,
-        blank=True,
-        null=True,
         help_text="media file",
     )
 
@@ -251,10 +240,7 @@ class Media(models.Model):
 
     def save(self, *args, **kwargs):
         if not self.title:
-            if self.media_file:
-                self.title = self.media_file.path.split("/")[-1]
-            elif self.linked_playlist:
-                self.title = self.linked_playlist.title
+            self.title = self.media_file.path.split("/")[-1]
 
         strip_text_items = ["title", "description"]
         for item in strip_text_items:
@@ -309,10 +295,6 @@ class Media(models.Model):
 
             self.state = helpers.get_default_state(user=self.user)
 
-        # Set encoding_status to success for playlist type
-        if self.media_type == "playlist":
-            self.encoding_status = "success"
-
         # condition to appear on listings
         if self.state == "public" and self.encoding_status == "success" and self.is_reviewed is True:
             self.listable = True
@@ -401,16 +383,11 @@ class Media(models.Model):
         Performs all related tasks, as check for media type,
         video duration, encode
         """
-        # Skip media_init for playlist type as it has no media file to process
-        if self.media_type == "playlist" or self.linked_playlist:
-            return True
-
         self.set_media_type()
         from ..methods import is_media_allowed_type
 
         if not is_media_allowed_type(self):
-            if self.media_file and self.media_file.path:
-                helpers.rm_file(self.media_file.path)
+            helpers.rm_file(self.media_file.path)
             if self.state == "public":
                 self.state = "unlisted"
                 self.save(update_fields=["state"])
@@ -788,9 +765,6 @@ class Media(models.Model):
         Prioritize uploaded_thumbnail, if exists, then thumbnail
         that is auto-generated
         """
-        # If this media represents a playlist, use playlist's thumbnail
-        if self.linked_playlist:
-            return self.linked_playlist.thumbnail_url
 
         if self.uploaded_thumbnail:
             return helpers.url_from_path(self.uploaded_thumbnail.path)
@@ -806,9 +780,6 @@ class Media(models.Model):
         Prioritize uploaded_poster, if exists, then poster
         that is auto-generated
         """
-        # If this media represents a playlist, use playlist's thumbnail
-        if self.linked_playlist:
-            return self.linked_playlist.thumbnail_url
 
         if self.uploaded_poster:
             return helpers.url_from_path(self.uploaded_poster.path)
@@ -946,14 +917,6 @@ class Media(models.Model):
         return helpers.url_from_path(self.user.logo.path)
 
     def get_absolute_url(self, api=False, edit=False):
-        # If this media represents a playlist, redirect to playlist page
-        if self.linked_playlist:
-            if edit:
-                # For now, playlist editing is not supported via media edit page
-                return self.linked_playlist.get_absolute_url(api=api)
-            # Start playback from first media when clicking on playlist in listings
-            return self.linked_playlist.get_absolute_url(api=api, start_playback=True)
-
         if edit:
             return f"{reverse('edit_media')}?m={self.friendly_token}"
         if api:

files/models/playlist.py

@@ -1,8 +1,6 @@
 import uuid
 
 from django.db import models
-from django.db.models.signals import post_save, pre_delete
-from django.dispatch import receiver
 from django.urls import reverse
 from django.utils.html import strip_tags
 
@@ -33,25 +31,7 @@ class Playlist(models.Model):
     def media_count(self):
         return self.media.filter(listable=True).count()
 
-    def get_first_media(self):
-        """Get the first media item in the playlist"""
-        pm = self.playlistmedia_set.filter(media__listable=True).first()
-        return pm.media if pm else None
-
-    def get_absolute_url(self, api=False, start_playback=False):
-        """
-        Get the URL for this playlist.
-
-        Args:
-            api: If True, return API URL
-            start_playback: If True, return URL to first media with playlist context
-        """
-        if start_playback and not api:
-            # Get first media and return its URL with playlist parameter
-            first_media = self.get_first_media()
-            if first_media:
-                return f"{first_media.get_absolute_url()}&pl={self.friendly_token}"
-
+    def get_absolute_url(self, api=False):
         if api:
             return reverse("api_get_playlist", kwargs={"friendly_token": self.friendly_token})
         else:
@@ -61,11 +41,6 @@ class Playlist(models.Model):
     def url(self):
         return self.get_absolute_url()
 
-    @property
-    def playback_url(self):
-        """URL that starts playing the first media in the playlist"""
-        return self.get_absolute_url(start_playback=True)
-
     @property
     def api_url(self):
         return self.get_absolute_url(api=True)
@@ -120,46 +95,3 @@ class PlaylistMedia(models.Model):
 
     class Meta:
         ordering = ["ordering", "-action_date"]
-
-
-@receiver(post_save, sender=Playlist)
-def create_or_update_playlist_media(sender, instance, created, **kwargs):
-    """
-    Automatically create or update a Media object that represents this Playlist in listings.
-    This allows playlists to appear alongside regular media in search results and listings.
-    """
-    from .media import Media
-
-    # Check if a Media representation already exists for this playlist
-    media_representation = Media.objects.filter(linked_playlist=instance).first()
-
-    if media_representation:
-        # Update existing media representation
-        media_representation.title = instance.title
-        media_representation.description = instance.description
-        media_representation.user = instance.user
-        media_representation.media_type = "playlist"
-        media_representation.encoding_status = "success"
-        media_representation.save()
-    else:
-        # Create new media representation for this playlist
-        Media.objects.create(
-            title=instance.title,
-            description=instance.description,
-            user=instance.user,
-            linked_playlist=instance,
-            media_type="playlist",
-            encoding_status="success",
-            # Inherit the same state and review status defaults
-        )
-
-
-@receiver(pre_delete, sender=Playlist)
-def delete_playlist_media(sender, instance, **kwargs):
-    """
-    Delete the associated Media representation when a Playlist is deleted.
-    """
-    from .media import Media
-
-    # Delete any Media objects that represent this playlist
-    Media.objects.filter(linked_playlist=instance).delete()

files/models/utils.py

@@ -29,7 +29,6 @@ MEDIA_TYPES_SUPPORTED = (
     ("image", "Image"),
     ("pdf", "Pdf"),
     ("audio", "Audio"),
-    ("playlist", "Playlist"),
 )
 
 ENCODE_EXTENSIONS = (

files/views/media.py

@@ -69,7 +69,7 @@ class MediaList(APIView):
         if user:
             base_filters &= Q(user=user)
 
-        base_queryset = Media.objects.prefetch_related("user", "tags").select_related("linked_playlist")
+        base_queryset = Media.objects.prefetch_related("user", "tags")
 
         if not request.user.is_authenticated:
             return base_queryset.filter(base_filters)
@@ -159,17 +159,17 @@ class MediaList(APIView):
             media = show_recommended_media(request, limit=50)
             already_sorted = True
         elif show_param == "featured":
-            media = Media.objects.filter(listable=True, featured=True).prefetch_related("user", "tags").select_related("linked_playlist")
+            media = Media.objects.filter(listable=True, featured=True).prefetch_related("user", "tags")
         elif show_param == "shared_by_me":
             if not self.request.user.is_authenticated:
                 media = Media.objects.none()
             else:
-                media = Media.objects.filter(permissions__owner_user=self.request.user).prefetch_related("user", "tags").select_related("linked_playlist").distinct()
+                media = Media.objects.filter(permissions__owner_user=self.request.user).prefetch_related("user", "tags").distinct()
         elif show_param == "shared_with_me":
             if not self.request.user.is_authenticated:
                 media = Media.objects.none()
             else:
-                base_queryset = Media.objects.prefetch_related("user", "tags").select_related("linked_playlist")
+                base_queryset = Media.objects.prefetch_related("user", "tags")
 
                 # Build OR conditions similar to _get_media_queryset
                 conditions = Q(permissions__user=request.user)
@@ -183,14 +183,14 @@ class MediaList(APIView):
             user_queryset = User.objects.all()
             user = get_object_or_404(user_queryset, username=author_param)
             if self.request.user == user or is_mediacms_editor(self.request.user):
-                media = Media.objects.filter(user=user).prefetch_related("user", "tags").select_related("linked_playlist")
+                media = Media.objects.filter(user=user).prefetch_related("user", "tags")
             else:
                 media = self._get_media_queryset(request, user)
                 already_sorted = True
 
         else:
             if is_mediacms_editor(self.request.user):
-                media = Media.objects.prefetch_related("user", "tags").select_related("linked_playlist")
+                media = Media.objects.prefetch_related("user", "tags")
             else:
                 media = self._get_media_queryset(request)
                 already_sorted = True
@@ -995,7 +995,7 @@ class MediaSearch(APIView):
 
         if request.user.is_authenticated:
             if is_mediacms_editor(self.request.user):
-                media = Media.objects.prefetch_related("user", "tags").select_related("linked_playlist")
+                media = Media.objects.prefetch_related("user", "tags")
                 basic_query = Q()
             else:
                 basic_query = Q(listable=True) | Q(permissions__user=request.user) | Q(user=request.user)

frontend-tools/chapters-editor/client/src/App.tsx

@@ -150,6 +150,11 @@ const App = () => {
                     canRedo={historyPosition < history.length - 1}
                 />
 
+                {/* Timeline Header */}
+                <div className="timeline-header-container">
+                    <h2 className="timeline-header-title">Add Chapters</h2>
+                </div>
+
                 {/* Timeline Controls */}
                 <TimelineControls
                     currentTime={currentTime}

frontend-tools/chapters-editor/client/src/styles/TimelineControls.css

@@ -1,4 +1,16 @@
 #chapters-editor-root {
+    .timeline-header-container {
+        margin-left: 1rem;
+        margin-top: -0.5rem;
+    }
+
+    .timeline-header-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #059669;
+        margin: 0;
+    }
+
     .timeline-container-card {
         background-color: white;
         border-radius: 0.5rem;
@@ -11,6 +23,8 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid rgba(16, 185, 129, 0.2);
     }
 
     .timeline-title {
@@ -21,6 +35,8 @@
 
     .timeline-title-text {
         font-weight: 700;
+        color: #059669;
+        font-size: 0.875rem;
     }
 
     .current-time {
@@ -48,10 +64,11 @@
     .timeline-container {
         position: relative;
         min-width: 100%;
-        background-color: #fafbfc;
+        background-color: #E2EDE4;
         height: 70px;
         border-radius: 0.25rem;
         overflow: visible !important;
+        border: 1px solid rgba(16, 185, 129, 0.2);
     }
 
     .timeline-marker {
@@ -194,7 +211,7 @@
         left: 0;
         right: 0;
         padding: 0.4rem;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: rgba(16, 185, 129, 0.6);
         color: white;
         opacity: 1;
         transition: background-color 0.2s;
@@ -202,15 +219,15 @@
     }
 
     .clip-segment:hover .clip-segment-info {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgba(16, 185, 129, 0.7);
     }
 
     .clip-segment.selected .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.5);
+        background-color: rgba(5, 150, 105, 0.8);
     }
 
     .clip-segment.selected:hover .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.4);
+        background-color: rgba(5, 150, 105, 0.75);
     }
 
     .clip-segment-name {

frontend-tools/video-editor/client/src/App.tsx

@@ -309,6 +309,11 @@ const App = () => {
           canRedo={historyPosition < history.length - 1}
         />
 
+                 {/* Timeline Header */}
+                 <div className="timeline-header-container">
+                     <h2 className="timeline-header-title">Trim or Split</h2>
+                 </div>
+
         {/* Timeline Controls */}
         <TimelineControls
           currentTime={currentTime}

frontend-tools/video-editor/client/src/styles/TimelineControls.css

@@ -1,4 +1,16 @@
 #video-editor-trim-root {
+    .timeline-header-container {
+        margin-left: 1rem;
+        margin-top: -0.5rem;
+    }
+
+    .timeline-header-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #2563eb;
+        margin: 0;
+    }
+
     .timeline-container-card {
         background-color: white;
         border-radius: 0.5rem;
@@ -11,6 +23,8 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid rgba(59, 130, 246, 0.2);
     }
 
     .timeline-title {
@@ -21,6 +35,8 @@
 
     .timeline-title-text {
         font-weight: 700;
+        color: #2563eb;
+        font-size: 0.875rem;
     }
 
     .current-time {
@@ -48,10 +64,11 @@
     .timeline-container {
         position: relative;
         min-width: 100%;
-        background-color: #fafbfc;
+        background-color: #eff6ff;
         height: 70px;
         border-radius: 0.25rem;
         overflow: visible !important;
+        border: 1px solid rgba(59, 130, 246, 0.2);
     }
 
     .timeline-marker {
@@ -194,7 +211,7 @@
         left: 0;
         right: 0;
         padding: 0.4rem;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: rgba(59, 130, 246, 0.6);
         color: white;
         opacity: 1;
         transition: background-color 0.2s;
@@ -202,15 +219,15 @@
     }
 
     .clip-segment:hover .clip-segment-info {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgba(59, 130, 246, 0.7);
     }
 
     .clip-segment.selected .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.5);
+        background-color: rgba(37, 99, 235, 0.8);
     }
 
     .clip-segment.selected:hover .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.4);
+        background-color: rgba(37, 99, 235, 0.75);
     }
 
     .clip-segment-name {

frontend/src/static/js/components/list-item/Item.scss

@@ -222,12 +222,6 @@ a.item-thumb {
       }
     }
 
-    .item.playlist-item & {
-      &:before {
-        content: '\e05f'; // Material icon: playlist_play
-      }
-    }
-
     .item.category-item & {
       &:before {
         content: '\e892';

frontend/src/static/js/components/list-item/PlaylistItem.jsx

@@ -31,11 +31,14 @@ export function PlaylistItem(props) {
           aria-hidden="true"
           style={!thumbnailUrl ? null : { backgroundImage: "url('" + thumbnailUrl + "')" }}
         >
-          {!thumbnailUrl ? null : (
-            <div key="item-type-icon" className="item-type-icon">
-              <div></div>
+          <div className="playlist-count">
+            <div>
+              <div>
+                <span>{props.media_count}</span>
+                <i className="material-icons">playlist_play</i>
+              </div>
             </div>
-          )}
+          </div>
 
           <div className="playlist-hover-play-all">
             <div>
@@ -50,6 +53,9 @@ export function PlaylistItem(props) {
         <UnderThumbWrapper title={props.title} link={props.link}>
           {titleComponent()}
           {metaComponents()}
+          <a href={props.link} title="" className="view-full-playlist">
+            VIEW FULL PLAYLIST
+          </a>
         </UnderThumbWrapper>
       </div>
     </div>