Welcome to our Feed-Player React Project! This project provides a modern and user-friendly interface for viewing a series of images and video pulled from RSS, JSON, CSV and YAML. The UI is built using Vite, ReactJS, HTML, CSS, and JavaScript. The Feed-Player is designed to be fully responsive and packed with a range of features to enhance your viewing experience.
Check out the Live Preview of the Feed-Player project on model.earth.
View Feeds - The Feed Player is being designed to convert APIs, JSON and .CSV into video-like presentations. Bluesky RSS Feeds - Click "Turn on CORS passthrough". About Bluesky RSS.
JSON for video, image and feed links - We will also load from this Google Sheet
Place your name here if you're working on an update.
1.) TO DO: Update the Yarn Build to make the player an embeddable widget. Here's possible setup info in ChatGPT.
In the existing code, we tried to automate copying the index-xxxxxxxx.js and index-xxxxxxxx.css files to feedplayer.js and feedplayer.css within dist/assets. We replaced vite.config.js with vite.config-upcoming.js, but it's not working yet (the copy might run before the build completes). Once generating a consistant .js and .css file name, edit feed/intro.html to use feedplayer.js and feedplayer.css (or whatever .js file name is standard for a Vite widget). Also adjust so the widget can be played on the main feed/index.html page. Marco shared a link to How to copy images in DIST folder from assets in Vite js
2.) TO DO: Update the progress bar to include multiple clickable sections when there are sequences of images. - Matt B
3.) DONE: Aspect ratio of video remains the same when showing landscape image.
4.) DONE: Pulled image and video links from a Google Sheet by implementing the Content/ContextGoogle.jsx page which pulls from this Google Sheet - By Gary
5.) DONE: Add columns for Title and Description in the Google Sheet - Matt B
6.) TO DO: Use Vite to add Swiper Element in the "feed" repo and provide a filmstrip based on the images in incoming feeds. Place in a "swiper" folder. See Swiper Element Setup and Film-strip sample - We'll avoid showing multiple heros at the same time - Srinath
7.) TO DO: Load images into the Feed Player from our requests repo CSV prompt file.
8a.) TO DO: Pull NASA feed into React Feed Player and show images. - Noopur : Done
8b.) TO DO: In Javascript feed/view page, pull in multiple Bluesky RSS feed links by passing in a pipe | separated list of feed urls. Add loop when pipes found in the url value in both JQuery feed/view - Noopur : Done
8c.) In React Feed Player, using Feeds tab CSV pull from Google Sheet, split on the pipe in the React Feed Player. - Noopur
9.) Pull the replies for each Bluesky post in the feed. Use the screen-grab technique that we use to grab images from news sites that are listed in the feed. Scrape the posts from the Bluesky website. Grab replies for the top 3 posts. If the process doesn't work, leave the attempt commented out. - Noopur
10.) List of feeds on right of player with links to /feed/view/#feed= - Kalyan
11.) TO DO: Update javascript in this Building Transparency template page to allow an API token to be pasted into the "Your API Key" field.
12.) TO DO: Create a Python process using Github Actions that automatically pulls a new Building Transparency API token every 24 hours. See our existing Python for sample of refreshing the API using a username (email) and password.
13.) Supabase integration - Add a process for saving posts, links and comments related to feed items in Supabase within the Earthscape NextJS repo. Save the ids of the RSS feed item hierarchy from BlueSky and relate it to threaded replies.
► Play/Pause: Easily start and pause the playback with a single click.
■ Stop: Stop the feed playback and reset it to the beginning.
🔊 Volume Control: Adjust the volume level to your preference by increasing or decreasing the volume.
🔇 Mute: Quickly mute or unmute the feed's audio with the mute button.
⛲ Full-Screen: Enjoy your videos in full-screen mode for an immersive viewing experience.
⏲ Remaining Time: The feed player will display the remaining time of the current feed.
▶ Navigation: Seamlessly navigate to the next or previous item in the playlist.
📺 Play by URL: Paste a feed URL to play any valid feed format directly from the web. (Coming soon)
The Feed-Player interface that is both visually appealing and intuitive to use. The controls have been thoughtfully designed by to provide easy access to the various functionalities while keeping the user experience smooth and engaging.
Fork our two repos (localsite and feed) and clone into your webroot
git clone https://github.com/[your account]/localsite.git
git clone https://github.com/[your account]/feed.git
website
├─ localsite
└─ feed
├─ README.md
├─ dist
├─ src
├─ view
├─ package.json
├─ vite.config.js
└─ .gitignorepython3 -m venv env
source env/bin/activate
python -m http.server 8887
On Windows, the second line is:
env\Scripts\activate
Feed Player - localhost:8887/feed Feed View - localhost:8887/feed/view
cd feed
If you don't have yarn yet, install it with npm install --global yarn
You can check if you have yarn with yarn --version
Check if yarn is installed:
yarn --version
Install yarn if you don't have it yet:
npm install --global yarn
Install the required dependecies:
yarn
If the package-lock.json file change significantly, revert and try this yarn install command:
yarn install --immutable --immutable-cache --check-cache
The command above requires yarn 2 and prevents third-parties from altering the checked-in packages before submitting them. Source.
It's the equivalent to npm ci to avoid updating package-lock.json, which occurs with npm install.
yarn dev
Or you can skip "yarn dev" and view at http://localhost:8887/feed/dist
yarn build
View at: http://localhost:8887/feed and http://localhost:8887/feed/dist
After building, you may need to manually edit the index-xxxx.js and index-xxxx.css links in intro.html.
Deploy to your fork on GitHub and turn on GitHub Pages for localsite and feed.
Your updates can now be reviewed at:
https://[your account].github.io/feed
https://[your account].github.io/feed/dist
We included localsite navigation using the following two lines. It's non-relative so changes to the base path won't break the nav. Source. Another option would be to add localsite as a submodule or add the localsite github path to the package.json file.
<link type="text/css" rel="stylesheet" href="https://model.earth/localsite/css/base.css" id="/localsite/css/base.css" />
<script type="text/javascript" src="https://model.earth/localsite/js/localsite.js?showheader=true"></script>
- ReactJS: Building the user interface and managing component-based architecture.
- Vite: Fast and lightweight frontend tooling for development.
- HTML: Structuring the content and layout of the video player.
- CSS and SCSS: Styling the UI components and ensuring responsiveness.
- JavaScript: Adding interactivity and logic to the video player functionality.
Vite is preferable to Create React App (CRA) because Vite does not rebuild the whole app whenever changes are made. It splits the app into two categories: dependencies and source code. Dependencies do not change often during the development process, so they are not rebuilt each time thanks to Vite.
Contributions to the Feed-Player Github Repo are welcome! If you have any improvements, bug fixes, or additional features in mind, feel free to fork this repository, make your changes, and submit a pull request.
This project is licensed under the MIT License,
which means you are free to use, modify, and distribute the code as you see fit.
We hope you enjoy using the Feed-Player!
If you have any questions, requests or feedback, please post an issue in our Feed Player repo or the parent Video Player repo.
Happy feed viewing! 🎥🍿