🪂 Apple Event update

zephraOSS · Sep 7, 2021 · f22dc61 · f22dc61
1 parent a2aad4d
commit f22dc61
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 51 deletions.
diff --git a/index.html b/index.html
@@ -11,8 +11,8 @@
     <div class="control">
         <div class="windowcontrols">
             <span class="dot close"></span>
-            <span class="dot notavailable"></span>
             <span class="dot minimize"></span>
+            <span class="dot notavailable"></span>
         </div>
 
         <div class="center">
@@ -105,10 +105,11 @@
         </span>
         <span onclick="restartApp()" style="display: none; color: #EF4A4A" id="restartApp">
             <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 489.533 489.533"><path d="M268.175,488.161c98.2-11,176.9-89.5,188.1-187.7c14.7-128.4-85.1-237.7-210.2-239.1v-57.6c0-3.2-4-4.9-6.7-2.9   l-118.6,87.1c-2,1.5-2,4.4,0,5.9l118.6,87.1c2.7,2,6.7,0.2,6.7-2.9v-57.5c87.9,1.4,158.3,76.2,152.3,165.6   c-5.1,76.9-67.8,139.3-144.7,144.2c-81.5,5.2-150.8-53-163.2-130c-2.3-14.3-14.8-24.7-29.2-24.7c-17.9,0-31.9,15.9-29.1,33.6   C49.575,418.961,150.875,501.261,268.175,488.161z"/></svg>
-            <span>Restart required</span>
+            <span style="color: #EF4A4A">Restart required</span>
         </span>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
         const iTunes = require("itunes-bridge"),
             iTunesEmitter = iTunes.emitter,
@@ -128,7 +129,8 @@
                 rpcState: "%artist%"
             }}),
             appData = new Store({name: "data", defaults: {
-                userCountUsageAsked: false
+                userCountUsageAsked: false,
+                appleEventAsked: false
             }}),
             song = {
                 name: document.querySelector("#songname"),
@@ -179,6 +181,24 @@
             ]);
         }
 
+        if(!appData.get("appleEventAsked") && (+new Date('9/14/2021 12:00:00 AM UTC') <= Date.now() && Date.now() < +new Date('9/14/2021 6:30:00 PM UTC'))) {
+            const date = new Date('9/14/2021 5:00:00 PM UTC'),
+                url = "https://www.apple.com/apple-events/"
+
+            newModal(langString.settings.modal["appleEvent"].title, langString.settings.modal["appleEvent"].description.replace("%d", `${date.getHours()}:00`).replace("%s", `<a onclick="openUrl('${url}')">${url}</a>`), [
+                {
+                    text: langString.settings.modal["appleEvent"].buttons.okcool,
+                    style: "btn-rainbow",
+                    events: [
+                        {
+                            name: "onclick",
+                            value: "appData.set('appleEventAsked', true), closeModal(this.parentElement.id)"
+                        }
+                    ]
+                }
+            ], []);
+        }
+
         iTunesEmitter.on("playing", async function(type, currentTrack) {
             song.name.textContent = currentTrack.name;
             song.artist.textContent = currentTrack.artist;
@@ -287,7 +307,7 @@
             });
         }
 
-        function newModal(title, description, buttons) {
+        function newModal(title, description, buttons, extras=false) {
             const e = {
                 modal: document.createElement("div"),
                 title: document.createElement("h1"),
@@ -304,15 +324,27 @@
             e.description.classList.add("description");
 
             e.title.textContent = title;
-            e.description.textContent = description;
+            e.description.innerHTML = description;
 
             e.modal.id = generateEleId();
 
+            if(extras) {
+                for (let i = 0; i < extras.length; i++) {
+                    const ext = extras[i],
+                        ele = document.createElement("li");
+
+                    ele.style["text-align"] = "left";
+                    ele.textContent = ext;
+
+                    e.modal.appendChild(ele);
+                }
+            }
+
             for (let i = 0; i < buttons.length; i++) {
                 if(i > 2) return;
                 const btn = buttons[i],
                     ele = document.createElement("p");
-                
+
                 ele.classList.add("btn");
                 ele.classList.add(btn.style);
                 if(i === 2) ele.classList.add("btn-last");

diff --git a/index.js b/index.js
@@ -83,7 +83,6 @@ iTunesEmitter.on("playing", async function(type, currentTrack) {
             ]
         }
     });
-
 });
 
 iTunesEmitter.on("paused", async function(type, currentTrack) {
@@ -137,7 +136,7 @@ rpc.on("ready", () => {
 
     if(config.get("performanceMode")) {
         setInterval(() => {
-            if(!presenceData?.details) return rpc.clearActivity();
+            if(!presenceData.details) return rpc.clearActivity();
             if(presenceData.details?.length > 128) presenceData.details = presenceData.details.substring(0,128);
             if(presenceData.state?.length > 128) presenceData.state = presenceData.state.substring(0,128);
             else if(presenceData.state?.length === 0) delete presenceData.state;
@@ -146,7 +145,7 @@ rpc.on("ready", () => {
         }, 5);
     } else {
         setInterval(() => {
-            if(!presenceData?.details || !config.get("show")) return rpc.clearActivity();
+            if(!presenceData.details || !config.get("show")) return rpc.clearActivity();
             if(presenceData.details?.length > 128) presenceData.details = presenceData.details.substring(0,128);
             if(presenceData.state?.length > 128) presenceData.state = presenceData.state.substring(0,128);
             else if(presenceData.state?.length === 0) delete presenceData.state;

diff --git a/language/de_DE.json b/language/de_DE.json
@@ -32,12 +32,20 @@
         "modal": {
             "usercount": {
                 "title": "User-Zählung",
-                "description": "Dürfen wir unseren User-Counter durch Deine Installierung der App für unsere Statistiken aktualisieren? Wir senden beziehungsweise speichern keine persönlichen Informationen über Dich.",
+                "description": "Dürfen wir unseren User-Counter durch Deine Installierung der App für unsere Statistiken aktualisieren? Wir senden beziehungsweise speichern keine persönlichen Informationen über Dich."
+            },
+            "appleEvent": {
+                "title": "Nicht vergessen!",
+                "description": "Heute um %d Uhr (10.00 Uhr PDT) ist das Apple Event! Schaue es hier live: %s",
                 "buttons": {
-                    "no": "Nein",
-                    "later": "Nicht jetzt",
-                    "yes": "Ja"
+                    "okcool": "Okay, cool!"
                 }
+            },
+            "buttons": {
+                "no": "Nein",
+                "later": "Nicht jetzt",
+                "yes": "Ja",
+                "okay": "Okay"
             }
         }
     }

diff --git a/language/en_US.json b/language/en_US.json
@@ -33,11 +33,18 @@
             "usercount": {
                 "title": "User-Counting",
                 "description": "May we update our user counter by your installation of the app for our statistics? We do not send respectively store any personal information about you.",
+            "appleEvent": {
+                "title": "Do not forget!",
+                "description": "Today at %d o'clock (10a.m. PDT) is the Apple Event! Watch it live here: %s",
                 "buttons": {
-                    "no": "No",
-                    "later": "Not now",
-                    "yes": "Yes"
+                    "okcool": "Okay, cool!"
                 }
+            },
+            "buttons": {
+                "no": "No",
+                "later": "Not now",
+                "yes": "Yes",
+                "okay": "Okay"
             }
         }
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "apple-music-rpc",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Discord RPC for iTunes",
   "main": "index.js",
   "scripts": {

diff --git a/style.css b/style.css
@@ -5,7 +5,7 @@ body {
 }
 
 body[data-theme="dark"] {
-    background-color: #1f1f1f;
+    background-color: #1F1F1F;
     color: #ffffff8c;
 }
 
@@ -16,17 +16,18 @@ input:focus, select:focus {
 div.control {
     display: block;
     position: relative;
-    background-color: #F6F6F6;
+    background-color: #F9F9F9;
     width: 100%;
     height: 30px;
-    padding: 20px 0;
+    padding: 25px 0;
     -webkit-user-select: none;
     user-select: none;
     -webkit-app-region: drag;
+    border-bottom: 1px solid #ffffff1a;
 }
 
 body[data-theme="dark"] div.control {
-    background-color: #2d2d2de0;
+    background-color: #252526;
 }
 
 div.control::after {
@@ -74,7 +75,7 @@ div.control #songlogo {
 
 div.windowcontrols {
     float: left;
-    margin-left: 5px;
+    margin-left: 10px;
     margin-top: -10px;
     user-select: none;
     -webkit-app-region: no-drag;
@@ -87,8 +88,8 @@ div.windowcontrols::after {
 }
 
 div.windowcontrols .dot {
-    height: 15px;
-    width: 15px;
+    height: 12px;
+    width: 12px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
@@ -100,41 +101,24 @@ div.windowcontrols .dot {
     -webkit-app-region: no-drag;
 }
 
-div.control:hover div.windowcontrols .dot.close {
-    background-color: #D52735;
+div.control div.windowcontrols .dot.close {
+    background-color: rgb(255, 92, 92);
 }
 
-div.control:hover div.windowcontrols .dot.maximize {
-    background-color: #13C11E;
+div.control div.windowcontrols .dot.maximize {
+    background-color: rgb(0, 202, 86);
 }
 
-div.control:hover div.windowcontrols .dot.minimize {
-    background-color: #FAC536;
+div.control div.windowcontrols .dot.minimize {
+    background-color: rgb(255, 189, 76);
 }
 
 div.control:hover div.windowcontrols .dot.notavailable {
     cursor: not-allowed;
 }
 
-div.windowcontrols .dot.close:hover {
-    background-color: #F25056;
-    border-width: 2px;
-    border-style: solid;
-    border-color: #D52735;
-}
-
-div.windowcontrols .dot.maximize:hover {
-    background-color: #39EA49;
-    border-width: 2px;
-    border-style: solid;
-    border-color: #13C11E;
-}
-
-div.windowcontrols .dot.minimize:hover {
-    background-color: #DA9E10;
-    border-width: 2px;
-    border-style: solid;
-    border-color: #DA9E10;
+div.windowcontrols .dot:hover:not(.notavailable) {
+    filter: brightness(40%)
 }
 
 div.content {
@@ -204,8 +188,9 @@ div.modal {
     border-radius: 18px;
     border-width: 1.5px;
     border-style: solid;
+    overflow-y: auto;
     padding: 20px;
-    max-width: 80%;
+    max-width: 85%;
     max-height: 60%;
 }
 
@@ -226,6 +211,29 @@ div.modal .title {
 
 div.modal .description {
     display: block;
+    text-align: left;
+    white-space: pre-line;
+}
+
+div.modal .description ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+div.modal .description p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+div.modal .description a {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: black;
+    cursor: pointer;
+}
+
+body[data-theme="dark"] div.modal .description a {
+    color: #ffffff8c;
 }
 
 div.modal .btn {
@@ -261,6 +269,15 @@ div.modal .btn.btn-grey {
     background-color: #404040;
 }
 
+div.modal .btn.btn-rainbow {
+    background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
+}
+
+div.modal .btn.btn-rainbow:hover {
+    background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
+    animation: slidebg 5s linear infinite;
+}
+
 div.setting input[type="text"], div.setting select {
     background-color: #ffffff8c;
     border-color: #E5E5E5;
@@ -275,6 +292,13 @@ div.setting input[type="text"], div.setting select {
 
 body[data-theme="dark"] div.setting input[type="text"], body[data-theme="dark"] div.setting select {
     background-color: #2d2d2d;
-    border-color: #111111;
+    border-color: #ffffff1a;
     color: white;
+}
+
+/* KEYFRAMES */
+@keyframes slidebg {
+    to {
+        background-position:20vw;
+    }
 }