Skip to content

Add UI for playlist management#1579

Open
owi92 wants to merge 7 commits intoopencast:developfrom
owi92:playlists
Open

Add UI for playlist management#1579
owi92 wants to merge 7 commits intoopencast:developfrom
owi92:playlists

Conversation

@owi92
Copy link
Copy Markdown
Contributor

@owi92 owi92 commented Apr 14, 2026

Originally #1537

This adds the necessary interface elements that are needed to use playlists in the admin interface.
Structure and UI design follows what is already present for events and series, and reuses components whenever possible.

Needs opencast/opencast#7496 to work properly.

Closes #1399
Closes opencast/opencast#6909

@owi92 owi92 added the type:enhancement New feature or request label Apr 14, 2026
@github-actions
Copy link
Copy Markdown
Contributor

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 ghcr.io/opencast/admin-interface:pr-1579

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ghcr.io/opencast/admin-interface:pr-1579

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 14, 2026

This pull request is deployed at test.admin-interface.opencast.org/1579/2026-04-20_18-05-42/ .
It might take a few minutes for it to become available.

@owi92 owi92 requested a review from Arnei April 16, 2026 11:58
Copy link
Copy Markdown
Member

@Arnei Arnei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works and makes sense to me. I do like the drag and drop for playlist entries. Below are nitpicks.

I would like to see the PlaylistDetails Icon be blue instead of green. Green is for series.

Comment thread src/components/events/partials/PlaylistTitleCell.tsx Outdated
Comment thread src/components/events/partials/EventsNavigation.tsx Outdated
Comment thread src/components/events/partials/wizards/NewPlaylistWizard.tsx Outdated
Copy link
Copy Markdown
Member

@Arnei Arnei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, pagination might be broken? If I have more then 10 playlists, I still only get one page with 10 items.

This adds the titular table and everything necessary to
show all playlists.

On its own not of much use, apart from looking at the playlist
names.

Creating, editing, deleting etc. will be added in a later
commit.

Needs https://github.com/owi92/opencast/tree/playlist-admin-ui-api to work.
@owi92
Copy link
Copy Markdown
Contributor Author

owi92 commented Apr 20, 2026

Thanks for the review. Pagination should be fixed now.

Edit: Sorry, idk why the compare button isn't doing its thing. I have a rebase onto develop in there as well. I have addressed the points you mentioned in the review, I think most of them were in the first commit.

Edit 2: Also forgot about the green vs. blue icon question. Matthias also mentioned that in another issue I believe. But if green is for series, you could also argue that blue is for events, right?
I decided for green in the first place because I feel that playlists have more in common with series than with events, with both being collections of videos. Should playlists get a new color? (I don't think so, but if they do, which one)?
I guess I am putting too much thought into that, while not having a strong opinion. So let's just make it blue.

owi92 added 6 commits April 20, 2026 20:04
Features metadata and ACL display and editing.
Todo: Figure out UI/UX for adding and removing entries.
I think this project should really get away from scss or at
least reconsider and rewrite some styles.
Why are there `first-child` selectors with `float: right`?
That means you have to write column layouts all backwards,
which is unintuitive and confusing.

Anyway. This just removes some styles/rules from the `SaveEditFooter`
component that would not only hide but completely remove certain buttons
from the dom while they're disabled.
That can lead to layout shifts and confused margins whenever they
do pop in.
So with this change, they are now always visible and simply use disabled
styles and behaviour when appropriate.
Like most of these playlist related additions,
this is heavily based on the structure and
components that are used for events and series.
I'm sure there is a lot of potential for
deduplication, but I don't want to touch too many
non-playlist files. I think that should be done in
a dedicated PR.
This let users add and removes entries to and from their
playlists using a GUI.
The UI reuses the drag n drop approach that is present
for editing table view columns.
Entries are shown with some additional metadata, so they
are easier to tell apart if some names are repeated (hopefully).
Events don't remove themselves automatically from
playlists when they are deleted. Previously I would
just show their UUID, but that isn't very helpful.
This will now show an "unknown entry" note, which is
slightly better I suppose.
@Arnei
Copy link
Copy Markdown
Member

Arnei commented Apr 21, 2026

Pagination works now.

The playlist titles in the playlists table do not render. I swear this should work without an extra TitleCell, just like for description >.>

You could argue that blue is for events, or that it is just for everything else (see users, groups). Series is probably a non-blue color, because there was a need for a series details button in the events table, and they wanted it to be visually more distinct from its neighbouring event details button. Is that good design? I dunno shrug

@owi92
Copy link
Copy Markdown
Contributor Author

owi92 commented Apr 21, 2026

The playlist titles in the playlists table do not render

Yeah you need to clear the browser cache first. Had the same issue.
Re color: Let's just go with blue for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type:enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add UI for managing playlists Integration of Playlists into Admin UI

2 participants