livestream features

.env.example

@@ -1,5 +1,5 @@
 IS_MAINT_MODE=false
-IS_DARK_MODE=false
+IS_DARK_MODE=true
 
 SHORT_TITLE=
 SITE_TITLE=
@@ -12,7 +12,7 @@ MAILCHIMP_URL=
 MAILCHIMP_U=
 MAILCHIMP_ID=
 
-SPREE_API_URL=
+SPREE_API_URL="http://localhost:3000/"
 SPREE_ACCESS_TOKEN=
 
 MUX_ACCESS_TOKEN_ID=

components/StreamCard/StreamCard.tsx

@@ -14,17 +14,18 @@ import {
   StreamMask,
   StreamStatusWrapper,
   StreamStatus,
-  StreamCardDesc,
+  StreamCardDesc, 
   StreamChecked
 } from "./StreamCard.styles";
 
 export const StreamCard = ({ isPast, item }: any) => {
   const router = useRouter();
+  console.log('stream card', item);
   return (
     <StreamCardWrapper
       key={`${item}-card`}
       // href={`/tv/${item.playback_ids[0]}`}
-      onClick={() => router.push(`/tv/${item.playback_ids[0]}`)}
+      onClick={() => router.push(`/tv/${item.playback_ids[0]}?title=${item.title}`)}
       // as={`/tv/${item.playback_ids[0]}`}
       // title={`Link to ${item.title} Live Stream`}
     >

components/StreamViewer/StreamViewer.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect } from "react";
 import { useRouter } from "next/router";
-
+import { StreamViewerChat } from "../StreamViewerChat";
 import { StreamViewerWrapper, StreamVideo, StreamHeaderFade } from "./StreamViewer.styles";
 
 export const StreamViewer = ({ props }: any) => {
   const router = useRouter();
   const { streamId } = router.query;
-
   const playerRef = React.useRef(null);
 
   const videoJsOptions = streamId
@@ -54,6 +53,7 @@ export const StreamViewer = ({ props }: any) => {
 
   return (
     <StreamViewerWrapper>
+      <StreamViewerChat />
       <StreamVideo options={videoJsOptions} onReady={handlePlayerReady} />
       <StreamHeaderFade />
     </StreamViewerWrapper>

components/StreamViewerChat/StreamViewerChat.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const StreamViewerChatWrapper = styled.div`
+  postion: absolute;
+  bottom: 10px;
+  left: 10px;
+  height: 100%;
+`;

components/StreamViewerChat/StreamViewerChat.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useRouter } from "next/router";
+import { StreamChat } from 'stream-chat';
+import { Chat, Channel, ChannelHeader, MessageInput, MessageInputSmall, VirtualizedMessageList, Window } from 'stream-chat-react';
+
+import 'stream-chat-react/dist/css/index.css';
+
+import { StreamViewerChatWrapper } from "./StreamViewerChat.styles";
+
+export const StreamViewerChat = ({ props }: any) => {
+  const router = useRouter();
+  const { streamId, title } = router.query;
+  const chatClient = StreamChat.getInstance('h3t9t6dtbs6d');
+  const userToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiY29sZC1uaWdodC0xIn0.PTghhJHXk5oR0gAnm76elzZTCUusg5tzfAKQtk2GoeY';
+
+
+  chatClient.connectUser(
+    {
+      id: 'cold-night-1',
+      name: 'cold-night-1',
+      image: 'https://getstream.io/random_png/?id=cold-night-1&name=cold-night-1',
+    },
+    userToken,
+  );
+
+  const channel = chatClient.channel('livestream', streamId, {
+    image: 'https://goo.gl/Zefkbx',
+    name: title,
+  });
+
+  return (
+    <StreamViewerChatWrapper>
+      <Chat client={chatClient} theme='livestream dark'>
+        <Channel channel={channel}>
+          <Window>
+            <ChannelHeader live />
+            <VirtualizedMessageList />
+            <MessageInput Input={MessageInputSmall} focus />
+          </Window>
+        </Channel>
+      </Chat>
+    </StreamViewerChatWrapper>
+  );
+};

components/StreamViewerChat/index.ts

@@ -0,0 +1 @@
+export { StreamViewerChat } from "./StreamViewerChat";

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -54,7 +54,7 @@
     "lottie-web": "^5.8.1",
     "moment": "^2.29.1",
     "moment-duration-format": "^2.3.2",
-    "next": "10.0.6",
+    "next": "^12.1.0",
     "next-connect": "^0.11.0",
     "polished": "^4.1.3",
     "prop-types": "^15.7.2",
@@ -93,7 +93,7 @@
     "video.js": "^7.17.0",
     "videojs-hlsjs-plugin": "^1.0.5",
     "videojs-seek-buttons": "^2.2.0",
-    "webpack": "^4.46.0",
+    "webpack": "^5.70.0",
     "yup": "^0.32.9"
   },
   "devDependencies": {
@@ -132,6 +132,8 @@
     "husky": "^6.0.0",
     "lint-staged": "^11.0.0",
     "prettier": "^2.3.0",
+    "stream-chat": "^6.1.0",
+    "stream-chat-react": "^7.0.0",
     "typescript": "^4.1.4"
   }
 }

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,17 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "typings", "pages/api/subscribe.js"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "typings",
+    "pages/api/subscribe.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

typings/stream.d.ts

@@ -10,4 +10,5 @@ export interface IStream {
   start_date: number;
   is_active: true;
   product_ids: number[];
+  actor: string;
 }