v2.1.0: binaries fix and improvements (#4)

* fix: tag branch build triggering * feat: package key words * fix: release * fix: release test 2.0.15 * fix: binaries * feat: auto fill and field jump * fix: enabled submit button on error * fix: messages and validations * feat: emojis on messages * feat: right click menu * fix: youtube-dl working dir * fix: messages and dependencies * feat: check for updates * fix: app icon * feat: standarized emojis * fix: size and demo * fix: status margin * fix: demo gif * feat: release badge
Markkop · Apr 26, 2020 · 3fa6167 · 3fa6167
1 parent b8530f4
commit 3fa6167
Show file tree

Hide file tree

Showing 18 changed files with 855 additions and 462 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -26,7 +26,11 @@ script:
         -v ~/.cache/electron:/root/.cache/electron \
         -v ~/.cache/electron-builder:/root/.cache/electron-builder \
         electronuserland/builder:wine \
-        /bin/bash -c "yarn --link-duplicates --pure-lockfile && yarn build"
+        /bin/bash -c "yarn --link-duplicates --pure-lockfile && yarn release --publish onTagOrDraft"
     else
       echo 'other build method'
     fi
+
+branches:
+  except:
+    - "/^v\\d+\\.\\d+\\.\\d+$/"
diff --git a/README.md b/README.md
@@ -1,17 +1,26 @@
-# :vhs: Youtube - Download and Cut
+# <img alt="Demo PrintsCreen" src="public/256x256.png" width="26"> Youtube - Download and Cut
 
 ![Repo status](https://www.repostatus.org/badges/latest/active.svg)
 [![Build Status](https://travis-ci.com/Markkop/yt-dlandcut.svg?branch=master)](https://travis-ci.com/Markkop/yt-dlandcut)
 ![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/markkop/yt-dlandcut)
 
-## What it is
+<kbd>
+  <img border="1" alt="Demo PrintsCreen" src="https://i.imgur.com/hx48SzZ.gif" >
+</kbd>
+
+## About
 
 This app **downloads** youtube videos using [youtube-dl](https://youtube-dl.org/) and **cuts** them with [ffmpeg](https://www.ffmpeg.org/) given starting and ending times.  
 Currently it only supports **Windows** e **Linux**.
 
-## How to use
+## Usage
 
 Download the [latest release](https://github.com/Markkop/yt-dlandcut/releases/latest) for Linux (**.appImage**) or Windows (**.exe**) at the [releases](https://github.com/Markkop/yt-dlandcut/releases/) page.
+The first time you run this app (or if required `binaries` are not found), the app will download youtube-dl and ffmpeg files according to your OS.  
+Currently they're being download from [youtube-dl](https://github.com/ytdl-org/youtube-dl/releases/latest) and [ffmpeg-static](https://github.com/eugeneware/ffmpeg-static/releases/latest) latest releases.  
+After finishing, a folder inside your home folder named `yt-dlandcut` will contain the files.
+If you run into any problem, please [let me know](https://twitter.com/heymarkkop).
 
 ## Options
 
@@ -22,12 +31,13 @@ Download the [latest release](https://github.com/Markkop/yt-dlandcut/releases/la
 - **Open on finish**: opens cut video/audio
 - **Custom file name**: instead of video's title
 
-## How to develop
+## Development
 
-Clone this repository and run `yarn` to install dependencies.  
 Make sure to have `node` and `npm` installed.
+Run `yarn` to install dependencies and `yarn start` to transpile and run the code.
+By running `yarn build`, electron-builder will build a package inside `dist` folder according to your current operational system and following `build` options on `package.json`
 
-## How to deploy/release
+## Deploy/Release
 
 It looks like `electron-builder` already does a lot when [releasing](https://www.electron.build/configuration/publish) a new version of an Electron app to github.
 

diff --git a/bin/ffmpeg.exe b/bin/ffmpeg.exe
diff --git a/bin/youtube-dl.exe b/bin/youtube-dl.exe
diff --git a/package.json b/package.json
@@ -1,50 +1,56 @@
 {
   "name": "yt-dlandcut",
-  "version": "2.0.14",
+  "version": "2.1.0",
   "description": "Download and Cut an Youtube video by its starting and ending times",
   "repository": "github:markkop/yt-dlandcut",
   "main": "build/electron/main.js",
   "scripts": {
     "postinstall": "electron-builder install-app-deps",
-    "start": "electron .",
+    "start": "yarn transpile && electron .",
     "transpile": "babel src --out-dir build",
     "pack": "electron-builder --dir",
     "build": "yarn transpile && electron-builder",
     "release": "yarn transpile && electron-builder --win --linux"
   },
-  "keywords": [],
-  "author": "Marcelo 'Mark' Kopmann",
-  "license": "ISC",
+  "keywords": [
+    "youtube-dl",
+    "ffmpeg",
+    "electron",
+    "travisci"
+  ],
+  "author": "Marcelo 'Mark' Kopmann <[email protected]> (https://markkop.dev)",
+  "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "ffmpeg-static": "^4.1.1",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "axios": "^0.19.2",
     "fluent-ffmpeg": "^2.1.2",
-    "youtube-dl": "^3.0.2"
+    "youtube-dl": "^3.0.2",
+    "electron-context-menu": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/node": "^7.8.7",
+    "@babel/cli": "^7.8.4",
     "@babel/preset-env": "^7.9.0",
     "electron": "^8.2.3",
     "electron-builder": "^22.5.1"
   },
   "build": {
     "appId": "com.electron.yt-dlandcut",
-    "asar": false,
     "files": [
       "build/**/*",
-      "bin/*",
       "public/*",
-      "node_modules/youtube-dl/bin/youtube-dl",
       "package.json"
     ],
     "linux": {
-      "target": "appImage"
+      "target": "appImage",
+      "category": "Utility",
+      "icon": "public/256x256.png"
     },
     "win": {
-      "target": "portable"
+      "target": "portable",
+      "icon": "public/256x256.ico"
     },
     "publish": "github"
   }

diff --git a/public/256x256.ico b/public/256x256.ico
diff --git a/public/256x256.png b/public/256x256.png
diff --git a/public/index.css b/public/index.css
@@ -2,12 +2,13 @@ body {
   --color1: #ffe74c;
   --color2: #ff5964;
   --color3: #ffffff;
-  --color4: #6bf178;
+  --color4: #9bfda5;
   --color5: #35a7ff;
   --color6: #004e64;
 
   margin: 0;
   padding: 0;
+  min-height: 100vh;
 
   font-family: 'Roboto', sans-serif;
   background-image: linear-gradient(141deg, var(--color3) 0%, var(--color5) 100%);
@@ -22,7 +23,7 @@ header {
   justify-content: space-between;
   padding: 5px 20px;
   margin: auto;
-  height: 5vh;
+  height: 30px;
   background-image: linear-gradient(141deg, var(--color1) 0%, var(--color2) 100%);
   border-bottom: 1px solid black;
 }
@@ -41,17 +42,19 @@ header {
 }
 
 .header-info {
-  margin: 5px;
   font-size: 18px;
-  margin: auto 0;
+  margin: auto 5px;
   font-weight: bold;
 }
 
 .content {
-  margin: auto;
+  margin: 10px;
   padding: 0;
+  height: 100%;
 }
 
+/* Form */
+
 .form-container {
   display: flex;
   justify-content: center;
@@ -128,6 +131,8 @@ input#filename {
   width: 150px;
 }
 
+/* Status/Log */
+
 .status-container {
   min-height: 100px;
   height: fit-content;
@@ -137,20 +142,36 @@ input#filename {
 }
 
 #status {
+  margin: 0;
+}
+
+#status p {
+  margin: 3px 0;
   color: var(--color4);
   font-size: 12px;
-  line-height: 1.6;
+}
+
+/* Twemoji */
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
 }
 
 /* Footer */
 
 footer {
+  display: contents;
+  position: absolute;
+  width: 100%;
+  height: 40px;
+}
+
+.footer-container {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
-  position: absolute;
-  width: 100%;
-  height: 10vh;
 }
 
 .footer-text {

diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self' https://twemoji.maxcdn.com"
+    />
+    <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
     <link rel="stylesheet" type="text/css" href="./index.css" />
     <title>YouTube - Download and Cut</title>
@@ -11,6 +16,7 @@
   <body>
     <header>
       <div class="logo-container">
+        <img src="256x256.png" alt="logo" width="32" height="32" />
         <p class="header-info">YouTube - Download and Cut</p>
       </div>
       <div class="github-project">
@@ -30,7 +36,7 @@
             type="text"
             name="url"
             id="url"
-            value="https://www.youtube.com/watch?v=N9qjR6teBNw"
+            placeholder="https://www.youtube.com/watch?v=N9qjR6teBNw"
             pattern="^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.*"
             title="Youtube url"
             required
@@ -44,7 +50,7 @@
                   type="text"
                   name="startTime"
                   id="startTime"
-                  value="00:00:20"
+                  placeholder="00:00:20"
                   pattern="\d{2}:\d{2}:\d{2}"
                   title="HH:MM:SS"
                   maxlength="8"
@@ -58,7 +64,7 @@
                   type="text"
                   name="endTime"
                   id="endTime"
-                  value="00:00:22"
+                  placeholder="00:00:22"
                   pattern="\d{2}:\d{2}:\d{2}"
                   title="HH:MM:SS"
                   maxlength="8"
@@ -94,48 +100,49 @@
         </form>
       </section>
       <section class="status-container">
-        <p id="status">Progress will appear here ;)</p>
+        <div id="status"></div>
       </section>
       <footer>
-        <div class="footer-text">
-          <p class="myblog">Made by Marcelo "Mark" Kopmann</p>
-          <p>powered by Electron, youtube-dl and ffmpeg</p>
-          <p class="dayu-twitter">favicon by @dayuwastaken</p>
-        </div>
-        <div class="socials">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="github-personal"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"
-            />
-          </svg>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="twitter-personal"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-.139 9.237c.209 4.617-3.234 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.08-4.03 3.199-4.03.943 0 1.797.398 2.395 1.037.748-.147 1.451-.42 2.086-.796-.246.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.439.656-.996 1.234-1.639 1.697z"
-            />
-          </svg>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="linkedin-personal"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
-            />
-          </svg>
+        <div class="footer-container">
+          <div class="footer-text">
+            <p class="myblog">Made by Marcelo "Mark" Kopmann</p>
+            <p>powered by Electron, youtube-dl and ffmpeg</p>
+          </div>
+          <div class="socials">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="github-personal"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"
+              />
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="twitter-personal"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-.139 9.237c.209 4.617-3.234 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.08-4.03 3.199-4.03.943 0 1.797.398 2.395 1.037.748-.147 1.451-.42 2.086-.796-.246.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.439.656-.996 1.234-1.639 1.697z"
+              />
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="linkedin-personal"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
+              />
+            </svg>
+          </div>
         </div>
       </footer>
     </div>