Description:
On each non-archived page, the logo of the upcoming streaming company appears overlaid with the streamETH logo.

• URL: streamETH Schedule Page

Expected Behaviour:
Only the client's logo should be visible.

Screenshots:

Just watching some videos on streameth and sometimes the video stops.
It goes black and the position-seekbar goes to the start. The only way to recover is to reload the page and find the position again. I cannot remember it from watching videos from ETHBerlin back then - so it might be a regression. But had it watching ProtocolBerg videos now already multiple times.

Seems there is nothing related/helpful in the console

video of it happening
https://github.com/streamethorg/streameth-platform/assets/111600/b868e468-a812-4e03-bf0f-5291e1345908

It happens in brave and firefox browser

Just got asked by a presenter of protocol Berlin how to download a video. I think this should be exposed in the UI.

Current metadata per page is broken, when sharing a link it does not show the event and page description nor a social image. We should implement metadata as per the nextjs documentation

Also adding wesley comments here:

Something else.. I think we should spent some time to properly set up Metadata/SEO properties, generate Social/Open Graph per event, etc. I think it adds value for hosts for proper search indexing, but also makes social sharing a lot better.
And Nextjs makes this quite easy https://nextjs.org/docs/app/building-your-application/optimizing/metadata

In certain viewport conditions (specifically when the viewport width is narrow and the height is greater than 1500px), our <Player> and SessionBox components do not scale and position properly. This issue was always there, but I removed the black background

Expected Behavior:

The <Player> and SessionBox components should maintain their relative size and position regardless of the viewport dimensions.

Actual Behavior:

When the viewport width is narrow and the height is greater than 1500px, the <Player> and SessionBox components do not position properly. They scale in size, but their placement is incorrect which leads to a disruption in the layout.

Steps to Reproduce:

1. Adjust the browser window to a narrow width.
2. Increase the browser window height to more than ~1500px.
3. Observe that the <Player> and SessionBox components do not maintain their relative size and position.

Screenshot

Is your feature request related to a problem? Please describe.
The schedule import is currently triggered from code. I would propose we add an action on the Admin UI so anyone with event/admin access can run an import.

Describe the bug

The flag archiveMode is not something that should have to be set manually.
We should hide streams/stages (basically putting an event to archiveMode) as soon as an event ends.

Bug Description

When viewing the StreamETH Schedule, the current schema prioritizes displaying the speakers over the title of the session. This should be reversed.

Steps to Reproduce

1. Navigate to the Scroll Schedule.

Expected Behaviour

If the schedule block is too small to display both the title and the speakers, the title should take precedence and be displayed by itself.

Screenshot for Reference

Describe the bug
Remove the axios dependency.

Next.js uses and extends the default fetch WebAPI by default which should be available on both front-/server side.
If we need anything outside of the Next.js context, I'd suggest something like cross-fetch so we can use the same code, APIs, etc. consistently. No need for additional dependencies.

We should have an add you event button in the navigation bar that links to the streameth website

Is your feature request related to a problem? Please describe.
As a user, I would like to see the platform grow and donate to it.

Describe the solution you'd like
A simple button that redirects to GivETH in the corner of the website should be an straightforward solution

Bug Description
Some thumbnails are not showing on the App Archive.

When speakers make last minute changes to the title of their session, meaning that they do not match the content of the last batch of digital assets, the thumbnails do not show on the app.

Go to:
https://app.streameth.org/zuzalu/zuconnect__decentralized_social_track/archive

Filtering by speaker or by stage does not work

The solution has grown a lot, and our supporting projects (Remotion, AV tools, etc.) would benefit from using the same code base. But the current structure isn't sufficient to facilitate for this (e.g. packages/tools) and is currently as a single, entangled repo.

I suggest we set it up as a monorepo, using yarn workspaces with the following projects:

• Web - marketing website
• App - streaming and video App
• Server / API - self-hosted NodeJS API service. This should incl. most of the current ./server folder and replace Nextjs' serverless functions
• Tools / AV - similar to packages/tools. I suggest a clean, fresh Remotion install that doesn't contain any old ffmpeg references.

The data folder is most important between projects and I suggest to keep this at the root, or as a separate packages/data to allow easy integrations/access across projects.

currently it is sorted oldest->newest

even though I like ETHBerlin3 - but I think newer conferences on top fit more user needs

Is your feature request related to a problem? Please describe.
Formatting text on the event homepage is cumbersome with the current plain text editor.

Describe the solution you'd like
Integrate a Markdown editor for easy text formatting, with a live preview feature.

Additional context
Markdown is common and would align with other platforms.

I noticed we have a lot of stale/inactive development branches.
It would be good to spend some time to cleanup and delete old branches.

I'd also see if there's any code we should refactor. During busy event weeks, it's easy to apply any hot/temp. fixes. But we should spend some time to refactor, cleanup and potentially remove any unused code, dependencies or packages we no longer use.

Bug Description

When navigating away from an event that has a custom logo and then returning to the homepage, the logo displayed is incorrect.

Steps to Reproduce

1. Navigate to an event that features a custom logo.
2. Use the 'back arrow' to return to the homepage.
3. Observe the error: the displayed logo is not as expected.

Expected Behaviour

The homepage should consistently display the StreamETH logo when navigated back to it.

Screenshot for Reference

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

Screenshots
Do you have an example from another platform, or prototype you made by yourself?

Is your feature request related to a problem? Please describe.
I would be great to have a short but clear README about streamETH, and where to find more information

User Story:

As an Event Organiser or User, I want an AI program to automatically generate labels and summaries for videos in the StreamETH app. This will enhance search capabilities and provide a tailored suggestion section for each archived video.

Context:

This feature will build upon an existing repository named shorten. The repository contains a Python script that utilises WhisperAI to create a text file from the video content. This text file can then be used to generate a summary as well as auto-labels for each video, which are stored in a JSON file.

How It Works:

1. The video gets processed by WhisperAI to generate a text transcript.
2. The Python script in the "shorten" repo analyses the transcript to generate a summary and identify key topics/labels.
3. The summary and labels are then saved in a JSON file, which is linked to the original video in the StreamETH app.

Acceptance Criteria:

• The system should be able to process a video and generate a text transcript using WhisperAI.
• The generated transcript should be analysed to create both a summary and relevant labels.
• Both the summary and labels should be saved in a Database. The transcription should be saved on Digital Ocean
• The filter bar should filter globally, not per event.
• The front-end should show the aiDescription

Notes:

• We may need to take a look at Redis or ElesticSearch to index the labels.
• Consider performance implications, as processing videos can be time-consuming.
• Assess the accuracy of the generated labels and summaries.

Bug Description
The stage tag is incorrectly displayed . Specifically, when there's only one stage, the stage tag should not appear. However, it's currently visible even for a single stage, which is misleading.

Steps to Reproduce

• Navigate to 'https://app.streameth.org/zuzalu/zuconnect__zk_track/archive'.
• Observe the display of the stage tag on the page.

Expected Behavior

• When there is only one stage, the stage tag should be hidden.
• When there are multiple stages, the stage tag should be displayed correctly.

Actual Behavior
The stage tag is incorrectly displayed even when there is only one stage.

Screenshot
Incorrect Stage Tag Display (The screenshot shows the stage tag being displayed for a single stage)

Describe the bug
Shows 404 when you open stream via iFrame

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://www.iframe-generator.com/'
2. Generate iFrame of 'https://app.streameth.org/zuzalu/zuconnect__zk_track/schedule'
3. Click on a node and selec "Go to stream"
4. See error

Expected behavior
Should open a new tab to the stream

Enable embedding for livestreams and archive sessions

Is your feature request related to a problem? Please describe.
Currently, as an admin or event organizer, managing events and their schedules is cumbersome and not straightforward.

Describe the solution you'd like
I'd like to have a streamlined UI that allows admins and event organizers to easily add, delete, and edit events, as well as modify their schedules. The interface should be intuitive and offer options for quick adjustments. We currently have /admin, but it is not fully functional and not accessible to event organizers

Additional context
This feature would significantly improve the user experience for administrators and organizers, making the platform more efficient for event management.

AFAIK the archive is currently enabled by flipping the archiveMode switch.
But the archive page should show up as soon as there are sessions with videos (i.e. have a videoUrl or playbackId property.

Title: Creating an Event Page with Ease

User Story:
As an event organizer, I want to easily create my event page so that I can effectively promote and manage my event without technical hurdles.

Acceptance Criteria:

1. Intuitive Dashboard:

   • Upon logging in, I should have access to an intuitive dashboard with a clear option to 'Create a New Event'.

2. Event Visuals:

   • I should be able to upload or link a banner or image that represents my event. The platform should offer image resizing or cropping tools to ensure the visuals fit well.

3. Details Input:

   • Fields for event details (name, description, location, start date, end date ) should be clearly labeled and have placeholder examples to guide input.

4. Customization:

   • I should be able to add event customisation: (logo, banner, cover image, accent color, font, enable / disable some page)
   • I should be able to choose which plugins i want enabled
   • I should be able to enable / disable pages
   • I should be able to add a custom domain to my event page

5. import event data:

• import event data from supported data sources: pretalx, google sheet
• if I have no previous data source, allow me to use the existing google sheet template, linking it to the event
• event data should be kept in sync at all times

7. ** Streaming provider**:

• I should be able to choose a streaming provider from the supported streaming providers (livepeer)

8. Preview Option:

   • Before publishing, I should be able to preview my event page to see how it will appear to attendees.

9. Save Draft:

   • If I'm not ready to publish, there should be an option to save my progress as a draft, allowing me to come back and finalize it later.

10. Help & Support:

• Accessible help documentation, tooltips, or even a chatbot should be available to guide me if I get stuck or have questions.

11. Publishing & Sharing:

• Once satisfied with my event page, a 'Publish' button should make my event go live. After publishing, I should be presented with options to share the event page link via social media, email, or other platforms.

12. Edit Option:

• After creating my event page, I should be able to easily navigate back to edit or update any details if necessary.

Notes:

• Streamlining the event creation process is crucial for user satisfaction, especially for users who might not be technically inclined.
• The balance between customization and simplicity is essential. Offering too many options can overwhelm users, but too few can limit their ability to make the event page feel personal.

In the archive page, when choosing a "date" from the filter search, the option dropdown has one entry per session item even if the date is the same.

How to reproduce: go to protocol berg archive page -> cilck on filter button -> select filter by date

Describe the bug
The schedule on Admin UI currently shows as 1 big list. Which makes scrolling between the player and sessions (at the bottom of the list) annoying. I suggest to separate the schedule into 2 list, e.g. processed or processing videos. And unprocessed videos.
It would be great to toggle (show/hide) the processed list so I can focus on sessions that have been edited yet.

Is Your Feature Request Related to a Particular Issue? Please Elaborate.
I often find myself experiencing eye strain when using the platform for extended periods, particularly in well-lit settings.

What Solution Do You Propose?
I'd love to see the addition of both a dim and dark mode to improve visual comfort. Personally, I find a grey-toned dark mode particularly easy on the eyes.

Any Additional Suggestions?
To make the feature user-friendly, perhaps a toggle button could be added to the interface. Alternatively, an icon from the lucide icon set could be incorporated that changes its appearance when clicked to indicate the mode switch.

Is your feature request related to a problem? Please describe.

Accessing the menubar at the top and left-side of the screen on mobile phones can be a stretch, making navigation a tad cumbersome especially with one-handed use.

Describe the solution you'd like

Relocate the menubar to the bottom of the screen on mobile interfaces to enhance accessibility and ease of navigation.

Additional context

It also annoying to first click on the hamburger menu to see the menu and then click what you would like to see

Title: Customizing Accent Color of Event Page

User Story:
As an event organizer, I want to set the accent color of my event page so that it matches my organization's branding and provides a consistent visual experience for attendees.

Acceptance Criteria:

1. Access Event Page Settings:

   • As an event organizer, I should be able to easily navigate to the settings or customization options for my event page.

2. Color Customization Option:

   • Within the settings, there should be a clear option labeled 'Accent Color' or similar, indicating where the color customization can be done.

3. Color Picker Tool:

   • I should have access to a color picker tool that lets me either manually select a color or input a specific color code (e.g., hex code).

4. Preview:

   • After selecting or inputting my desired accent color, a live preview should show how the event page will look with the new accent color.

5. Default Option:

   • There should be an option to revert to the default platform color or previously used color, in case I change my mind.

6. Save Changes:

   • After choosing my color, a 'Save' or 'Apply' button should confirm the changes and update the event page immediately.

7. Visual Consistency:

   • The selected accent color should be consistently applied to relevant parts of the event page such as headers, buttons, links, or any other highlighted elements.

8. Compatibility:

   • The chosen accent color should not interfere with the readability or usability of the event page. Text and other elements should adjust or offer contrasting colors to ensure everything remains clear and accessible.

9. Feedback:

   • Once changes are saved, I should receive a confirmation message or visual indicator that the accent color has been successfully updated.

10. Documentation/Help:

• If I'm unsure about how to set the accent color, there should be accessible help documentation or tooltips guiding me through the process.

Notes:

• The process of changing the accent color should be kept simple and intuitive to cater to organizers who may not be technically savvy.
• While customization is key, ensuring the event page remains user-friendly and legible is crucial. Too much freedom in color choice could lead to unreadable text or a visually jarring experience, so some guidance or restrictions may be necessary.

By allowing event organizers to customize their event's visual elements, the platform provides a more personalized and branded experience, fostering better engagement with attendees.

Bug Description
There's a noticeable flicker where the main event page is briefly displayed before redirecting to the archived event page. This not only causes a visual glitch but also affects the browser navigation, requiring two clicks on the back button to return to the homepage.

Steps to Reproduce

1. Visit 'https://app.streameth.org/zuzalu/zuconnect__zk_track'.
2. Notice the brief display of the main event page.
3. Observe the redirection to the archive page.

Expected Behavior

• The user should be directly taken to the '/archive' page upon clicking on the event card, without loading the main event page.
• The browser's back button should take the user back to the homepage in a single click.

Actual Behavior

• The main event page is briefly displayed before redirecting to the archive page.
• Two clicks are required on the back button to return to the homepage.

Title: Enabling Chat with Moderation for Livestreams

User Story:
As an event organizer, I want to enable chat for my livestreams and have moderation tools so that viewers can engage in real-time discussions while ensuring a respectful and relevant conversation.

Acceptance Criteria:

1. Chat Activation:

   • In the livestream control panel, there should be a clear option to enable or disable the chat feature.

2. Moderation Tools:

   • I should have the ability to appoint moderators for the chat.
   • Moderators and I should be able to mute or ban disruptive users.
   • There should be an option to set up a list of prohibited words or phrases that will be automatically filtered out from the chat.
   • I should be able to set a delay for chat messages, allowing moderators a window to review messages before they appear publicly.

3. Viewer Experience:

   • Viewers should be notified of chat rules or guidelines when they join the chat.
   • They should receive feedback if their message is flagged or removed, with a reason provided.
   • Viewers should have the option to report inappropriate messages to moderators.

4. Chat Features:

   • I should have the option to pin or highlight important messages at the top of the chat.
   • There should be a feature to conduct quick polls or gather feedback directly within the chat.
   • Viewers should be able to react to messages with predefined emojis or symbols.

5. Archiving & Review:

   • After the livestream, I should have the option to review the chat transcript.
   • Any incidents of moderation (e.g., muted users, removed messages) should be clearly logged for reference.

6. Integration with Other Features:

   • The chat should seamlessly integrate with other livestream features, such as Q&A and polls, allowing viewers to participate without leaving the chat.

Notes:

• The chat feature aims to foster community and engagement during the livestream, but it's essential to maintain a positive and respectful environment.
• Moderation tools should be user-friendly and efficient to ensure that moderators can effectively manage the chat in real-time.
• Feedback mechanisms for viewers are crucial to ensure they understand the chat guidelines and any actions taken on their messages.

Basic event information is currently only shown on the event overview page.

Once an event goes to archiveMode - this information is lost an no longer shown.
It would be nice to still display this information on the archive.

We could copy the entire hero section to the archive.
Or maybe add an about/info page

We need to improve how this page looks and align it with the overall design:

borders should be rounded-xl
the action bar on top of the player has the wrong color and his hiding the back arrow button
all text should we white
video player box is not aligned with the player box that we have on the live page
speaker component is not clickable, it should show speaker info

the extra filters button is hidden because its color is the bg-color
when clicking that button, the dropdown is overlaying weidly

Problem
As an event organizer, I currently lack the capability to create and edit events directly on the production server. This limitation hinders the real-time data loading for clients from GitHub, leading to delays and potential inaccuracies in the event information.

Desired Solution
I propose the implementation of GitHub API that enables users to seamlessly create and edit events directly on the production environment. This API integration will significantly enhance the efficiency of event management and ensure real-time data synchronization for our clients.

Additional context
Our current system's reliance on manual data entry and offline editing has resulted in delays and inconsistencies, impacting the overall user experience. By implementing this GitHub API feature, we can streamline the process of event creation and management, ultimately improving the service we provide to our users.

Currently data importers completely overwrite any JSON files in the repo.
We need to update our importers to check if a file exists.
If so, only write the imported fields. Any existing properties should be remain untouched and part of the files.

Priority on the session JSON files, as we will start writing data to those from the post-production flows as well.
We need to make sure we don't lose any data.

Description:
When navigating past the 00:00 time mark on the schedule, the UI starts to behave erratically. The schedule blocks appear either too short or too long.

• URL: streamETH Schedule Page
• Timezone: Tokyo

Steps to Reproduce:

1. Navigate to the schedule page.
2. Switch the timezone to Tokyo.
3. Scroll through the schedule to observe the issue.

Expected Behaviour:
The UI should cut off at 00:00 and transition to displaying the next day's schedule.

Screenshots:

Desktop:

• Browser: Chromium

Additional Context:
A temporary fix could be to cut off the display at 00:00 and not show the next day's schedule.