podlove / radiator-cms

Frontend for Podlove Radiator
MIT License
6 stars 3 forks source link

As podcaster I want to create and edit chapter marks manually #46

Open Fischaela opened 5 years ago

Fischaela commented 5 years ago

Todo

Letty commented 5 years ago

Workflow:

  1. Upload file to server (.txt, .psc, .aup, hindenburg project files xml?) -> Parse file on server
  2. <- Response from server (if possible) Display content on audio timeline with labels / pins for each chapter (moveable) (else) Display a rectangle as a timeline just as a visual editor without play button Display a sort able table with start point, chapter title and duration (editable, sort able)
  3. Add a missing chapter if needed

Content will always be saved on server, no "save" button needed

Letty commented 5 years ago

1024_Episode--new Chaptermarks step 1 1024_Episode--new Chaptermarks step 2 1024_Episode--new Chaptermarks step 3

Fischaela commented 5 years ago

Nice! :)

Regarding the last wireframe:

eteubert commented 5 years ago

Looking good 👍

There is no .md format for chaptermarks. What we can import so far:

And just fyi, there are implementations for all of these in JS, see https://www.npmjs.com/search?q=podcast-chapter-parser (but I agree that this should be handled by the API/server in our case).

Not sure a play button is needed in the chapter management UI but the timeline visualization could be useful to see on a quick glance how chapters are distributed as expected.

As @Fischaela mentioned, deleting/editing still needs UI. Podlove Publisher slides an editing sidebar in when a chapter row is selected (and esc closes the sidebar if focus is on any of the sidebar inputs).

chapter-editing

Letty commented 5 years ago

Thx! As @Fischaela mentioned, the delete button is added and next to it edit and sort. When the user interacts with the edit button the row turns into fields, like in the example from @eteubert (The color is just used due to the lack of sketch skill for input fields, i used the old style of inputs)

1024_Episode--new Chaptermarks step 3_3 1024_Episode--new Chaptermarks step 3_3 editmode

Fischaela commented 5 years ago

yeah nice! for development, we should change the edit button to handle "cancel edit" and "save edit"

monkeydom commented 5 years ago

Open questions to me:

monkeydom commented 5 years ago

Small one: "Chapter Marks" two words. Imho also the "Upload Chapter Marks File" button should still exist when chapters are present.

Letty commented 5 years ago

Open questions to me:

  • How do links appear in that list, and how to edit them?
  • How would one add a chapter image, and how would you display that image in that list?

What is possible as "content" for chapter marks? Links to other "things" on the internet? One image or multiple? Text? cc @eteubert

  • How is the sort widget supposed to work? Dragging just modifies the time? The sort order is implicit based on the start time. (While I would like dragging around in the timeline above, it is probably to imprecise. Just imagine a 5 hour Freakshow)

I would not make the timeline interactive, this element should be more like a visual helper. Dragging inside the list modifies the start time and therefore the order of chapter marks. I hope this is more user friendly then modifying the start time manually.

  • What is the icon between edit and order? (If it is supposed to be a trashcan for delete I did not recognize it as such)

It's a trashcan and just for wire frames. Buefy can handle font awesome and material design icons.

  • Adding a chapter probably makes more sense as a click on the timeline or with some connection to the player so it is added at the play position.

If the timeline is already dense with chapter marks, it would be hard. But the button can have an auto fill for start time, based on the player. This is something we should discuss on the weekend.

eteubert commented 5 years ago

What is possible as "content" for chapter marks? Links to other "things" on the internet? One image or multiple? Text?

A chapter consists of:

Letty commented 5 years ago