First Commit

src/Netflix.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import './netflix.css';
+
+export default class Netflix extends Component {
+  render() {
+    return (
+      <div className="content__wrapper">
+        <h3>WATCH PARTY</h3>
+        <div className="party_chat_container">CHAT WINDOW HERE</div>
+        <div className="party_chat_input">
+          <textarea
+            placeholder={`Write a message...\nPress Ctrl+Enter to send`}
+            onChange={e => console.log(e.target.value)}
+          />
+        </div>
+      </div>
+    );
+  }
+}

src/data_model.js

@@ -0,0 +1,38 @@
+const DATA_MODEL = {
+  users: {
+    '<someuid>': {
+      uid: '<someuid>',
+      rooms: ['<someroomid>'],
+    },
+    '<someuid2>': {
+      uid: '<someuid2>',
+      rooms: ['<someroomid>'],
+    },
+  },
+  rooms: {
+    '<someroomid>': {
+      player: {
+        source: 'hulu|netlix|amazon',
+        state: 'playing|paused',
+        time: '<video_time>',
+      },
+      users: ['<someuid>', '<someuid2>'],
+      messages: {
+        '<m1>': {
+          uid: '<someuid>',
+          name: 'Jane Doe',
+          text: 'Hello!!!!',
+          time: '<timestamp>',
+        },
+        '<m2>': {
+          uid: '<someuid2>',
+          name: 'Long John',
+          text: 'oh hi mark',
+          time: '<timestamp>',
+        },
+      },
+    },
+  },
+};
+
+export default DATA_MODEL;

src/hulu.css

@@ -0,0 +1,23 @@
+/* #party_close {
+  display: inline;
+  margin-right: 0.625rem;
+}
+#__player__ .Player__container {
+  width: 75%;
+  resize: horizontal;
+}
+#__next {
+  width: 75%;
+  resize: horizontal;
+}
+#party_create {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.hidden {
+  display: none;
+} */

src/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Netflix from './Netflix';
+import firebase from 'firebase/app';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU',
+  authDomain: 'watch-party-crx.firebaseapp.com',
+  databaseURL: 'https://watch-party-crx.firebaseio.com',
+  projectId: 'watch-party-crx',
+  storageBucket: 'watch-party-crx.appspot.com',
+  messagingSenderId: '712242707190',
+  appId: '1:712242707190:web:65fa7f772e30da364b0ad7',
+  measurementId: 'G-EZS4PEVG4T',
+};
+
+firebase.initializeApp(firebaseConfig);
+
+const PartyWrapper = document.createElement('div');
+PartyWrapper.id = 'party_wrapper';
+document.body.appendChild(PartyWrapper);
+
+if (window.location.href.startsWith('https://www.hulu.com')) {
+} else if (window.location.href.startsWith('https://www.netflix.com')) {
+  PartyWrapper.classList.add('netflix');
+  document.body.classList.add('netflix');
+  ReactDOM.render(
+    <React.StrictMode>
+      <Netflix />
+    </React.StrictMode>,
+    PartyWrapper
+  );
+} else if (window.location.href.includes('amazon.com')) {
+} else {
+  ReactDOM.render(<div>Watch Party not supported on this site</div>, PartyWrapper);
+}

src/netflix.css

@@ -0,0 +1,56 @@
+body.netflix {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+body.netflix #appMountPoint {
+  z-index: 999;
+  overflow-y: auto;
+  max-height: 100vh;
+  resize: horizontal;
+  width: 1802px;
+  margin: 0px;
+  max-width: 100%;
+  flex-grow: 3;
+  flex-basis: 3;
+}
+.netflix-sans-font-loaded,
+.netflix-sans-font-loaded > div,
+.netflix-sans-font-loaded > div > div,
+.nf-kb-nav-wrapper,
+.sizing-wrapper {
+  height: 100%;
+}
+#appMountPoint .netflix-sans-font-loaded > div > div > .nf-kb-nav-wrapper .sizing-wrapper {
+  position: relative !important;
+}
+#party_wrapper.netflix {
+  z-index: 999;
+  flex-shrink: 3;
+  flex-basis: 1;
+  background-color: #1e2126;
+  width: 25%;
+  overflow: hidden;
+  display: flex;
+}
+#party_wrapper.netflix .content__wrapper {
+  flex: 1;
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+}
+#party_wrapper.netflix .party_chat_container {
+  flex: 1;
+}
+#party_wrapper.netflix .party_chat_input > textarea {
+  width: 100%;
+  margin: 0px;
+  height: 4rem;
+  max-height: 4rem;
+  resize: none;
+  color: black;
+  border-radius: 13px;
+  padding: 5px;
+  outline: none;
+  border: none;
+}