74 | {/* Day number — top right */}
75 |
141 | );
142 | }}
143 | />
144 |
145 | );
146 | }
147 |
--------------------------------------------------------------------------------
/frontend/src/components/Login/Login.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import Container from "react-bootstrap/Container";
3 | import Row from "react-bootstrap/Row";
4 | import Button from "react-bootstrap/Button";
5 | import LoginIcon from "bootstrap-icons/icons/box-arrow-in-left.svg";
6 | // import Logo from "../../images/Logo2.png";
7 | import Card from "react-bootstrap/Card";
8 | import { PlexOauth } from "plex-oauth";
9 |
10 | export default class Login extends Component {
11 | constructor(props) {
12 | super(props);
13 |
14 | this.state = {
15 | gotURL: false,
16 | gotToken: false,
17 | url: "",
18 | pin: null,
19 | ip: "",
20 | port: "",
21 | ssl: false,
22 | saved: false,
23 | openWindow: false,
24 | gettingToken: false,
25 | gettingIPs: false,
26 | isLoading: false,
27 | noInternet: false,
28 | error: null,
29 | };
30 |
31 | let version;
32 |
33 | if (this.props.settings.build !== "Native") {
34 | if (this.props.settings.branch === "dev") {
35 | version = `${this.props.settings.version}.${this.props.settings.build}-dev`;
36 | } else {
37 | version = `${this.props.settings.version}.${this.props.settings.build}`;
38 | }
39 | } else {
40 | if (this.props.settings.branch === "dev") {
41 | version = `${this.props.settings.version}-dev`;
42 | } else {
43 | version = `${this.props.settings.version}`;
44 | }
45 | }
46 |
47 | let clientInformation = {
48 | clientIdentifier: `${this.props.settings.uuid}`, // This is a unique identifier used to identify your app with Plex.
49 | product: "Preroll Plus", // Name of your application
50 | device: `${this.props.settings.platform}`, // The type of device your application is running on
51 | version: `${version}`, // Version of your application
52 | forwardUrl: "", // Url to forward back to after signing in.
53 | platform: "Web", // Optional - Platform your application runs on - Defaults to 'Web'
54 | };
55 |
56 | this.externalWindow = null;
57 | this.plexOauth = new PlexOauth(clientInformation);
58 | }
59 |
60 | componentDidMount() {
61 | if (!this.state.gotURL) {
62 | this.plexOauth
63 | .requestHostedLoginURL()
64 | .then((data) => {
65 | let [hostedUILink, pinId] = data;
66 |
67 | this.setState({ url: `${hostedUILink}`, pin: `${pinId}` });
68 | })
69 | .catch((err) => {
70 | this.setState({ noInternet: true });
71 | throw err;
72 | });
73 | this.setState({
74 | gotURL: true,
75 | });
76 | }
77 | }
78 |
79 | executePoll = async () => {
80 | try {
81 | var token;
82 | if (!this.state.pin) {
83 | throw new Error("Unable to poll when pin is not initialized.");
84 | }
85 | await this.plexOauth
86 | .checkForAuthToken(this.state.pin)
87 | .then((authToken) => {
88 | token = authToken;
89 | })
90 | .catch((err) => {
91 | throw err;
92 | });
93 |
94 | if (token) {
95 | this.setState({ gotToken: true });
96 | this.handleGetThumb(token);
97 | this.handleSaveToken(token);
98 | this.externalWindow.close();
99 | } else if (token === null && !this.externalWindow.closed) {
100 | setTimeout(this.executePoll, 1000);
101 | } else {
102 | this.setState({ gettingToken: false });
103 | throw new Error("Window closed without completing login");
104 | }
105 | } catch (e) {
106 | this.externalWindow.close();
107 | }
108 | };
109 |
110 | handlePlexAuth = async () => {
111 | this.setState({ gettingToken: true });
112 | const y = window.top.outerHeight / 2 + window.top.screenY - 300;
113 | const x = window.top.outerWidth / 2 + window.top.screenX - 300;
114 | this.externalWindow = window.open(
115 | `${this.state.url}`,
116 | "",
117 | `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=600, height=600, top=${y}, left=${x}`
118 | );
119 |
120 | await this.executePoll();
121 | };
122 |
123 | handleSaveToken = (token) => {
124 | var settings = { ...this.props.settings };
125 |
126 | settings.token = token;
127 | settings.thumb = this.thumb;
128 | settings.email = this.email;
129 | settings.username = this.username;
130 |
131 | var xhr = new XMLHttpRequest();
132 |
133 | xhr.addEventListener("readystatechange", () => {
134 | if (xhr.readyState === 4) {
135 | if (xhr.status === 200) {
136 | } else {
137 | // error
138 | this.setState({
139 | error: xhr.responseText,
140 | });
141 | }
142 | }
143 | });
144 |
145 | xhr.open("POST", "/backend/save", false);
146 | xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
147 | xhr.send(JSON.stringify(settings));
148 |
149 | this.props.handleLogin();
150 | this.props.handleUpdateThumb(this.thumb, token, this.username, this.email);
151 | };
152 |
153 | handleGetThumb = (token) => {
154 | var data = {};
155 | data.token = token;
156 | var xhr = new XMLHttpRequest();
157 | xhr.addEventListener("readystatechange", () => {
158 | if (xhr.readyState === 4) {
159 | if (xhr.status === 200) {
160 | // request successful
161 | var response = xhr.responseText,
162 | json = JSON.parse(response);
163 |
164 | this.thumb = json.thumb;
165 | this.email = json.email;
166 | this.username = json.username;
167 | } else {
168 | // error
169 | }
170 | }
171 | });
172 | xhr.open("POST", "/backend/thumb", false);
173 | xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
174 | xhr.send(JSON.stringify(data));
175 | };
176 |
177 | render() {
178 | if (this.state.gotURL) {
179 | return (
180 |
86 | {arg.dayNumberText.replace(/\D/g, "")}
87 |
88 |
89 | {/* Sequence title */}
90 | {ev && (
91 |
92 |
139 | )}
140 | {
104 | // Remove any existing tooltip
105 | document.querySelectorAll(".bucket-tooltip").forEach((t) => t.remove());
106 |
107 | const rect = e.currentTarget.getBoundingClientRect();
108 | const tooltip = document.createElement("div");
109 | tooltip.className = "bucket-tooltip";
110 | tooltip.innerHTML = ev.buckets.map((name, i) => `${i + 1}. ${name}`).join("
"); 111 | 112 | Object.assign(tooltip.style, { 113 | position: "fixed", 114 | top: rect.bottom + 8 + "px", 115 | left: rect.left + rect.width / 2 + "px", 116 | transform: "translateX(-50%)", 117 | background: isDarkMode ? "#1a1a1a" : "#ffffff", 118 | color: isDarkMode ? "#eee" : "#222", 119 | border: `1px solid ${isDarkMode ? "#444" : "#ccc"}`, 120 | borderRadius: "8px", 121 | padding: "10px 14px", 122 | fontSize: "13px", 123 | fontWeight: "500", 124 | zIndex: "999999", 125 | boxShadow: "0 10px 30px rgba(0,0,0,0.5)", 126 | pointerEvents: "none", 127 | whiteSpace: "nowrap", 128 | }); 129 | 130 | document.body.appendChild(tooltip); 131 | }} 132 | onMouseLeave={() => { 133 | document.querySelectorAll(".bucket-tooltip").forEach((t) => t.remove()); 134 | }} 135 | > 136 | {ev.title} 137 |
138 | "); 111 | 112 | Object.assign(tooltip.style, { 113 | position: "fixed", 114 | top: rect.bottom + 8 + "px", 115 | left: rect.left + rect.width / 2 + "px", 116 | transform: "translateX(-50%)", 117 | background: isDarkMode ? "#1a1a1a" : "#ffffff", 118 | color: isDarkMode ? "#eee" : "#222", 119 | border: `1px solid ${isDarkMode ? "#444" : "#ccc"}`, 120 | borderRadius: "8px", 121 | padding: "10px 14px", 122 | fontSize: "13px", 123 | fontWeight: "500", 124 | zIndex: "999999", 125 | boxShadow: "0 10px 30px rgba(0,0,0,0.5)", 126 | pointerEvents: "none", 127 | whiteSpace: "nowrap", 128 | }); 129 | 130 | document.body.appendChild(tooltip); 131 | }} 132 | onMouseLeave={() => { 133 | document.querySelectorAll(".bucket-tooltip").forEach((t) => t.remove()); 134 | }} 135 | > 136 | {ev.title} 137 |
190 | Preroll Plus 191 |
192 |Sign in to Plex account to continue
195 |
198 | {this.state.gettingToken ? (
199 |
205 | ) : this.state.noInternet ? (
206 |
212 | ) : (
213 |
219 | )}
220 |
221 | 224 | {this.state.noInternet ? ( 225 |
226 | You must have an internet connection to sign into Plex
227 |
228 | ) : (
229 | <>
230 | )}
231 | Buckets
140 |
143 | Sort by Name}>
144 |
151 |
152 |
153 | 171 | 172 | ))} 173 | 174 |
212 | Red Border: Currently Editing Bucket 213 |
214 |Click the plus to add a new Bucket.
215 | 216 | )} 217 |Are you sure?
228 | 231 | 232 | 235 |Sequences
166 |
169 | Sort by Name}>
170 |
177 |
178 |
179 | Sort by Priority}>
180 |
187 |
188 |
189 | 214 | 215 | ))} 216 | 217 |
254 | Blue Border: Current Sequence Red Border: Currently Editing Sequence 255 |
256 |Click the plus to add a new Sequence.
257 | 258 | )} 259 |Are you sure?
270 | 273 | 274 | 277 |
334 | 
335 |
336 | );
337 | } else if (this.state.error) {
338 | // error
339 | return Error occured: {this.state.error}
;
340 | } else {
341 | if (this.state.isLoggedIn) {
342 | // success
343 | return (
344 |
350 |
354 | 351 | Preroll Plus 352 |
353 |476 | Branch: {this.state.config.branch} 477 |
478 | Build: {this.state.config.build} 479 |
480 | Config Dir: /config 481 |
482 | App Dir: /PrerollPlus 483 |
484 | Docker: 485 | 490 | chadwpalm/prerollplus 491 | 492 |
493 | Source: 494 | 495 | github.com/chadwpalm/PrerollPlus 496 | 497 |