Contact Page + API Fix

Added a small contact me section.

Author: kyle8998

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 index_old.html
+app-env

README.md

@@ -26,6 +26,8 @@ Node.js
 
 Express
 
+YouTube Data API V3
+
 ---
 
 ### How to run locally
@@ -37,6 +39,9 @@ Install Dependencies
 npm install
 ```
 
+Obtain API keys for YouTube Data API V3 and Dailymotion SDK (Optional) and
+source it to your path as YT3_API_KEY and DM_API_KEY respectively
+
 Run the server
 ```
 node server

index.html

@@ -55,6 +55,9 @@
                     <li class="nav-item">
                         <a class="nav-link js-scroll-trigger" href="#about">About</a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
+                    </li>
                     <li class="nav-item">
                         <a class="nav-link js-scroll-trigger" href="https://github.com/kyle8998/Vynchronize">Source Code</a>
                     </li>
@@ -337,7 +340,25 @@ <h2>About Vynchronize</h2>
                     </div>
                 </div>
             </section>
-            <hr style="height:120pt; visibility:hidden;" />
+            <hr style="height:20pt; visibility:hidden;" />
+
+            <section id="contact" class="bg-light">
+                <hr style="height:100pt; visibility:hidden;" />
+
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-8 mx-auto">
+                            <h2>Contact Me</h2>
+                            <p class="lead">Who Am I</p>
+                            <p> I'm Kyle! A student and developer just trying build software for the everyday user! I developed Vynchronize because it was a problem that I needed to solve myself, and now I continue to build it for the those who enjoy using it! :)</p>
+                            <p> You can contact me directly at <a href="mailto:[email protected]?Subject=Vynchronize">[email protected]</a> if you have any questions, concerns, or just to say hi! If you want to submit a suggestion, please see the github issues page.</p>
+                            <p> Also I want to keep the website up and running with an ad-free experience because I hate ads too! I'm currently paying for servers and a domain, but they are expensive to a broke college kid. If you would like to donate click below! I appreciate the support!</p>
+                            <a href="https://www.paypal.me/kylelim"><button style="margin-top:.5rem" class="btn btn-primary"><i class="far fa-heart"></i> Donate</button></a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <hr style="height:50pt; visibility:hidden;" />
 
         </div>
     </div>

js/dm.js

@@ -2,7 +2,6 @@ var dailyPlayer
 
 setTimeout(function() {
     DM.init({
-        apiKey: '1e81e2b5ea5ab3dd737a',
         status: false, // check login status
         cookie: true // enable cookies to allow the server to access the session
     });

js/sync.js

@@ -264,17 +264,19 @@ function loveLive(roomnum) {
     // love live, love4eva, why, gee, what is love, stay, starlight, bad boy
     // likey, spring love, palette, roller coaster, DNA, I, peekaboo, wee woo
     // rookie, russian roulette, i want you back, TT, whistle, ddu du ddu du, turtle, 24/7
+    // something new
     var video_roulette = [
         '97uviVyw0_o', 'tIWpr3tHzII', 'WkdtmT8A2iY', 'U7mPqycQ0tQ',
         'i0p1bmr0EmE', 'FzVR_fymZw4', 'eNmL4JiGxZQ', 'J_CFBjAyPWE',
         'V2hlQkVJZhE', 'erErBFKPbMY', 'd9IxdwEFk1c', '900X9fDFLc4',
         'MBdVXkSdhwU', '4OrCA1OInoo', '6uJf2IT2Zh8', 'wLfHuClrQdI',
         'J0h8-OTC38I', 'QslJYDX3o8s', 'X3H-4crGD6k', 'ePpPVE-GGJw',
-        'dISNgvVpWlo', 'IHNzOHi8sJs', 'sErJjrLswEw', '-j6XPEUKzn0'
+        'dISNgvVpWlo', 'IHNzOHi8sJs', 'sErJjrLswEw', '-j6XPEUKzn0',
+        'im1UUY8dQIk'
     ]
 
-    // Random number between 0 and 23
-    var random = Math.floor(Math.random() * (24))
+    // Random number between 0 and 24
+    var random = Math.floor(Math.random() * (25))
     // Only for YouTube testing
     socket.emit('change video', {
         room: roomnum,

js/yt.js

@@ -3,7 +3,6 @@ tag.id = 'iframe-demo';
 tag.src = 'https://www.youtube.com/iframe_api';
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-yt3_api = 'AIzaSyCEc0w2faZFftIynhOfjUSW8YIQDFPBMkI'
 
 var player;
 
@@ -103,7 +102,7 @@ socket.on('get title', function(data, callback) {
         "https://www.googleapis.com/youtube/v3/videos", {
             part: 'snippet',
             id: videoId,
-            key: yt3_api
+            key: data.api_key
         },
         function(data) {
             // enqueueNotify(user, data.items[0].snippet.title)

server.js

@@ -8,6 +8,9 @@ rooms = [];
 // Store all of the sockets and their respective room numbers
 userrooms = {}
 
+YT3_API_KEY = process.env.YT3_API_KEY
+DM_API_KEY = process.env.DM_API_KEY
+
 // Set given room for url parameter
 var given_room = ""
 
@@ -158,7 +161,8 @@ io.sockets.on('connection', function(socket) {
                 // See yt.js file
                 socket.emit('get title', {
                     videoId: videoId,
-                    user: user
+                    user: user,
+                    api_key: YT3_API_KEY
                 }, function(data) {
                     videoId = data.videoId
                     title = data.title