init repo v1.0

itsjustaplant · Nov 16, 2020 · 0a95a66 · 0a95a66
commit 0a95a66
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 0 deletions.
diff --git a/home.html b/home.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="icon">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <script defer src="remote.js"></script>
+    <script defer src="window.js"></script>
+    <meta charset="UTF-8">
+    <title>SPOFLY</title>
+</head>
+<body id="body">
+<div id="cover">
+    <a> <img id="cover_art" alt="cover-art" src=""> </a>
+    <a id="close-button"></a>
+</div>
+
+<div id='lyric_section'>
+    <div id="song_title">
+        <a id="artist_name" >hello</a>
+        <a id="dash">-</a>
+        <a id="track_name">hello</a>
+    </div>
+    <pre id="lyrics"><span></span></pre>
+</div>
+</body>
+</html>
+<style>
+    #close-button{
+        margin-top: 1.5vw;
+        margin-left: 2vw;
+        background: #ff5c5c;
+        border: 1px solid #e33e41;
+        border-radius: 50%;
+        display: inline-block;
+        z-index: 3;
+        position: fixed;
+        height: 12px;
+        width: 12px;
+        opacity: 0;
+        font-size: 8pt;
+        text-align: center;
+        vertical-align: center;
+        -webkit-transition: all 0.2s ease;
+    }
+    #cover:hover > #close-button {
+        opacity: 100;
+    }
+    #close-button:hover{
+        content: "X";
+    }
+    body::-webkit-scrollbar {
+        display: none;
+    }
+    body{
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+    #cover_art{
+        width: 100%;
+        height: 100vw;
+        position: fixed;
+        alignment: center;
+        z-index: 2;
+        -webkit-user-drag: none;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        -webkit-app-region: drag;
+    }
+    #lyric_section{
+        margin: auto;
+        text-align: center;
+        -webkit-user-select: none;
+    }
+    #song_title{
+        text-align: center;
+        display: block;
+        z-index: 2;
+        width: 100vw;
+        height: 5vw;
+        position: fixed;
+        font-weight: bold;
+        margin-top: 100vw;
+        font-size: 18px;
+    }
+    #lyrics{
+        text-align: center;
+        display: block;
+        position: absolute;
+        width: 100vw;
+        margin-top: 105vw;
+        font-size: 16px;
+        overflow: hidden;
+    }
+    pre{
+        overflow-x: auto;
+        white-space: pre-wrap;
+        white-space: -moz-pre-wrap;
+        white-space: -o-pre-wrap;
+        word-wrap: break-word;
+    }
+</style>
diff --git a/main.js b/main.js
@@ -0,0 +1,42 @@
+const {app, BrowserWindow} = require('electron') // http://electronjs.org/docs/api
+const path = require('path') // https://nodejs.org/api/path.html
+const url = require('url') // https://nodejs.org/api/url.html
+
+
+let window = null
+
+// Wait until the app is ready
+app.once('ready', () => {
+    // Create a new window
+    window = new BrowserWindow({
+        // Set the initial width to 400px
+        width: 480,
+        // Set the initial height to 500px
+        height: 800,
+        // Don't show the window until it ready, this prevents any white flickering
+        minWidth: 480,
+        maxWidth: 600,
+        minHeight:800,
+        show: false,
+        frame: false,
+        // Don't allow the window to be resized.
+        resizable: true,
+        webPreferences: {
+            nodeIntegration: true,
+            enableRemoteModule: true
+        }
+    })
+
+    // Load a URL in the window to the local index.html path
+    window.loadURL(url.format({
+        pathname: path.join(__dirname, 'home.html'),
+        protocol: 'file:',
+        slashes: true
+    }))
+
+    // Show window when page is ready
+    window.once('ready-to-show', () => {
+        window.show()
+
+    })
+})
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "main": "main.js",
+  "name": "spofly",
+  "version": "1.0",
+  "description": "Spofly desktop application",
+  "author": "justaplant",
+  "dependencies": {
+    "@material-ui/icons": "^4.9.1",
+    "genius-lyrics-api": "^3.0.3",
+    "spotify-node-applescript": "^1.1.1"
+  },
+  "devDependencies": {
+    "electron": "^10.1.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/itsjustaplant/spofly.git"
+  }
+}
diff --git a/remote.js b/remote.js
@@ -0,0 +1,10 @@
+const electron = require('electron')
+
+const remote = electron.remote
+
+const closeBtn = document.getElementById('close-button')
+
+closeBtn.addEventListener('click', function (event) {
+    const window = remote.getCurrentWindow();
+    window.close();
+})
diff --git a/window.js b/window.js
@@ -0,0 +1,46 @@
+const spotify = require('spotify-node-applescript')
+let base_api_url = "http://colorflyv1.herokuapp.com/v1/color/"
+const genius = require('genius-lyrics-api')
+
+const getColor = (api_url) =>{
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', api_url)
+    xhr.onload = () =>{
+        const data = JSON.parse(xhr.response)
+        let background_color = data['color_0']
+        let text_color = data['color_1']
+        document.getElementById('body').style.backgroundColor = background_color
+        document.getElementById('song_title').style.color = text_color
+        document.getElementById('song_title').style.backgroundColor = background_color
+        document.getElementById('lyrics').style.color = text_color
+    }
+    xhr.send()
+}
+
+const renderPage = () =>{
+    spotify.getTrack((err, track) =>{
+        let temp_track = track['name']
+
+        if (temp_track !== track_name){
+            let track_name = track['name']
+            let image_url = track['artwork_url']
+            let api_url = base_api_url + image_url
+            let artist_name = track['artist']
+            getColor(api_url)
+            const options = {
+                apiKey: '--insert api key here--',
+                title: track['name'],
+                artist: track['artist'],
+                optimizeQuery: true
+            }
+            genius.getLyrics(options).then((lyrics) => {
+                document.getElementById('lyrics').textContent = lyrics
+            })
+            document.getElementById('cover_art').src = image_url
+            document.getElementById('track_name').textContent = track_name
+            document.getElementById('artist_name').textContent = artist_name
+        }
+    })
+}
+renderPage()
+window.setInterval(renderPage, 10000)