khanhtran47 / sora Goto Github PK

Maybe take data from db like this, but we create a card banner from next-ui (or mui) like in the design :v
https://nextui.org/docs/components/card
https://mui.com/material-ui/react-card/

source pic: dribble

sadge nextui chưa có component select :( chắc xài tạm hàng của mui hoặc đợi khi mô có select của nextui thì lm ✌️

• thay hết mui icon rồi remove mui với emotion

t mới tìm đc cái ni, m bt thư viện mô có icon mô nhìn đc k ?
https://react-icons.github.io/react-icons

• hide left-drawer and create new bottom navbar for mobile (optimize and display more content)
• fix response and design for mediaList and mediaItem
• ssr load dark theme (done but still have flash on loading theme)

style lại trang 404 với error, thêm nút để chuyển về trang chủ

• tạo component errorboundary + catchboundary

https://remix.run/docs/en/v1/api/conventions#catchboundary
https://remix.run/docs/en/v1/api/conventions#errorboundary
https://remix.run/docs/en/v1/guides/not-found
https://remix.run/docs/en/v1/guides/errors

TODO:

• add search icon, search input, search route
• add api, infinite scrolling
  • https://developers.themoviedb.org/3/search/search-keywords
  • https://developers.themoviedb.org/3/search/multi-search

setup eslint-prettier rules

• https://github.com/Josh-McFarlin/remix-image
• lazy-loading images

https://nextui.org/docs/components/modal

• replace all mui components to nextui and style css using stitches (in progress)
• Adding dark mode using use-dark-mode
  https://nextui.org/docs/theme/dark-mode
  https://stitches.dev/docs/theming
  https://rossmoody.com/writing/remix-stitches

@ctuanle

• trên api của imdb t thấy gọi theo page nên t nghĩ mình chia phim theo page luôn thay vì call theo kiểu lướt xuống dưới thì sẽ call thêm page 2
• có thể kiểu khi call về mình lưu thông tin vào 1 state, khi chuyển page rồi quay lại những page cũ sẽ k phải call lại
• thêm 1 hàng trên cùng để lm cái bộ lọc với search phim

Add transition on opening/closing drawer for header

@Khanhtran47
Nãy thấy master có mấy commits mới của bot, merge về branch feature thì thấy vercel chạy task deploy, đáng lẽ ra chỉ chạy task này khi có thay đổi phía master thôi nhỉ?

@ctuanle Maybe add a loader for hiding this :v

@ctuanle player 2 cần id của imdb đều api detail của tvshow từ tmdb k có id imdb nên t k biết lấy kiểu gì, 1 là nghĩ cách lấy id imdb 2 là lm cái điều kiện xóa player 2 của tv show

https://remix.run/docs/en/v1/guides/routing
@ctuanle m nghiên cứu cái ni thử, t đọc qua mà k chắc có đúng k nữa

• index.tsx
• trending.tsx
• recommend.tsx
• recent.tsx
• top-imdb.tsx
• history.tsx
• movies
  • /index.tsx (render a list of movies)
  • /$moviesId.tsx (theo t hiểu thì mỗi id film thì ứng với file như ri)
• tv-shows
  • /index.tsx
  • $tvId.tsx
• animes
  • $animesId.tsx
  • index.tsx (xài api của mal)
• __auth
  • login.tsx
  • signup.tsx
• __auth.jsx (này t k chắc)

Test with French
https://github.com/sergiodxa/remix-i18next

https://www.themoviedb.org/person

https://github.com/dromru/react-photoswipe-gallery

Already add cast and crew tab in #123
things left to do: We have many items from both cast and crew (about 100 → 500 items), so we need to install a package for virtualizing list and use in List component

https://tanstack.com/virtual/v3/docs/guide/introduction

1. Trending

• get list

2. Movies

• get list
  • upcoming
  • popular
  • top_rated
• get detail
• get videos
• get credits
• get similar

3. Tv

• get list
  • upcoming
  • popular
  • on_the_air
• get detail
• get videos
• get credits
• get similar

@ctuanle We use zustand because it's cute
https://github.com/pmndrs/zustand

• add padding 0, margin 0, box-sizing: border-box...
  https://nextui.org/docs/theme/customize-theme#global-styles
• maybe adding new font: poppins, lato...
• ...

https://nextui.org/docs/components/tooltip

https://www.themoviedb.org/genre/80-crime/tv

• add movie picture, description, banner, genre, cast, director (if available)
• add similar movies
• add link embedded for movie 👍

[
        {
            "name": "123movies",
            "url": "https://googlvideo.com/"
        },
        { 
            "name": "2Embed",
            "url": "https://www.2embed.to/"
        },
        { 
            "name": "2Embed",
            "url": "https://2embed.org/"
        },
        {
            "name": "APIMovieDB",
            "url": "https://v2.apimdb.net/"
        },
        {
            "name": "DBGDrivePlayer",
            "url": "https://databasegdriveplayer.co/"
        },
        {
            "name": "DBGo",
            "url": "https://dbgo.fun/"
        },
        {
            "name": "FireSonic",
            "url": "https://firesonic.sc/play_video.php?video_id={imdbId}"
        },
        {
            "name": "Free Streaming API",
            "url": "https://fsapi.xyz/"
        },
        {
            "name": "GOMO",
            "url": "https://gomo.to/movie/{imdbId}"
        },
        {
            "name": "VidSource",
            "url": "https://vidsrc.me/"
        },
        {
            "name": "Superembed",
            "url": "https://www.superembed.stream/"
        },
        {
            "name": "Databasegdriveplayer",
            "url": "https://databasegdriveplayer.co/player.php?tmdb={TMDb_ID}"
        },
        {
            "name": "Autoembed",
            "url": "https://autoembed.xyz/"
        },
        {
            "name": "1movietv",
            "url": "https://1movietv.com/"
        },
        {
            "name": "Gdriveplayer",
            "url": "https://api.gdriveplayer.us/"
        },
        {
            "name": "Streamo",
            "url": "https://streamo.cc/"
        },
        {
            "name": "123movie",
            "url": "https://api.123movie.cc/"
        }
]

• features after finishing authentication 🤟

• close drawer when click a navlink or click outside
• design navlink when active for leftDrawer and Header
  https://remix.run/docs/en/v1/api/remix#navlink

@ctuanle Filter movie and tv with discover api

https://developers.themoviedb.org/3/discover/movie-discover
https://developers.themoviedb.org/3/discover/tv-discover

• Home
  • TV Series
  • Movie
  • Anime
• Discovery
• Artists
• Detail (movie, artist...)
• SignIn, SignOut page
• ...

create list trending page with list image and table

Send data from parent to child route
https://remix.run/docs/en/v1/api/remix#usematches

Add a separate route and data for vi (for using ophim api :v)

Maybe using back for creating db for user :v

Example: title should be List movies instead of Remix App