REDESIGN Part 1....

2026-04-05 20:31:58 +02:00 · 2018-11-25 14:56:35 +01:00
parent 73253cda17
commit c78e90588a
33 changed files with 1533 additions and 349 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ out
 dist
 website
 server
-.vscode
+.vscode
+DiscordBot
--- a/Extension/_locales/de/messages.json
+++ b/Extension/_locales/de/messages.json
@@ -1,104 +0,0 @@
-{
-    "appDesc": {
-        "message": "PreMiD fügt Discord-Rich-Presence-Integration, Kontrolle über Multimediatasten und viele weitere Funktionen zu YouTube/YouTube Music, Twitch etc. hinzu."
-    },
-    "connected": {
-        "message": "Verbunden"
-    },
-    "disconnected": {
-        "message": "Getrennt"
-    },
-    "installedThanks": {
-        "message": "Vielen Dank, für das Installieren von PreMiD"
-    },
-    "installedApp": {
-        "message": "Hast du das Programm bereits installiert?"
-    },
-    "installedNo": {
-        "message": "Nein? Folge dieser Anleitung:"
-    },
-    "installedStepApp": {
-        "message": "Lade die neueste Version von $1 herunter"
-    },
-    "installedStepAppMyRepository": {
-        "message": "meinem GitHub Repository"
-    },
-    "installedWaitInstalled": {
-        "message": "Offne das Installationsprogramm und warte bis die Installation abgeschlossen ist"
-    },
-    "installedMayWarning": {
-        "message": "Möglicherweise bekommst du eine Warnung von deiner FireWall und SmartScreen (Es ist kein Virus. Das verspreche ich dir!)"
-    },
-    "installedAppAutostart": {
-        "message": "Das Programm sollte automatisch starten. Du kannst dies prüfen, indem du auf deine Taskbar (Windows) oder deine Menubar (MacOS) schaust"
-    },
-    "installedYes": {
-        "message": "Ja? Jetzt bist du bereit!"
-    },
-    "installedStart": {
-        "message": "Starte, indem du ein Video auf YouTube, deine Lieblingsstreamer auf Twitch, deine Lieblings Animes auf KissAnime oder JKAnime anschaust oder vielleicht sogar Netflix... Wer weiß?<br>Oder du hörst dir deine Lieblingslieder auf SoundCloud und YouTube Music an. Einstellungen findest du indem du auf das PreMiD icon in deinem Browser klickst."
-    },
-    "installedSupportMe": {
-        "message": "Unterstütze mich!"
-    },
-    "updatedYTPUpdated": {
-        "message": "PreMiD wurde aktualisiert!"
-    },
-    "updatedWhatsNew": {
-        "message": "Was ist neu?"
-    },
-    "updatedWhatChanged": {
-        "message": "Was hat sich geändert?"
-    },
-    "updatedAdded0": {
-        "message": "Support für JKAnime & KissAnime"
-    },
-    "updatedAdded1": {
-        "message": "Erweiterungs-Popup"
-    },
-    "updatedChanged0": {
-        "message": "Eine Menge und ich meine eine Menge Neuschreibungen!"
-    },
-    "updatedChanged1": {
-        "message": "Große Schnelligkeitsverbesserungen der App"
-    },
-    "updatedAdded2": {
-        "message": "Einstellungs-Synchronisation (Google Account)"
-    },
-    "playbackPlaying": {
-        "message": "Wiedergabe"
-    },
-    "playbackPaused": {
-        "message": "Wiedergabe pausiert"
-    },
-    "about": {
-        "message": "Über"
-    },
-    "feedback": {
-        "message": "Feedback"
-    },
-    "options": {
-        "message": "Optionen"
-    },
-    "general": {
-        "message": "Allgemein"
-    },
-    "enabled": {
-        "message": "Eingeschaltet"
-    },
-    "titleMenubar": {
-        "message": "Titel Menubar"
-    },
-    "mediaControls": {
-        "message": "Medien-Kontrolle"
-    },
-    "checkForUpdates": {
-        "message": "Nach Updates suchen"
-    },
-    "systemStartup": {
-        "message": "Systemstart"
-    },
-    "presences": {
-        "message": "Presencen"
-    }
-}
--- a/Extension/_locales/en/messages.json
+++ b/Extension/_locales/en/messages.json
@@ -1,104 +1,110 @@
 {
-    "appDesc": {
-        "message": "PreMiD adds Discord Rich Presence integration, Media controls and much more to YouTube/YouTube Music, Twitch etc..."
-    },
-    "connected": {
-        "message": "Connected"
-    },
-    "disconnected": {
-        "message": "Disconnected"
-    },
-    "installedThanks": {
-        "message": "Thank you for installing PreMiD"
-    },
-    "installedApp": {
-        "message": "Did you install the application yet?"
-    },
-    "installedNo": {
-        "message": "No? Follow these steps:"
-    },
-    "installedStepApp": {
-        "message": "Download the latest version from $1"
-    },
-    "installedStepAppMyRepository": {
-        "message": "my repository"
-    },
-    "installedWaitInstalled": {
-        "message": "Open the installer and wait until it installed"
-    },
-    "installedMayWarning": {
-        "message": "You may receive a warning about FireWall and SmartScreen (Its not a virus i promise)"
-    },
-    "installedAppAutostart": {
-        "message": "The application should start automatically, you can check this by looking at your taskbar (Windows) or your menubar (MacOS)"
-    },
-    "installedYes": {
-        "message": "Yes? You are ready to go!"
-    },
-    "installedStart": {
-        "message": "Start by watching a video on YouTube, watching your loved streamers on Twitch, Watch your favourite animes on KissAnime or JKAnime, maybe even Netflix... Who knows?<br>Or you just listen to your favourite songs on SoundCloud and YouTube Music. Settings can be found by clicking the PreMiD icon in your browser."
-    },
-    "installedSupportMe": {
-        "message": "Support me!"
-    },
-    "updatedYTPUpdated": {
-        "message": "PreMiD has been updated!"
-    },
-    "updatedWhatsNew": {
-        "message": "Whats new?"
-    },
-    "updatedWhatChanged": {
-        "message": "What changed?"
-    },
-    "updatedAdded0": {
-        "message": "Support for JKAnime & KissAnime"
-    },
-    "updatedAdded1": {
-        "message": "Extension popup"
-    },
-    "updatedChanged0": {
-        "message": "A lot and I mean a lot of rewrites!"
-    },
-    "updatedChanged1": {
-        "message": "Huge speed improvements to App"
-    },
-    "updatedAdded2": {
-        "message": "Settings Sync (Google Account)"
-    },
-    "playbackPlaying": {
-        "message": "Playing back"
-    },
-    "playbackPaused": {
-        "message": "Playback paused"
-    },
-    "about": {
-        "message": "About"
-    },
-    "feedback": {
-        "message": "Feedback"
-    },
-    "options": {
-        "message": "Options"
-    },
-    "general": {
-        "message": "General"
-    },
-    "enabled": {
-        "message": "Enabled"
-    },
-    "titleMenubar": {
-        "message": "Title Menubar"
-    },
-    "mediaControls": {
-        "message": "Media Controls"
-    },
-    "checkForUpdates": {
-        "message": "Check for updates"
-    },
-    "systemStartup": {
-        "message": "System startup"
-    },
-    "presences": {
-        "message": "Presences"
-    }
-}
+  "appDesc": {
+    "message": "PreMiD adds Discord Rich Presence integration, Media controls and much more to YouTube/YouTube Music, Twitch etc..."
+  },
+  "connected": {
+    "message": "Connected to %SERVICE%"
+  },
+  "disconnected": {
+    "message": "Disconnected from %SERVICE%"
+  },
+  "installedThanks": {
+    "message": "Thank you for installing PreMiD"
+  },
+  "installedApp": {
+    "message": "Did you install the application yet?"
+  },
+  "installedNo": {
+    "message": "No? Follow these steps:"
+  },
+  "installedStepApp": {
+    "message": "Download the latest version from $1"
+  },
+  "installedStepAppMyRepository": {
+    "message": "my repository"
+  },
+  "installedWaitInstalled": {
+    "message": "Open the installer and wait until it installed"
+  },
+  "installedMayWarning": {
+    "message": "You may receive a warning about FireWall and SmartScreen (Its not a virus i promise)"
+  },
+  "installedAppAutostart": {
+    "message": "The application should start automatically, you can check this by looking at your taskbar (Windows) or your menubar (MacOS)"
+  },
+  "installedYes": {
+    "message": "Yes? You are ready to go!"
+  },
+  "installedStart": {
+    "message": "Start by watching a video on YouTube, watching your loved streamers on Twitch, Watch your favourite animes on KissAnime or JKAnime, maybe even Netflix... Who knows?<br>Or you just listen to your favourite songs on SoundCloud and YouTube Music. Settings can be found by clicking the PreMiD icon in your browser."
+  },
+  "installedSupportMe": {
+    "message": "Support me!"
+  },
+  "updatedYTPUpdated": {
+    "message": "PreMiD has been updated!"
+  },
+  "updatedWhatsNew": {
+    "message": "Whats new?"
+  },
+  "updatedWhatChanged": {
+    "message": "What changed?"
+  },
+  "updatedAdded0": {
+    "message": "Support for JKAnime & KissAnime"
+  },
+  "updatedAdded1": {
+    "message": "Extension popup"
+  },
+  "updatedChanged0": {
+    "message": "A lot and I mean a lot of rewrites!"
+  },
+  "updatedChanged1": {
+    "message": "Huge speed improvements to App"
+  },
+  "updatedAdded2": {
+    "message": "Settings Sync (Google Account)"
+  },
+  "playbackPlaying": {
+    "message": "Playing back"
+  },
+  "playbackPaused": {
+    "message": "Playback paused"
+  },
+  "about": {
+    "message": "About"
+  },
+  "feedback": {
+    "message": "Feedback"
+  },
+  "options": {
+    "message": "Options"
+  },
+  "general": {
+    "message": "General"
+  },
+  "enabled": {
+    "message": "Enabled"
+  },
+  "titleMenubar": {
+    "message": "Title Menubar"
+  },
+  "mediaControls": {
+    "message": "Media Controls"
+  },
+  "checkForUpdates": {
+    "message": "Check for updates"
+  },
+  "systemStartup": {
+    "message": "System startup"
+  },
+  "presences": {
+    "message": "Presences"
+  },
+  "credits": {
+    "message": "Credits"
+  },
+  "darkTheme": {
+    "message": "Dark Theme"
+  }
+}
--- a/Extension/css/connect.css
+++ b/Extension/css/connect.css
@@ -1,20 +1,35 @@
+@font-face {
+  font-family: "Roboto";
+  src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-weight: "bold";
+  src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
+}
+
 #premid-connectinfo {
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15) !important;
  position: fixed !important;
-  top: -50px !important;
-  right: 0 !important;
+  top: 5px !important;
+  right: -110% !important;
  z-index: 10000 !important;
-  min-width: 175px !important;
-  border-bottom-left-radius: 5px !important;
+  width: auto !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  border-radius: 5px !important;
  height: 50px !important;
-  background-color: rgba(255, 255, 255, 0.5) !important;
+  background-color: white !important;
  user-select: none !important;
  animation-name: slideIn !important;
  animation-duration: 5s !important;
-  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1) !important;
-  color: black !important;
+  animation-timing-function: cubic-bezier(0.55, 0.55, 0, 1.2) !important;
+  color: #575757 !important;
 }

 #premid-connectinfo * {
+  font-family: "Roboto", sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
 }
@@ -27,29 +42,31 @@
 }

 #premid-connectinfo h1 {
-  font-size: 20px !important;
+  font-size: 17px !important;
+  font-weight: 600 !important;
  margin: 0 !important;
-  margin-top: 4px !important;
+  margin-top: 6px !important;
 }

 #premid-connectinfo h2 {
-  font-size: 17px !important;
+  font-size: 15px !important;
+  font-weight: 500 !important;
 }

@keyframes slideIn {
  0% {
-    top: -50px;
+    right: -110%;
  }

  10% {
-    top: 0;
+    right: 5px;
  }

  90% {
-    top: 0;
+    right: 5px;
  }

  100% {
-    top: -50px;
+    right: -150%;
  }
 }
--- a/Extension/css/materialize.min.css
+++ b/Extension/css/materialize.min.css
--- a/Extension/css/popup.css
+++ b/Extension/css/popup.css
@@ -1,101 +1,193 @@
+@font-face {
+  font-family: "Roboto";
+  src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-weight: bold;
+  src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
+}
+
+* {
+  font-family: "Roboto", sans-serif;
+}
+
 html,
 body {
-  margin: 0;
-  padding: 0;
-  height: 0;
-  width: 325px;
+  overflow: hidden;
+  width: 350px;
+  height: 600px;
+  max-height: 600px;
+}
+
+.dark,
+.dark .tabs,
+.dark .card-panel {
  background-color: #282828;
 }

+::-webkit-scrollbar {
+  width: 10px;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+.dark .switch input:not(:checked) > .lever {
+  background-color: rgba(80, 80, 80, 0.5) !important;
+}
+
+.dark .switch input:not(:checked) > .lever:after {
+  background-color: rgba(80, 80, 80, 1) !important;
+}
+
+html:not(.dark) ::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+#tabContent {
+  position: relative;
+  top: 125px;
+  height: calc(600px - 125px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 #header {
-  height: 50px;
-  background-color: #596cae;
-  color: white;
-  text-align: center;
-  line-height: 50px;
+  z-index: 10000;
+  position: fixed;
+  height: 75px;
+  width: 100%;
+  background-color: rgba(89, 107, 174, 1);
 }

-#header h1 {
-  margin: 0;
-  font-weight: 900;
-  display: inline;
+.headerTabs {
+  z-index: 10000;
+  position: fixed;
+  top: 75px;
 }

-#header h1:last-child {
-  position: absolute;
-  font-weight: 700;
-  float: right;
-  right: 10px;
+.row {
+  margin-bottom: 0;
 }

-#content {
-  margin-top: 10px;
-  margin-bottom: 10px;
+#header img {
+  height: 75px;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
 }

-#panel {
-  transition: 0.5s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  display: inline-block;
+#pMiDHeading {
+  color: #596cae;
  margin: 5px;
-  width: 150px;
-  height: 125px;
-  background-color: #596cae;
-  border-radius: 5px;
-  color: white;
-  text-align: center;
+  margin-bottom: 10px;
+  padding: 0;
+  font-size: 23px;
+  font-weight: 600;
 }

-#panel:not(.open) {
+#pMiDOption {
+  color: #848484;
+  margin: 0;
+  padding: 0;
+  font-size: 17px;
+}
+
+#options {
+  margin: 5px;
+  width: calc(100% - 10px);
+}
+
+#options tr td:first-child {
+  width: 80%;
+}
+
+#options tr td:last-child {
+  width: 20%;
+}
+
+#options .lever {
+  float: right;
+  margin: 0 !important;
+}
+
+#options tr {
+  border: none;
+}
+
+#options td {
+  padding: 5px 0;
+}
+
+.switch {
  cursor: pointer;
 }

-#panel:not(.open):hover {
-  transform: scale(1.05);
+.switch label input[type="checkbox"]:checked + .lever {
+  background-color: rgb(109, 128, 194);
 }

-#panel #icon {
-  margin-top: 25px;
-  width: 50px;
-  height: 50px;
-  font-size: 50px;
+.switch label input[type="checkbox"]:checked + .lever:after {
+  background-color: #596cae;
 }

-.about {
+.yt:checked + .lever:after {
+  background-color: #c43a39 !important;
 }

-.options {
-  background-color: #7a7a7a !important;
+.yt:checked + .lever {
+  background-color: rgb(216, 78, 77) !important;
 }

-.github {
-  background-color: #fa503c !important;
+.twitch:checked + .lever:after {
+  background-color: #4b367c !important;
 }

-.donate {
-  background-color: #ff9d09 !important;
+.twitch:checked + .lever {
+  background-color: rgb(95, 74, 144) !important;
 }

-.open {
-  position: fixed;
-  transition: 0.5s all ease-out;
-  transform: scale(5);
-  cursor: default;
+.soundcloud:checked + .lever:after {
+  background-color: #fe8031 !important;
 }

-.open * {
-  transition: 0.15s all ease-out;
-  opacity: 0;
+.soundcloud:checked + .lever {
+  background-color: rgb(255, 148, 79) !important;
 }

-.panelContent {
-  position: relative;
-  color: white;
+.netflix:checked + .lever:after {
+  background-color: #cc1617 !important;
 }

-.panelContent:not(.open) {
-  display: none;
+.netflix:checked + .lever {
+  background-color: rgb(224, 42, 43) !important;
 }

-.panelContent.open {
-  display: block;
+.card-panel {
+  padding: 5px;
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
+}
+
+.tabs .tab a {
+  color: rgba(90, 109, 174, 0.75);
+  font-weight: 500;
+}
+
+.tabs .tab a:hover,
+.tabs .tab a.active {
+  color: #596cae;
+}
+
+.tabs .tab a:focus,
+.tabs .tab a:focus.active {
+  color: #596cae;
+  background-color: none;
+}
+
+.tabs .indicator {
+  background-color: rgb(89, 107, 174);
+  box-shadow: 5px 5px black;
 }
--- a/Extension/css/reset.css
+++ b/Extension/css/reset.css
@@ -1,20 +1,15 @@
-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 0;
-  width: 325px;
-  background-color: #282828;
+@font-face {
+  font-family: "Roboto";
+  src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-weight: bold;
+  src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
 }

 * {
+  font-family: "Roboto" !important;
  color: #fff;
 }
-
-#header {
-  height: 50px;
-  background-color: #7289da;
-  color: white;
-  text-align: center;
-  line-height: 50px;
-}
--- a/Extension/fonts/Roboto/LICENSE.txt
+++ b/Extension/fonts/Roboto/LICENSE.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/Extension/fonts/Roboto/Roboto-Black.ttf
+++ b/Extension/fonts/Roboto/Roboto-Black.ttf
--- a/Extension/fonts/Roboto/Roboto-BlackItalic.ttf
+++ b/Extension/fonts/Roboto/Roboto-BlackItalic.ttf
--- a/Extension/fonts/Roboto/Roboto-Bold.ttf
+++ b/Extension/fonts/Roboto/Roboto-Bold.ttf
--- a/Extension/fonts/Roboto/Roboto-BoldItalic.ttf
+++ b/Extension/fonts/Roboto/Roboto-BoldItalic.ttf
--- a/Extension/fonts/Roboto/Roboto-Italic.ttf
+++ b/Extension/fonts/Roboto/Roboto-Italic.ttf
--- a/Extension/fonts/Roboto/Roboto-Light.ttf
+++ b/Extension/fonts/Roboto/Roboto-Light.ttf
--- a/Extension/fonts/Roboto/Roboto-LightItalic.ttf
+++ b/Extension/fonts/Roboto/Roboto-LightItalic.ttf
--- a/Extension/fonts/Roboto/Roboto-Medium.ttf
+++ b/Extension/fonts/Roboto/Roboto-Medium.ttf
--- a/Extension/fonts/Roboto/Roboto-MediumItalic.ttf
+++ b/Extension/fonts/Roboto/Roboto-MediumItalic.ttf
--- a/Extension/fonts/Roboto/Roboto-Regular.ttf
+++ b/Extension/fonts/Roboto/Roboto-Regular.ttf
--- a/Extension/fonts/Roboto/Roboto-Thin.ttf
+++ b/Extension/fonts/Roboto/Roboto-Thin.ttf
--- a/Extension/fonts/Roboto/Roboto-ThinItalic.ttf
+++ b/Extension/fonts/Roboto/Roboto-ThinItalic.ttf
--- a/Extension/html/popup/popup.html
+++ b/Extension/html/popup/popup.html
@@ -1,30 +1,189 @@
+<!DOCTYPE html>
 <html>
  <head>
+    <!-- Import materialize.css -->
    <link
+      type="text/css"
      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
-      integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
-      crossorigin="anonymous"
+      href="../../css/materialize.min.css"
+      media="screen,projection"
    />
-    <link rel="stylesheet" href="../../css/popup.css" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="../../css/popup.css"
+      media="screen,projection"
+    />
+
+    <script src="../../js/util/jquery-3.3.1.min.js"></script>
+    <script src="../../js/options.js"></script>
+    <script src="../../js/popup.js"></script>
  </head>

  <body>
-    <div id="header">
-      <h1 class="Pname"></h1>
-      <h1 class="Pversion"></h1>
-    </div>
-    <div id="content">
-      <div id="panel" class="options">
-        <i id="icon" class="fas fa-cog"></i>
-        <h1 id="name" class="Poptions"></h1>
+    <div id="header"><img draggable="false" src="../../icon.png" /></div>
+      <ul class="tabs headerTabs">
+        <li class="tab col s3">
+          <a draggable="false" class="active waves-effect Poptions" href="#options"></a>
+        </li>
+        <li class="tab col s3">
+          <a draggable="false" class="waves-effect Pcredits" href="#credits"></a>
+        </li>
+      </ul>
+        <div id="tabContent">
+          <div id="options" class="col s12 tabContent">
+            <div class="row">
+              <div class="col s12 m5">
+                <div class="card-panel">
+                  <h3 id="pMiDHeading" class="Pgeneral"></h3>
+                    <table id="options">
+                      <tr class="enabledToggle">
+                        <td><h5 id="pMiDOption" class="Penabled"></h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="togglePresence" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption" class="PmediaControls"></h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="toggleMediaControls" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption" class="PcheckForUpdates"></h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="toggleCheckUpdates" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption" class="PsystemStartup"></h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="toggleSystemStartup" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption" class="Pdarktheme"></h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="toggleDarkTheme" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                    </table>
+                  </div>
+                <div class="card-panel">
+                  <h3 id="pMiDHeading" class="Ppresences"></h3>
+                    <table id="options">
+                      <tr>
+                        <td><h5 id="pMiDOption">YouTube</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input class="yt toggleYouTube" type="checkbox" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption">YouTube Music</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input class="yt toggleYouTubeMusic" type="checkbox" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption">Twitch</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input class="twitch toggleTwitch" type="checkbox" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption">SoundCloud</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input class="soundcloud toggleSoundCloud" type="checkbox" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption">Netflix</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input class="netflix toggleNetflix" type="checkbox" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption">KissAnime</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="toggleKissAnime" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption">JKAnime</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="toggleJKAnime" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><h5 id="pMiDOption">FimFiction</h5></td>
+                        <td>
+                          <div class="switch">
+                            <label>
+                              <input type="checkbox" class="toggleFimFiction" /> <span class="lever"></span>
+                            </label>
+                          </div>
+                        </td>
+                      </tr>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div id="credits" class="col s12 tabContent">Test 2</div>
+          </div>
+        </div>
      </div>
-      <div id="panel" class="github">
-        <i id="icon" class="fab fa-github"></i>
-        <h1 id="name">GitHub</h1>
-      </div>
-    </div>
-    <script src="../../js/util/jquery-3.3.1.min.js"></script>
-    <script src="../../js/popup.js"></script>
+    <script
+      type="text/javascript"
+      src="../../js/util/materialize.min.js"
+    ></script>
  </body>
 </html>
--- a/Extension/html/tabs/test.js
+++ b/Extension/html/tabs/test.js
@@ -0,0 +1,5 @@
+$(document).ready(function(){
+  $('.tabs').tabs({
+    duration: 250
+  });
+});
--- a/Extension/js/background.js
+++ b/Extension/js/background.js
@@ -19,7 +19,7 @@ setInterval(() => {
    //* Create config if not already
    if(!result.options) chrome.storage.sync.set({options: {enabled: true, youtube: true, youtubeMusic: true, twitch: true, soundcloud: true, netflix: true, kissanime: true, jkanime: true, titleMenubar: true, mediaControls: true, checkForUpdates: true, systemStartup: true}})
    
-    allowedURL = ["www.youtube.com", "music.youtube.com", "twitch.tv", "soundcloud.com", "netflix.com", "kissanime.ac", "kissanime.ru", "jkanime.net", "fimfiction.net"]
+    allowedURL = ["www.youtube.com", "music.youtube.com", "twitch.tv", "soundcloud.com", "netflix.com", "kissanime.ac", "kissanime.ru", "jkanime.net", "fimfiction.net", "crunchyroll.com"]
    var options = result.options
    if(!options.enabled) allowedURL = []
    if(!options.youtube) allowedURL.remove("www.youtube.com")
--- a/Extension/js/options.js
+++ b/Extension/js/options.js
@@ -1,16 +1,8 @@
 let options = undefined

-$('.Ppreferences').html(chrome.i18n.getMessage('options'))
-$('.Pgeneral').html(chrome.i18n.getMessage('general'))
-$('.Penabled').html(chrome.i18n.getMessage('enabled'))
-$('.PmediaControls').html(chrome.i18n.getMessage('mediaControls'))
-$('.PcheckForUpdates').html(chrome.i18n.getMessage('checkForUpdates'))
-$('.PsystemStartup').html(chrome.i18n.getMessage('systemStartup'))
-$('.Ppresences').html(chrome.i18n.getMessage('presences'))
-
 chrome.runtime.getPlatformInfo(function(info) {
  if(info.os == "mac")
-  $('<tr><td>Title Menubar</td><td><label class="switch"><input class="toggleTitleMenubar" type="checkbox"><span class="slider round"></span></label></td></tr>').insertAfter('#tPresence')
+  $('<tr><td><h5 id="pMiDOption" class="PtitleMenubar"></h5></td><td><div class="switch"><label><input type="checkbox" class="toggleTitleMenubar" /> <span class="lever"></span></label></div></td>').insertAfter('.enabledToggle')
  titleMenubarToggle = $('.toggleTitleMenubar')
  titleMenubarToggle.change(tMB);
 })
@@ -24,9 +16,11 @@ $(document).ready(function() {
  netflixToggle = $('.toggleNetflix'),
  kissanimeToggle = $('.toggleKissAnime'),
  jkanimeToggle = $('.toggleJKAnime')
+  fimfictionToggle = $('.toggleFimFiction')
  mediaControlsToggle = $('.toggleMediaControls')
  checkForUpdatesToggle = $('.toggleCheckUpdates')
  systemStartupToggle = $('.toggleSystemStartup')
+  darkThemeToggle = $('.toggleDarkTheme')

  enabledToggle.change(tEnabled);
  youtubeToggle.change(tYT);
@@ -36,12 +30,18 @@ $(document).ready(function() {
  netflixToggle.change(tN);
  kissanimeToggle.change(tKA);
  jkanimeToggle.change(tJKA);
+  fimfictionToggle.change(tFF);
  mediaControlsToggle.change(tMC);
  checkForUpdatesToggle.change(tCFU);
  systemStartupToggle.change(tSS);
+  darkThemeToggle.change(tdT);

  chrome.storage.sync.get(['options'], function(result) {
    options = result.options
+    if(options.fimfiction == undefined) chrome.storage.sync.set($.extend(options, {fimfiction: true}))
+    if(options.darkTheme == undefined) chrome.storage.sync.set($.extend(options, {darkTheme: true})); else {
+      if(options.darkTheme) $('html').addClass("dark")
+    }
    if(result.options == undefined) {
      chrome.storage.sync.set({options: {enabled: true, youtube: true, youtubeMusic: true, twitch: true, soundcloud: true, netflix: true, kissanime: true, jkanime: true, titleMenubar: true, mediaControls: true, checkForUpdates: true, systemStartup: true}})
      enabledToggle.prop('checked', true)
@@ -52,11 +52,13 @@ $(document).ready(function() {
      netflixToggle.prop('checked', true)
      kissanimeToggle.prop('checked', true)
      jkanimeToggle.prop('checked', true)
+      fimfictionToggle.prop('checked', true)
      if(titleMenubarToggle != undefined)
      titleMenubarToggle.prop('checked', true)
      mediaControlsToggle.prop('checked', true)
      checkForUpdatesToggle.prop('checked', true)
      systemStartupToggle.prop('checked', true)
+      darkThemeToggle.prop('checked', true)
    } else {
      enabledToggle.prop('checked', result.options.enabled)
      youtubeToggle.prop('checked', result.options.youtube)
@@ -66,11 +68,13 @@ $(document).ready(function() {
      netflixToggle.prop('checked', result.options.netflix)
      kissanimeToggle.prop('checked', result.options.kissanime)
      jkanimeToggle.prop('checked', result.options.jkanime)
+      fimfictionToggle.prop('checked', result.options.fimfiction)
      if(titleMenubarToggle != undefined)
      titleMenubarToggle.prop('checked', result.options.titleMenubar)
      mediaControlsToggle.prop('checked', result.options.mediaControls)
      checkForUpdatesToggle.prop('checked', result.options.checkForUpdates)
      systemStartupToggle.prop('checked', result.options.systemStartup)
+      darkThemeToggle.prop('checked', result.options.darkTheme)
    }
  })
 })
@@ -115,6 +119,11 @@ function tJKA() {
  sync()
 }

+function tFF() {
+  options.fimfiction = !options.fimfiction
+  sync()
+}
+
 function tMB() {
  options.titleMenubar = !options.titleMenubar
  sync()
@@ -135,6 +144,12 @@ function tSS() {
  sync()
 }

+function tdT() {
+  options.darkTheme = !options.darkTheme
+  if(options.darkTheme) $('html').addClass("dark"); else $('html').removeClass("dark");
+  sync()
+}
+
 function sync() {
  chrome.storage.sync.set({options: options})
 }
--- a/Extension/js/popup.js
+++ b/Extension/js/popup.js
@@ -1,15 +1,27 @@
 $(document).ready(function() {
-  $('.Pname').html(chrome.runtime.getManifest().name)
-  $('.Pversion').html('V' + chrome.runtime.getManifest().version)
-  $('.Pabout').html(chrome.i18n.getMessage('about'))
-  $('.Pfeedback').html(chrome.i18n.getMessage('feedback'))
  $('.Poptions').html(chrome.i18n.getMessage('options'))
+  $('.Pcredits').html(chrome.i18n.getMessage('credits'))
+
+  $('.Pgeneral').html(chrome.i18n.getMessage('general'))
+
+  $('.Penabled').html(chrome.i18n.getMessage('enabled'))
+  $('.PtitleMenubar').html(chrome.i18n.getMessage('titleMenubar'))
+  $('.PmediaControls').html(chrome.i18n.getMessage('mediaControls'))
+  $('.PcheckForUpdates').html(chrome.i18n.getMessage('checkForUpdates'))
+  $('.PsystemStartup').html(chrome.i18n.getMessage('systemStartup'))
+  $('.Pdarktheme').html(chrome.i18n.getMessage('darkTheme'))
+
+  $('.Ppresences').html(chrome.i18n.getMessage('presences'))

  $('#content #panel').each(function() {
    this.addEventListener('click', updateItem)
  })
-})

+  //* Tab physics
+  $('.tabs').tabs({
+    duration: 250
+  });
+})
 function updateItem() {
  $(this).addClass('open')
  setTimeout(() => {
--- a/Extension/js/presences/crunchyroll.js
+++ b/Extension/js/presences/crunchyroll.js
@@ -0,0 +1,175 @@
+var title = $('#showmedia_about_episode_num').text().trim(),
+episode = $('#showmedia_about_media h4')[1].innerText.trim(),
+episodeName = $('#showmedia_about_name').text().slice(1, $('#showmedia_about_name').text().length-1)
+
+$(document).ready(function() {
+  console.log(title, episode, episodeName)
+  var videoBinder = setInterval(function() {
+    console.log($('#vilos-player').get(0))
+    if($('#vilos-player iframe:first').contents().find('video:first')[0] != null) {
+      console.log("bound!")
+      $('#vilos-player iframe:first').contents().find('video:first')[0].on('play', function() {
+        alert("OMG!!!!")
+      })
+      clearInterval(videoBinder)
+    }
+  }, 5000)
+})
+
+/*
+let playback = true,
+eventType,
+playbackNew,
+tabActive = 0,
+dataUpdaterRunning = false,
+dataUpdater
+
+var lastPlaybackState = true
+setInterval(() => {
+  if($('.VideoContainer div video')[0] != null && $('.VideoContainer div video')[0].paused && lastPlaybackState == true) {
+    handlePlayPause()
+    lastPlaybackState = false;
+  }
+  if($('.VideoContainer div video')[0] != null && !$('.VideoContainer div video')[0].paused && lastPlaybackState == false) {
+    handlePlayPause()
+    lastPlaybackState = true;
+  }
+}, 500)
+
+//* When we receive messages from the application
+socket.on('mediaKeyHandler', function (data) {
+  //* Check if the data is for YTM & if music is running
+  //* Media control buttons
+  if (musicRunning) {
+    //* Switch cases for playback / Clicks corresponding buttons
+    switch (data.playback) {
+      case "pause":
+        $('.VideoContainer div video')[0].paused ? $('.VideoContainer div video')[0].play() : $('.VideoContainer div video')[0].pause()
+        updateData("playPauseVideo")
+        break
+      case "nextTrack":
+        $('.button-nfplayerNextEpisode').click()
+        //* Prevent playback from being paused again
+        playback = true
+        //* Send response back to application
+        updateData("nextVideo")
+        break
+    }
+  }
+})
+
+
+function handlePlayPause() {
+  //* Toggle playback variable
+  if (playback == true) playback = false; else playback = true;
+  //* Send status to application
+  updateData(playback ? "playing" : "paused")
+}
+
+function checkPlayChange() {
+  //* Correct playback if out of sync
+  if (playback == false) {
+    //* Check if playbutton on page matches variable
+    if ($('.ytp-play-button svg').prop("outerHTML") == playButton) {
+      //* Update playback variable
+      playback = true
+      //* Pause song
+      $('.ytp-play-button').click()
+    }
+  }
+
+  //* Set musicRunning variable to true if url has /watch or music title not empty
+  if (document.location.pathname.includes("/watch")) musicRunning = true; else musicRunning = false;
+}
+
+//* Start interval
+window.onload = function () {
+  //* Tab Priority
+  setInterval(() => {
+    if(tabActive == 5) {
+      dataUpdaterRunning = false
+      clearInterval(dataUpdater)
+    }
+    if(tabActive >= 9 && dataUpdaterRunning == false) {
+      dataUpdaterRunning = true
+      dataUpdater = setInterval(updateData, 1000)
+    }
+    if(tabActive > 0) tabActive--
+  }, 500)
+}
+
+chrome.runtime.onMessage.addListener(((message, sender) => {
+  if(tabActive <= 9) tabActive += 2
+  if(tabActive == 0) tabActive = 5
+}))
+
+//* Create needed variables
+let urlForVideo,
+  songTime,
+  calcDifference = []
+
+function updateData(playbackChange = false) {
+  if (document.location.pathname.includes("/watch")) musicRunning = true; else musicRunning = false;
+  urlForVideo = document.location.href
+  if ($(".time-remaining__time").html() != "") {
+    let data
+
+    if (playbackChange != false) {
+      var eventType = 'playBackChange'
+    } else {
+      var eventType = 'updateData'
+    }
+
+    var endTime
+    if(musicRunning && $('.VideoContainer div video')[0] != undefined) {
+      var startTime = Math.floor(Date.now()/1000);
+        endTime = startTime -
+        Math.floor($('.VideoContainer div video')[0].currentTime) +
+        Math.floor($('.VideoContainer div video')[0].duration);
+
+      var playbackBoolean = !$('.VideoContainer div video')[0].paused
+
+      var smallImageKey = playbackBoolean ? "play" : "pause"
+      smallImageText = playbackBoolean ? chrome.i18n.getMessage('playbackPlaying') : chrome.i18n.getMessage('playbackPaused')
+
+      if(playbackBoolean) {
+        data = {
+          clientID: '499981204045430784',
+          presenceData: {
+            details: $('.ellipsize-text').children().html(),
+            state: $($('.ellipsize-text').children().get(1)).html(),
+            largeImageKey: 'nflix_lg',
+            largeImageText: chrome.runtime.getManifest().name + ' V' + chrome.runtime.getManifest().version,
+            smallImageKey: smallImageKey,
+            smallImageText: smallImageText,
+            startTimestamp: startTime,
+            endTimestamp: endTime
+          },
+          currentSeconds: Math.floor($('.VideoContainer div video')[0].currentTime),
+          durationSeconds: Math.floor($('.VideoContainer div video')[0].duration),
+          trayTitle: $('.ellipsize-text').children().html(),
+          playback: playbackBoolean,
+          service: 'Netflix'
+        }
+      } else {
+        data = {
+          clientID: '499981204045430784',
+          presenceData: {
+            details: $('.ellipsize-text').children().html(),
+            state: $($('.ellipsize-text').children().get(1)).html(),
+            largeImageKey: 'nflix_lg',
+            largeImageText: chrome.runtime.getManifest().name + ' V' + chrome.runtime.getManifest().version,
+            smallImageKey: smallImageKey,
+            smallImageText: smallImageText
+          },
+          currentSeconds: Math.floor($('.VideoContainer div video')[0].currentTime),
+          durationSeconds: Math.floor($('.VideoContainer div video')[0].duration),
+          trayTitle: $('.ellipsize-text').children().html(),
+          playback: playbackBoolean,
+          service: 'Netflix'
+        }
+      }
+    }
+    if (socket.connected) socket.emit(eventType, data)
+  }
+}*/
--- a/Extension/js/util/materialize.min.js
+++ b/Extension/js/util/materialize.min.js
--- a/Extension/js/util/presence.js
+++ b/Extension/js/util/presence.js
@@ -0,0 +1,59 @@
+class Presence {
+  constructor(type, fields, clientID) {
+    this.pType = type;
+    this.clientID = clientID;
+    this.reqFields = null;
+    this.fields = fields;
+    this.connection = io.connect('http://localhost:3020/');
+    this.playback = false;
+    this.trayTitle = ""
+
+    this.connection.on('connect', function() {
+    })
+    
+    switch(type) {
+      case "video" || "stream": {
+        this.reqFields = ["videoTag", "service"]
+        break;
+      }
+      case "music": {
+        break;
+      }
+      case "read": {
+        break;
+      }
+      default: {
+        console.error(`Type ${type} is not valid.`);
+      }
+    }
+
+    this.reqFields.forEach(field => {
+      if(!this.fields.hasOwnProperty(field)) console.error(`Missing field ${field}!`)
+    });
+  }
+
+  get type() {return this.pType;}
+  get video() {return this.fields.videoTag}
+  get title() {return this.fields.title}
+  get author() {return this.fields.author}
+
+  static sendData() {
+    this.connection.emit("updateData", {
+      clientID: this.clientID,
+      presenceData: {
+        details: "Browsing...",
+        largeImageKey: 'ff_lg',
+        largeImageText: chrome.runtime.getManifest().name + ' V' + chrome.runtime.getManifest().version,
+      },
+      trayTitle: this.trayTitle,
+      service: this.fields.service,
+      playback: this.fields.playback
+    })
+  }
+}
+
+var youtubeMusic = new Presence("video", {
+  videoTag: "s",
+  service: "YouTube"
+}, "23189123")
+console.log(youtubeMusic.video)
--- a/Extension/js/util/socketConnector.js
+++ b/Extension/js/util/socketConnector.js
@@ -1,9 +1,13 @@
-//* Create socket connection to application
-var socket = io.connect('http://localhost:3020/');
+var allowedURL = ["www.youtube.com", "music.youtube.com", "twitch.tv", "soundcloud.com", "netflix.com", "kissanime.ac", "kissanime.ru", "jkanime.net", "fimfiction.net", "www.crunchyroll.com"]

-//* Log when connected
-socket.on('connect', socketConnect)
-socket.on('disconnect', socketDisconnect)
+//* Create socket connection to application
+if(allowedURL.includes(document.location.host)) {
+  var socket = io.connect('http://localhost:3020/');
+  
+  //* Log when connected
+  socket.on('connect', socketConnect)
+  socket.on('disconnect', socketDisconnect)
+}

 function socketConnect() {
  console.log(chrome.runtime.getManifest().name + ': %c' + chrome.i18n.getMessage('connected'), "color: green; font-weight: 700")
@@ -20,8 +24,56 @@ function socketDisconnect() {
 }

 function insertConnectionInfo(message) {
-  $('<div id="premid-connectinfo"><img draggable="false" src="' + chrome.runtime.getURL('icon.png') + '"><h1>' + chrome.runtime.getManifest().name + '</h1><h2>' + message + '</h2></div>').appendTo('body')
+  var service = getService()
+
+  $('<div id="premid-connectinfo"><img draggable="false" src="' + chrome.runtime.getURL('icon.png') + '"><h1>' + chrome.runtime.getManifest().name + '</h1><h2>' + message.replace("%SERVICE%", service) + '</h2></div>').appendTo('body')
+  $('#premid-connectinfo h2').width($('#premid-connectinfo h2').textWidth() + 60)
  setTimeout(() => {
    $('#premid-connectinfo').remove()
  }, 5*1000)
 }
+
+
+function getService() {
+  switch(document.location.host) {
+    case "www.youtube.com":
+      return "YouTube"
+      break
+    case "music.youtube.com":
+      return "YouTube Music"
+      break
+    case "twitch.tv":
+      return "Twitch"
+      break
+    case "soundcloud.com":
+      return "SoundCloud"
+      break
+    case "netflix.com":
+      return "Netflix"
+      break
+    case "kissanime.ac" || "kissanime.ru":
+      return "KissAnime"
+      break
+    case "jkanime.net":
+      return "JKAnime"
+      break
+    case "fimfiction.net":
+      return "FimFiction"
+      break
+    case "crunchyroll.com":
+      return "Crunchyroll"
+      break
+    default:
+      return null
+      break
+  }
+}
+
+$.fn.textWidth = function(){
+  var html_org = $(this).html();
+  var html_calc = '<span>' + html_org + '</span>';
+  $(this).html(html_calc);
+  var width = $(this).find('span:first').width();
+  $(this).html(html_org);
+  return width;
+};
--- a/Extension/manifest.json
+++ b/Extension/manifest.json
@@ -10,7 +10,11 @@
    "2024": "icon.png"
  },
  "background": {
-    "scripts": ["js/util/socket.io-2.1.1.min.js", "js/background.js"],
+    "scripts": [
+      "js/util/socket.io-2.1.1.min.js",
+      "js/util/presence.js",
+      "js/background.js"
+    ],
    "presistent": false
  },
  "browser_action": {
@@ -27,17 +31,7 @@
        "js/util/socketConnector.js"
      ],
      "css": ["css/connect.css"],
-      "matches": [
-        "*://www.youtube.com/*",
-        "*://music.youtube.com/*",
-        "*://*.netflix.com/*",
-        "*://soundcloud.com/*",
-        "*://*.twitch.tv/*",
-        "*://kissanime.ac/*",
-        "*://kissanime.ru/*",
-        "*://jkanime.net/*",
-        "*://www.fimfiction.net/*"
-      ]
+      "matches": ["<all_urls>"]
    },
    {
      "js": ["js/presences/YouTubeMusic.js"],
@@ -70,6 +64,10 @@
    {
      "js": ["js/presences/FimFiction.js"],
      "matches": ["*://www.fimfiction.net/*"]
+    },
+    {
+      "js": ["js/presences/crunchyroll.js"],
+      "matches": ["*://www.crunchyroll.com/*"]
    }
  ],
  "permissions": [
--- a/api/index.js
+++ b/api/index.js
@@ -0,0 +1,39 @@
+const express = require('express')
+const app = express()
+var mysql = require('mysql')
+var utf8 = require('utf8')
+
+var con = mysql.createConnection({
+  host: "localhost",
+  user: "Timeraa",
+  password: "Kw!BXS9Y8$",
+  database: 'premid'
+});
+
+con.connect(function(err) {
+  if (err) throw err;
+  console.log("Connected!");
+})
+
+function query(...data) {
+  return new Promise((resolve, reject) => {
+      con.query(...data, (err, rows, fields, result) => {
+          if (err) return reject(err);
+          resolve({ rows, fields, result });
+      });
+  }).catch(err => console.log("Error while querying + " + err))
+}
+
+app.get('/credits', async function (req, res) {
+  var result = await query("SELECT * FROM credits")
+  var resultArray = []
+  result.rows.map(row => {
+    resultArray.push({name: utf8.decode(row.name), tag: row.tag, avatarURL: row.avatarURL, type: row.type})
+  })
+  res.setHeader('Content-Type', 'application/json');
+  res.send(JSON.stringify(resultArray));
+})
+
+app.listen(8080, function () {
+  console.log('Example app listening on port 8080!')
+})
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -0,0 +1,426 @@
+{
+  "name": "premid-api",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
+      "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
+      "requires": {
+        "mime-types": "2.1.21",
+        "negotiator": "0.6.1"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "bignumber.js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-4.1.0.tgz",
+      "integrity": "sha512-eJzYkFYy9L4JzXsbymsFn3p54D+llV27oTQ+ziJG7WFRheJcNZilgVXMG0LoZtlQSKBsJdWtLFqOD0u+U0jZKA=="
+    },
+    "body-parser": {
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
+      "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
+      "requires": {
+        "bytes": "3.0.0",
+        "content-type": "1.0.4",
+        "debug": "2.6.9",
+        "depd": "1.1.2",
+        "http-errors": "1.6.3",
+        "iconv-lite": "0.4.23",
+        "on-finished": "2.3.0",
+        "qs": "6.5.2",
+        "raw-body": "2.3.3",
+        "type-is": "1.6.16"
+      }
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
+    },
+    "content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.16.4",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
+      "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
+      "requires": {
+        "accepts": "1.3.5",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.18.3",
+        "content-disposition": "0.5.2",
+        "content-type": "1.0.4",
+        "cookie": "0.3.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "1.1.2",
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "etag": "1.8.1",
+        "finalhandler": "1.1.1",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "1.1.2",
+        "on-finished": "2.3.0",
+        "parseurl": "1.3.2",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "2.0.4",
+        "qs": "6.5.2",
+        "range-parser": "1.2.0",
+        "safe-buffer": "5.1.2",
+        "send": "0.16.2",
+        "serve-static": "1.13.2",
+        "setprototypeof": "1.1.0",
+        "statuses": "1.4.0",
+        "type-is": "1.6.16",
+        "utils-merge": "1.0.1",
+        "vary": "1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.1",
+      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "on-finished": "2.3.0",
+        "parseurl": "1.3.2",
+        "statuses": "1.4.0",
+        "unpipe": "1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.6.3",
+      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+      "requires": {
+        "depd": "1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": "1.4.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+      "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
+      "requires": {
+        "safer-buffer": "2.1.2"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
+      "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
+    },
+    "mime-db": {
+      "version": "1.37.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz",
+      "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg=="
+    },
+    "mime-types": {
+      "version": "2.1.21",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz",
+      "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==",
+      "requires": {
+        "mime-db": "1.37.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "mysql": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.16.0.tgz",
+      "integrity": "sha512-dPbN2LHonQp7D5ja5DJXNbCLe/HRdu+f3v61aguzNRQIrmZLOeRoymBYyeThrR6ug+FqzDL95Gc9maqZUJS+Gw==",
+      "requires": {
+        "bignumber.js": "4.1.0",
+        "readable-stream": "2.3.6",
+        "safe-buffer": "5.1.2",
+        "sqlstring": "2.3.1"
+      }
+    },
+    "negotiator": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
+      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
+      "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "process-nextick-args": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
+    },
+    "proxy-addr": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
+      "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
+      "requires": {
+        "forwarded": "0.1.2",
+        "ipaddr.js": "1.8.0"
+      }
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+    },
+    "range-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
+    },
+    "raw-body": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
+      "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
+      "requires": {
+        "bytes": "3.0.0",
+        "http-errors": "1.6.3",
+        "iconv-lite": "0.4.23",
+        "unpipe": "1.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.6",
+      "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+      "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+      "requires": {
+        "core-util-is": "1.0.2",
+        "inherits": "2.0.3",
+        "isarray": "1.0.0",
+        "process-nextick-args": "2.0.0",
+        "safe-buffer": "5.1.2",
+        "string_decoder": "1.1.1",
+        "util-deprecate": "1.0.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
+      "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "1.1.2",
+        "destroy": "1.0.4",
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "etag": "1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "1.6.3",
+        "mime": "1.4.1",
+        "ms": "2.0.0",
+        "on-finished": "2.3.0",
+        "range-parser": "1.2.0",
+        "statuses": "1.4.0"
+      }
+    },
+    "serve-static": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
+      "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
+      "requires": {
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "parseurl": "1.3.2",
+        "send": "0.16.2"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "sqlstring": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
+      "integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
+    },
+    "statuses": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
+      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "type-is": {
+      "version": "1.6.16",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
+      "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "2.1.21"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ=="
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
+}
--- a/api/package.json
+++ b/api/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "premid-api",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Timeraa",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.16.4",
+    "mysql": "^2.16.0",
+    "utf8": "^3.0.0"
+  }
+}