Skip to content
This repository has been archived by the owner on Dec 30, 2021. It is now read-only.

MiniPlayer Revision for Radiant Player 2.0 #17

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

MiniPlayer Revision for Radiant Player 2.0 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
792e1a7
MiniPlayer Revision for Radiant Player 2.0
BarakaAka1Only Apr 29, 2017
0d75630
Merge remote-tracking branch 'radiant-player/master'
BarakaAka1Only Apr 30, 2017
af90b59
Fixes ES-Lint issues
BarakaAka1Only Apr 30, 2017
127a529
ES-Lint Fix Part 2
BarakaAka1Only Apr 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@
"lodash.throttle": "^4.1.1",
"node-notifier": "^5.1.2",
"osx-mouse": "^1.2.1",
"radiant.js": "^0.1.1",
"rc-slider": "^6.3.1",
"react": "^15.4.2",
"react-desktop": "^0.2.19",
"react-dom": "^15.4.2",
"react-electron-web-view": "^2.0.1",
"react-redux": "^5.0.3",
"react-youtube": "^7.4.0",
"redux": "^3.6.0",
"redux-actions": "^2.0.1",
"redux-electron-store": "^0.4.1",
Expand Down
8 changes: 8 additions & 0 deletions src/gpm/gpm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ipcRenderer } from 'electron';
import { connectToIPC } from '../ipc';
import { setupThemes } from './themes';
import setupGmusic from './gmusic';
import setupRadiant from './radiant';
import setupMouse from './mouse';

window.RADIANT_STARTING = true;
Expand Down Expand Up @@ -49,6 +50,12 @@ const initThemes = () => {
window.RADIANT_THEMES_INITIALIZED = true;
};

const initRadiant = () => {
if (window.RADIANT_RADIANT_INITIALIZED) return;
window.themes = setupRadiant(ipcInterface);
window.RADIANT_RADIANT_INITIALIZED = true;
};

const initMouse = () => {
if (window.RADIANT_MOUSE_INITIALIZED) return;
setupMouse(ipcInterface);
Expand All @@ -59,6 +66,7 @@ const setup = async () => {
await retry1000x60(initThemes);
await retry1000x60(initMouse);
await retry1000x60(initGmusic);
await retry1000x60(initRadiant);

ipcInterface.emit('ready');
};
Expand Down
24 changes: 24 additions & 0 deletions src/gpm/radiant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Radiant from 'radiant.js';

const setupRadiant = (ipcInterface) => {
const radiant = new Radiant(window);
window.Radiant = radiant;

ipcInterface.exposeObject({
key: 'radiant',
object: radiant,
});

// Proxy events over IPC
ipcInterface.proxyEvents({
object: radiant,
throttle: 100,
events: [
'change:ad',
'change:radiant-playback',
'change:radiant',
],
});
};

export default setupRadiant;
1 change: 1 addition & 0 deletions src/main/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ export const init = () => {
search: () => ipcInterface.emit('search'),
goBack: () => ipcInterface.emit('goBack'),
goForward: () => ipcInterface.emit('goForward'),
rollDice: () => ipcInterface.emit('rollDice'),
};

const menuRenderer = new MenuRenderer(menuActions);
Expand Down
11 changes: 10 additions & 1 deletion src/main/miniplayer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,18 @@
}
}());
</script>
<style id="artwork"></style>
</head>
<body>
<div id="root"></div>
<miniplayer>
<svg width='0' height='0'><defs><clipPath id="radiantArrow" data-baraka clipPathUnits="objectBoundingBox"><path d="M1,0.9L0.5,0.1L0,0.9H1z"></path></clipPath></defs>
<defs><clipPath id="radiantArrowDiced" data-baraka clipPathUnits="objectBoundingBox"><path fill="#F35403" d="M0.5,0.1L1,0.9H0.5V0.1z"></path>
<path fill="#F7790F" d="M0.5,0.1v0.8H0L0.5,0.1z"></path></clipPath></defs></svg>
<artwork></artwork>
<gradient></gradient>
<canvas id="miniplayer" width="356" height="364"></canvas>
<div id="root" class="mini align"></div>
</miniplayer>
<script>
(function() {
const script = document.createElement('script');
Expand Down
201 changes: 188 additions & 13 deletions src/main/miniplayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { BrowserWindow, ipcMain, Tray } from 'electron';
import { BrowserWindow, ipcMain, Tray, session } from 'electron';
import path from 'path';

import { connectToIPC } from '../ipc';
Expand All @@ -12,8 +12,19 @@ const iconPath = getPath('trayicon.png');

let tray = null;
let miniplayer = null;
let miniplayer_docked = null; // eslint-disable-line camelcase
let positioner = null;
let positioner_docked = null; // eslint-disable-line
let cachedPosition = null;
let isTop = !1; // eslint-disable-line no-unused-vars
let vol = 100;

/* Baraka */
const Param = {
Arrow: 8,
Width: 356,
Height: 356,
};

const hideWindow = () => {
if (!miniplayer) return;
Expand All @@ -25,54 +36,153 @@ const clearWindow = () => {
};

const createWindow = () => {
miniplayer = new BrowserWindow({
width: 400,
height: 240,
const options = {
width: Param.Width,
height: Param.Height + Param.Arrow,
show: false,
frame: false,
transparent: true,
resizable: false,
});
};

miniplayer = new BrowserWindow(options);

// options.parent = miniplayer;

miniplayer_docked = new BrowserWindow(options); // eslint-disable-line camelcase

positioner = new Positioner(miniplayer);
positioner_docked = new Positioner(miniplayer_docked); // eslint-disable-line camelcase

miniplayer.on('blur', hideWindow);

miniplayer.on('close', clearWindow);

/**
* In order to play YT videos without restrictions we need to trick YT
* to making it be Google Music on said BrowserWindows :)
*/
session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
// referrer?
details.requestHeaders.referer = 'https://play.google.com/music/listen'; // eslint-disable-line no-param-reassign
callback({ cancel: false, requestHeaders: details.requestHeaders });
});

miniplayer.loadURL(`file://${path.resolve(path.join(__dirname, '/miniplayer.html'))}`);

miniplayer_docked.loadURL(`file://${path.resolve(path.join(__dirname, '/miniplayer.html'))}`);
};

const showMiniplayer = (trayPosition) => {
const showMiniplayer = (bounds, d) => {
if (!miniplayer) createWindow();

let position = trayPosition;
let position = bounds;
let position_docked = position; // eslint-disable-line camelcase

if (trayPosition && trayPosition.x !== 0) {
cachedPosition = trayPosition;
if (bounds && bounds.x !== 0) {
cachedPosition = bounds;
} else if (cachedPosition) {
position = cachedPosition;
position_docked = position; // eslint-disable-line camelcase
}

let noBoundsPosition = null;
if (position === undefined || position.x === 0) {
if ((position === undefined ||
position.x === 0 ||
position_docked === undefined || // eslint-disable-line camelcase
position_docked.x === 0)) { // eslint-disable-line camelcase
noBoundsPosition = (process.platform === 'win32') ? 'bottomRight' : 'topRight';
}

position = positioner.calculate(noBoundsPosition || 'trayCenter', position);
position_docked = position; // eslint-disable-line camelcase

/* Baraka */
miniplayer.setPosition(
parseInt(bounds.x - (Param.Width / 2) // eslint-disable-line no-mixed-operators
+ (bounds.width / 2), 0) // eslint-disable-line no-mixed-operators
, bounds.y + Param.Arrow + 10); // eslint-disable-line no-mixed-operators
/* Baraka */
miniplayer_docked.setPosition(
parseInt(bounds.x - (Param.Width / 2) // eslint-disable-line no-mixed-operators
+ (bounds.width / 2), 0) // eslint-disable-line no-mixed-operators
, bounds.y + Param.Arrow + 10); // eslint-disable-line no-mixed-operators
miniplayer.setFullScreenable(false);
miniplayer_docked.setFullScreenable(false);

miniplayer.setPosition(position.x, position.y);
miniplayer.show();
if (d === 'docked') {
miniplayer.show();
miniplayer_docked.hide();
}
};

const handleClick = (e, bounds) => {
if (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey) return hideWindow();
if (miniplayer && miniplayer.isVisible()) return hideWindow();
cachedPosition = bounds || cachedPosition;
return showMiniplayer(cachedPosition);
return showMiniplayer(cachedPosition, 'docked');
};

const handleDockedClick = (e, bounds) => {
if (miniplayer.isVisible()) {
hideWindow();
miniplayer_docked.webContents.executeJavaScript(`
document.querySelector("body").classList.add("drag");
`);
miniplayer_docked.show();
} else {
miniplayer_docked.hide();
miniplayer_docked.webContents.executeJavaScript(`
document.querySelector("body").classList.remove("drag");
`);
miniplayer.show();
}

cachedPosition = bounds || cachedPosition;
return showMiniplayer(cachedPosition, 'undocked');
};

export const init = (mainIPCInterface) => {
createWindow();

const VolumeStatus = (percent) => {
miniplayer.webContents.executeJavaScript(`
var vol = window.document.querySelector("[class*='__menu_vol'] path");
switch (!!1){
case (${percent} === 100):
vol.setAttribute("d", "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z");
break;
case (${percent} > 50):
vol.setAttribute("d", "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z");
break;
case (${percent} === 10):
vol.setAttribute("d", "M7 9v6h4l5 5V4l-5 5H7z");
break;
case (${percent} === 0):
vol.setAttribute("d", "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z");
break;
}
`);

miniplayer_docked.webContents.executeJavaScript(`
var vol = window.document.querySelector("[class*='__menu_vol'] path");
switch (!!1){
case (${percent} === 100):
vol.setAttribute("d", "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z");
break;
case (${percent} > 50):
vol.setAttribute("d", "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z");
break;
case (${percent} === 10):
vol.setAttribute("d", "M7 9v6h4l5 5V4l-5 5H7z");
break;
case (${percent} === 0):
vol.setAttribute("d", "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z");
break;
}
`);
};

const actions = {
// Player actions,
playPause: () => mainIPCInterface.emit('playPause'),
Expand All @@ -87,8 +197,61 @@ export const init = (mainIPCInterface) => {
repeatOne: () => mainIPCInterface.emit('repeatOne'),
repeatNone: () => mainIPCInterface.emit('repeatNone'),
toggleShuffle: () => mainIPCInterface.emit('toggleShuffle'),
rollDice: () => mainIPCInterface.emit('rollDice'),
replayBack: () => mainIPCInterface.emit('replayBack'),
seekForward: () => mainIPCInterface.emit('seekForward'),
toggleVisualization: () => mainIPCInterface.emit('toggleVisualization'),
setCurrentTime: time => mainIPCInterface.emit('setCurrentTime', time),
volume: () => mainIPCInterface.emit('volume'),
setVolume: (percent) => {
vol = percent;
VolumeStatus(percent);
mainIPCInterface.emit('setVolume', percent);
},
DockActive: (val, extra) => { // eslint-disable-line no-unused-vars
isTop = val;
miniplayer_docked.setAlwaysOnTop(val);// the magic
},
DockYoutubeFullScreen: (val) => {
if (miniplayer_docked.isFullScreen()) {
miniplayer_docked.setFullScreen(!1);
miniplayer_docked.webContents.executeJavaScript('document.querySelector("body").classList.remove("fullscreen");');
if (val === !!1) {
miniplayer_docked.setFullScreenable(!1);
}
} else {
if (val === !1) {
miniplayer_docked.setFullScreenable(!!1);
}
miniplayer_docked.setFullScreen(!!1);
miniplayer_docked.webContents.executeJavaScript('document.querySelector("body").classList.add("fullscreen");');
}
},
setVolumeUpdate: (val) => {
vol = val;
},
DockMiniPlayer: (extra) => { // eslint-disable-line no-unused-vars
handleDockedClick();
if (Object.keys(extra.volume).length > 0) {
miniplayer.webContents.executeJavaScript(`
document.querySelector("body").dataset.volume = ${vol};
document.querySelector(".volume .rc-slider .rc-slider-track").style.height =${vol}+'%';
document.querySelector(".volume .rc-slider .rc-slider-handle").style.bottom =${vol}+'%';
if(document.querySelector(".rc-slider-tooltip-inner") != null) {
document.querySelector(".rc-slider-tooltip-inner").innerHTML = ${vol};
}
`);

miniplayer_docked.webContents.executeJavaScript(`
document.querySelector("body").dataset.volume = ${vol};
document.querySelector(".volume .rc-slider .rc-slider-track").style.height =${vol}+'%';
document.querySelector(".volume .rc-slider .rc-slider-handle").style.bottom =${vol}+'%';
if(document.querySelector(".rc-slider-tooltip-inner") != null) {
document.querySelector(".rc-slider-tooltip-inner").innerHTML = ${vol};
}
`);
}
},
};

const ipcInterface = connectToIPC({
Expand All @@ -102,6 +265,18 @@ export const init = (mainIPCInterface) => {
object: actions,
});

miniplayer_docked.webContents.on('dom-ready', () => {
miniplayer_docked.webContents.executeJavaScript(`
document.querySelector("body").classList.toggle("drag");
document.querySelector("html").classList.toggle("undocked");
document.querySelector("body").dataset.volume = ${vol};
`);
});

miniplayer.webContents.executeJavaScript(`
document.querySelector("body").dataset.volume = ${vol};
`);

tray = new Tray(iconPath);
tray.on('click', handleClick);
tray.on('double-click', handleClick);
Expand Down
Loading