2.1 - Fixing bugs

quead · quead · commit af2a863026cf · 2018-01-27T22:20:18.000+02:00
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -19,7 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "../scss/main.scss"
+        "assets/scss/main.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
diff --git a/README.md b/README.md
@@ -78,6 +78,10 @@ or
 <a href="https://youtu.be/KB803dWQM-o/" title="Video Presentation">Video Presentation</a>
 
 ## Changelog
+Angular2 YT Player v2.1
+- Import & export youtube playlist as .JSON file
+- Categories with videos like (music, gaming, autos, films, sports, much more)
+
 Angular2 YT Player v2.0
 - Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
 - Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
@@ -166,8 +170,6 @@ Angular2 YT Player v1.0.0
 - *Room chat **(unversioned)***
 
 #### Roadmap to 3.0
-- Import/Export playlist (probably json file and youtube playlist) **(in v2.1)**
-- Categories with videos like (music, gaming, autos, films, sports, much more) **(in v2.1)**
 - Drag and drop videos to playlist **(in v2.2)**
 - Arrange playlist by drag and drop **(in v2.2)**
 - Integrating Google accounts **(in v2.4)**
diff --git a/dist/assets/scss/_header.scss b/dist/assets/scss/_header.scss
@@ -111,7 +111,7 @@
 
 #win-close {
     background-color: var(--c-primary-active);
-    background-image: url('../src/assets/img/ui/win-close.png');
+    background-image: url('../img/ui/win-close.png');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 18px auto;
@@ -126,7 +126,7 @@
 }
 
 #win-maximize {
-    background-image: url('../src/assets/img/ui/win-maxim.png');
+    background-image: url('../img/ui/win-maxim.png');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 13px auto;
@@ -137,7 +137,7 @@
 }
 
 #win-minimize {
-    background-image: url('../src/assets/img/ui/win-minim.png');
+    background-image: url('../img/ui/win-minim.png');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 13px auto;
diff --git a/dist/assets/scss/_videos.scss b/dist/assets/scss/_videos.scss
@@ -113,7 +113,7 @@ iframe {
     }
     &-autor {
         font-size: $f-12;
-        color: #888888;
+        color: var(--c-white);
     }
     &-image {
         display: block;
@@ -125,7 +125,7 @@ iframe {
     }
     .video-item-details {
         display: flex;
-        color: rgba(255, 255, 255, 0.6);
+        color: rgba(255, 255, 255, 0.8);
         font-weight: 400;
         font-size: $f-12;
         p {
diff --git a/dist/index.html b/dist/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><base href="/"><title>YouTube Player v2.1</title><link rel="icon" href="favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="assets/css/normalize.css"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><link href="styles.d47e7eb5807a918615b9.bundle.css" rel="stylesheet"/></head><body class=""><div class="update-bar"><div id="output">Checking for updates...</div><span class="update-loading"><span class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></span></span><div id="update-buttons"></div></div><app-yt><div class="loading-app"><i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i> <span class="sr-only">Loading...</span></div></app-yt><script>/*
+<!DOCTYPE html><html><head><base href="/"><title>YouTube Player v2.1</title><link rel="icon" href="favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="assets/css/normalize.css"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><link href="styles.bcb5a9a7aacad68f766f.bundle.css" rel="stylesheet"/></head><body class=""><div class="update-bar"><div id="output">Checking for updates...</div><span class="update-loading"><span class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></span></span><div id="update-buttons"></div></div><app-yt><div class="loading-app"><i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i> <span class="sr-only">Loading...</span></div></app-yt><script>/*
             const AutoUpdater = require( "nw-autoupdater" ),
                 updater = new AutoUpdater( require( "./package.json" ) ),
                 output =  document.querySelector( "#output" ),
@@ -91,4 +91,4 @@
             }
 
             main(false);
-*/</script><script type="text/javascript" src="inline.d4b080c30efd176547b7.bundle.js"></script><script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script><script type="text/javascript" src="main.1cccdc331f01bce59feb.bundle.js"></script></body></html>
+*/</script><script type="text/javascript" src="inline.473c6f52730963e7c31c.bundle.js"></script><script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script><script type="text/javascript" src="main.b1d200b68d2288c1d137.bundle.js"></script></body></html>
diff --git a/dist/inline.473c6f52730963e7c31c.bundle.js b/dist/inline.473c6f52730963e7c31c.bundle.js
diff --git a/dist/main.b1d200b68d2288c1d137.bundle.js b/dist/main.b1d200b68d2288c1d137.bundle.js
diff --git a/dist/polyfills.f20484b2fa4642e0dca8.bundle.js b/dist/polyfills.f20484b2fa4642e0dca8.bundle.js
diff --git a/dist/styles.bcb5a9a7aacad68f766f.bundle.css b/dist/styles.bcb5a9a7aacad68f766f.bundle.css
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
@@ -10,7 +10,7 @@
     vertical-align: middle;
     user-select: none;
     border: 1px solid transparent;
-    padding: 6px 15px;
+    padding: 9px 15px;
     text-decoration: none;
     transition: all .1s ease-out;
     outline: 0;
diff --git a/src/assets/scss/_common.scss b/src/assets/scss/_common.scss
@@ -209,13 +209,18 @@
     padding-top: 30px;
     padding-bottom: 90px;
     animation: loading-modal 0.2s 1;
+    overflow-y: auto;
+    max-height: 100%;
     h2 {
         margin-top: 10px;
         font-size: $f-18;
         font-weight: 400;
         padding: 0 40px;
         margin-bottom: 30px;
     }
+    &#manage-playlist {
+        height: auto;
+    }
 }
 
 .modal-content {
@@ -265,7 +270,7 @@
         border: none;
         text-transform: uppercase;
         font-weight: 600;
-        padding: 11px 10px;
+        padding: 13px 10px;
         font-size: $f-12;
         &-primary {
             width: 70%;
@@ -346,6 +351,44 @@
     text-transform: capitalize;
 }
 
+.file-upload {
+    position: relative;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    label {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        display: block;
+        padding: 20px;
+        width: 100%;
+        border: 2px dashed rgba(red, 0.3);
+        border-radius: 5px;
+        text-transform: uppercase;
+        color: var(--c-primary);
+        text-indent: -9999px;
+        &:hover {
+            border: 2px dashed rgba(red, 0.5);
+        }
+    }
+    input {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-indent: -9999px;
+        color: var(--c-primary);
+        outline: 0;
+        &:hover + label {
+            border: 2px dashed rgba(red, 0.5);
+        }
+        &:active + label {
+            border: 2px dashed var(--c-primary);
+        }
+    }
+}
 @media screen and (max-width: 1200px) {
     #mobile-unavailable {
         background-color: var(--c-base);
diff --git a/src/assets/scss/_videos.scss b/src/assets/scss/_videos.scss
@@ -88,6 +88,9 @@ iframe {
         &:active {
             background-color: var(--c-primary-active);
         }
+        + .video-item-head-btn {
+            margin-right: 5px;
+        }
     }
     .fa {
         margin-right: 3px;
@@ -110,7 +113,7 @@ iframe {
     }
     &-autor {
         font-size: $f-12;
-        color: #888888;
+        color: var(--c-white);
     }
     &-image {
         display: block;
@@ -122,7 +125,7 @@ iframe {
     }
     .video-item-details {
         display: flex;
-        color: rgba(255, 255, 255, 0.6);
+        color: rgba(255, 255, 255, 0.8);
         font-weight: 400;
         font-size: $f-12;
         p {
diff --git a/src/index.html b/src/index.html
@@ -5,6 +5,7 @@
         <title>YouTube Player v2.1</title>
         <link rel="icon" href="favicon.ico">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <link rel="stylesheet" href="assets/css/normalize.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        
     </head>

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ iframe {`
`113`	`113`	`}`
`114`	`114`	`&-autor {`
`115`	`115`	`font-size: $f-12;`
`116`		`- color: #888888;`
	`116`	`+ color: var(--c-white);`
`117`	`117`	`}`
`118`	`118`	`&-image {`
`119`	`119`	`display: block;`
`@@ -125,7 +125,7 @@ iframe {`
`125`	`125`	`}`
`126`	`126`	`.video-item-details {`
`127`	`127`	`display: flex;`
`128`		`- color: rgba(255, 255, 255, 0.6);`
	`128`	`+ color: rgba(255, 255, 255, 0.8);`
`129`	`129`	`font-weight: 400;`
`130`	`130`	`font-size: $f-12;`
`131`	`131`	`p {`