ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.6.4/release

Browse Source 
-admin sources update
This commit is contained in:
ayushya
2020-08-28 16:25:01 -04:00
parent 0b4b0a4a1c
commit 06890a0f44
1 changed files with 144 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/Dashboard.jsx
+144 -212
View File
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import React, { Component } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import {
Button,
Card,
@@ -21,7 +21,7 @@ import {
Collapse,
Modal,
Select,
} from "antd";
} from 'antd';
import {
getPartyDashboardData,
getServerDashboardData,
@@ -29,7 +29,7 @@ import {
postUpdateVideoSelectors,
postUpdateVideoNameSelectors,
postSendMessage,
} from "./Api";
} from './Api';
import {
CheckCircleTwoTone,
CloseCircleTwoTone,
@@ -43,42 +43,45 @@ import {
LogoutOutlined,
SendOutlined,
PlusCircleOutlined,
} from "@ant-design/icons";
} from '@ant-design/icons';
const PLAYER_SOURCES = [
{ text: "Netflix", value: "netflix." },
{ text: "Amazon", value: "amazon." },
{ text: "Hulu", value: "hulu." },
{ text: "Disney+", value: "disneyplus." },
{ text: "YouTube", value: "youtube." },
{ text: "HBO Now", value: "hbonow." },
{ text: "HBO Max", value: "hbomax." },
{ text: "Peacock", value: "peacocktv." },
{ text: "Google Play", value: "play.google." },
{ text: "Crunchyroll", value: "crunchyroll." },
{ text: 'Netflix', value: 'netflix.' },
{ text: 'Amazon', value: 'amazon.' },
{ text: 'Hulu', value: 'hulu.' },
{ text: 'Disney+', value: 'disneyplus.' },
{ text: 'YouTube', value: 'youtube.' },
{ text: 'HBO Now', value: 'hbonow.' },
{ text: 'HBO Max', value: 'hbomax.' },
{ text: 'Peacock', value: 'peacocktv.' },
{ text: 'Google Play', value: 'play.google.' },
{ text: 'Crunchyroll', value: 'crunchyroll.' },
{ text: 'Apple TV+', value: 'tv.apple.' },
{ text: 'Viki', value: 'viki.' },
{ text: 'Funimation', value: 'funimation.' },
];
const MESSAGE_TYPES = [
{
text: "REPLY",
value: "interactive/text",
text: 'REPLY',
value: 'interactive/text',
},
{
text: "LINK",
value: "interactive/link",
text: 'LINK',
value: 'interactive/link',
},
{
text: "MESSAGE",
value: "",
text: 'MESSAGE',
value: '',
},
];
const emptyMessage = {
type: "",
text: "",
uid: "<system>",
name: "",
endpoint: "",
type: '',
text: '',
uid: '<system>',
name: '',
endpoint: '',
// time set on send,
};
@@ -87,7 +90,7 @@ export default class Dashboard extends Component {
super(props);
this.state = {
partiesOverview: null,
activeTab: "1",
activeTab: '1',
refreshing: true,
selectedParties: [],
nameSelectors: {},
@@ -120,12 +123,12 @@ export default class Dashboard extends Component {
this.setState({ refreshing: true });
const { activeTab } = this.state;
switch (activeTab) {
case "1":
case '1':
this.getPartiesOverview();
break;
case "2":
case "3":
case "4":
case '2':
case '3':
case '4':
this.getVersionsOverview();
break;
default:
@@ -138,18 +141,14 @@ export default class Dashboard extends Component {
updateVersionMessage = (message, version) => {
this.setState({ refreshing: true });
const { versions } = this.state;
const versionData = versions.filter(
(v) => v.version.split(".").join("") === version
)[0];
const versionData = versions.filter((v) => v.version.split('.').join('') === version)[0];
versionData.message = message;
this.updateVersion(version, versionData);
};
updateVersionActive = (active, version) => {
this.setState({ refreshing: true });
const { versions } = this.state;
const versionData = versions.filter(
(v) => v.version.split(".").join("") === version
)[0];
const versionData = versions.filter((v) => v.version.split('.').join('') === version)[0];
versionData.active = active;
this.updateVersion(version, versionData);
};
@@ -159,7 +158,7 @@ export default class Dashboard extends Component {
.catch((err) =>
notification.error({
description: err.message,
message: "Unable To Update",
message: 'Unable To Update',
})
);
};
@@ -179,7 +178,7 @@ export default class Dashboard extends Component {
.catch((err) => {
notification.error({
description: err.message,
message: "Unable To Update",
message: 'Unable To Update',
});
this.setState({ refreshing: false });
@@ -192,43 +191,32 @@ export default class Dashboard extends Component {
};
handleAlertTitleChange = (value, version, index) => {
const { versions } = this.state;
versions.filter((vs) => vs.version === version)[0].alerts[
index
].title = value;
versions.filter((vs) => vs.version === version)[0].alerts[index].title = value;
this.setState({ versions });
};
handleAlertDescriptionChange = (value, version, index) => {
const { versions } = this.state;
versions.filter((vs) => vs.version === version)[0].alerts[
index
].description = value;
versions.filter((vs) => vs.version === version)[0].alerts[index].description = value;
this.setState({ versions });
};
handleAlertLinkChange = (value, version, index) => {
const { versions } = this.state;
versions.filter((vs) => vs.version === version)[0].alerts[
index
].link = value;
versions.filter((vs) => vs.version === version)[0].alerts[index].link = value;
this.setState({ versions });
};
handleAlertLinkTextChange = (value, version, index) => {
const { versions } = this.state;
versions.filter((vs) => vs.version === version)[0].alerts[
index
].linkText = value;
versions.filter((vs) => vs.version === version)[0].alerts[index].linkText = value;
this.setState({ versions });
};
deleteAlert = (version, index) => {
const { versions } = this.state;
versions.filter((vs) => vs.version === version)[0].alerts.splice(index, 1);
if (
versions.filter((vs) => vs.version === version)[0].importantAlert ===
index ||
versions.filter((vs) => vs.version === version)[0].importantAlert === index ||
versions.filter((vs) => vs.version === version)[0].alerts.length < index
) {
versions.filter(
(vs) => vs.version === version
)[0].importantAlert = undefined;
versions.filter((vs) => vs.version === version)[0].importantAlert = undefined;
}
this.setState({ versions });
};
@@ -237,10 +225,10 @@ export default class Dashboard extends Component {
versions
.filter((vs) => vs.version === version)[0]
.alerts.push({
title: "",
description: "",
link: "",
linkText: "",
title: '',
description: '',
link: '',
linkText: '',
});
this.setState({ versions });
};
@@ -248,12 +236,11 @@ export default class Dashboard extends Component {
this.setState({ refreshing: true });
const { versions } = this.state;
const versionData = versions.filter((v) => v.version === version)[0];
if (versionData.alerts.length > 0)
this.updateVersion(version.split(".").join(""), versionData);
if (versionData.alerts.length > 0) this.updateVersion(version.split('.').join(''), versionData);
else {
notification.error({
message: "Missing Alerts",
description: "Must have atleast one alert",
message: 'Missing Alerts',
description: 'Must have atleast one alert',
});
this.setState({ refreshing: false });
@@ -262,9 +249,7 @@ export default class Dashboard extends Component {
changeImportantAlert = (active, version, index) => {
const { versions } = this.state;
if (active === false) {
versions.filter(
(vs) => vs.version === version
)[0].importantAlert = undefined;
versions.filter((vs) => vs.version === version)[0].importantAlert = undefined;
} else {
versions.filter((vs) => vs.version === version)[0].importantAlert = index;
}
@@ -273,16 +258,16 @@ export default class Dashboard extends Component {
getAddMessageText = () => {
const { activeTab } = this.state;
switch (activeTab) {
case "1":
return "Send Message";
case "2":
return "Add Version";
case "3":
return "Add Video Selector";
case "4":
return "Add Name Selector";
case '1':
return 'Send Message';
case '2':
return 'Add Version';
case '3':
return 'Add Video Selector';
case '4':
return 'Add Name Selector';
default:
return "";
return '';
}
};
getPrettyTime = (t) => {
@@ -303,7 +288,7 @@ export default class Dashboard extends Component {
.catch((err) => {
notification.error({
description: err.message,
message: "Unable To Update",
message: 'Unable To Update',
});
this.setState({ refreshing: false });
@@ -312,7 +297,7 @@ export default class Dashboard extends Component {
sendOrAdd = () => {
const { activeTab } = this.state;
switch (activeTab) {
case "1":
case '1':
this.setState({ messageModel: true });
break;
default:
@@ -331,17 +316,17 @@ export default class Dashboard extends Component {
await postSendMessage({ selectedParties, newMessage }).catch((err) => {
notification.error({
description: err.message,
message: "Unable To Send Message",
message: 'Unable To Send Message',
});
});
this.setState({
refreshing: false,
newMessage: {
type: "",
text: "",
uid: "<system>",
name: "",
endpoint: "",
type: '',
text: '',
uid: '<system>',
name: '',
endpoint: '',
},
messageModel: false,
});
@@ -363,62 +348,57 @@ export default class Dashboard extends Component {
const partiesColumns = [
{
title: "Party Name",
dataIndex: "id",
title: 'Party Name',
dataIndex: 'id',
sorter: (a, b) => (a.id.toLowerCase() < b.id.toLowerCase() ? -1 : 1),
},
{
title: "Source",
dataIndex: "source",
sorter: (a, b) =>
a.source.toLowerCase() < b.source.toLowerCase() ? -1 : 1,
title: 'Source',
dataIndex: 'source',
sorter: (a, b) => (a.source.toLowerCase() < b.source.toLowerCase() ? -1 : 1),
filters: [
...PLAYER_SOURCES,
{
text: "Is Playing",
value: "PLAYING",
text: 'Is Playing',
value: 'PLAYING',
},
{
text: "Is Paused",
value: "PAUSED",
text: 'Is Paused',
value: 'PAUSED',
},
],
onFilter: (v, r) => r.source === v || r.status === v,
render: (a, r) => (
<Badge
status={
r.status === "PLAYING"
? "success"
: r.status === "PAUSED"
? "warning"
: "error"
r.status === 'PLAYING' ? 'success' : r.status === 'PAUSED' ? 'warning' : 'error'
}
text={this.getSourceName(a)}
/>
),
},
{
title: "Created At",
dataIndex: "createTime",
defaultSortOrder: "descend",
title: 'Created At',
dataIndex: 'createTime',
defaultSortOrder: 'descend',
sorter: (a, b) => Date.parse(a.createTime) - Date.parse(b.createTime),
render: (a) => new Date(Date.parse(a)).toLocaleString(),
},
{
title: "Updated At",
dataIndex: "updateTime",
title: 'Updated At',
dataIndex: 'updateTime',
filters: [
{
text: "Active",
value: "a",
text: 'Active',
value: 'a',
},
{
text: "Inactive",
value: "i",
text: 'Inactive',
value: 'i',
},
],
onFilter: (v, r) =>
v === "a"
v === 'a'
? (Date.now() - Date.parse(r.updateTime)) / 60000 < afkLimit
: (Date.now() - Date.parse(r.updateTime)) / 60000 > afkLimit,
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
@@ -428,11 +408,7 @@ export default class Dashboard extends Component {
return (
<Tag
color={
minutes <= activeLimit
? "success"
: minutes <= afkLimit
? "processing"
: "default"
minutes <= activeLimit ? 'success' : minutes <= afkLimit ? 'processing' : 'default'
}
>
{dS}
@@ -441,15 +417,15 @@ export default class Dashboard extends Component {
},
},
{
title: "On Call",
dataIndex: "onCall",
title: 'On Call',
dataIndex: 'onCall',
filters: [
{
text: "On Call",
text: 'On Call',
value: true,
},
{
text: "Not On Call",
text: 'Not On Call',
value: false,
},
],
@@ -465,23 +441,22 @@ export default class Dashboard extends Component {
const versionsColumns = [
{
title: "Version",
dataIndex: "version",
defaultSortOrder: "descend",
title: 'Version',
dataIndex: 'version',
defaultSortOrder: 'descend',
sorter: (a, b) =>
parseInt(a.version.split(".").join("")) -
parseInt(b.version.split(".").join("")),
parseInt(a.version.split('.').join('')) - parseInt(b.version.split('.').join('')),
},
{
title: "Active",
dataIndex: "active",
title: 'Active',
dataIndex: 'active',
filters: [
{
text: "Active",
text: 'Active',
value: true,
},
{
text: "Inactive",
text: 'Inactive',
value: false,
},
],
@@ -489,22 +464,18 @@ export default class Dashboard extends Component {
render: (a, r) => (
<Switch
disabled={refreshing}
onChange={(c) =>
this.updateVersionActive(c, r.version.split(".").join(""))
}
onChange={(c) => this.updateVersionActive(c, r.version.split('.').join(''))}
checked={a}
/>
),
},
{
title: "Inactive Message",
dataIndex: "message",
title: 'Inactive Message',
dataIndex: 'message',
render: (a, r) => (
<Input.Search
disabled={refreshing}
onSearch={(v) =>
this.updateVersionMessage(v, r.version.split(".").join(""))
}
onSearch={(v) => this.updateVersionMessage(v, r.version.split('.').join(''))}
value={a}
onChange={(e) => this.handleVersionMessageChange(e, r.version)}
enterButton={<EnterOutlined />}
@@ -547,7 +518,7 @@ export default class Dashboard extends Component {
okText="Send Message"
>
<Select
onChange={(e) => this.editMessage(e, "type")}
onChange={(e) => this.editMessage(e, 'type')}
value={newMessage.type}
placeholder="Message Type"
disabled={refreshing}
@@ -561,25 +532,22 @@ export default class Dashboard extends Component {
<Input.TextArea
disabled={refreshing}
value={newMessage.text}
onChange={(e) => this.editMessage(e.target.value, "text")}
onChange={(e) => this.editMessage(e.target.value, 'text')}
placeholder="Message"
/>
{(newMessage.type === "interactive/link" ||
newMessage.type === "interactive/text") && (
{(newMessage.type === 'interactive/link' || newMessage.type === 'interactive/text') && (
<Input
disabled={refreshing}
value={newMessage.endpoint}
onChange={(e) => this.editMessage(e.target.value, "endpoint")}
placeholder={
newMessage.type === "interactive/link" ? "Link" : "Endpoint"
}
onChange={(e) => this.editMessage(e.target.value, 'endpoint')}
placeholder={newMessage.type === 'interactive/link' ? 'Link' : 'Endpoint'}
/>
)}
{newMessage.type === "interactive/link" && (
{newMessage.type === 'interactive/link' && (
<Input
disabled={refreshing}
value={newMessage.name}
onChange={(e) => this.editMessage(e.target.value, "name")}
onChange={(e) => this.editMessage(e.target.value, 'name')}
placeholder="Link Text"
/>
)}
@@ -587,7 +555,7 @@ export default class Dashboard extends Component {
<Card>
<PageHeader
extra={[
activeTab === "1" && (
activeTab === '1' && (
<Badge key="5" count="ACTIVE" className="active">
<InputNumber
prefix="Active"
@@ -596,7 +564,7 @@ export default class Dashboard extends Component {
/>
</Badge>
),
activeTab === "1" && (
activeTab === '1' && (
<Badge key="4" count="AFK" className="afk">
<InputNumber
prefix="AFK"
@@ -617,14 +585,12 @@ export default class Dashboard extends Component {
<Button
key="2"
onClick={this.sendOrAdd}
icon={
activeTab === "1" ? <SendOutlined /> : <PlusCircleOutlined />
}
disabled={activeTab === "1" && selectedParties.length === 0}
icon={activeTab === '1' ? <SendOutlined /> : <PlusCircleOutlined />}
disabled={activeTab === '1' && selectedParties.length === 0}
>
{this.getAddMessageText()}
</Button>,
activeTab === "3" && (
activeTab === '3' && (
<Button
type="primary"
onClick={this.updateVideoSelector}
@@ -635,7 +601,7 @@ export default class Dashboard extends Component {
Save Video Selectors
</Button>
),
activeTab === "4" && (
activeTab === '4' && (
<Button
type="primary"
onClick={this.updateVideoNameSelector}
@@ -653,12 +619,11 @@ export default class Dashboard extends Component {
<Table
rowSelection={{
selectedRowKeys: selectedParties,
onChange: (selectedParties) =>
this.setState({ selectedParties }),
onChange: (selectedParties) => this.setState({ selectedParties }),
}}
loading={partiesOverview === null || refreshing}
pagination={{
position: ["bottomCenter"],
position: ['bottomCenter'],
total: partiesOverview ? partiesOverview.length : 0,
showTotal: (t, r) => `${r[0]} to ${r[1]} of ${t}`,
defaultPageSize: 10,
@@ -670,7 +635,7 @@ export default class Dashboard extends Component {
columns={partiesColumns}
expandable={{
rowExpandable: (r) => true,
expandedRowClassName: () => "party-details-wrapper",
expandedRowClassName: () => 'party-details-wrapper',
expandedRowRender: (r) => (
<Descriptions bordered column={5}>
<Descriptions.Item span={2} label="# Of Users">
@@ -688,11 +653,11 @@ export default class Dashboard extends Component {
<Descriptions.Item span={3} label="Show Status">
<Badge
status={
r.status === "PLAYING"
? "success"
: r.status === "PAUSED"
? "warning"
: "error"
r.status === 'PLAYING'
? 'success'
: r.status === 'PAUSED'
? 'warning'
: 'error'
}
text={r.status}
/>
@@ -705,13 +670,13 @@ export default class Dashboard extends Component {
<Tabs.TabPane tab="Versions" key="2">
<Table
loading={refreshing}
pagination={{ position: ["bottomCenter"] }}
pagination={{ position: ['bottomCenter'] }}
rowKey={(p) => p.version}
dataSource={versions}
columns={versionsColumns}
expandable={{
rowExpandable: (r) => r.alerts,
expandedRowClassName: () => "alerts-wrapper",
expandedRowClassName: () => 'alerts-wrapper',
expandedRowRender: (r) => (
<Row>
{r.alerts.map((a, i) => (
@@ -727,15 +692,9 @@ export default class Dashboard extends Component {
/>,
<Switch
onClick={(active) =>
this.changeImportantAlert(
active,
r.version,
i
)
}
checked={
r.importantAlert && r.importantAlert === i
this.changeImportantAlert(active, r.version, i)
}
checked={r.importantAlert && r.importantAlert === i}
/>,
]}
>
@@ -743,11 +702,7 @@ export default class Dashboard extends Component {
placeholder="title"
value={a.title}
onChange={(e) =>
this.handleAlertTitleChange(
e.target.value,
r.version,
i
)
this.handleAlertTitleChange(e.target.value, r.version, i)
}
/>
<Input.TextArea
@@ -755,11 +710,7 @@ export default class Dashboard extends Component {
autoSize={{ minRows: 2, maxRows: 2 }}
value={a.description}
onChange={(e) =>
this.handleAlertDescriptionChange(
e.target.value,
r.version,
i
)
this.handleAlertDescriptionChange(e.target.value, r.version, i)
}
/>
<Divider orientation="left">Link</Divider>
@@ -768,22 +719,14 @@ export default class Dashboard extends Component {
value={a.linkText}
placeholder="Link Text"
onChange={(e) =>
this.handleAlertLinkTextChange(
e.target.value,
r.version,
i
)
this.handleAlertLinkTextChange(e.target.value, r.version, i)
}
/>
<Input
value={a.link}
placeholder="Link"
onChange={(e) =>
this.handleAlertLinkChange(
e.target.value,
r.version,
i
)
this.handleAlertLinkChange(e.target.value, r.version, i)
}
/>
</Input.Group>
@@ -799,10 +742,7 @@ export default class Dashboard extends Component {
</Card>
</Col>
<Col>
<Card
onClick={() => this.saveAlerts(r.version)}
className="add-alert-card"
>
<Card onClick={() => this.saveAlerts(r.version)} className="add-alert-card">
<SaveFilled />
</Card>
</Col>
@@ -836,24 +776,16 @@ export default class Dashboard extends Component {
<Input
key={`video-selector-${source}-show`}
className="video-selector-input"
addonBefore={"Show"}
value={nameSelectors[source]["show"]}
onChange={(e) =>
this.handleVideoNameSelectorChange(e, source, "show")
}
addonBefore={'Show'}
value={nameSelectors[source]['show']}
onChange={(e) => this.handleVideoNameSelectorChange(e, source, 'show')}
/>
<Input
key={`video-selector-${source}-episode`}
className="video-selector-input"
addonBefore={"Episode"}
value={nameSelectors[source]["episode"]}
onChange={(e) =>
this.handleVideoNameSelectorChange(
e,
source,
"episode"
)
}
addonBefore={'Episode'}
value={nameSelectors[source]['episode']}
onChange={(e) => this.handleVideoNameSelectorChange(e, source, 'episode')}
/>
</Collapse.Panel>
))}