Alter Threshold for theatre view

package.json

@@ -12,7 +12,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "@silvermine/videojs-quality-selector": "^1.2.3",
-    "autolinker": "^3.12.0",
+    "autolinker": "^3.13.0",
     "bulma-pro": "^0.1.8",
     "dateformat": "^3.0.3",
     "electron-context-menu": "^0.16.0",
@@ -23,42 +23,42 @@
     "nedb": "^1.8.0",
     "opml-to-json": "0.0.3",
     "video.js": "^7.6.6",
-    "videojs-abloop": "^1.0.3",
+    "videojs-abloop": "^1.1.2",
     "videojs-contrib-quality-levels": "^2.0.9",
     "videojs-http-source-selector": "^1.1.6",
     "videojs-replay": "^1.1.0",
     "videojs-vtt-thumbnails": "0.0.13",
     "vue": "^2.6.11",
     "vue-electron": "^1.0.6",
-    "vue-router": "^3.1.5",
+    "vue-router": "^3.1.6",
     "vuex": "^3.1.2",
     "xml2json": "^0.12.0",
     "youtube-chat": "^1.0.2",
     "youtube-comments-fetch": "^1.0.1",
     "youtube-comments-task": "^1.3.14",
     "youtube-suggest": "^1.1.0",
-    "yt-xml2vtt": "^1.0.0",
+    "yt-xml2vtt": "^1.0.1",
     "ytdl-core": "^2.0.0",
     "ytpl": "^0.1.20",
     "ytsr": "^0.1.10"
   },
   "description": "A private YouTube client",
   "devDependencies": {
-    "@babel/core": "^7.8.4",
+    "@babel/core": "^7.8.7",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.8.7",
     "@babel/preset-typescript": "^7.8.3",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
-    "acorn": "^7.1.0",
-    "babel-eslint": "^10.0.3",
+    "@typescript-eslint/eslint-plugin": "^2.22.0",
+    "@typescript-eslint/parser": "^2.22.0",
+    "acorn": "^7.1.1",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
     "devtron": "^1.4.0",
-    "electron": "^8.0.1",
-    "electron-builder": "^22.3.2",
+    "electron": "^8.0.3",
+    "electron-builder": "^22.3.6",
     "electron-debug": "^3.0.1",
     "electron-rebuild": "^1.10.0",
     "eslint": "^6.8.0",
@@ -78,18 +78,18 @@
     "node-loader": "^0.6.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
-    "sass": "^1.25.0",
+    "sass": "^1.26.2",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "tree-kill": "1.2.2",
-    "typescript": "^3.8.2",
+    "typescript": "^3.8.3",
     "url-loader": "^3.0.0",
     "vue-devtools": "^5.1.3",
     "vue-eslint-parser": "^7.0.0",
     "vue-loader": "^15.9.0",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.41.6",
+    "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"
   },

src/renderer/components/watch-video-info/watch-video-info.css

@@ -2,13 +2,19 @@
   position: relative;
 }
 
+.watchVideoInfo {
+  min-height: 130px;
+}
+
 .videoTitle {
   font-size: 22px;
-  max-width: 50%;
+  max-width: 45%;
 }
 
 .channelInformation {
-  position: relative;
+  position: absolute;
+  bottom: 10px;
+  width: 300px;
 }
 
 .channelThumbnail {
@@ -38,13 +44,13 @@
 .viewCount {
   position: absolute;
   right: 15px;
-  top: 60px;
+  bottom: 30px;
 }
 
 .likeBarContainer {
   position: absolute;
   right: 15px;
-  top: 100px;
+  bottom: 35px;
   width: 300px;
   height: 5px;
 }
@@ -74,7 +80,7 @@
 .likeCountContainer {
   position: absolute;
   right: 15px;
-  top: 100px;
+  bottom: 0px;
   font-size: 12px;
   color: var(--teritary-text-color);
 }
@@ -101,11 +107,25 @@
   width: 175px;
 }
 
-@media only screen and (max-width: 1700px) {
+@media only screen and (max-width: 1500px) {
+  .videoOptions {
+    width: 350px;
+  }
+
+  .watchVideoInfo {
+    min-height: 150px;
+  }
+}
+
+@media only screen and (max-width: 1350px) {
   .theatreModeButton {
     display: none;
   }
 
+  .watchVideoInfo {
+    min-height: 130px;
+  }
+
   .videoOptions {
     width: 350px;
   }

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -1,5 +1,5 @@
 <template>
-  <ft-card class="relative">
+  <ft-card class="relative watchVideoInfo">
     <p
       class="videoTitle"
     >

src/renderer/themes.css

@@ -30,7 +30,7 @@
   --side-nav-color: #262626;
   --side-nav-hover-color: #212121;
   --side-nav-active-color: #303030;
-  --search-bar-color: #f5f5f5;
+  --search-bar-color: #262626;
   --logo-icon: url("/_icons/iconColorSmall.png");
   --logo-text: url("/_icons/textColorSmall.png");
 }
@@ -49,7 +49,7 @@
   --side-nav-color: #262626;
   --side-nav-hover-color: #212121;
   --side-nav-active-color: #303030;
-  --search-bar-color: #f5f5f5;
+  --search-bar-color: #212121;
   --logo-icon: url("/_icons/iconColorSmall.png");
   --logo-text: url("/_icons/textColorSmall.png");
 }

src/renderer/views/Watch/Watch.css

@@ -45,7 +45,25 @@
   position: static;
 }
 
-@media only screen and (max-width: 1700px) {
+@media only screen and (max-width: 1500px) {
+  .watchVideo {
+    width: 63%;
+  }
+
+  .videoPlayer {
+    width: calc(63% + 30px);
+  }
+
+  .theatreWatchVideo {
+    width: 85%;
+  }
+
+  .theatrePlayer {
+    width: calc(85% + 30px);
+  }
+}
+
+@media only screen and (max-width: 1350px) {
   .watchVideo {
     float: none;
     margin: 0 auto;