play browser UI

reactplay · Mar 14, 2022 · 8f2c06b · 8f2c06b
1 parent f93ccaf
commit 8f2c06b
Show file tree

Hide file tree

Showing 13 changed files with 572 additions and 103 deletions.
diff --git a/public/index.html b/public/index.html
@@ -32,7 +32,7 @@
  </head>
  <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
- <div id="root"></div>
+ <div id="root" class="app-container"></div>
  <!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.css b/src/App.css
@@ -48,7 +48,7 @@
  --fw-bold: 700;
 
  /* Font Sizes */
- --fs-xs: 0.6rem;
+ --fs-xs: 0.7rem;
  --fs-sm: 0.8rem;
  --fs-rg: 0.9rem;
  --fs-md: 1.4rem;
@@ -72,22 +72,40 @@
  --screen-lg-min: 1172px;
  --screen-lg-max: 1200px;
  --screen-xl-max: 1400px;
+
+ /* Play */
+ --play-thumb-size: 180px;
 }
 
 html,
 body {
+ height: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--ff-default);
  line-height: 1.6;
  font-size: 16px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
 }
 
 body * {
+ box-sizing: border-box;
  font-family: var(--ff-default);
 }
 
+.app-container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
+
 
 @media screen and (max-width: 1200px) {
  :root {
@@ -120,4 +138,36 @@ body * {
  --fs-xl: 1.8rem;
  --fs-xxl: 2rem;
  }
+}
+
+/* App Body */
+.app-body {
+ position: relative;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+}
+
+/* App Footer */
+.app-footer {
+ padding: 0 2rem;
+ text-align: center;
+ font-size: var(--fs-sm);
+ font-weight: var(--fw-light);
+ color: var(--color-neutral-50);
+ border-top: solid 1px var(--color-neutral-30);
+}
+
+.app-footer p {
+ margin: 0.4rem 0;
+}
+
+.app-footer a {
+ color: var(--color-neutral-80);
+}
+
+.app-footer a:hover,
+.app-footer a:focus {
+ color: var(--color-brand-primary-alt);
 }
diff --git a/src/App.js b/src/App.js
@@ -3,10 +3,8 @@ import { Outlet } from "react-router-dom";
 
 function App() {
  return (
- <div className="App">
- <div className="plays">
- <Outlet />
- </div>
+ <div className="app-body">
+ <Outlet />
  </div>
  );
 }

diff --git a/src/common/footer/Footer.js b/src/common/footer/Footer.js
@@ -3,7 +3,7 @@
 const Footer = () => {
 
  return (
- <footer className="footer">
+ <footer className="app-footer">
  <p>
  ReactPlay&copy; 2022 by {' '} is an open-source project developed by <a 
  href="https://tapasadhikary.com" 

diff --git a/src/common/header/Header.js b/src/common/header/Header.js
@@ -22,20 +22,18 @@ const Header = () => {
  return (
  <header className="app-header">
  <span><Link to="/" className="app-logo"><span className="sr-only">React Play</span></Link></span>
- <nav>
- <ul className="header-links">
- {
+ <div className="app-header-search">
+ {
  showSearch && (
- <>
- <li>
- <SearchPlays />
- </li>
- <li>
- <FilterPlays />
- </li>
+ <> 
+ <SearchPlays />
+ <FilterPlays />
  </>
  )
  }
+ </div>
+ <nav>
+ <ul className="header-links">
  <li>
  <a href="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/atapas/react-play" target="_blank" rel="noopener noreferrer">
  <BsGithub className="icon" size="24px" />

diff --git a/src/common/header/header.css b/src/common/header/header.css
@@ -1,5 +1,5 @@
 .app-header {
- position: fixed;
+ position: relative;
  top: 0;
  right: 0;
  left: 0;
@@ -95,24 +95,3 @@
  }
 }
 
-
-.footer {
- padding: 2rem;
- text-align: center;
- font-size: var(--fs-sm);
- font-weight: var(--fw-light);
- color: var(--color-neutral-50);
-}
-
-.footer p {
- margin: 1rem 0;
-}
-
-.footer a {
- color: var(--color-neutral-80);
-}
-
-.footer a:hover,
-.footer a:focus {
- color: var(--color-brand-primary-alt);
-}
diff --git a/src/common/home/home.css b/src/common/home/home.css
@@ -287,7 +287,7 @@
  overflow: hidden;
  background: var(--color-neutral-10);
  padding: 1.6rem;
- height: 180px;
+ height: 220px;
  width: auto;
  box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb),0.12);
  -webkit-box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb),0.12);
@@ -306,7 +306,7 @@
 }
 
 .list-apps a * {
- transition: all .1s ease-in-out;
+ transition: all .16s ease-in-out;
 }
 
 .list-apps a figure {
@@ -350,7 +350,7 @@
  position: absolute;
  top: 100%;
  transform: translateY(-100%);
- padding-bottom: 2rem;
+ padding-bottom: 1.6rem;
  font-weight: var(--fw-bold);
  color: var(--color-neutral-90);
  z-index: 1;

diff --git a/src/common/playlists/PlayList.js b/src/common/playlists/PlayList.js
@@ -1,17 +1,113 @@
 import { useSearchFilter } from "common/search/hooks/useSearchFilter";
 import { Link } from "react-router-dom";
+import './playlist.css';
+
+import { GoPlay } from "react-icons/go";
+import { BsPlayFill, BsShareFill, BsGithub } from "react-icons/bs";
+import { MdOutlineKeyboardArrowLeft, MdOutlineKeyboardArrowRight } from "react-icons/md";
+import { FaComment } from "react-icons/fa";
 
 const PlayList = () => {
  const plays = useSearchFilter();
 
  return (
- <ul>
- {plays.map((play, index) => (
- <li key={play.id}>
- <Link to={play.path}>{play.name}</Link>
- </li>
- ))}
- </ul>
+ <>
+ <div className="list-plays">
+ <button className="btn-scroll">
+ <MdOutlineKeyboardArrowLeft size="36px" className="icon" />
+ </button>
+ <ul>
+ <li className="active">
+ <Link to="#">
+ <div className="play-title">Play Name</div>
+ <div className="play-status">
+ <BsPlayFill size="18px" color="var(--color-neutral-80)"/>
+ <div className="default">Play now</div>
+ <div className="current">Playing..</div>
+ </div>
+ </Link>
+ </li>
+ {plays.map((play, index) => (
+ <li key={play.id}>
+ <Link to={play.path}>
+ <div className="play-title">{play.name}</div>
+ <div className="play-status">
+ <GoPlay size="24px" color="var(--color-brand-primary)" className="icon" />
+ <div className="default">Play now</div>
+ <div className="current">Playing</div>
+ </div>
+ </Link>
+ </li>
+ ))}
+
+ <li>
+ <Link to="#">
+ <div className="play-title">Play Name</div>
+ <div className="play-status">
+ <GoPlay size="24px" color="var(--color-brand-primary)" className="icon" />
+ <div className="default">Play now</div>
+ <div className="current">Playing</div>
+ </div>
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ <div className="play-title">Play Name</div>
+ <div className="play-status">
+ <GoPlay size="24px" color="var(--color-brand-primary)" className="icon" />
+ <div className="default">Play now</div>
+ <div className="current">Playing</div>
+ </div>
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ <div className="play-title">Play Name</div>
+ <div className="play-status">
+ <GoPlay size="24px" color="var(--color-brand-primary)" className="icon" />
+ <div className="default">Play now</div>
+ <div className="current">Playing</div>
+ </div>
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ <div className="play-title">Play Name</div>
+ <div className="play-status">
+ <GoPlay size="24px" color="var(--color-brand-primary)" className="icon" />
+ <div className="default">Play now</div>
+ <div className="current">Playing</div>
+ </div>
+ </Link>
+ </li>
+ </ul>
+ <button className="btn-scroll">
+ <MdOutlineKeyboardArrowRight size="36px" className="icon"/>
+ </button>
+ </div>
+ <div className="play-details">
+ <div className="play-details-header">
+ <h3 className="header-title">Header Title Goes here</h3>
+ <div className="header-actions">
+ <a href="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/atapas/react-play" target="_blank" rel="noopener noreferrer">
+ <BsGithub className="icon" size="24px" />
+ <span className="sr-only">GitHub</span>
+ </a>
+ <a href="https://twitter.com/tapasadhikary" target="_blank" rel="noopener noreferrer">
+ <FaComment className="icon" size="24px" />
+ <span className="sr-only">Twitter</span>
+ <div className="badge"></div>
+ </a>
+ <a href="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/atapas/react-play" target="_blank" rel="noopener noreferrer" className="app-header-btn">
+ <BsShareFill className="icon" size="16px" />
+ <span className="btn-label">Share</span>
+ </a>
+ </div>
+ </div>
+ <div className="play-details-body">
+ </div>
+ </div>
+ </>
  );
 };