หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

กระตุกหลายสตรีม

โปรเจ็กต์ react/redux เพื่อดูสตรีม Twitch หลายรายการพร้อมกัน!

ภาพรวม

เป้าหมาย: สร้างแอปหน้าเดียวพร้อม react + redux + immutableJS ที่อนุญาตให้ผู้ใช้กำหนดค่าหน้าต่างจำนวนเท่าใดก็ได้ในเบราว์เซอร์

ตัวอย่างเพื่อตรวจสอบแรงบันดาลใจ
  • http://kadgar.net/live/
  • http://multitwitch.tv/
  • https://multistre.am/
รายการการปรับปรุง/คุณสมบัติ
  1. เลือกจำนวน X ของสตรีมตามชื่อช่องเพื่อใส่ลงในการแสดงตารางที่กำหนดค่าได้
  • จอแสดงผลแบบตอบสนองพร้อมหน้าต่างลบสตรีม
  • รับรายการช่องสำหรับการเติมข้อความอัตโนมัติ
  • ขนาดหน้าต่างที่กำหนดค่าได้
    • react-grid-layout หรือลองใช้ masonry เป็นตัวอย่างของวิธีรวม libs ที่ไม่ทำปฏิกิริยาของบุคคลที่สามเข้ากับการโต้ตอบ
  1. คงช่องในการรีเฟรชแบบเต็มหน้า (สถานะที่เก็บข้อมูลในตัวเครื่อง)
  2. การผูกปุ่มเพื่อปิด/เปิดเสียง -> แสดงแบบเต็มหน้าจอเร็วขึ้น
  3. การแชทแบบรวมเพื่อเผยแพร่ข้อความเดียวกันไปยังส่วนย่อยของสตรีมที่อยู่ในมุมมอง
โคเดซ

  • ตั้งค่าอินสแตนซ์ aws สำหรับสนามเด็กเล่นสาธารณะ

    • อินสแตนซ์สาธิต

  • เพิ่มบาเบล-เอสลินท์

  • เพิ่มธีม (เลือกเฟรมเวิร์กสไตล์ CSS/อินไลน์)

    • เพิ่มธีมพื้นฐาน
    • ดูกรอบงาน CSS อื่นๆ สำหรับสไตล์อินไลน์

  • เค้าโครงพื้นฐานและขั้นตอนการทำงานด้วย react-router v4

  • เพิ่มรีดักซ์

    • เพิ่มการกำหนดค่าในร้านค้า
    • เพิ่มนั่งร้านร้านค้า JS ที่ไม่เปลี่ยนรูป
      • เพิ่มการเข้ารหัส Transit-js สำหรับระเบียน JS ที่ไม่เปลี่ยนรูป
    • ยังคงอยู่ในที่จัดเก็บในตัวเครื่อง
      • การบูรณา localForage
    • โหลดจากที่จัดเก็บในตัวเครื่อง
      • การรวม redux-persist

  • เพิ่มไคลเอ็นต์การดึงข้อมูล

    • เพิ่ม wrapper ไคลเอนต์ไว้ด้านบนของการดึงข้อมูล
    • เพิ่มมิดเดิลแวร์ redux-saga พร้อม saga
    • เพิ่มการรวม TWITCH API สำหรับการสืบค้นช่องสัญญาณ
    • เพิ่มการรวม YOUTUBE API สำหรับการสืบค้นช่อง
    • เพิ่ม GOOGLE URL Shortener สำหรับการแชร์การกำหนดค่าเลย์เอาต์

  • กล่องโต้ตอบช่วยเหลือ

    • เพิ่มโมดอลโต้ตอบความช่วยเหลือ
    • กรอกเนื้อหาช่วยเหลือและคำแนะนำการใช้งาน

  • กล่องโต้ตอบการแชร์และการรวมลิงก์ Google สั้นลง

    • เพิ่มกล่องโต้ตอบการแชร์พร้อมช่องป้อนข้อมูลที่แสดงลิงก์ URL ของ Google แบบสั้นของข้อมูลเลย์เอาต์จากร้านค้า
    • เพิ่ม API ตัวย่อ URL ของ Google พร้อม Saga

  • โหลดการกำหนดค่าที่ใช้ร่วมกันจากลิงก์

    • เพิ่มหน้า Landing Page สำหรับสิ่งที่แชร์ได้
    • เพิ่มคอนเทนเนอร์โหลดที่รับการกำหนดค่าจาก URL และแทรกลงในสถานะเค้าโครงปัจจุบันสำหรับผู้ใช้

  • คุณสมบัติเค้าโครงสตรีม

    • ผสานรวม react-grid-layout สำหรับโครงร่างกริดที่กำหนดค่าได้
    • ผสานรวม Twitch Player และ Youtube Player เพื่อดูวิดีโอหรือสตรีมสด
    • เพิ่มวิดเจ็ตสตรีมเปล่า
      • เพิ่มปุ่มจาก Navbar
      • ลากและวางลิงก์หรือสตรีมวิดีโอลงในคอนเทนเนอร์
      • ช่องป้อนข้อมูลเพื่อคัดลอกและวางการอ้างอิงลิงก์
    • ล้างวิดเจ็ตทั้งหมดในเค้าโครง
    • ลบวิดเจ็ตแต่ละรายการออกจากเค้าโครง
    • เปลี่ยนคุณภาพวิดีโอในทุกสตรีม
    • ปิดเสียง / เปิดเสียงข้ามสตรีมทั้งหมด
    • มุมมองแบบสุ่มสำหรับเค้าโครง
      • เพิ่มปุ่มสลับในมุมมองสุ่ม
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด