Skip to content

Commit

Permalink
Offline status screen added
Browse files Browse the repository at this point in the history
  • Loading branch information
marcosrg9 committed Sep 28, 2022
1 parent 0ae138c commit c56e8e7
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 46 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ msi-packager.js
.DS_Store
package-lock.json
*.js
!renderers/main/injection.js
!renderers/main/injection.js
!renderers/main/offline_banner.js
36 changes: 17 additions & 19 deletions README.es-ES.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

# **YouTube TV**
[![Downloads](https://img.shields.io/github/downloads/marcosrg9/YouTubeTV/total.svg?color=FF0000&label=Total%20downloads)](https://github.com/marcosrg9/YouTubeTV/releases/)
[![Downloads](https://img.shields.io/github/downloads/marcosrg9/YouTubeTV/v2.3.2/total.svg?color=blue&label=2.3.2%20Downloads)](https://github.com/marcosrg9/YouTubeTV/releases/2.3.2)
[![Downloads](https://img.shields.io/github/downloads/marcosrg9/YouTubeTV/v2.3.4/total.svg?color=blue&label=2.3.4%20Downloads)](https://github.com/marcosrg9/YouTubeTV/releases/2.3.4)

Cliente de YouTube TV sencillo para escritorio basado en [electron](https://www.electronjs.org/). Puede conectar un dispositivo compatible, como un teléfono o un equipo con Google Chrome y enviar los vídeos a la aplicación para visualizarlos.

Expand All @@ -15,8 +15,8 @@ Cliente de YouTube TV sencillo para escritorio basado en [electron](https://www.

Este readme está disponible en los siguientes idiomas:

- 🇺🇸 [Inglés](./README.md) ([alealclag](https://github.com/alealclag))
- 🇪🇸 Español (marcosrg9)
- 🇺🇸 [Inglés](./README.md)
- 🇪🇸 Español

Implementa un servidor [DIAL](https://en.wikipedia.org/wiki/Discovery_and_Launch) (basado en [SSDP](https://en.wikipedia.org/wiki/Simple_Service_Discovery_Protocol)) para permitir la conexión desde dispositivos que usan este mismo protocolo (limitado a YouTube en esta aplicación).

Expand All @@ -37,14 +37,14 @@ El proyecto se puede descargar compilado y listo para su uso. Disponible para Li

| Platform | Architecture | Link |
|---------------|:----------------:|:------:|
| Windows | x32/x64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2.exe) |
| Linux (Deb) | x64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-amd64.deb) |
| Linux (Deb) | ARM64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-arm64.deb) |
| Linux (Deb) | ARMv7l | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-armv7l.deb) |
| Linux (RPM) | x64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-amd64.rpm) |
| Linux (RPM) | ARM | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-armv7l.rpm) |
| macOS | Intel (x64) | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2.dmg) |
| macOs | Apple Chip (ARM) | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-arm64.dmg) |
| Windows | x32/x64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4.exe) |
| Linux (Deb) | x64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-amd64.deb) |
| Linux (Deb) | ARM64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-arm64.deb) |
| Linux (Deb) | ARMv7l | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-armv7l.deb) |
| Linux (RPM) | x64 | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-amd64.rpm) |
| Linux (RPM) | ARM | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-armv7l.rpm) |
| macOS | Intel (x64) | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4.dmg) |
| macOs | Apple Chip (ARM) | [Descargar](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-arm64.dmg) |

[Todas las builds](https://github.com/marcosrg9/YouTubeTV/releases/latest)

Expand All @@ -55,16 +55,14 @@ El proyecto se puede descargar compilado y listo para su uso. Disponible para Li
- Alternar visibilidad del cursor: <kbd>Ctrl</kbd> + <kbd>A</kbd>.


## ⚙️ Tests
No comprobado en Windows y macOS para plataformas ARM, excepto linux ARM para Raspberry (armv7l).

- ✅ Windows 10 x64 - win32_x64/ia32.
- ✅ Ubuntu 19.04 x64 (VM) - linux_x64.
- ✅ macOS 11.4 Big Sur (MacBook Air) - darwin_x64 (Marcos).
- ✅ macOS 11.2.3 Big Sur (MacBook Air) - darwin_x64 (Marcos).
- ✅ macOS 11.1 Big Sur (MacBook Air) - darwin_x64 ([Mateo Fortea](https://github.com/mfortea)).
- ✅ Rasbian 10 Buster (Raspberry Pi 4 B+) - linux_armv7l.
## 🔌 Mensaje fuera de conexión – [Última actualización – 2.3.4]

No comprobado en Windows y macOS para plataformas ARM, excepto linux ARM para Raspberry (armv7l).
Cuando YouTube TV carga sin conexión, mostrará un mensaje indicando que no es posible conectarse con los servidores de YouTube.

Cuando el renderizador detecte conectividad, lo volverá a intentar nuevamente.
<img src="./readme/offline_message_es.png" with="300px">

## 🔧 Configuración

Expand Down
35 changes: 16 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

# **YouTube TV**
[![Downloads](https://img.shields.io/github/downloads/marcosrg9/YouTubeTV/total.svg?color=FF0000&label=Total%20downloads)](https://github.com/marcosrg9/YouTubeTV/releases/)
[![Downloads](https://img.shields.io/github/downloads/marcosrg9/YouTubeTV/v2.3.2/total.svg?color=blue&label=2.3.2%20Downloads)](https://github.com/marcosrg9/YouTubeTV/releases/2.3.2)
[![Downloads](https://img.shields.io/github/downloads/marcosrg9/YouTubeTV/v2.3.4/total.svg?color=blue&label=2.3.4%20Downloads)](https://github.com/marcosrg9/YouTubeTV/releases/2.3.4)

Simple YouTube TV Client for desktop based on [electron](https://www.electronjs.org/). It can connect with a compatible device, like a phone or a computer with Google Chrome and send videos to the application to visualize them.

Expand All @@ -15,8 +15,8 @@ Simple YouTube TV Client for desktop based on [electron](https://www.electronjs.

This readme is available in the following languages:

- 🇺🇸 English ([alealclag](https://github.com/alealclag))
- 🇪🇸 [Spanish](./README.es-ES.md) (marcosrg9)
- 🇺🇸 English
- 🇪🇸 [Spanish](./README.es-ES.md)

It implements a [DIAL](https://en.wikipedia.org/wiki/Discovery_and_Launch) server (based in [SSDP](https://en.wikipedia.org/wiki/Simple_Service_Discovery_Protocol)) to allow connection from devices that use this same protocol (limited to YouTube in this application).

Expand All @@ -33,14 +33,14 @@ The project can be downloaded already built and ready to use. Available for Linu

| Platform | Architecture | Link |
|---------------|:----------------:|:------:|
| Windows | x32/x64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2.exe) |
| Linux (Deb) | x64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-amd64.deb) |
| Linux (Deb) | ARM64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-arm64.deb) |
| Linux (Deb) | ARMv7l | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-armv7l.deb) |
| Linux (RPM) | x64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-amd64.rpm) |
| Linux (RPM) | ARM | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-armv7l.rpm) |
| macOS | Intel (x64) | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2.dmg) |
| macOs | Apple Chip (ARM) | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.2/YouTube.TV.2.3.2-arm64.dmg) |
| Windows | x32/x64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4.exe) |
| Linux (Deb) | x64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-amd64.deb) |
| Linux (Deb) | ARM64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-arm64.deb) |
| Linux (Deb) | ARMv7l | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-armv7l.deb) |
| Linux (RPM) | x64 | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-amd64.rpm) |
| Linux (RPM) | ARM | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-armv7l.rpm) |
| macOS | Intel (x64) | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4.dmg) |
| macOs | Apple Chip (ARM) | [Download](https://github.com/marcosrg9/YouTubeTV/releases/download/v2.3.4/YouTube.TV.2.3.4-arm64.dmg) |

[All builds](https://github.com/marcosrg9/YouTubeTV/releases/latest)

Expand All @@ -50,16 +50,13 @@ The project can be downloaded already built and ready to use. Available for Linu
- Developer Tools: <kbd>Ctrl</kbd> + <kbd>D</kbd>.
- Change cursor visibility: <kbd>Ctrl</kbd> + <kbd>A</kbd>.

## ⚙️ Tests
Not tested on Windows and macOS for ARM platforms, except for ARM Linux for Raspberry (armv7l).

- ✅ Windows 10 x64 - win32_x64/ia32.
- ✅ Ubuntu 19.04 x64 (VM) - linux_x64.
- ✅ macOS 11.4 Big Sur (MacBook Air) - darwin_x64 (Marcos).
- ✅ macOS 11.2.3 Big Sur (MacBook Air) - darwin_x64 (Marcos).
- ✅ macOS 11.1 Big Sur (MacBook Air) - darwin_x64 ([Mateo Fortea](https://github.com/mfortea)).
- ✅ Rasbian 10 Buster (Raspberry Pi 4 B+) - linux_armv7l.
## 🔌 Offline message – [Last update – 2.3.4]
When YouTube TV loads offline, it will display a message indicating that it has been unable to connect to YouTube's servers.

Not tested on Windows and macOS for ARM platforms, except for ARM Linux for Raspberry (armv7l).
When the renderer detects connectivity, it will try again.
<img src="./readme/offline_message_en.png" with="300px">

## 🔧 Configuration

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "youtube-tv-electron",
"productName": "YouTube TV",
"version": "2.3.3",
"version": "2.3.4",
"description": "Cliente de YouTube TV sencillo para escritorio basado en electron.",
"main": "main.js",
"scripts": {
Expand Down
Binary file added readme/offline_message_en.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added readme/offline_message_es.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 24 additions & 6 deletions renderers/main/main.renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export interface resolution {
export class Renderer {

/** userAgent allowed by YouTube TV. */
private userAgent: string = 'Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.77 Large Screen Safari/534.24 GoogleTV/092754';
private readonly userAgent: string = 'Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.77 Large Screen Safari/534.24 GoogleTV/092754';

/** Electron process */
private window: BrowserWindow;
Expand All @@ -43,7 +43,7 @@ export class Renderer {
private _fullScreen: boolean = false;

/** YouTube TV url with path/params */
private _url: string = 'https://www.youtube.com/tv?';
private readonly _url: string = 'https://www.youtube.com/tv?';

/** JavaScript injection code */
private jsic: string = '';
Expand Down Expand Up @@ -227,20 +227,38 @@ export class Renderer {
* If value is '__DFT__', the default YouTube TV url will be loaded.
* */
public set url(value: string) {
let url = value;
if (typeof value !== 'string') return;
if (value.length < 1) return;
if (value === '__DFT__') value = '';
if (value === '__DFT__') url = '';

this.window.loadURL(this._url + value, { userAgent: this.userAgent })
//this.injectJSCode();
this.window.loadURL(this._url + url, { userAgent: this.userAgent })
.catch(async() => {

ipcMain.once('restored', () => { this.url = value });

const offline = await readFile(join(__dirname, 'offline_banner.js'), { encoding: 'utf8' });
this.window.webContents.executeJavaScript(offline);

})
}

set urlByDial (value: string) {
public set urlByDial (value: string) {
if (typeof value !== 'string') return;
if (value.length < 1) return;

this.fullScreen = true;

this.window.webContents.loadURL(this._url + value, { userAgent: this.userAgent })
// This should never happen...
.catch(async() => {

ipcMain.once('restored', () => { this.url = value });

const offline = await readFile(join(__dirname, 'offline_banner.js'), { encoding: 'utf8' });
this.window.webContents.executeJavaScript(offline);

})
}

public set fullScreen(value: boolean | null) {
Expand Down
95 changes: 95 additions & 0 deletions renderers/main/offline_banner.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/**
* Mensaje de estado de fuera de conexión.
*
* Cuando el renderizador se carga y la conexión con los servidores de YouTube
* no está disponible, este script mostrará un mensaje de estado.
*/

const ipc = window.require('electron').ipcRenderer;
const styles = document.createElement('style');
const banner_cont = document.createElement('div');
const offline_picture = document.createElement('div');
const offline_message = document.createElement('div');
const offline_description = document.createElement('div');

const msgDB = {
es: {
msg: 'No tienes conexión',
des: 'Parece que no se puede establecer la conexión con los servidores de YouTube.<br>Comprueba la conexión, así como los parámetros, enrutadores y concentradores.<br>Cuando se detecte conectividad, volveremos a intentarlo automaticamente.'
},
en: {
msg: 'You\'re offline',
des: 'It seems that the connection to the YouTube servers cannot be established.<br>Check the connection, as well as the parameters, routers and hubs.<br>When connectivity is detected, we will automatically try again.'
}
}

let msg = msgDB.en;

Object.keys(msgDB).forEach(lang => {
if (lang === navigator.language) msg = msgDB[lang];
});

styles.innerHTML = `
* {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
body {
background: #181818;
}
.connection_err {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: fade-in 2s forwards;
}
.connection_err > .offline_message {
font-size: 72pt;
font-weight: 500;
color: #959595;
}
.connection_err > .offline_description {
font-size: 48pt;
color: #525252;
width: 2200px;
text-align: center;
margin-top: 40px;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
`

offline_picture.innerHTML = '<svg viewbox="0 0 48 48" height="48" width="48" style="width: 200px; height: 200px"><path style="fill: #959595" d="m41.25 44.4-5.8-5.9H12.6q-3.95 0-6.7-2.7t-2.75-6.7q0-3.8 2.65-6.45Q8.45 20 11.9 19.8q-.05-.65.275-1.8t.875-1.85l-8.1-8.1L6.5 6.5l36.35 36.35ZM12.6 36.3h20.65L14.8 17.9q-.6.75-.9 1.875-.3 1.125-.3 2.225h-1q-3.05 0-5.15 2.025-2.1 2.025-2.1 5.025 0 3.05 2.125 5.15Q9.6 36.3 12.6 36.3Zm11.35-9.25Zm18.25 9.8-1.65-1.65q1-.8 1.55-1.8t.55-2.3q0-2.05-1.525-3.575Q39.6 26 37.5 26h-3.25v-4.05q0-4.3-2.975-7.275Q28.3 11.7 24 11.7q-1.4 0-2.875.4t-2.675 1.2l-1.55-1.65q1.85-1.15 3.5-1.65t3.55-.5q5.05 0 8.625 3.45t3.875 8.45v2.45h1.25q3.05.2 5.1 2.225t2.05 5.025q0 1.5-.625 3.05-.625 1.55-2.025 2.7Zm-12.7-12.6Z"/></svg>'
offline_message.innerHTML = msg.msg
offline_description.innerHTML = msg.des


document.body.appendChild(styles);
document.body.appendChild(banner_cont);

banner_cont.classList.add('connection_err');
offline_message.classList.add('offline_message');
offline_description.classList.add('offline_description');


banner_cont.appendChild(offline_picture);
banner_cont.appendChild(offline_message);
banner_cont.appendChild(offline_description);


// When online event fires, send a signal to the main process.
window.ononline = () => ipc.send('restored');

0 comments on commit c56e8e7

Please sign in to comment.