Merge pull request #102 from CodeF0x/prelive

CodeF0x · web-flow · commit a017bc2e253e · 2019-07-31T12:26:59.000+02:00
Added volume slider
diff --git a/dist/package.json b/dist/package.json
@@ -1,7 +1,7 @@
 {
   "name": "violin",
   "productName": "Violin",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A fast, lightweight, and minimalistic desktop music player.",
   "main": "main.js",
   "scripts": {
diff --git a/main.js b/main.js
@@ -13,7 +13,9 @@ let window = null;
 function createWindow() {
   window = new BrowserWindow({
     width: 800,
+    minWidth: 800,
     height: 600,
+    minHeight: 600,
     titleBarStyle: 'hiddenInset',
     useContentSize: false,
     webPreferences: {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,5 +54,8 @@
       "target": "msi",
       "icon": "src/img/icons/icon.ico"
     }
+  },
+  "dependencies": {
+    "jsmediatags": "^3.9.2"
   }
 }
diff --git a/src/css/main.css b/src/css/main.css
@@ -337,10 +337,78 @@ progress::-webkit-progress-value {
 }
 
 .song-info {
-  grid-row: 3;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--text-color);
   font-size: 0.9em;
 }
+
+#song-title,
+#song-artist {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+
+#volume-wrapper {
+  position: absolute;
+  right: 10px;
+}
+
+#volume-button {
+  float: left;
+  height: 20px;
+  width: 20px;
+  background-image: url('../img/volume.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+input[type='range'] {
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  background: var(--song-con-active);
+  border-radius: 1.3px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--song-con-active);
+}
+
+input[type='range']::-webkit-slider-thumb {
+  margin-top: -5px;
+  cursor: pointer;
+}
+
+#volume {
+  background-color: transparent;
+}
+
+/**
+* Because volume slider is positionied absolute,
+* we need this ugly rule to adjust song artist 
+* and song title
+*/
+@media (max-width: 1000px) {
+  #song-title,
+  #song-artist {
+    max-width: 10em;
+  }
+}
+
+@media (min-width: 1000px) {
+  #song-title,
+  #song-artist {
+    max-width: 28em;
+  }
+}
diff --git a/src/img/volume.png b/src/img/volume.png
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="width=device-width, initial-scale=1"
     />
     <meta
       http-equiv="Content-Security-Policy"
@@ -47,8 +47,12 @@
       </div>
       <div class="song-info">
         <div id="song-title">Something</div>
-        &nbsp;by&nbsp;
+        <div>&nbsp;by&nbsp;</div>
         <div id="song-artist">Someone</div>
+        <div id="volume-wrapper">
+          <div id="volume-button"></div>
+          <input type="range" min="0" max="100" value="100" id="volume" />
+        </div>
       </div>
     </div>
     <script src="js/index.js"></script>
diff --git a/src/js/event-listener.js b/src/js/event-listener.js
@@ -99,6 +99,10 @@ module.exports = function() {
   creatorLink.addEventListener('click', () => {
     require('electron').shell.openExternal('https://codef0x.dev');
   });
+
+  volumeSlider.addEventListener('input', () => {
+    player.volume = volumeSlider.value / 100;
+  });
 };
 
 /**
diff --git a/src/js/index.js b/src/js/index.js
@@ -15,6 +15,7 @@ let {
   searchField,
   creatorLink,
   loader,
+  volumeSlider,
   base64String,
   globalFiles,
   originalGlobalFiles,
diff --git a/src/js/variables.js b/src/js/variables.js
@@ -12,6 +12,7 @@ module.exports = {
   searchField: document.getElementById('search'),
   creatorLink: document.getElementById('creator-link'),
   loader: document.getElementById('loader'),
+  volumeSlider: document.getElementById('volume'),
   base64String: undefined,
   globalFiles: undefined,
   originalGlobalFiles: undefined,

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "violin",`
`3`	`3`	`"productName": "Violin",`
`4`		`- "version": "2.1.0",`
	`4`	`+ "version": "2.2.0",`
`5`	`5`	`"description": "A fast, lightweight, and minimalistic desktop music player.",`
`6`	`6`	`"main": "main.js",`
`7`	`7`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -54,5 +54,8 @@`
`54`	`54`	`"target": "msi",`
`55`	`55`	`"icon": "src/img/icons/icon.ico"`
`56`	`56`	`}`
	`57`	`+ },`
	`58`	`+ "dependencies": {`
	`59`	`+ "jsmediatags": "^3.9.2"`
`57`	`60`	`}`
`58`	`61`	`}`