podverse / podverse-web

Podverse web app written with React and Next.js

Podverse Web

• Languages
• About
• Getting started
• How to run the app locally
• Git History
  • Ignore linter-only commits rules in Git history
• Contact

generated with markdown-toc

Languages

Translations are greatly appreciated! If you would like to help translate Podverse, please visit our Weblate page.

About

Podverse is a FOSS podcast manager for iOS, Android, F-Droid, and web that supports Podcasting 2.0 and value for value features.

Features of this web app include:

• subscribe to podcasts
• audio playback
• video playback
• livestream playback
• boosts
• chapters
• cross-app comments
• transcripts
• create and share clips
• create and share playlists
• create a listener profile
• subscribe to listener profiles
• screen-reader accessibility

Getting started

If you are looking to run this app or contribute to Podverse for the first time, please read the sections that are relevant for you in our CONTRIBUTE.md file in the podverse-ops repo. Among other things, that file contains instructions for running a local instance of the Podverse database.

How to run the app locally

To run Podverse web locally:

1. have node >= 16 installed
2. create a .env file
3. install node modules
4. run the app
5. open localhost:3000 in your browser

To create a .env file, copy the .env.local-prod-data.example file in this directory, and rename it to .env. The default values in this file will set the web app to load prod data from <api.podverse.fm>. You can change it later to use a local database as described in the CONTRIBUTE.md.

To install the node modules, run:

npm install

Then, to run the app:

npm run dev

Then open a web browser and go to http://localhost:3000.

Git History

Ignore linter-only commits rules in Git history

If you'd like to ignore noisy linter-only commits in your Git history, we have a .git-blame-ignore-revs file that can filter out problematic commits that were the result of ONLY doing lint fixes. Your local machine can be configured to use that file as a list of commits that should be ignored while doing blames and showing inline file history.

This can be configured by running:

git config --global blame.ignoreRevsFile .git-blame-ignore-revs

Which was taken from https://michaelheap.com/git-ignore-rev/.

Contact

We can be reached in our Matrix space (preferred), Discord channel, or by emailing [email protected].

podverse-web's Issues

Fix flicker in navbar for logged in users whenever a page loads

Right now navbar stuff is appended dynamically with JS, and for logged in users, this leads to a perceivable delay in the navbar loading after the rest of the page has finished loading.

Track unique page views to clip pages via access logs

I'm not sure where to get started utilizing these access logs. End result is I'd like to be able to retrieve unique page views on clips just like any other clip property, so we can filter and sort clips based on unique page views.

Furthermore, ideally the unique page view tracking could tell us stuff like which clips have had the most unique views in the last 7 days, or in the last 14 days, in addition to for all time, etc. The goal being to be able to have a sorting option where the "freshest" content makes it to the top.

Fix bug where pages are Not Found when user has an expired auth token

Enable sharing clips by setting start and end time in query parameters

Clear all form inputs after save

Fix Facebook and Twitter meta tags

familiarize yourself with the ops scripts & change config values for prod/dev

Try using ansible to deploy the app to the hosting.

In the private podverse-ops repository (invite sent) there are two configuration files prod.yml and dev.yml -- the specifics will need to be entered

should have Podverse available in your dropbox for keys and credentials

Delete playlist from server

Now that playlists are automatically retrieved based on userId in the mobile app, my userId is full of test playlists that I don't want that I'd like to delete.

The ability to delete a playlist from the server based on playlistId will be useful eventually. Until there's auth though it may not be necessary.

What's a good way to setup @podverse.fm email addresses?

I followed the steps to setup a Webfaction email, and then I go to Roundcube Webmail to login, but then my username and password doesn't work and I can't login.

It looks like I could setup @podverse.fm to import through a @gmail account, but I'd rather not have all mail go through a 3rd party if that's unnecessary.

Also, I'd like the webmail UX to be pretty simple for a non-developer to jump into. I thought Roundcube might be good enough but I can't login. Any other recommendations?

Basic digest shared secret auth for api write access

Fix all the tests broken since the podcast-db decoupling

Broken test apocalypse...

Track data on each page with Google Analytics

Add pagination to home page clips

[podcast/episode filter] Provide the filterable properties.

Ensure that there are fields inside the clip object so that we can do a query something like this:

Find all clips where podcast.rss_url equals 'http://supermariopodcast.net/rss'
Filter where podcast.rss_url == 'http://supermariopodcast.net/rss'

Find all clips where the episode mediaURL equals 'http://supermariopodcast.net/media/ep1.mp3'
Filter where episode.mediaURL == 'http://supermariopodcast.net/media/ep1.mp3'

This will cause duplicates if a podcast provides multiple mediaUrls for acc, mp3, ogg; so maybe there is a better identifier, maybe episode.title is good enough? Using the mediaURL is nice because the clip would be very related to that. Something to dwell on and think about. Regardless we have to provide something to filter on.

Podcast pages seem to load slow

How can we sort playlistItems (mediaRefs) based on the time they were added to the playlist?

Very low priority. I am moreso curious how something like this gets done.

How do we determine (and sort by) the time a relationship between two things was established?

podverse-admin (data admin app)

• login / logout
• add new podcast
• delete podcast
• edit mediaref
• delete mediaref
• edit playlist
• delete playlist
• block/hide user
• disable user
• make user admin of podverse-admin

Load podcast thumbnail image instead of full size when possible

This depends on work done in podverse/podcast-db#7

Provide HTML error message when clip no longer has a working mediaURL

Set duration in the templates

Previously in NeDB we passed duration as a property of Clip, along with startTime and endTime, but this time I was thinking we should instead set duration as a fake (?) property of Clip, retrieved through a getter method or something.

412 Precondition Failed error when attempting to change currentTime of episode

The podcast History on Fire will play from start to finish successfully, but if you try to skip forwards or backwards in time it will fail.

Inspecting the Network tab, I can see it failed with a "412 Precondition Failed" error.

The episode media file is served by SquareSpace. I wonder if the podcaster opted for this behavior or if this is a bug?

I was able to reproduce the issue on Player FM's site, so it's not just us.

content negotiation for clip/playlist

for reducing urls to

/playlist/:name
/c/:id

Invalid input syntax for timestamp when creating a clip

Ran into this one when trying to make a clip from The Adam Carolla Show (recent episode with Tim Ferriss). Most podcast's pubDates work fine, but Postgres rejected this one.

Any ideas for how we can work around this? Is there something you can shove a variety of timestamp formats in, and it gives you a neatly formatted Postgres friendly timestamp?

The offending date format:
Mon, 16 Jan 2017 00:01:00 PST

Hide logged in user only features from non-logged in users

Add Edit/Delete feature to QueueModal

Playlist item optimization

• single item add request
• ... playlist pagination.. ?

Talk about a "recommended for you" system

Prevent mediaRefs that are full episode references from appearing on home page

Associate playlists and users to know which playlists a user is subscribed to

There seems to be a broader story here about enabling the app to save properties to the User object.

This example might be handy.

podverse-dev (dev resources app)

• login / logout
• get api key
• revoke api key
• mission
• what we offer
• documentation
• license
• swagger docs
• postman project

Fix timestamp error for mediaRefs that are references to full episodes

Add "Make Clip" feature to the web app

I'm wondering if this should be built with the static db, or if this is a feature we should only implement with a relational db.

This feature would require a podcast syndication service comparable to the one written for the podcastquotes repo. This job would need to run about every 30 minutes or so to make sure the server has the latest podcast and episode data.

Handle when an episode previously in a feed is no longer available in the feed

Not the priority right now, but something to be aware of because this use case is pretty common.

Dan Carlin's Hardcore History provides the last 10 episodes for free, but anything before that goes behind a paywall.

Maybe we can detect when an episode's mediaURL and/or GUID is no longer in a feed, then if someone tries to access a clip based on that episode, we display a "this is clip is no longer available message"? Maybe with some more details to explain why this happens from time to time.

Even if we could give subscribing users access to the episode behind the paywall, maybe we can't assume the mp3s are still identical and therefore the clip metadata is no longer valid.

Make http://dev.podverse.fm and http://podverse.fm redirect to https://

Bug with reference to Episode media file

With this clip from the JRE, apparently the file previously lived at this URL:

http://traffic.libsyn.com/joeroganexp/p824.mp3

But now it lives at this URL (the last character before .mp3):

http://traffic.libsyn.com/joeroganexp/p824a.mp3

The result is the clip detail page cannot load the mp3.

Mp3 URL's changing seems to be an uncommon, but it can happen. It seems in the case of JRE they released an original version of episode 824 named p824.mp3, then released a second version named p824a.mp3. Rogan RSS

I wonder how or if we could automatically account for this scenario.

Rewrite promises to not indent the "then" statements

Ugh I did this everywhere

How to efficiently derive episode count of all podcasts a user is subscribed to, and the lastEpisodePubDate for each of those episodes

On the My Podcasts page (for logged-in users only), you see a list of all the podcasts you're subscribed to, along with their total episodes and the publication date of their last episode.

The way I'm loading data on this page is comedically bad, passes insane amounts of unnecessary data to the page:

1. I call the User.get service to get the user object, including all of its subscribedPodcasts, and all of their episode information, and send the whole thing to the page.

2. I count how many episodes are in each podcast to derive the episode count.

3. For the lastPubDate, I take the most recent episode in the podcast object, then grab its date.

I've tried a whole bunch of Sequelize things to query this data in the User.get service, but no luck...

I am considering manually adding "episodeCount" and "lastEpisodePubDate" to the Podcast model itself, then auto populating those fields during feed parsing...this seems efficient, but it also seems like there should be a better query-based solution to handle this.

Any ideas for a better approach to use here?

Prevent full episodes from being added to the My Clips playlist

Figure out how to efficiently derive total number of clips created for an episode

If I'm on a podcast page and I see 50 episodes listed on the page, I want to see the total # of clips that have been created for each individual episode on that page.

I've tried a few times to come up with an efficient approach, but haven't figured it out yet. I think we might want to use a Sequelize getter method on the Episode model, but all my attempts have failed to make that work so far.

Firefox - audio.currentTime does not position accurately for some mp3 files

Jotting this down for future reference.

audio.currentTime will position accurately in all browsers except Firefox with certain files.

Dan Carlin's Hardcore History consistently has problems with currentTime positioning. The audio will be 10-20s off from the actual clip starting position.

I thought the issue might come from Dan Carlin's podcast being so long (over 3 hours), but I cannot reproduce the issue when playing Joe Rogan podcasts (also 3 hours long).

This bug appears to be reported in Firefox's issue tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=994561

Weird inaccurate timestamp issue since switching to Postgres, timestamps seem to randomly increment

@scvnc, do you know if I need to do any special timezone handling stuff to accurately store timestamps with Postgres?

Ever since switching to Postgres, when I make many clips for the same episode, the episodePubDate saved to those mediaRefs are incrementing.

So clips from the same episode are storing episodePubDate as:

1/5/17 10 PM
1/6/17 4 AM
1/6/17 4 AM
1/6/17 4 AM
1/6/17 10 AM
1/6/17 10 AM

They should of course all save identical episodePubDates, but instead they're randomly incrementing them by 6 hours.

I thought this was working fine in Sqlite3. Have you run across something like this with Postgres before?

Screenshot:

Font Awesome icons flash before loading on Chrome

I'm using OSX El Capitan - Chrome 56, and the Font Awesome icons are not rendering until after the rest of the text, even though the Font Awesome CSS is loading at the top of the page, and it's not loading over CDN.

This is most visible on the About page.

This issue does not happen on Firefox 52.

None of the hacks I found on Stack Overflow worked for me :(

App won't start for me :(

I was using the app for a couple months, then it stopped being able to open one day. The splash screen appears, but then the app immediately closes...no error report is

Sooo I wanted to get some debugging information, but whenever I try to build the app to see the crash info in Xcode, the build appears successful, but then I immediately get this error:

The app I have was installed via a Fabric build, and I suspect this has to do with some sort of provisioning profile issue or something.

The top answer for this issue on SO is basically to delete the app then rebuild, but that would defeat the purpose of me connecting the app to Xcode to get the crash details...

PostgreSQL migration issue: SequelizeDatabaseError: relation "mediaRefs" does not exist

Trying to figure what I'm doing wrong here. I can currently create a PostgreSQL on npm start with the revised migrations/initial.sql file, but when I try to visit the home page (which calls the ClipService.find method) I get this error in the terminal:

SequelizeDatabaseError: relation "mediaRefs" does not exist
    at Query.formatError (/Users/mitch/Repos/podverse-web/node_modules/sequelize/lib/dialects/postgres/query.js:357:14)
    at .<anonymous> (/Users/mitch/Repos/podverse-web/node_modules/sequelize/lib/dialects/postgres/query.js:88:19)
    at emitOne (events.js:96:13)
    at emit (events.js:188:7)
    at Query.handleError (/Users/mitch/Repos/podverse-web/node_modules/pg/lib/query.js:131:8)
    at .<anonymous> (/Users/mitch/Repos/podverse-web/node_modules/pg/lib/client.js:180:26)
...
  name: 'SequelizeDatabaseError',
  message: 'relation "mediaRefs" does not exist',
  parent:
   { error: relation "mediaRefs" does not exist
       at Connection.parseE (/Users/mitch/Repos/podverse-web/node_modules/pg/lib/connection.js:554:11)
       at Connection.parseMessage (/Users/mitch/Repos/podverse-web/node_modules/pg/lib/connection.js:381:17)
      ...
     position: '47',
     internalPosition: undefined,
     internalQuery: undefined,
     where: undefined,
     schema: undefined,
     table: undefined,
     column: undefined,
     dataType: undefined,
     constraint: undefined,
     file: 'parse_relation.c',
     line: '1159',
     routine: 'parserOpenTable',
     sql: 'SELECT count("mediaRef"."id") AS "count" FROM "mediaRefs" AS "mediaRef" LEFT OUTER JOIN "episodes" AS "episode" ON "mediaRef"."episodeId" = "episode"."id" LEFT OUTER JOIN "podcasts" AS "episode.podcast" ON "episode"."podcastId" = "episode.podcast"."id" WHERE NOT ("mediaRef"."title" = \'\');' },

I read a few things about how PostgreSQL auto reduces table names to lowercase unless the table name is surrounded with quotation marks. I thought maybe I was doing that wrong, so I surrounded the "mediaRefs" table name in the migration file with quotes...but that hasn't fixed my problem.

Any ideas what I could be doing wrong?

Update the userId of all playlists and clips that have a matching userId

Make episode pubDates display relative to the user's current timezone in production

For some reason episode pubDates display correctly converted relative to my current timezone in my local environment:

But they display relative to a different timezone (UTC?) on pages in production:

Any ideas what could be causing this discrepancy? I want the production page to use the local timezone, like my local environment does.

The filter that converts the date into a readable date can be found here:

https://github.com/podverse/podverse-web/blob/master/src/nunjucks.js#L62

Retrieving clips by userId from the server

@scvnc sorry I might be doing something wrong here, but I haven't been able to figure it out.

I can get playlists created within the app to retrieve successfully no problem using https://podverse.fm/[email protected], but I cannot retrieve clips successfully using https://podverse.fm/[email protected].

The failure could be that my SaveClipToServer.swift file in the mobile app is not saving the userId properly, but from what I can tell the service should be sending a parameter of clip.clip.userId = [email protected] to the web app.

I would like to inspect the JSON of the clips that are being created, to see if the userId is not being passed like I expect, but I don't know / forgot how to retrieve the JSON of individual clips.

If the clip.clip.userId value is passed into the JSON correctly, then it would seem that there is something not working in the getClipsByUserId service.

This isn't urgent because I actually just need to retrieve playlists from the server right now (one of the default playlists is called "My Clips", so we can parse that to sync my clips saved on the server with my mobile app), and I can do that successfully.

Write test for retrieveUserAndAllSubscribedPodcasts

I gotta remember to do this.

Remember a userId's favorite podcasts

This feature would be a big help for me. I am constantly deleting then reinstalling the app, and I have to re-subscribe to all of my podcasts each time I do that.

It would be nice if I could save an array of podcast data (just the title and RSS URL) associated with my userId on the server, then be able to retrieve that from the server. This way when I reinstall the app, I can type in my userId, login, and all of my favorite podcasts would be already available on my home screen.

This would also be nice because typically there are no more than 10 podcasts I am subscribed to at one time (due to device storage limitations), but there are like 50+ podcasts I would like to check out from time to time. With this feature, the top of my Podverse mobile app home screen could be the 10 podcasts I am currently subscribed to, while below that could be my 40+ "favorited" podcasts, that I may want to resubscribe to conveniently or browse for new episodes.

Media player fails to load on older Android browsers

This issue is reproducible on Samsung Galaxy 3 with Android 4.2 and below. I am not sure the full scale of devices, OS, and browsers affected.

It seems like Samsung Galaxy 4 and above do not have the issue in Chrome or Firefox.