Home / React / Audio / Video

A clone Youtube Web Player using React Provider Pattern, React Context and Typescript

with 🚀 Typescript 🚀 Reactube-client is an open source project relying on React context an useful feature of React that it is great for passing down data to deeply nested components. In this project, I tri
Information
Category: React / Audio / Video
Watchers: 4
Star: 92
Fork: 17
Last update: Sep 28, 2023
Resource links
http://rafaelescala.com/reactube
https://github.com/rafaesc/reactube-client

drawing

with 🚀 Typescript 🚀

Reactube-client is an open source project relying on React context an useful feature of React that it is great for passing down data to deeply nested components. In this project, I tried to show some features of react/react components, react context with Typescript.

LIVE DEMO (WIP)

Main Features:

  • Video player customized
  • Playlist
  • Preview videos
  • Responsive
  • It's possible crop videos
  • Support with localstorage

Contain:

  • React
  • Typescript
  • React Context (not Redux)
  • Styled components
  • React Router

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run start

Screencast:

📺 Responsive

✂️ Crop videos

🏠 Homepage

📺 Video preview

✏️ Edit video

Contributing ❤️

Reactube-client has been made by love ❤️ . I'd greatly appreciate any contribution to improve this project. Feel free to sent a PR.

Acknowledgments

  • React
  • JavaScript
  • TypeScript

Author and license

MIT License

Copyright (c) 2018-present, Rafael Escala

1 Open More issues
Open

What license is this? Please add a license file.

null

opened Mar 2, 2022 by bootrino 0

Contents

    anteriovieira vue-youtube YouTube IFrame Player APIvue-youtube - Provides a simple layer for you to use your imagination while over the YouTube IFrame Player API. (Compatible with SSR)
    orizens (ngx) A youtube component wrapped with Angular (typescript)
    PierfrancescoSoffritti YouTube Player library for Android and Chromecast, stable and customizable.
    PierfrancescoSoffritti YouTube Player library for Android and Chromecast, stable and customizable.
    crossplane-contrib Crossplane Provider for Equinix Metal based on the Terraform provider
    engmahsa A Swift floating player like YouTube player, using AVPlayer
    feross Simple, robust, blazing-fast YouTube Player API
    kyleshevlin A helper function for reducing React Context boilerplate
    BTMPL A YouTube player component for React following the render props pattern
    Farfetch A package that provides a responsive context to your application, using React Context API.
    tjallingt react.js powered YouTube player component
    tjallingt react.js powered YouTube player component
    srcecde A Python Python Google-YouTube History Analytics, which reads your history data you get from Google and provide analytics about your searches on Google, YouTube and YouTube watch history. It provides number of counts for the term you searched for.
    data-provider Async data provider agnostic about data origins
    TheFinestArtist Android Youtube Player Activity. Simply pass a url to play youtube video in new activity. It supports screen orientation, media volume control and etc.
    rinov YoutubeKit is a video player that fully supports Youtube IFrame API and YoutubeDataAPI for easily create a Youtube app
    pseudosavant player.html - One file drop-in video player web app for using MP4 video files served using basic directory listing.
    vmaimone vue-context-menu - A context menu component for vue js.
    rawilk vue-context - A simple but flexible context menu for vue js.
    davidohayon669 A <YouTube/> component for React Native.
    piemonte ▶️ video player in Swift, simple way to play and stream media on iOS/tvOS
    Share this repo

    Related Repos


    Audio / Video
    41
    The repository helps you learn React by buiding Netflix
    hieptl The repository helps you learn React by buiding Netflix. It means that you are learning React.js by building a real-life project. I will explain concepts in detail. This post is the first part in my series and it is suitable for beginners.
     
    Audio / Video
    65
    Video calling and chatting app (PWA) built using React.js, Web RTC and Socket.io
    mihir0699 This is a video calling application where users can call other user and will also have the capabiltiy to mute their mic and audio. Their is also real time chat functionality. It's also a modern PWA so users can install it on their devices like other native apps.
     
    Audio / Video
    98
    A front-end clone project of the Spotify Web Player. The project was created using React.
    oguz3 A front-end clone project of the Spotify Web Player. The project was created using React.
     
    Audio / Video
    867
    A video written in React
    JonnyBurger A video written in React
     
    Audio / Video
    10
    React spotify now playing component
    okandavut Now Playing component is the component that allows you to add your song playing on Spotify.
     
    Audio / Video
    25
    This is my 3rd project with ReactJs super excited and enjoying if you like it just start t...
    theindianappguy This is my 3rd project with ReactJs super excited and enjoying if you like it just start the project thanks
     
    Audio / Video
    21
    🔊 A React Native hook for playing sounds 🔊
    remigallego 🔊 A React Native hook for playing sounds 🔊
     
    Audio / Video
    214
    A beautiful and flexible guitar component for React. ⚛️ 🎸
    4lejandrito A beautiful and flexible guitar component for React. ⚛️ 🎸
     
    Audio / Video
    13
    Fully declarative React Lottie player
    mifi Inspired by several existing packages wrapping lottie-web for React, I created this package because I wanted something that just works and is simple to use. None of the alternatives properly handle changes of props like playing/pausing/segments. This lead to lots of hacks to get the animations to play correctly.
     
    Audio / Video
    3
    Simple React App to start creating a React App without Create React App
    Drylozu Simple React App to start creating a React App without Create React App
     
    Audio / Video
    2.3k
    A React Hook for playing sound effects
    joshwcomeau 👂 Lets your website communicate using 2 human senses instead of 1 🔥 Declarative Hooks API ⚡️ <1kb bytes (gzip) in your bundle! ~10kb loaded async. ✨ Built with Typescript 🗣 Uses a powerful, battle-
     
    Audio / Video
    1.7k
    react.js powered YouTube player component
    tjallingt react-youtube Simple React component acting as a thin layer over the YouTube IFrame Player API Features url playback playback event bindings customizable player options Installation $ npm in
     
    Audio / Video
    3k
    Apple Music...ish
    Musish Musish (musi.sh) The unofficial open source Apple Music webapp. Built with React and Apple's MusicKit JS while utilising the official Apple Music API. Contains some serverless functions deployed with AWS Lambda to speed
     
    Audio / Video
    92
    A clone Youtube Web Player using React Provider Pattern, React Context and Typescript
    rafaesc with 🚀 Typescript 🚀 Reactube-client is an open source project relying on React context an useful feature of React that it is great for passing down data to deeply nested components. In this project, I tri
     
    Audio / Video
    196
    Set of React components that use the Web Speech API to bring voice experience to React app...
    grvcoelho react-voice-components Set of React components that use the Web Speech API to bring voice experience to React applications. Check out the ✨ 💎 LIVE DEMO 💎 ✨ Install Install the component