Giter VIP home page Giter VIP logo

web-ui's Introduction

PodcastIndex Web UI

Podcast Web UI is a project that houses the code for the React app and express server for podcastindex.org.

  • Landing page for PodcastIndex.
  • Search for podcasts in index.
  • Simple podcast player for listening
  • List of apps using the PodcastIndex
  • Documentation and developer login for credential management

Project Structure

The project is split into two folders, ui, and server.

.
├── ...
├── ui
│   ├── public      # Static files for index.html and favicon
│   ├── fonts       # Fonts used in the UI
│   ├── images      # Images and icons that are part of the UI
│   └── src         # All React and client code
├── server
│   ├── assets      # static files that are dynamically updated
│   ├── data        # static data files (ie. json) that are dynamically updated
│   └── index.js    # express app that serves the UI and is a reverse proxy (replaces need for NGINX)
└── ...

The folder ui houses all the React and client based code and assets.

The folder server houses all of the API, static server data, and the reverse proxy to the PodcastIndex API using comster/podcast-index-api.

Server data and assets

The reason to build a custom express server for serving React and other data is due to the need for script updated .json files and dynamically adding apps to the /apps page. This data should not be bundled with the client compiled code.

CORS

The custom express server also is used to reverse proxy requests through the same domain to prevent CORS issues. Using the same domain to server up the UI content and to send api requests prevents CORS issues in modern browsers.

Getting Started

Set .env

You should see a .env-example file. Copy this and remove the -example. The file .env is ignored by GIT and is needed to set the API_KEY, API_SECRET, API_ADD_KEY and API_ADD_SECRET variables

Starting the dev server

In order to have the UI hot reload for development, we utilized webpack-dev-server this allows for easier debugging, etc. In order for the dev-server to connect to the API, you must first have set the .env file variables and have started the server with yarn start

# Install dependencies
yarn install

# Start dev server
yarn dev

# Start the node server in another terminal window.
yarn start

Running production

To start the server, simply run after setting the .env file

Note: Make sure to set NODE_ENV=production in the .env file

The below script will compile the code and then start the node server.

npm run build
npm start

Tech List

TODO

  • Font should load through webpack properly
  • Better image loading handling in the search results page.
  • Developers page and login

web-ui's People

Contributors

albertobeta avatar benjaminbellamy avatar bmaluijb avatar brianoflondon avatar cameron-ipfspodcasting avatar comicstrip avatar dabluck avatar daveajones avatar dellagustin avatar drunkplato avatar dwvisser avatar ericpp avatar georgel9 avatar jamescridland avatar joksas avatar keunes avatar ltaupier avatar marzal avatar merryoscar avatar mitchdowney avatar montekaka avatar nathangathright avatar pbaveja avatar pmusolino avatar samsethi avatar satoshisstream avatar stevencrader avatar thebells1111 avatar valcanobacon avatar yulafezmesi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web-ui's Issues

Add CastGarden to supported hosts

Hi there, Ken here, sorry I am not too savvy with github.
Not sure how to submit a Pull Request. Here is the info though for our app, if you could pleeeease help me get it listed on the hosts page I would greatly appreciate it. I put my email at the bottom too just in case:

App type:
App, Blockchain, Hosting, Node Hosting, Open Source, Other, Podcast Player, Video, Website

Supported Elements:
Funding, Live, Locked, Person, Podping, Search, Social Interact, Soundbite, Trailer, Transcript, Value

Platforms:
Hive, Mobile, Web


CastGarden - https://Cast.Garden
Email: [email protected]
CastGarden

Anchor-based podcast not playing on podcastindex or apps connected to the index

My girlfriend has a writers podcast called "Good On Paper"

She originally had it hosted on RSS.com, but switched to anchor to save money. Since then, the podcast has stopped playing on podcastindex-using apps, such as the podcastindex.com player, Fountain, and Podverse.

I tried to work around this by using an IPFS feed, but that didn't play either and subsequently there are two of her podcasts on the index now, with neither able to play.

Please help us 🙏

Darkmode

The health risks to users of white mode are dire, from bleeding eyes to permanent loss of sight.

Seriously, get a darkmode. 🖤

[I do have a rule to not contribute to free software projects that do not have a darkmode. But I love podcastindex.org too much, so I might give you some slack for now...]

Add web to Podcast Guru on Podcast Index - apps page

Podcast Guru, as per the following announcement, now has a "Web app". The current listing for this app on the podcast index app page (https://podcastindex.org/apps) has "Android, iOS".

I am preparing a pull request to be submitted directly to address this update.

To the developers here: thanks for all your great work on the Podcast index. Much appreciated.

Note I am not affiliated with Podcast Guru, I just found the anomaly and wanted to help out here.

blocking FLoC

@daveajones
not directly on the content here, but suggesting to do this for the websites of the project

details on the topic:

how to block with nginx: add_header Permissions-Policy "interest-cohort=()";

how to test a webservice: curl -sI https://ds.ccc.de | grep -i "Permissions-Policy" && printf "Above policy found.\n" || printf "No policy found.\n"
expected part in header: "Permissions-Policy: interest-cohort=()"

btw. Permissions-Policy … that used to be called Feature-Policy

Repository has no license

Hi,

I can't find a license for the code, this means that nobody can legally use or contribute to it. Can you please add a license?

Failing JSON validation

GitHub Actions workflow has been failing for the last three months due to use of unsupported schema values (see this for example). Which of the following should be added to apps-schema.json and which should be removed from apps.json?

  • iPadOS (part of platforms)
  • App (part of platforms)
  • Randomizer (part of supportedElements)

Suggestion: add a "this feed last podping'ed" display

Using the podping history end point it should be possible to add a nice display of the last 5 times the show has sent out a podping.

https://plug-play.imwatsi.com/docs#/podping/get_podping_url_latest_api_podping_history_latest_url_get
curl -X 'GET' \
  'https://plug-play.imwatsi.com/api/podping/history/latest/url?url=http%3A%2F%2Ffeed.nashownotes.com%2Frss.xml' \
  -H 'accept: application/json'

If you want you can link the trx_id to a page like this:

https://hive.ausbit.dev/tx/105bddefd3fd8c17f571b7dca533efe0f8b4c9c7

{
 "feed_updates": [
   {
     "trx_id": "665fb01cea61eb3894e32b89d0c7e7ade8b0117f",
     "block_num": 63400457,
     "created": "2022-04-10T21:01:00"
   },
   {
     "trx_id": "7e9d72ccbcffdebb60cfc35ceb34702e9e92bf62",
     "block_num": 63400320,
     "created": "2022-04-10T20:54:09"
   },
   {
     "trx_id": "6d249d5e1f889bd3b379372527ad4d60b58c2a93",
     "block_num": 63306253,
     "created": "2022-04-07T14:17:57"
   },
   {
     "trx_id": "fd6d0f6cc02f05decafcad26681c1d2d3347c60b",
     "block_num": 63306139,
     "created": "2022-04-07T14:12:12"
   },
   {
     "trx_id": "105bddefd3fd8c17f571b7dca533efe0f8b4c9c7",
     "block_num": 63195260,
     "created": "2022-04-03T17:32:15"
   }
 ]
}

Link to episode

Currently it is possible to link to a whole podcast landing page. e.g. https://podcastindex.org/podcast/920666

It would be great to have a share link for each dedicated episode [maybe even with time stamps].

And even better if there would be a link preview of the podcast content so that in the external site the show can be played too.

Bug: Comments not loading

This is likely a regression of #236.

VM32:1 Uncaught (in promise) SyntaxError: Unexpected non-whitespace character after JSON at position 1574
at JSON.parse ()
at n (bundle.js:6:867129)

image

[Value] Add WebLN support

First of all, what you've built is absolutely incredible, great work, thank You!


podcastindex.org has the web player, and it would be great if the listener can pay those nodes in the value field even when listening through this web client.

Adding a browser lightning wallet to the website is certainly a bad idea.

However, there are browser extension lightning wallets [usually connected to a remote ln node], which can pick up an invoice displayed on a website, then pop-up the browser extension for user confirmation. Optionally the user can also set an upfront agreed upon "allowance" to a certain website.

This works with the WebLN stack, which is "a way of interacting with a user's Lightning node via the browser." I'm not too familiar with the nuances of the spec, but I think it would require little work [non-dev-speak] on the podcastindex.org site, other than displaying the ln keysend invoice in the particular WebLN format. I am also not sure how to optimize this for streaming payments.

@bumi might know more details on how to get it done.

New 'type' column for apps page

Adding AntennaPod to the apps page I thought we held the open source podcast manager app monopoly and was surprised to see other 'apps'. One I tried appeared to be a web app - what a relief :p

As (hopefully) more and more platforms and apps integrate with Podcast Index, it will be helpful as a user to filter for a specific type you're looking for.
I wanted to propose therefore a new 'type' column with the following possible values:

  • webapp
  • Android app
  • iOS app
  • Desktop application
  • Hosting platform
  • Directory

Desktop could ofc be specified further (Linux/Windows/Mac), but may be unnecessary for the (long) time being.

Then filtering based on this column could be added as a later improvement. For now it'd already be great to start collecting structured data.

This American Life

A minor complaint. This American Life link has been dead since September

Rewording "Recent Podcasts"

Scroll for TL;DR
I just thought this was at least worth discussing if it has not been already.
Thanks for the hard work and the feedback!

This is my first contribution to Podcasting 2.0, and while it's not a technical solution, it has to do with branding which one could argue is equally as important.

Through the eyes of a newcomer to podcastindex.org, one of the first things that is noticeable on the page is the "Recent Podcasts" widget (section?) which allows a person to browse and discover seemingly random episodes from podcasts contained inside the index. I found myself going from excitement to subtle confusion when I couldn't decide whether or not these episodes were actually randomly chosen or specifically featured by the admin of podcastindex. I leaned more toward thinking these episodes were chosen by the admin at first glance despite the fact that the word "featured" is not present but realized after refreshing the page that there is some sort of randomization going on.

At this point it hit me that a true newcomer might automatically assume that these podcasts were featured on purpose. This has the potential to reflect negatively on the project if the wrong type of podcast shows up and is terrible in one way or another (either bad production or something generally offensive).

If these podcasts are actually random, I suggest that the words "Recent Podcasts" be changed to "Pod Roulette" or "Random Podcasts". This way if anything shows up that isn't desired, the newcomer knows that it has nothing to do with the admin or the project as a whole. I think small changes like this go a long way to make the experience better and clearly understood by anyone who lands on the page for the first time.

TL;DR: "Recent Podcasts" on the official project website may make it appear there are specially featured podcasts instead of randomly selected podcasts. Change wording to better represent what is actually being shown such as "Pod Roulette", "Random Podcasts" or "Random Recent Podcasts".

Comments: Add button / icon to open the original post in a new tab

Currently the only way to comment on the podcasts in the podcast index is to copy the link of the post and use it to find it in the instance where the user has and account.

The only way to get the original post link, currently, is to copy it from the timestamp. Having a link to the post/comment is a comment UX practice, but it is kind of a hidden feature, as it is not that intuitive.

I suggest that we add a more clear indication on how to open the original post or copy the post link.
A common icon for opening a link in another domain is like the one shown in the screenshot below:
image

Related issues

Links and References

Searching for a string with # stalls

If you enter a # or a Hashtag like #hashtag into the search field the search doesn't return a result and the round thingy spins indefinitely. @daveajones on
Mastodon said something like the # doesn't get properly escaped.

Podcastindex.org website is unusable with javascript disabled

Repro steps:

Visit podcastindex.org with javascript disabled (either by setting, or by a browser extension such as noscript)

Expected results

Some features may not be lit up, but site masthead, description, about page, and navigation links work. Site can be navigated to reach important pages such as API reference, github repos. A new user can tell what a "podcast index" is, in order to decide whether they want to light up the other features.

Observed results

Site is a blank white page with nothing on it.

When podcastindex.org started out back in September, the site was mostly HTML+CSS, and a non-JS user could tell what the site was about and navigate to other pages. The only thing that didn't work was the random-episode-player carousel.

Episodes not showing up

This is almost certainly not the right repo to file an issue in / channel of communication, so I would appreciate help finding the right one.

Regardless, I'm trying to figure out why no episodes are appearing for the following podcast:
https://podcastindex.org/podcast/4096769

At first I assumed it was just because there is some service that needs to download the audio files first, but it's been 48 hours, so now I'm thinking there may be something wrong with the feed. How do I go about debugging this?

trend issue

It seems that Society and Culture (77 and 78) give the same trend results.
All the best and thanks again for the database!

Contact method for App Devs on the Apps page?

Could we have a contact field on the Apps page so we can go direct to the devs behind them?

My personal pref would be for the devs to list their podcastindex.social account names!

stats.json file

@drunkplato Here is what the file contents will look like:

{
"feedCountTotal": "1,318,328",
"feedCount3days": "81,919",
"feedCount10days": "208,264",
"feedCount30days": "303,007",
"feedCount60days": "376,576"
}

Just a flat json object. stats.json

Put it anywhere in your directory structure that's best for your code and i'll just have a cron job update it regularly.

Page to view Podcast in index

Its been discussed on the mastodon and podcast that there is a request to have a page on podcastindex.org to view the podcast data.

Here are my thoughts about the features the page should have. Please add or suggest additional ideas below

  • URL: podcastindex.org/podcast/
  • Link to page from search results
  • Display (at a minimum) the same fields shown in the results page
  • Display the most recent episodes

Add anchor target for individual episodes

Would be great if we could send out links to share specific episodes with each other.
Right now I can only link people to shows.

image

Is there an episode detail page I'm missing?

Is the blog abandoned?

I see it has not been updated since Nov 6 as of now and the link for podcast episodes just seem to link to the jpeg for the logo.
blog-image-links

Is the Supported Element "Value" or "Sat Streaming"?

Do "Value" and "Sat Streaming" indicate the same feature? If so, it would be good to standardize on one. (My preference would be "Value", but I am fine as long as there is one term in the UI.)

I see that both are allowed values in apps-schema.json. So, I guess a PR implementing this change would remove one of them, and edit apps.json into compliance.

Thoughts?

P.S. related, but probably deserves its own issue tracker: It would be nice to have hovertext over the element links with a brief description of what they are. Alternatively, a collapsed section of the page could provide a glossary.

API calls don't work on local machine

I may be doing something wrong, but I can't get the API calls to work when running locally. I've created a .env file with my keys but it always fails.

Here is the error that is shown in the terminal after running yarn start

[HPM] Error occurred while trying to proxy request /api/recent/episodes?max=7 from localhost:9001 to http://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.