Version 2 - ElectronPlayer

.travis.yml

@@ -1,50 +1,44 @@
-sudo: true
-
-branches:
-  only:
-    - master
-
-osx_image: xcode8.3
-
 language: node_js
-
-matrix:
-  include:
-    - os: osx
-    - os: linux
-
 node_js:
-  - 8
+  - "11"
+
+os:
+  - linux
+  - osx
+#  - windows # TODO: Enable Once Widevine Package Supports Windows
 
 cache:
   yarn: true
   directories:
     - node_modules
-    - app/node_modules
+    # TODO: Are These Being Used
+    - $HOME/.cache/electron
+    - $HOME/.cache/electron-builder
 
 addons:
   apt:
-    sources:
-      - ubuntu-toolchain-r-test
     packages:
-      - icnsutils
-      - graphicsmagick
-      - xz-utils
-      - xorriso
-      - xvfb
-      - libgnome-keyring-dev
-
-install:
-  - yarn
-  - cd app && yarn && cd ..
-  - export DISPLAY=':99.0'
-  - "Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &"
+      - graphviz
 
-before_script:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start &
-  - sleep 3
+install: yarn --pure-lockfile
 
 script:
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then yarn dist:linux; fi
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then yarn dist:mac; fi
+  - yarn test
+  - if [ "$TRAVIS_TAG" ]; then yarn build; fi
+
+deploy:
+  - provider: releases
+    api-key: $GH_TOKEN
+    file_glob: true
+    file:
+      - dist/*.dmg
+      - dist/*.AppImage
+    skip_cleanup: true
+    on:
+      tags: true
+  - provider: snap
+    snap: dist/*.snap
+    channel: stable
+    skip_cleanup: true
+    on:
+      tags: true

README.md

@@ -1,16 +1,45 @@
-[![Build Status](https://travis-ci.org/oscartbeaumont/Netflix-Desktop.svg?branch=master)](https://travis-ci.org/oscartbeaumont/Netflix-Desktop)
-# Netflix Desktop
-A Desktop App (Basically A Wrapper) For Netflix Written Using Electron. This Application Supports Windows (.msi), MacOS (.app) and Linux (Binary in Folder).
-
-# How to Use
-Get The Prebuilt Binarys From The Github Releases Page Linked Below.
-## [Download Here](https://github.com/oscartbeaumont/Netflix-Desktop/releases)
-# How To Build
+# ElectronPlayer
+
+[![Build Status](https://travis-ci.org/oscartbeaumont/ElectronPlayer.svg?branch=master)](https://travis-ci.org/oscartbeaumont/ElectronPlayer)
+[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/en/snap-store-white.svg)](https://snapcraft.io/electronplayer)
+
+An Electron Based Web Video Services Player. Supporting Netflix, Youtube, Twitch, Floatplane And More. This is the successor to [Netflix-Desktop](https://github.com/oscartbeaumont/Netflix-Desktop).
+
+![ElectronPlayer Menu](docs/ElectronPlayer.png)
+
+The main menu interface.
+
+## Installation
+
+### Please note Windows currently is only partially supported. It doesn't support the Widevine package I am using but I am planning to fix this in the future
+
+[Click Here](https://github.com/oscartbeaumont/ElectronPlayer/releases) to go to the Github Releases and download the correct installer for your platform. If you are running Linux you can also install this application via a snap.
+
+```bash
+snap install electronplayer
 ```
-git clone https://github.com/oscartbeaumont/Netflix-Desktop.git
-cd Netflix-Desktop/
+
+## Contributors
+
+A huge thanks to the following people for helping shape this project.
+
+- [Austin Kregel](https://github.com/austinkregel)
+
+## Developing
+
+```bash
+git clone https://github.com/oscartbeaumont/ElectronPlayer.git
+cd ElectronPlayer/
 yarn
-yarn dev #Development
-yarn dist #Output Binarys
+yarn start
 ```
-This Will Use Electron-builder to Compile And Create The Distributable Binarys.
+
+## TODO
+
+- Update Widevine Package So Electron Can Be Updated & Tests Can Be Added
+- Menubar Transparency Glitch On Mac
+- Netflix breaks when relaunching window (eg. Enabling PIP)
+- Copy and Paste Support
+- Add dragable part to window (Maybe embed extra css on the body)
+- App Tests
+- Code Signing (Using Self Signed Cert Possibly)

package.json

@@ -1,34 +1,28 @@
 {
-  "name": "Netflix",
-  "description": "A Desktop App For Netflix Written Using Electron.",
+  "name": "ElectronPlayer",
+  "version": "2.0.0",
+  "description": "An Electron Based Web Video Services Player. Supporting Netflix, Youtube, Twitch, Floatplane And More",
+  "main": "src/main.js",
+  "scripts": {
+    "start": "electron .",
+    "test": "echo 'TODO: Tests'",
+    "build": "electron-builder -p never"
+  },
+  "repository": "https://github.com/oscartbeaumont/ElectronPlayer.git",
   "author": "Oscar Beaumont <oscar@otbeaumont.me> (https://otbeaumont.me)",
-  "version": "1.0.1",
   "license": "MIT",
-  "scripts": {
-    "start": "electron-webpack dev",
-    "compile": "electron-webpack",
-    "dist": "yarn compile && electron-builder --publish onTagOrDraft",
-    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null",
-    "dist:linux": "yarn compile && electron-builder -l --publish onTagOrDraft",
-    "dist:mac": "yarn compile && electron-builder -m --publish onTagOrDraft",
-    "dist:windows": "yarn compile && electron-builder -w --publish onTagOrDraft"
+  "devDependencies": {
+    "electron": "^3.1.7",
+    "electron-builder": "^20.39.0"
   },
   "dependencies": {
-    "electron-settings": "^3.2.0",
+    "electron-store": "^3.0.0",
     "electron-widevinecdm": "^7.0.0",
-    "source-map-support": "^0.5.11"
-  },
-  "devDependencies": {
-    "electron": "3.1.7",
-    "electron-builder": "^20.39.0",
-    "electron-webpack": "^2.6.2",
-    "webpack": "^4.29.6"
-  },
-  "resolutions": {
-    "webpack-sources": "1.0.1"
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5"
   },
   "build": {
-    "appId": "me.otbeaumont.Netflix",
+    "appId": "me.otbeaumont.ElectronPlayer",
     "mac": {
       "category": "public.app-category.entertainment"
     },

src/client-loader.js

@@ -0,0 +1,66 @@
+/* This is injecting into remote webpages before redirecting.
+  This is done to show the user that a new page is loading,
+  instead of looking like it is doing nothing. This is especially
+  for pages like Netflix that take a long time to load.
+*/
+
+console.log("ElectronPlayer: Injected Loader");
+
+document.head.innerHTML = `<title>Loading...</title>`;
+
+document.body.innerHTML = `
+  <div class="electronplayer_spinner">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <style>
+  .electronplayer_spinner {
+    display: inline-block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  .electronplayer_spinner div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 51px;
+    height: 51px;
+    margin: 6px;
+    border: 6px solid #fff;
+    border-radius: 50%;
+    animation: electronplayer_spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+  }
+
+  .electronplayer_spinner div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+
+  .electronplayer_spinner div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+
+  .electronplayer_spinner div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+
+  @keyframes electronplayer_spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>
+`;

src/default-services.js

@@ -0,0 +1,29 @@
+module.exports = [
+  {
+    name: "Netflix",
+    logo: "services/netflix.png",
+    url: "https://netflix.com/browse",
+    width: "75px",
+    height: "125px",
+    padding: "0"
+  },
+  {
+    name: "YouTube",
+    logo: "services/youtube.png",
+    url: "https://youtube.com",
+    width: "120px",
+    height: "95px",
+    padding: "15px 0"
+  },
+  {
+    name: "Twitch",
+    logo: "services/twitch.png",
+    url: "https://twitch.tv",
+    width: "100px"
+  },
+  {
+    name: "Floatplane",
+    logo: "services/floatplane.png",
+    url: "https://floatplane.com/"
+  }
+];