Simple example of [embedding player](embed-player.html) and [Discord Placeholders](#members=discord)
Welcome to our FeedPlayer 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 with filmstrip navigation using swiper.
Check out the FeedPlayer and Swiper on DreamStudio.com.
Our FeedPlayer Google Sheet provides the APIs loaded. View the feed json directly - The FeedPlayer is being designed to convert APIs, JSON and .CSV into video-like presentations. Bluesky RSS Feeds - Click "Turn on CORS passthrough". About Bluesky RSS.
In a React app built with Vite (or similar tools like Webpack), the src folder itself is not copied to the dist folder. Instead:
✅ What Happens: The src folder contains source files (e.g. .jsx, .tsx, .js, .ts, .css, etc.).
During the build process (vite build), these files are compiled, bundled, and optimized.
The output (e.g. minified JS, CSS, static assets) goes into the dist folder.
Only what is explicitly imported or referenced in the code gets included in dist.
We'll provide several displays (list, gallery) similar to the team repo API pull
Project Lead: Sagar
Feed Player Projects
Active Projects
► 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 FeedPlayer 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.
To contribute, fork our webroot and sync often by runnning "pull" in Claude Code CLI.
If you're NOT making code updates, you can clone without forking using these commands:
git clone https://github.com/[your account]/localsite.git
git clone https://github.com/[your account]/feed.git
git clone https://github.com/[your account]/swiper.git
Run the start site command in your website root to view locally at http://localhost:8887/feed
python -m http.server 8887
FeedPlayer - localhost:8887/feed Feed API View - localhost:8887/feed/view
website
├─ home
├─ localsite
├─ swiper
└─ feed
├─ README.md
├─ dist
├─ src
├─ view
├─ package.json
├─ vite.config.js
└─ .gitignoreAlso see the MemberSense directory structure.
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 build
Now refresh the current page locally to see the results. If you haven't, start a server in your webroot containing the feed folder. Use port 8887.
yarn dev
Better to avoid "yarn dev" and instead view at http://localhost:8887/feed/ after building.
You can view at either: http://localhost:8887/feed or http://localhost:8887/feed/dist
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.
yarn build- Standard build (feed app only)
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 FeedPlayer repo or the parent Video Player repo.
Happy feed viewing! 🎥🍿 Test contribution from Umamaheswari283