github icon
Feed Player Placeholder

FeedPlayer + Swiper - For Images, Video and Text

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.

Feed Samples

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.

Team Projects

Place your name here if you're working on an update.

1.) TO DO: Provide the specific error than "No media available" for the second SeeClickFix link and others that don't load. Add a CORS passthrough like we have in the view folder. - by snehit

2.) DONE: Pull the image and video links from a Google Sheet by implementing the Content/ContextGoogle.jsx page which pulls from this Google Sheet - By Gary

3.) DONE: New swiper control and text that scrolls in player. - Shreyas

4.) DONE: When an image is narrower than the player, span 100% while retaining the image's ratio. Have the image slowly pan from the top to bottom when portions of it exceed the player height. - Karthik

5.) DONE: Show the progress bar for the feed images. Update the progress bar to include multiple clickable sections when there are sequences of images. We could tap Matt B. who worked with the progress bar previously. - Shreyas

6.) DONE: Membersense development and initial implementation using Discord API - Yunbo

7.) TO DO: When reloading retain feed's hash in the URL, and display that feed.
To see bug, hit refresh for the following or load the link directly:
Hash example for SeeClickFix - the hash values currently disappear when reloading.

8.) DONE: Load images into the FeedPlayer from our pull from Github. - Chethan

9.) DONE: Pull NASA feed into React FeedPlayer and show images. - Noopur

10a.) DONE: 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

10b.) TO DO: Check if pipeseperated works for any multi-feed pull from our Google Sheet splits on pipes in the React FeedPlayer to append multiple APIs. Update code if need and update documentation.

11.) IN PROGRESS: 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.

12.) DONE: List of feeds on right of player with links to /feed/view/#feed= - Kalyan

13.) DONE: Hide the "link icon" in the upper right unless a video is being viewed. - Jashwanth

14.) DONE: Update Vite to make the player an embeddable widget. - Loren

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

Features

►   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)

New UI and Controls

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.

Getting Started

To contribute, fork these 3 repos (and sync often):
localsite
feed
swiper

Then clone into your website root using Github Desktop.

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

The primary FeedPlayer pages will be visible here:

FeedPlayer - localhost:8887/feed
Feed API View - localhost:8887/feed/view

Folders in your website root

website
├─ home
├─ localsite
├─ swiper
└─ feed
   ├─ README.md
   ├─ dist
   ├─ src
   ├─ view
   ├─ package.json
   ├─ vite.config.js
   └─ .gitignore

Also see the MemberSense directory structure.

Edit and build the "feed" project locally

1. Navigate into the feed directory:

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

2. Install the required dependencies:

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.

3. Start a development server (optional)

yarn dev

Or you can skip "yarn dev" and view at http://localhost:8887/feed/dist

4. Build the app to the dist folder

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 for Review using Github Pages

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

About model.earth localsite navigation

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>

Technologies Used

  • 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

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.

License

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! 🎥🍿