loomchild / sojourner-web

FOSDEM conference companion PWA

Sojourner Web

Sojourner conference companion PWA

Requirements

• Node 20.x

Build

Download node dependencies:

npm install

Run

Start the local development server:

npm run dev

Test

Launch style check:

npm run lint

Launch unit / integration tests:

npm run test

Deploy

Static application can be generated into dist/ directory using:

npm run build

You can test it locally by running:

npm run start

The deployment happens automatically to Netlify, nothing specific to do.

Note: use annotated tags to make them visible on About page.

Miscellaneous

Handling images

Resize PNGs using Tiny PNG: https://tinypng.com/ This could be done with GIMP, but unfortunately it doesn't preserve transparency when converting PNGs to indexed mode.

Schedule

CORS

To configure storage to allow CORS, see cors configuration in documentation.

sojourner-web's Issues

The refresh notification is nice but it showed almost all the time

Probably because the schedule was changing often. This made me think, why need the notification at all? Simply download the new schedule in the background and update it when done, no need to ask me for confirmation (I can't think of a use-case where I would not want the most recent schedule).

Feedback from @cimm after FOSDEM'20 talk.

Reminder to refresh schedule, based on HEAD

This seems to work with date in the past:
http https://www.w3.org 'If-Modified-Since:Sun, 7 Jan 2018 13:00:00 GMT'

My app uses the "if-modified-since" HTTP header to determine if the schedule actually changed and download the new version. If the server automatically regenerates it every x minutes, then this optimization is useless. So I would also recommend that all dynamic data should be provided in separate APIs/files.

Preserve picture-in-picture when navigating the site

Different across browsers.
Currently destroying with key.
Maybe in some absolute element or custom player that allows that.

Integrate YouTube videos (FlowCon)

Don't make the background of the app icon transparent, it doesn't work in iOS

iOS defaults to a black icon but there is some flickering every time the app closes. Not a big deal but it would look a bit better when you have a background colour on the icon.

Feedback from @cimm after FOSDEM'20 talk.

Link to archive editions: 2020, 2019?

Remove Refresh Schedule notification, update schedule directly

Integrate read-only chat

Convert home page to real links, so search engines can find them.

Also any other link should be converted.

Do not embed CSS on pages

Each pre-rendered page is 0.5MB - too much.

Experiment with real picture-in-picture on Chrome, esp. mobile

Persistence on iOS12 Safari not working

Since iOS 11 Safari has an Storage API.
But the persistence Feature does not work.
Any idea why?
For more details about the implementation: https://webkit.org/blog/8124/introducing-storage-access-api/

Auto-switch to the current day

On Sunday I constantly had to select the second tab in the bookmarks section since it would default to
Saturday. Small UX improvement.

Feedback from @cimm after FOSDEM'20 talk.

I could not remove bookmarks from the bookmarks section (latest iOS on an iPhone 6S)

Feedback from @cimm after FOSDEM'20 talk.

Do not ask for any permissions directly, display a message

See other apps for notifications. They display internal message, that user clicks to enable the real thing. Can perhaps use Banner for that.

Simple tutorial how to use the app

Add password recovery

There is no way to recover a lost password at the moment

It would be nice to tap the room in the map view and see what's the next talk in that room

Not sure how difficult that would be but Fosdem is often juggling to change rooms knowing you will lose your spot so if the next talk is interesting enough I might stick around a little longer.

Feedback from @cimm after FOSDEM'20 talk.

Share event button

Chronological view

Please add a view of all events sorted by time

7. The "room full" icon wasn't self-explanatory. It took me a bit to understand what it meant.

Feedback from @cimm after FOSDEM'20 talk.

Automated UI tests

https://github.com/garris/BackstopJS or alternatives.

Enable persistence on iOS 12.1.2 fails

Any idea why I can't enable persistence? I've created a bookmark on the home screen and launched the app from it. I can see that it uses 2.7mb of storage in the Mobile Safari settings.

Use mapState instead of getters

https://codeburst.io/vuex-getters-are-great-but-dont-overuse-them-9c946689b414

Live stream counter

8. The map of the ULB venue helped but zooming in on the map zooms the whole UI, meaning you have to zoom out again to see the back button

The map of the ULB venue helped but zooming in on the map zooms the whole UI. Meaning you have to zoom out again to see the back button. Maybe only zoom the map but keep the header in place?

Feedback from @cimm after FOSDEM'20 talk.

Direct HTTPS support via Github Pages

https://blog.github.com/2018-05-01-github-pages-custom-domains-https/

Migrate to webpack 4.5+

This way I can use spread operator in components (see webpack/webpack#5548).

Initial tests require upgrading webpack-dev-server and adding webpack-cli dependency. But there are still errors.

Initialize anonymous user by default

This will make the bookmark faster.
It would also make it possible to recover lost bookmarks if necessary.

Add a link to the video stream

It'd be convenient to have the talk details screen to have a link to the video stream.

A "my next talk" shortcut on the homepage

Just an idea but at the end of a talk, I often opened the app to see what's next which requires a lot
of scrolling. Would be nice to have a "your next presentation is X in room U1.22 and starts in 20 min" or something.

Feedback from @cimm after FOSDEM'20 talk.

Show talk title in title tag

E.g.: https://fosdem.sojourner.rocks/event/10109 shows Javascript | Sojourner

Show overlapping talks

Difficult one but the bookmarks section does not show when talks overlap. I often had a talk from, say 14 to 15h and another from 14h20 to 15h or so. It's fine but difficult to spot in the UI. Not sure if this is
easy to fix.

Feedback from @cimm after FOSDEM'20 talk.

Indicate the current time in the bookmarks section

The first 2 or 3 bookmarks are fine but later on the day I had to continuously scroll to the current time. This is the single most important feedback I can give you. Maybe grey out the talks that have started or/and indicate the current time with a horizontal line as Google Calendar does and auto jump to that time in the bookmarks list?

Feedback from @cimm after FOSDEM'20 talk.

Disable listrooms for FOSDEM 2021

Submit FOSDEM feedback via custom form

Perhaps can simply post to the official one (if not protected in any way) instead of providing a link.

Report number of people watching a stream

Could be done by using heartbeat function. Passing URL of stream as param.
For example every 10s, if stream is being played.
I could store hash of IP as key.
Then there could be periodic function that retrieves data from say last 30s, to create a record with stats per URL.

Remove ripple effect when touching UI list items, but not clicking

Feedback from Pentabarf / from the talk.
Remove ripple effect when touching UI list items, but not clicking.
Also perhaps make the list full width - There is now +-16px left and right.

Branding: optional powered by footer or other method

Add link to Stands website

Search result order

Please list title matches before other matches

Watch later / playlist

Integrate Q&A based on chat

Investigate the issue with temporarily disappearing bookmarks

Seems to happen when connection is lost during initialization. Perhaps store a copy in localStorage?

I don't worry too much about persistent storage anymore - perhaps I should look into this again? Perhaps settings screen when I can activate it, which in turn will trigger the system ask?

Reduce build.js size

https://stackoverflow.com/questions/35054082/webpack-how-to-build-production-code-and-how-to-use-it#35058239

HLS stream display (maybe using a player, see below)

Speaker List

List speakers, fetch their infos (photo, description, contact?) Both special list screen as well as clickable links on events.

Could be useful for both FOSDEM and FlowCon.

"What's happening" screen

First of all, thanks for the app! I've used it for FOSDEM'20 and found it super convenient. I will likely use it in '21.

This year, several times I found myself wanting a list of talks that are either happening right now or are about to start (e.g. I wasn't able to get into the room I wanted or I lost interest in the talk I was at). I think it'd be handy to have a separate screen for this. What do you think?

What about continuing to watch the same stream?

Kind of staying the room. Talks will use the same stream - perhaps automatically change description?

Move to Github project