diff --git a/assets/config.js b/assets/config.js
index e065127..fc27d2c 100644
--- a/assets/config.js
+++ b/assets/config.js
@@ -2,7 +2,7 @@ let env = process.env;
let platform = env.platform;
module.exports = {
- node_env : env.NODE_ENV || 'development',
+ node_env : env.NODE_ENV || 'production', // Change production to development to use devTools
open_devtools: platform === 'darwin' ? 'Command+Shift+I' : 'Ctrl+Shift+I',
open_files: platform === 'darwin' ? 'Command+O' : 'Ctrl+O',
reload: platform === 'darwin' ? 'Command+R' : 'Ctrl+R'
diff --git a/assets/css/style.css b/assets/css/style.css
index a3bf635..dfb1682 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,308 +1 @@
-/* * { outline: 1px solid red } */
-
-body,
-ul {
- font-family: Verdana, Geneva, Tahoma, sans-serif;
- margin: 0;
- padding: 0;
-}
-
-li {
- list-style-type: none;
-}
-
-::-webkit-scrollbar {
- background: #fafafa;
- width: 5px
-}
-
-::-webkit-scrollbar-thumb {
- background: #ffd800
-}
-
-::selection {
- background-color: transparent
-}
-
-#video-player {
- width: 100%;
- height: 100%;
- position: fixed;
- background-color: black
- /*background-color: white;*/
-}
-
-input[type=range] {
- -webkit-appearance: none;
- background: rgba(255, 255, 255, 0.267)
-}
-
-input[type=range]:focus {
- outline: none;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
- width: 100%;
- height: 5px;
- cursor: pointer;
- /* background: rgba(0, 0, 0, 0.233); */
- background: transparent;
-}
-
-input[type=range]::-webkit-slider-thumb {
- height: 15px;
- width: 15px;
- border-radius: 50%;
- background: #ffd800;
- cursor: pointer;
- -webkit-appearance: none;
- margin-top: -5px;
- border: 2px solid #d6b813
-}
-
-.progress {
- width: 97%;
- left: 50%;
- top: -0.5rem;
- height: 5px;
- transform: translateX(-50%);
- position: absolute;
- background: rgba(255, 255, 255, 0.267);
- cursor: pointer
-}
-
-.progress-bar {
- background: #d6b813;
- height: 6px;
- width: 0%;
-}
-
-.progress-bar-hidden {
- width: 100%;
- height: 100%;
- position: absolute;
-}
-
-.progress-bar > div {
- float: right;
- height: 11px;
- width: 11px;
- border-radius: 50%;
- background: #ffd800;
- cursor: pointer;
- -webkit-appearance: none;
- top: -5px;
- left: 8px;
- position: relative;
- content: " ";
- border: 2px solid #d6b813
-}
-
-/* ==================================== Title =========================== */
-
-#title {
- width: 100%;
- position: fixed;
- background: linear-gradient(rgba(0, 0, 0, 0.550), rgba(0, 0, 0, 0.400), rgba(0, 0, 0, 0.200), rgba(0, 0, 0, 0));
- padding: 1em 2rem 3rem 2rem;
- top: 0;
- transition: 0.5s;
- z-index: 1;
-}
-
-#title:hover {
- top: 0 !important;
-}
-
-#title>span:nth-child(1) {
- font-size: 150%;
- color: #fafafa
-}
-
-#title>span:nth-child(3) {
- font-size: 86%;
- color: #f5f5f5;
-}
-
-/*================================= Title :: END =================================*/
-
-/* ======================================= Video Controls======================== */
-
-#video-control {
- background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.77));
- box-shadow: #000000c5 2px 2px;
- position: fixed;
- margin-bottom: 0;
- bottom: 0;
- width: 100%;
- transition: 0.5s
-}
-
-#video-control:hover {
- bottom: 0 !important;
-}
-
-#video-control>div>ul {
- padding: 0 0.5em 0 0.5em;
-}
-
-#video-control>div>ul>li>i {
- color: #fafafa
-}
-
-#video-control>div>ul>li {
- list-style-type: none;
- display: inline-block;
- float: left;
- padding: 0.5em 1em;
- color: #FAFAFA;
-}
-
-.btn {
- cursor: pointer !important;
-}
-
-.volume {
- padding: 1em 0 1em 0;
- cursor: default !important;
-}
-
-.volume>i {
- cursor: pointer !important;
-}
-
-.volume>input {
- position: relative;
- top: -0.6em
-}
-
-.volume>i,
-input {
- display: inline-block
-}
-
-.volume>input {
- transform: translateY(0.3em);
- margin-left: 0.5rem;
-}
-
-.btn.play>i,
-.btn.pause>i {
- transform: translateY(-15%);
- font-size: 150%;
-}
-
-.btn.expand,
-.btn.list {
- float: right !important;
-}
-
-.btn.list > i.fa-times {
- font-size: 120%;
-}
-
-/*=============================== VideoControls::END ====================*/
-
-/*================================== Middle Btn ==========================*/
-
-.middleBtn {
- position: absolute;
- cursor: pointer;
- z-index: 4;
- color: #fafafa;
- background: rgba(0, 0, 0, 0.61);
- width: 75px;
- height: 75px;
- border-radius: 50%;
- overflow: hidden;
- top: 50%;
- left: 50%;
- transform: translateY(-50%) translateX(-50%);
- filter: blur(1px);
-}
-
-.middleBtn.hidden {
- visibility: hidden
-}
-
-.middleBtn.show {
- transform: translateY(-50%) translateX(-50%) scale(1);
- animation: scaledUp 0.3s ease-in-out;
-}
-
-.middleBtn.isGone {
- transform: translateY(-50%) translateX(-50%) scale(0.2);
- animation: scaledDown 0.3s ease-out;
-}
-
-@keyframes scaledUp {
- 0% { visibility: show; transform: translateY(-50%) translateX(-50%) scale(0.3) }
- 25% { visibility: show; transform: translateY(-50%) translateX(-50%) scale(0.4) }
- 50% { visibility: show; transform: translateY(-50%) translateX(-50%) scale(0.6) }
- 75% { visibility: show; transform: translateY(-50%) translateX(-50%) scale(0.9) }
- 100% { visibility: show; transform: translateY(-50%) translateX(-50%) scale(1)}
-}
-
-@keyframes scaledDown {
- 0% { transform: translateY(-50%) translateX(-50%) scale(0.8) }
- 25% { transform: translateY(-50%) translateX(-50%) scale(0.6) }
- 50% { transform: translateY(-50%) translateX(-50%) scale(0.4) }
- 75% { transform: translateY(-50%) translateX(-50%) scale(0.2) }
- 100% { visibility: hidden }
-}
-
-.middleBtn:hover {
- filter: blur(0)
-}
-
-.middleBtn > i {
- font-size: 29px;
- position: relative;
- top: 50%;
- left: 50%;
- transform: translateY(-50%) translateX(-37%);
-}
-
-/*=============================== MiddleBTN::END =============================*/
-
-/*================================ List sidebar =============================*/
-
-.list-sidebar {
- position: fixed;
- right: 5px;
- float: right;
- width: 25%;
- height: 91.5%;
- z-index: 1;
- background: rgba(0, 0, 0, 0.28);
- transition: 0.3s;
- overflow: auto
-}
-
-.list-sidebar:first-child {
- padding: 10px 10px 5px 10px !important
-}
-
-.list-data {
- color: #f5f5f5;
- padding: 5px 10px 5px 10px;
- cursor: pointer;
- height: 140px;
-}
-
-.list-data > video {
- width: 100%;
-}
-
-.list-data > span {
- position: relative;
- top: -65px;
- left: 8px;
- font-size: 12px;
- background: #222;
-}
-
-.list-sidebar.hidden {
- margin-right: -350px
-}
-/*================================ List sidebar :: END ===================== */
\ No newline at end of file
+body,ul{font-family:Verdana,Geneva,Tahoma,sans-serif;margin:0;padding:0}li{list-style-type:none}::-webkit-scrollbar{background:#fafafa;width:5px}::-webkit-scrollbar-thumb{background:#ffd800}::selection{background-color:transparent}#video-player{width:100%;height:100%;position:fixed;background-color:#000}input[type=range]{-webkit-appearance:none;background:rgba(255,255,255,.267)}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:0 0}input[type=range]::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;background:#ffd800;cursor:pointer;-webkit-appearance:none;margin-top:-5px;border:2px solid #d6b813}.progress{width:97%;left:50%;top:-.5rem;height:5px;transform:translateX(-50%);position:absolute;background:rgba(255,255,255,.267);cursor:pointer}.progress-bar{background:#d6b813;height:6px;width:0}.progress-bar-hidden{width:100%;height:100%;position:absolute}.progress-bar>div{float:right;height:11px;width:11px;border-radius:50%;background:#ffd800;cursor:pointer;-webkit-appearance:none;top:-5px;left:8px;position:relative;content:" ";border:2px solid #d6b813}#title,#video-control{position:fixed;width:100%;transition:.5s}#title{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.4),rgba(0,0,0,.2),rgba(0,0,0,0));padding:1em 2rem 3rem;top:0;z-index:1}#title:hover{top:0!important}#title>span:nth-child(1){font-size:150%;color:#fafafa}#title>span:nth-child(3){font-size:86%;color:#f5f5f5}#video-control{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.48),rgba(0,0,0,.6),rgba(0,0,0,.77));box-shadow:#000c5 2px 2px;margin-bottom:0;bottom:0}#video-control:hover{bottom:0!important}#video-control>div>ul{padding:0 .5em}#video-control>div>ul>li>i{color:#fafafa}#video-control>div>ul>li{list-style-type:none;display:inline-block;float:left;padding:.5em 1em;color:#FAFAFA}.btn{cursor:pointer!important}.volume{padding:1em 0;cursor:default!important}.volume>i{cursor:pointer!important}.volume>input{position:relative;top:-.6em;transform:translateY(.3em);margin-left:.5rem}.volume>i,input{display:inline-block}.btn.pause>i,.btn.play>i{transform:translateY(-15%);font-size:150%}.btn.expand,.btn.list{float:right!important}.btn.list>i.fa-times{font-size:120%}.middleBtn{position:absolute;cursor:pointer;z-index:4;color:#fafafa;background:rgba(0,0,0,.61);width:75px;height:75px;border-radius:50%;overflow:hidden;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);filter:blur(1px)}.middleBtn.hidden{visibility:hidden}.middleBtn.show{transform:translateY(-50%) translateX(-50%) scale(1);animation:scaledUp .3s ease-in-out}.middleBtn.isGone{transform:translateY(-50%) translateX(-50%) scale(.2);animation:scaledDown .3s ease-out}@keyframes scaledUp{0%{visibility:show;transform:translateY(-50%) translateX(-50%) scale(.3)}25%{visibility:show;transform:translateY(-50%) translateX(-50%) scale(.4)}50%{visibility:show;transform:translateY(-50%) translateX(-50%) scale(.6)}75%{visibility:show;transform:translateY(-50%) translateX(-50%) scale(.9)}100%{visibility:show;transform:translateY(-50%) translateX(-50%) scale(1)}}@keyframes scaledDown{0%{transform:translateY(-50%) translateX(-50%) scale(.8)}25%{transform:translateY(-50%) translateX(-50%) scale(.6)}50%{transform:translateY(-50%) translateX(-50%) scale(.4)}75%{transform:translateY(-50%) translateX(-50%) scale(.2)}100%{visibility:hidden}}.middleBtn:hover{filter:blur(0)}.middleBtn>i{font-size:29px;position:relative;top:50%;left:50%;transform:translateY(-50%) translateX(-37%)}.list-sidebar{position:fixed;right:5px;float:right;width:25%;height:91.5%;z-index:1;background:rgba(0,0,0,.28);transition:.3s;overflow:auto}.list-sidebar:first-child{padding:10px 10px 5px!important}.list-data{color:#f5f5f5;padding:5px 10px;cursor:pointer;height:140px}.list-data>video{width:100%}.list-data>span{position:relative;top:-65px;left:8px;font-size:12px;background:#222}.list-sidebar.hidden{margin-right:-350px}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index caf9cf6..70ff0c2 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,48 +1 @@
-// use this file for styling or animation
-// I use this file because i can't use async and await inside webpack
-
-async function background () {
- let v = await document.getElementById('video-player')
- let title = await document.getElementById('title')
- let vidControl = await document.getElementById('video-control')
- let list = await document.getElementById('list')
- let btn = await document.getElementsByClassName('btn')
-
- let mouseenter = (e) => {
- e.addEventListener('mouseenter', () => {
- title.style.top = '0'
- vidControl.style.bottom = '0'
- })
- }
- let mouseleave = (e) => {
- e.addEventListener('mouseleave', () => {
- if (v.src === null || !v.src) return
- else {
- title.style.top = '-7rem'
- vidControl.style.bottom = '-5rem'
- }
- })
- }
-
- for (let i of btn) {
- let g = i.className
- i.setAttribute('title', g.split(' ')[1])
- }
-
- mouseenter(v)
- mouseleave(title)
- mouseleave(vidControl)
-
- v.addEventListener('mouseleave', () => {
- if (v.src === null || !v.src) return
- else {
- title.style.top = '-7rem'
- vidControl.style.bottom = '-5rem'
- }
- mouseenter(list)
- mouseenter(vidControl)
- mouseenter(title)
- })
-}
-
-background()
\ No newline at end of file
+async function z(){let a=await document.getElementById('video-player'),b=await document.getElementById('title'),c=await document.getElementById('video-control'),d=await document.getElementById('list'),f=await document.getElementsByClassName('btn'),h=k=>{k.addEventListener('mouseenter',()=>{b.style.top='0',c.style.bottom='0'})},j=k=>{k.addEventListener('mouseleave',()=>{null!==a.src&&a.src&&(b.style.top='-7rem',c.style.bottom='-5rem')})};for(let k of f){let l=k.className;k.setAttribute('title',l.split(' ')[1])}h(a),j(b),j(c),a.addEventListener('mouseleave',()=>{null!==a.src&&a.src&&(b.style.top='-7rem',c.style.bottom='-5rem',h(d),h(c),h(b))})}z();
\ No newline at end of file
diff --git a/electron.js b/electron.js
index c54b551..fe66101 100644
--- a/electron.js
+++ b/electron.js
@@ -1,92 +1 @@
-let electron = require('electron')
-let url = require('url')
-let config = require('./assets/config')
-
-let {BrowserWindow, Menu, dialog, app, ipcMain} = electron
-let {join} = require('path')
-let {platform} = process.env
-
-require('events').EventEmitter.defaultMaxListeners = 15
-
-let win
-let b = [{
- label: 'File',
- submenu: [{
- label: 'Open File',
- accelerator: config.open_files,
- click() {
- dialog.showOpenDialog({
- properties: ['openFile', 'multiSelections'],
- filters: [
- {name: 'Videos', extensions: ['mp4', 'mkv', 'avi']},
- {name: 'Music', extensions: ['mp3', 'opus', 'aac', 'm4a']}
- ]
- }, function (files) {
- if (files) {
- for (let i in files) {
- win.webContents.send('open-file', files[i])
- }
-
- win.webContents.send('kntl', files[files.length - 1])
- }
- })
- }
- }]
-}]
-
-function showWindow(a) {
- win = new BrowserWindow({
- width: 1080,
- height: 600,
- minWidth: 400,
- minHeight: 200
- })
-
- win.loadURL(url.format({
- pathname: join(__dirname, a),
- protocol: 'file',
- slashes: true
- }))
-
- // win.webContents.send('open-file', )
-
- win.on('closed', () => {
- win = null
- })
-
- let menus = Menu.buildFromTemplate(b)
- Menu.setApplicationMenu(menus)
-
- win.show()
-}
-
-if (platform === 'darwin') {
- b.unshift({})
-}
-
-if (config.node_env === 'development') {
- b.push({
- label: 'Developer tools',
- submenu: [{
- label: 'toggle devtools',
- accelerator: config.open_devtools,
- click(item, focusedWindow) {
- focusedWindow.toggleDevTools()
- }
- }, {
- label: 'reload',
- accelerator: config.reload,
- role: 'reload'
- }]
- })
-} else {
- b.pop()
-}
-
-app.on('window-all-closed', function () {
- app.quit()
-})
-
-app.on('ready', function () {
- showWindow(`./views/index.html`)
-})
\ No newline at end of file
+let electron=require('electron'),url=require('url'),config=require('./assets/config'),{BrowserWindow,Menu,dialog,app,ipcMain}=electron,{join}=require('path'),{platform}=process.env;require('events').EventEmitter.defaultMaxListeners=15;let win,b=[{label:'File',submenu:[{label:'Open File',accelerator:config.open_files,click(){dialog.showOpenDialog({properties:['openFile','multiSelections'],filters:[{name:'Videos',extensions:['mp4','mkv','avi']},{name:'Music',extensions:['mp3','opus','aac','m4a']}]},function(c){if(c){for(let d in c)win.webContents.send('open-file',c[d]);win.webContents.send('kntl',c[c.length-1])}})}}]}];function showWindow(c){win=new BrowserWindow({width:1080,height:600,minWidth:400,minHeight:200}),win.loadURL(url.format({pathname:join(__dirname,c),protocol:'file',slashes:!0})),win.on('closed',()=>{win=null});let d=Menu.buildFromTemplate(b);Menu.setApplicationMenu(d),win.show()}'darwin'===platform&&b.unshift({}),'development'===config.node_env&&b.push({label:'Developer tools',submenu:[{label:'toggle devtools',accelerator:config.open_devtools,click(c,d){d.toggleDevTools()}},{label:'reload',accelerator:config.reload,role:'reload'}]}),app.on('window-all-closed',function(){app.quit()}),app.on('ready',function(){showWindow(`./views/index.html`)});
\ No newline at end of file
diff --git a/screenshots/Screenshot from 2018-05-07 14-23-57.png b/screenshots/Screenshot from 2018-05-07 14-23-57.png
new file mode 100644
index 0000000..8d6a7ad
Binary files /dev/null and b/screenshots/Screenshot from 2018-05-07 14-23-57.png differ
diff --git a/screenshots/Screenshot from 2018-05-07 14-24-13.png b/screenshots/Screenshot from 2018-05-07 14-24-13.png
new file mode 100644
index 0000000..18f75ef
Binary files /dev/null and b/screenshots/Screenshot from 2018-05-07 14-24-13.png differ
diff --git a/screenshots/Screenshot from 2018-05-07 14-24-29.png b/screenshots/Screenshot from 2018-05-07 14-24-29.png
new file mode 100644
index 0000000..b4a8819
Binary files /dev/null and b/screenshots/Screenshot from 2018-05-07 14-24-29.png differ
diff --git a/screenshots/Screenshot from 2018-05-07 14-24-43.png b/screenshots/Screenshot from 2018-05-07 14-24-43.png
new file mode 100644
index 0000000..8bf8e57
Binary files /dev/null and b/screenshots/Screenshot from 2018-05-07 14-24-43.png differ
diff --git a/screenshots/Screenshot from 2018-05-07 14-25-15.png b/screenshots/Screenshot from 2018-05-07 14-25-15.png
new file mode 100644
index 0000000..9ee4574
Binary files /dev/null and b/screenshots/Screenshot from 2018-05-07 14-25-15.png differ
diff --git a/views/index.html b/views/index.html
index a91200e..7199ab1 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,21 +1 @@
-
-
-
-
- Komo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+Komo
\ No newline at end of file