e.currentTarget.classList.add('opened')} >
-
+ )
}
-export default Movie
\ No newline at end of file
+export default Movie
diff --git a/src/components/Movies.jsx b/src/components/Movies.jsx
index ab54a58c2..305f3c259 100644
--- a/src/components/Movies.jsx
+++ b/src/components/Movies.jsx
@@ -1,22 +1,48 @@
import Movie from './Movie'
import '../styles/movies.scss'
-const Movies = ({ movies, viewTrailer, closeCard }) => {
-
- return (
-
-
- )
-
-
-
- {movie.overview}
- {movie.release_date?.substring(0, 4)}
- {!starred.starredMovies.map(movie => movie.id).includes(movie.id) ? (
-
- dispatch(starMovie({
- id: movie.id,
- overview: movie.overview,
- release_date: movie.release_date?.substring(0, 4),
- poster_path: movie.poster_path,
- title: movie.title
- })
- )}>
-
-
- ) : (
- dispatch(unstarMovie(movie))}>
-
-
- )}
- {!watchLater.watchLaterMovies.map(movie => movie.id).includes(movie.id) ? (
-
- ) : (
-
- )}
-
- {movie.title}
-{movie.title}
-
- {movies.movies.results?.map((movie) => {
- return (
-
-
+
)
diff --git a/src/setupTests.js b/src/setupTests.js
index 010b0b5d4..c44951a68 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1 +1 @@
-import '@testing-library/jest-dom'
\ No newline at end of file
+import '@testing-library/jest-dom'
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 90b7d817f..f27f59a33 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -1,113 +1,111 @@
header {
- position: fixed;
- z-index: 999;
- width: 100%;
- height: 3rem;
- min-height: 50px;
- color: #fff;
- background: rgba(0, 8, 81, 0.8);
- border: 1px solid transparent;
- border-radius: 0;
-
- .input-group {
- float: right;
- width: 200px;
- margin: 0.7rem 0 0;
-
- @media (max-width: 720px) {
- width: 150px;
- }
+ position: fixed;
+ z-index: 999;
+ width: 100%;
+ height: 3rem;
+ min-height: 50px;
+ color: #fff;
+ background: rgba(0, 8, 81, 0.8);
+ border: 1px solid transparent;
+ border-radius: 0;
+
+ .input-group {
+ float: right;
+ width: 200px;
+ margin: 0.7rem 0 0;
+
+ @media (max-width: 720px) {
+ width: 150px;
+ }
- input {
- height: 25px;
- font-size: 0.8rem;
- }
+ input {
+ height: 25px;
+ font-size: 0.8rem;
+ }
- .bi {
- color: #fff;
- }
+ .bi {
+ color: #fff;
+ }
- .search-link {
- color: #111111;
- text-decoration: none;
- }
+ .search-link {
+ color: #111111;
+ text-decoration: none;
}
+ }
- nav {
- position: relative;
- float: right;
- margin: 0.5rem 1rem 0;
+ nav {
+ position: relative;
+ float: right;
+ margin: 0.5rem 1rem 0;
- a {
- display: inline-block;
- margin: 0 0.2rem 0;
+ a {
+ display: inline-block;
+ margin: 0 0.2rem 0;
- &.nav-fav {
- font-size: 0.8rem;
- color: #ccc;
- text-decoration: none;
+ &.nav-fav {
+ font-size: 0.8rem;
+ color: #ccc;
+ text-decoration: none;
- &:hover {
- color: #fff;
- }
+ &:hover {
+ color: #fff;
}
}
}
+ }
- i {
- margin: 0.5rem;
- font-size: 1.2rem;
+ i {
+ margin: 0.5rem;
+ font-size: 1.2rem;
+ color: #fff;
+
+ &:hover {
color: #fff;
-
- &:hover {
- color: #fff;
- }
+ }
- + .star-number {
- position: absolute;
- top: 1rem;
- right: 6.1rem;
- padding: 0.5rem 0.3rem;
- font-size: 0.65rem;
- font-weight: 600;
- color: #fff;
- background: red;
- border-radius: 50%;
- }
-
- &.bi-film {
- float: left;
- margin-left: 1.5rem;
- font-size: 1.3rem;
- color: #e9ecef;
- }
+ + .star-number {
+ position: absolute;
+ top: 1rem;
+ right: 6.1rem;
+ padding: 0.5rem 0.3rem;
+ font-size: 0.65rem;
+ font-weight: 600;
+ color: #fff;
+ background: red;
+ border-radius: 50%;
+ }
- &.bi-search {
+ &.bi-film {
+ float: left;
+ margin-left: 1.5rem;
+ font-size: 1.3rem;
+ color: #e9ecef;
+ }
- }
+ &.bi-search {
+ }
- &.bi-star-fill,
- &.bi-heart-fill{
- color: #e50914;
- animation: blink .4s;
+ &.bi-star-fill,
+ &.bi-heart-fill {
+ color: #e50914;
+ animation: blink 0.4s;
- &.bi-star-fill-white,
- &.bi-heart-fill-white {
- color: #fff;
- }
+ &.bi-star-fill-white,
+ &.bi-heart-fill-white {
+ color: #fff;
}
-
- @keyframes blink{
- 50% {
- color: red;
- }
- }
}
- .selected {
- i {
- color: #fff;
+ @keyframes blink {
+ 50% {
+ color: red;
}
- }
-
+ }
+ }
+
+ .selected {
+ i {
+ color: #fff;
+ }
}
+}
diff --git a/src/styles/modal.scss b/src/styles/modal.scss
new file mode 100644
index 000000000..2a3d98386
--- /dev/null
+++ b/src/styles/modal.scss
@@ -0,0 +1,32 @@
+.modal {
+ display: block;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.95);
+ color: #ffffff;
+ .content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ }
+ .modal-close-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 999;
+ display: block;
+ width: 75px;
+ height: 85px;
+ font-size: 50px;
+ line-height: 20px;
+ color: #fff;
+ background: transparent;
+ border: none;
+
+ span {
+ vertical-align: text-top;
+ }
+ }
+}
diff --git a/src/styles/movies.scss b/src/styles/movies.scss
index 7404c029f..173d2b8c7 100644
--- a/src/styles/movies.scss
+++ b/src/styles/movies.scss
@@ -1,300 +1,341 @@
.container {
- padding-top: 100px;
- color: #fff;
+ padding-top: 100px;
+ color: #fff;
- @media (max-width: 720px) {
- padding-top: 70px;
+ @media (max-width: 720px) {
+ padding-top: 70px;
+ }
+
+ a {
+ color: #1cb5e0;
+ text-decoration: none;
+ }
+
+ .movies_grid {
+ display: grid;
+ grid-template-columns: repeat(6, minmax(100px, 1fr));
+
+ @media (max-width: 1280px) {
+ grid-template-columns: repeat(4, minmax(100px, 1fr));
}
- a {
- color: #1CB5E0;
- text-decoration: none;
+ @media (max-width: 1024px) {
+ grid-template-columns: repeat(3, minmax(100px, 1fr));
}
- .wrapper {
- padding: 0 6px;
- margin-bottom: 2rem;
+ @media (max-width: 480px) {
+ grid-template-columns: repeat(2, 1fr);
}
+ }
+
+ .wrapper {
+ padding: 0 6px;
+ margin-bottom: 2rem;
+ }
+
+ .card,
+ .card *,
+ .card + * {
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
- .card,
- .card *,
- .card + * {
- -webkit-transition: all .2s ease-in-out;
- -moz-transition: all .2s ease-in-out;
- -ms-transition: all .2s ease-in-out;
- -o-transition: all .2s ease-in-out;
- transition: all .2s ease-in-out;
-
- @media (max-width: 480px) {
- transition: none;
- }
+ @media (max-width: 480px) {
+ transition: none;
}
+ }
- .info_panel {
- padding: 20% 5% 0;
- color: #fff;
- background: transparent;
-
- @media (max-width: 720px) {
- padding: 8% 5% 0;
- }
-
- @media (max-width: 480px) {
- padding-top: 50%;
- }
-
- .bi-star:hover {
- color: #e50914;
- }
-
- .bi-star-fill {
- margin: 0 5px;
- color: #e50914;
- }
-
- .overview {
- height: 85px;
- padding: 5px;
- margin-bottom: 5px;
- overflow: scroll;
- font-size: 0.7rem;
- line-height: 105%;
-
- @media (max-width: 720px) {
- height: 60px;
- padding: 3px;
- margin-bottom: 2px;
- }
-
- @media (max-width: 480px) {
- height: 185px;
- margin-bottom: 40px;
- font-size: 1rem;
- line-height: 115%;
- }
- }
- }
+ .info_panel {
+ padding: 20% 5% 0;
+ color: #fff;
+ background: transparent;
- .overlay,
- .info_panel {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- -webkit-transition: opacity .4s ease-in-out;
- -moz-transition: opacity .4s ease-in-out;
- -ms-transition: opacity .4s ease-in-out;
- -o-transition: opacity .4s ease-in-out;
- transition: opacity .4s ease-in-out;
+ @media (max-width: 720px) {
+ padding: 8% 5% 0;
}
- .overlay {
- color: #fff;
- background-color: #111;
+ @media (max-width: 480px) {
+ padding-top: 50%;
}
- button.close {
- display: none;
- }
-
+ .bi-star:hover {
+ color: #e50914;
+ }
- .card-body {
- position: relative;
- padding: 0;
+ .bi-star-fill {
+ margin: 0 5px;
+ color: #e50914;
+ }
- &:hover {
- border: 2px solid #fff;
- }
+ .overview {
+ height: 85px;
+ padding: 5px;
+ margin-bottom: 5px;
+ overflow-y: auto;
+ font-size: 0.7rem;
+ line-height: 105%;
+
+ @media (max-width: 720px) {
+ height: 80px;
+ padding: 3px;
+ margin-bottom: 2px;
+ }
+
+ @media (max-width: 480px) {
+ height: 185px;
+ margin-bottom: 40px;
+ font-size: 1rem;
+ line-height: 115%;
+ overflow-y: auto;
+ }
}
-
- .year {
- padding: 0.2rem 0 0.4rem;
- font-size: 0.7rem;
- @media (max-width: 480px) {
- position: absolute;
- right: 0;
- bottom: 67%;
- left: 0;
- padding: 0 0 10px;
- font-size: 1.2rem;
- }
+ }
+
+ .overlay,
+ .info_panel {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ -webkit-transition: opacity 0.4s ease-in-out;
+ -moz-transition: opacity 0.4s ease-in-out;
+ -ms-transition: opacity 0.4s ease-in-out;
+ -o-transition: opacity 0.4s ease-in-out;
+ transition: opacity 0.4s ease-in-out;
+ }
+
+ .overlay {
+ color: #fff;
+ background-color: #111;
+ }
+
+ button.close {
+ display: none;
+ }
+
+ .card-body {
+ position: relative;
+ padding: 0;
+
+ &:hover {
+ border: 2px solid #fff;
}
+ }
- img {
- width: 100%;
- height: auto;
+ .year {
+ padding: 0.2rem 0 0.4rem;
+ font-size: 0.7rem;
+ @media (max-width: 480px) {
+ right: 0;
+ bottom: 67%;
+ left: 0;
+ padding: 0 0 10px;
+ font-size: 1.2rem;
}
- .btn-star {
- width: 50px;
- margin: 0 5px;
- color: #e50914;
- cursor: pointer;
- @media (max-width: 520px) {
- font-size: 25px;
- }
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ .btn-star {
+ width: 50px;
+ margin: 0 5px;
+ color: #e50914;
+ cursor: pointer;
+ @media (max-width: 520px) {
+ font-size: 25px;
}
- button {
- display: block;
- width: 90%;
- height: 26px;
- margin: 8px auto;
- font-size: 0.6rem;
- text-align: center;
-
- @media (max-width: 720px) {
- height: 20px;
- padding: 2px 2px;
- font-size: 0.6rem;
- }
+ }
+ button {
+ display: block;
+ width: 90%;
+ height: 26px;
+ margin: 8px auto;
+ font-size: 0.6rem;
+ text-align: center;
- @media (max-width: 480px) {
- margin: 15px auto;
- height: 35px;
- font-size: 1rem;
- }
+ @media (max-width: 720px) {
+ height: 20px;
+ padding: 2px 2px;
+ font-size: 0.6rem;
+ }
- &.btn-watch-later {
-
- &.blue {
- color: #fff;
- background-color: #1CB5E0;
- border: #1CB5E0;
- }
-
- &:hover {
- color: #fff;
- background: #1CB5E0;
- border-color: #1CB5E0;
- }
- }
+ @media (max-width: 480px) {
+ margin: 15px auto;
+ height: 35px;
+ font-size: 1rem;
+ }
- &.btn-dark:hover {
- color: #fff;
- background: #1CB5E0;
- border-color: #1CB5E0;
- }
+ &.btn-watch-later {
+ &.blue {
+ color: #fff;
+ background-color: #1cb5e0;
+ border: #1cb5e0;
+ }
+
+ &:hover {
+ color: #fff;
+ background: #1cb5e0;
+ border-color: #1cb5e0;
+ }
+ }
+
+ &.btn-dark:hover {
+ color: #fff;
+ background: #1cb5e0;
+ border-color: #1cb5e0;
}
+ }
+
+ .infinite {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 50px;
+ margin-bottom: 30px;
+ }
+ .loader {
+ width: 30px;
+ aspect-ratio: 4;
+ background: radial-gradient(
+ circle closest-side,
+ rgb(237, 237, 237) 90%,
+ rgba(186, 186, 186, 0)
+ )
+ 0 / calc(100% / 3) 100% space;
+ clip-path: inset(0 100% 0 0);
+ animation: l1 1s steps(4) infinite;
+ }
+ @keyframes l1 {
+ to {
+ clip-path: inset(0 -34% 0 0);
+ }
+ }
}
.card {
- position: relative;
- color: #fff;
- text-align: center;
- background: transparent;
- border: none;
+ position: relative;
+ color: #fff;
+ text-align: center;
+ background: transparent;
+ border: none;
+
+ &.opened {
+ & + .hero-card {
+ display: block;
+ }
+ }
- &.opened {
- & + .hero-card {
- display: block;
- }
+ &:hover {
+ transform: scale(1.1);
+
+ .overlay {
+ opacity: 0.8;
}
- &:hover {
- transform: scale(1.1);
+ .info_panel {
+ display: block;
+ opacity: 1;
+ }
+ }
- .overlay {
- opacity: .8;
- }
+ @media (max-width: 480px) {
+ &:hover {
+ transform: none;
- .info_panel {
- display: block;
- opacity: 1;
- }
+ .overlay {
+ opacity: 0;
+ }
+
+ .info_panel {
+ display: none;
+ }
}
+ }
- @media (max-width: 480px) {
- &:hover {
- transform: none;
+ h6.title {
+ margin-top: 10px;
+ font-size: 0.9rem;
- .overlay {
- opacity: 0;
- }
+ &.mobile-card {
+ display: none;
+ }
+ @media (max-width: 480px), (hover: none) {
+ display: none;
- .info_panel {
- display: none;
- }
- }
+ &.mobile-card {
+ display: block;
+ }
+ }
+
+ @media (max-width: 720px) {
+ font-size: 0.7rem;
}
-
+ }
+
+ @media (max-width: 480px) {
+ &.opened {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ width: 100%;
+ height: 100%;
+ border: 3px solid #fff;
+ border-radius: 5px;
+ transform: none;
+
+ .overlay {
+ opacity: 0.7;
+ }
+ .info_panel {
+ display: block;
+ opacity: 1;
+ }
+
+ h6.title {
+ display: none;
- h6.title {
- margin-top: 10px;
- font-size: 0.9rem;
-
&.mobile-card {
- display: none;
- }
- @media (max-width: 480px), (hover: none) {
- display: none;
-
- &.mobile-card {
- display: block;
- }
+ position: absolute;
+ right: 0;
+ bottom: 80%;
+ left: 0;
+ display: block;
+ padding: 19px;
+ font-size: 1.5rem;
}
+ }
- @media (max-width: 720px) {
- font-size: 0.7rem;
- }
- }
+ button.close {
+ position: absolute;
+ top: 0;
+ right: 0px;
+ z-index: 999;
+ display: block;
+ width: 75px;
+ height: 60px;
+ font-size: 50px;
+ line-height: 20px;
+ color: #fff;
+ background: transparent;
+ border: none;
- @media (max-width: 480px) {
- &.opened {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 999;
- width: 100%;
- height: auto;
- border: 3px solid #fff;
- border-radius: 5px;
- transform: none;
-
- .overlay {
- opacity: 0.7;
- }
- .info_panel {
- display: block;
- opacity: 1;
- }
-
- h6.title {
- display: none;
-
- &.mobile-card {
- position: absolute;
- right: 0;
- bottom: 70%;
- left: 0;
- display: block;
- padding: 19px;
- font-size: 1.5rem;
- }
- }
-
- button.close {
- position: absolute;
- top: 0;
- right: 0px;
- z-index: 999;
- display: block;
- width: 75px;
- height: 60px;
- font-size: 50px;
- line-height: 20px;
- color: #fff;
- background: transparent;
- border: none;
-
- span {
- vertical-align: text-top;
- }
- }
+ span {
+ vertical-align: text-top;
}
+ }
}
-
- @media (max-width: 720px) {
- background-color: transparent;
- }
-}
\ No newline at end of file
+ }
+
+ @media (max-width: 720px) {
+ background-color: transparent;
+ }
+}
diff --git a/src/styles/starred.scss b/src/styles/starred.scss
index dc7e64063..49310139d 100644
--- a/src/styles/starred.scss
+++ b/src/styles/starred.scss
@@ -1,28 +1,26 @@
.starred {
-
- footer {
- margin-top: 50px;
+ footer {
+ margin-top: 50px;
- .total-price {
- font-size: 1.8rem;
- }
+ .total-price {
+ font-size: 1.8rem;
+ }
- .btn {
- width: auto;
- padding: 0 20px;
- font-size: 0.8rem;
- background: red;
- border: none;
- }
+ .btn {
+ width: auto;
+ padding: 0 20px;
+ font-size: 0.8rem;
+ background: red;
+ border: none;
+ }
- .back-button {
- color: #000;
- background: #efefef;
- }
+ .back-button {
+ color: #000;
+ background: #efefef;
+ }
- .back-button:hover {
- background: #dedede;
- }
+ .back-button:hover {
+ background: #dedede;
}
+ }
}
-
\ No newline at end of file
diff --git a/src/test/movie.test.js b/src/test/movie.test.js
index 6d3254a28..5558acfbb 100644
--- a/src/test/movie.test.js
+++ b/src/test/movie.test.js
@@ -4,32 +4,34 @@ import { renderWithProviders } from './utils'
import App from '../App'
it('movies starred and saved to watch later', async () => {
- renderWithProviders({children}
+ {children}
+
+ )
}
- return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
-}
\ No newline at end of file
+ return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) }
+}
diff --git a/src/test/watchLater.test.js b/src/test/watchLater.test.js
index e84b93242..d13c9b2f1 100644
--- a/src/test/watchLater.test.js
+++ b/src/test/watchLater.test.js
@@ -4,21 +4,23 @@ import { renderWithProviders } from './utils'
import App from '../App'
it('Watch Later movies page', async () => {
- renderWithProviders(
+
+ )}
+ No results on your search
+
+ {movieList.map((movie) => {
+ return
+
+ {!searchQuery && (
+
+
- )
+ )}
+
+ )
}
export default Movies
diff --git a/src/components/Starred.jsx b/src/components/Starred.jsx
index ee09d739a..4d1085ac6 100644
--- a/src/components/Starred.jsx
+++ b/src/components/Starred.jsx
@@ -4,37 +4,43 @@ import starredSlice from '../data/starredSlice'
import Movie from './Movie'
import '../styles/starred.scss'
-const Starred = ({viewTrailer}) => {
-
- const state = useSelector((state) => state)
- const { starred } = state
- const { clearAllStarred } = starredSlice.actions
- const dispatch = useDispatch()
+const Starred = () => {
+ const state = useSelector((state) => state)
+ const { starred } = state
+ const { clearAllStarred } = starredSlice.actions
+ const dispatch = useDispatch()
return (
- {starred.starredMovies.length > 0 && (
)
}
diff --git a/src/components/WatchLater.jsx b/src/components/WatchLater.jsx
index c07ac0f08..bb744fcae 100644
--- a/src/components/WatchLater.jsx
+++ b/src/components/WatchLater.jsx
@@ -4,37 +4,43 @@ import watchLaterSlice from '../data/watchLaterSlice'
import Movie from './Movie'
import '../styles/starred.scss'
-const WatchLater = ({viewTrailer}) => {
-
- const state = useSelector((state) => state)
- const { watchLater } = state
- const { remveAllWatchLater } = watchLaterSlice.actions
- const dispatch = useDispatch()
+const WatchLater = () => {
+ const state = useSelector((state) => state)
+ const { watchLater } = state
+ const { removeAllWatchLater } = watchLaterSlice.actions
+ const dispatch = useDispatch()
return (
-
+ )}
- {starred.starredMovies.length === 0 && (Starred movies
-
- {starred.starredMovies.map((movie) => (
-
+ {starred.starredMovies.length > 0 && (
+
+
)}
+
+ Starred movies
+
+ {starred.starredMovies.map((movie) => (
+
-
-
-
-
)}
+ {starred.starredMovies.length === 0 && (
+ There are no starred movies.
-Go to Home
-
+
+
+ )}
There are no starred movies.
++ Go to Home +
+
- {watchLater.watchLaterMovies.length > 0 && (
)
}
diff --git a/src/components/YoutubePlayer.jsx b/src/components/YoutubePlayer.jsx
index 2ce88ca29..1d3944d8b 100644
--- a/src/components/YoutubePlayer.jsx
+++ b/src/components/YoutubePlayer.jsx
@@ -1,11 +1,13 @@
import ReactPlayer from 'react-player'
-const YoutubePlayer = ({ videoKey }) => (
-
+ )}
- {watchLater.watchLaterMovies.length === 0 && (Watch Later List
-
- {watchLater.watchLaterMovies.map((movie) => (
-
+ {watchLater.watchLaterMovies.length > 0 && (
+
+
)}
+
+ Watch Later List
+
+ {watchLater.watchLaterMovies.map((movie) => (
+
-
-
-
-
)}
+ {watchLater.watchLaterMovies.length === 0 && (
+ You have no movies saved to watch later.
-Go to Home
-
+
+
+ )}
You have no movies saved to watch later.
++ Go to Home +
+