media browser

src/App.tsx

@@ -223,6 +223,9 @@ class App extends React.Component<IProps, IState> {
   toggleFooter() {
     this.setState({ hideFooter: !this.state.hideFooter });
   }
+  selectVideo(video) {
+    this.setState({ video });
+  }
 
   getMember(input: string) {
     const { members } = this.state;
@@ -249,6 +252,7 @@ class App extends React.Component<IProps, IState> {
       <>
         <Routes
           selectEvent={this.selectEvent}
+          selectVideo={this.selectVideo}
           toggleEditKpi={this.toggleEditKpi}
           toggleFooter={this.toggleFooter}
           toggleStar={this.toggleStar}
@@ -260,6 +264,7 @@ class App extends React.Component<IProps, IState> {
 
         <Modals
           selectEvent={this.selectEvent}
+          selectVideo={this.selectVideo}
           toggleEditKpi={this.toggleEditKpi}
           toggleShowStatus={this.toggleShowStatus}
           {...this.state}
@@ -419,6 +424,7 @@ class App extends React.Component<IProps, IState> {
     this.toggleShowStatus = this.toggleShowStatus.bind(this);
     this.getMember = this.getMember.bind(this);
     this.selectEvent = this.selectEvent.bind(this);
+    this.selectVideo = this.selectVideo.bind(this);
   }
 }
 

src/components/Dashboard/index.tsx

@@ -6,18 +6,8 @@ interface IProps extends IState {
 }
 
 const Dashboard = (props: IProps) => {
-  const { save, media, hidden, selectEvent, blocks } = props;
-  return (
-    <>
-      <Media save={save} media={media} />
-      <Events
-        save={save}
-        hidden={hidden}
-        selectEvent={selectEvent}
-        blocks={blocks}
-      />
-    </>
-  );
+  const { save, selectVideo, media, hidden, selectEvent, blocks } = props;
+  return <Media save={save} media={media} selectVideo={selectVideo} />;
 };
 
 export default Dashboard;

src/components/Media/index.tsx

@@ -1,6 +1,6 @@
-import { useEffect } from "react";
-import { Badge } from "react-bootstrap";
 import axios from "axios";
+import { useEffect, useState } from "react";
+import { PlusSquare, MinusSquare } from "react-feather";
 import { queryNode } from "../../config";
 
 const query = `query {
@@ -16,7 +16,9 @@ const query = `query {
 }`;
 
 const Media = (props: {}) => {
-  const { save, media } = props;
+  const { save, selectVideo, media } = props;
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(50);
 
   useEffect(() => {
     media?.storageBags?.length ||
@@ -24,11 +26,19 @@ const Media = (props: {}) => {
         .post(queryNode, { query })
         .then(({ data }) => save("media", data.data))
         .catch((e) => console.error(query, e.message));
-  }, [media?.storageBags?.length]);
+  }, [save, media?.storageBags?.length]);
 
   return (
     <div className="box">
-      <h2>Media</h2>
+      <h2>
+        <MinusSquare onClick={() => page > 1 && setPage(page - 1)}>
+          -
+        </MinusSquare>{" "}
+        Media
+        <PlusSquare className="ml-1" onClick={() => setPage(page + 1)}>
+          +
+        </PlusSquare>
+      </h2>
       {media.storageBags?.length ? (
         <div className="d-flex flex-wrap">
           {media.storageBags
@@ -46,8 +56,9 @@ const Media = (props: {}) => {
             }, [])
             .filter((o) => o.bitrate)
             .sort((a, b) => b.bitrate - a.bitrate)
+            .slice((page - 1) * perPage, page * perPage)
             .map((o) => (
-              <Video key={o.id} {...o} />
+              <Video key={o.id} selectVideo={selectVideo} {...o} />
             ))}
         </div>
       ) : (
@@ -58,18 +69,19 @@ const Media = (props: {}) => {
 };
 
 const Video = (props: {}) => {
-  const { id, title, videoMedia, bitrate, providers, size } = props;
+  const { selectVideo, id, videoMedia, bitrate, providers, size } = props;
   const alt = `${id} ${videoMedia.title}`;
   if (!providers?.length) return "";
   const url = providers[0].operators[0].metadata.nodeEndpoint;
   return (
     <div
       key={videoMedia.id}
-      className="text-left m-1"
+      className="text-left p-1"
       style={{ width: "200px" }}
+      onClick={() => selectVideo(id)}
     >
       <img
-        className="d-block"
+        className="d-block p-1"
         style={{ width: "200px" }}
         src={url + "api/v1/assets/" + videoMedia.thumbnailPhotoId}
         alt={alt}

src/components/Modals/index.tsx

@@ -1,13 +1,23 @@
 import Status from "./Status";
 import EditKpi from "./EditKpi";
 import Event from "./Event";
+import Player from "./Player";
 
 const Modals = (props) => {
   const { editKpi, toggleEditKpi, showModal, toggleShowStatus, showStatus } =
     props;
   return (
     <div>
-      {props.selectedEvent ? (
+      {props.video ? (
+        <Player
+          id={props.video}
+          onHide={props.selectVideo}
+          selectVideo={props.selectVideo}
+          channel={props.media.storageBags.find((b) =>
+            b.objects.find((o) => +o.id === +props.video)
+          )}
+        />
+      ) : props.selectedEvent ? (
         <Event event={props.selectedEvent} onHide={props.selectEvent} />
       ) : editKpi ? (
         <EditKpi kpi={editKpi} cancel={toggleEditKpi} />