Sau khi đã hoàn tất phần Header, trong giai đoạn này, bạn sẽ thực hiện hiển thị Video từ Embedded Player của Youtube, và hiển thị danh sách các video trong playlist. Ứng dụng của chúng ta sau khi hoàn tất giai đoạn này sẽ như hình bên dưới.

Đối với phần Hiển thị Video (1), khi sử dụng Youtube API để lấy dữ liệu của video, Youtube sẽ trả về một đoạn code mà ta có thể nhúng vào ứng dụng của mình để hiển thị video từ player đã được Youtube làm sẵn. Ở giai đoạn này, WorkLabs CodingSchool đã chuẩn bị sẵn dữ liệu một playlist mẫu, bạn tải về từ link này.

Tại danh sách video trong playlist, ô nhập link video được dùng để thêm video vào playlist, tạm thời bạn chỉ cần tạo ô nhập và nút “Thêm video” mà chưa cần tạo tính năng cho nó. Chúng ta sẽ làm việc đó ở giai đoạn kế tiếp.

Đối với giai đoạn này, nếu có thể, bạn nên sử dụng Redux để quản lý dữ liệu playlist của mình. Việc sử dụng Redux để quản lý dữ liệu sẽ giúp việc tương tác giữa các Component trong ứng dụng dễ dàng hơn về sau. Tuy nhiên, bạn có thể sử dụng bất kỳ phương pháp nào bạn cảm thấy phù hợp nhất.

Gợi ý cho bạn

Yêu cầu

  1. Tạo phần hiển thị video và danh sách video trong playlist.
  2. Khi chọn một video trên danh sách, phần hiển thị sẽ hiển thị video được chọn, và có thể phát (sử dụng embed code từ Youtube API)