-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
videos working in a grid with react-player + tailwindcss. attempting …
…a complicated navbar to no avail for last couple hours though. will work through it tomorrow more.
- Loading branch information
1 parent
eb24a08
commit 8c84411
Showing
8 changed files
with
775 additions
and
75 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,8 @@ | ||
| .App { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .App-logo { | ||
| height: 40vmin; | ||
| pointer-events: none; | ||
| } | ||
| #react-player style { | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| .App-logo { | ||
| animation: App-logo-spin infinite 20s linear; | ||
| @media screen and (max-height: 600px) { | ||
| width: 100%; | ||
| hieght: 100px; | ||
| } | ||
| } | ||
|
|
||
| .App-header { | ||
| background-color: #282c34; | ||
| min-height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: calc(10px + 2vmin); | ||
| color: white; | ||
| } | ||
|
|
||
| .App-link { | ||
| color: #61dafb; | ||
| } | ||
|
|
||
| @keyframes App-logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,138 @@ | ||
| import React from 'react'; | ||
| import logo from './logo.svg'; | ||
| import ReactPlayer from 'react-player'; | ||
| // import the css | ||
| import './App.css'; | ||
|
|
||
|
|
||
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| <img src={logo} className="App-logo" alt="logo" /> | ||
| <p> | ||
| Edit <code>src/App.tsx</code> and save to reload. | ||
| </p> | ||
| <a | ||
| className="App-link" | ||
| href="https://reactjs.org" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Learn React | ||
| </a> | ||
| </header> | ||
| </div> | ||
| ); | ||
| } | ||
| // App.tsx that has an array of Streamable videos. | ||
| // It then uses the Tailwind Aspect Ratio to create a carousel of videos from the array. | ||
| // It uses ReactPlayer to play the videos. | ||
| // const videos = [ | ||
| // { | ||
| // url: 'https://streamable.com/u2n2fg', | ||
| // aspectRatio: '16:9', | ||
| // }, | ||
| // { | ||
| // url: 'https://streamable.com/o0n8jh', | ||
| // aspectRatio: '16:9', | ||
| // }, | ||
| // { | ||
| // url: 'https://streamable.com/5kminn', | ||
| // aspectRatio: '16:9', | ||
| // }, | ||
| // { | ||
| // url: 'https://streamable.com/595ws8', | ||
| // aspectRatio: '16:9', | ||
| // }, | ||
| // { | ||
| // url: 'https://streamable.com/pfamf9', | ||
| // aspectRatio: '16:9' | ||
| // } | ||
| // ]; | ||
|
|
||
| const videos = [ | ||
| { | ||
| id: 1, | ||
| name: 'Shaq and Embiid', | ||
| playerHighlighted: 'Talk Show', | ||
| href: 'https://streamable.com/pfamf9', | ||
| tag: 'NBA', | ||
| src: 'https://streamable.com/pfamf9', | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: 'Sdd', | ||
| playerHighlighted: 'Talk Show', | ||
| href: 'https://streamable.com/pfamf9', | ||
| tag: 'NBA', | ||
| src: 'https://streamable.com/pfamf9', | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: 'Sdd', | ||
| playerHighlighted: 'Talk Show', | ||
| href: 'https://streamable.com/pfamf9', | ||
| tag: 'NBA', | ||
| src: 'https://streamable.com/pfamf9', | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: 'Sdd', | ||
| playerHighlighted: 'Talk Show', | ||
| href: 'https://streamable.com/pfamf9', | ||
| tag: 'NBA', | ||
| src: 'https://streamable.com/pfamf9', | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: 'Sdd', | ||
| playerHighlighted: 'Talk Show', | ||
| href: 'https://streamable.com/pfamf9', | ||
| tag: 'NBA', | ||
| src: 'https://streamable.com/pfamf9', | ||
| }, | ||
| { | ||
| id: 6, | ||
| name: 'Sdd', | ||
| playerHighlighted: 'Talk Show', | ||
| href: 'https://streamable.com/pfamf9', | ||
| tag: 'NBA', | ||
| src: 'https://streamable.com/pfamf9', | ||
| }, | ||
| // More videos... | ||
| ] | ||
|
|
||
| return ( | ||
| <div className="bg-white"> | ||
| <div className="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24"> | ||
| <div className="space-y-12"> | ||
| <div className="space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none"> | ||
| <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Trending</h2> | ||
| <p className="text-xl text-gray-500"> | ||
| Ball don't lie. | ||
| </p> | ||
| </div> | ||
| {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */} | ||
| <ul | ||
| role="list" | ||
| className="-mt-7 scroll-px-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-3 lg:gap-x-8" | ||
| > | ||
| {videos.map((video) => ( | ||
| <li key={video.name} className="pb-5 "> | ||
| <div className=" space-y-2 space-x-2 shadow-lg rounded-lg bg-red-400 "> | ||
| <div className=""> | ||
| <ReactPlayer width={"100%"} url={video.src} id="react-player" className="rounded-lg " /> | ||
| </div> | ||
|
|
||
| <div className="space-y-2 "> | ||
| <div className="text-lg -mt-4 pb-5 leading-6 font-medium space-y-1"> | ||
| <h3>{video.name}</h3> | ||
| <p className="text-indigo-600">{video.playerHighlighted}</p> | ||
| </div> | ||
| {/* <ul role="list" className="flex space-x-5"> | ||
| <li> | ||
| <a href={video.team} className="text-gray-400 hover:text-gray-500"> | ||
| <span className="sr-only">{Team Name}</span> | ||
| <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path team picture here" /> } | ||
| </svg> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| could put a second logo here of something for category or list out names | ||
| </li> | ||
| </ul> */} | ||
| </div> | ||
| </div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| export default App; |
Oops, something went wrong.