From 85d8ad52b8ec11e1967cee2335bc2f2a92930c7a Mon Sep 17 00:00:00 2001 From: Alexandre Storelli Date: Tue, 30 Jan 2018 23:31:16 +0100 Subject: [PATCH] improved logging, toggleContent, UI tweaks --- DlFactory.js | 3 +- client/package-lock.json | 70 ++++++++++++++++++-- client/package.json | 3 +- client/src/App.js | 137 ++++++++++++++++++++++----------------- client/src/Playlist.js | 54 +++++++++++---- config.js | 30 ++++++--- index.js | 88 +++++++++++++++---------- log.js | 27 ++++++++ package-lock.json | 86 ++++++++++++------------ package.json | 4 +- 10 files changed, 334 insertions(+), 168 deletions(-) create mode 100644 log.js diff --git a/DlFactory.js b/DlFactory.js index 25e51fe..13a32d5 100644 --- a/DlFactory.js +++ b/DlFactory.js @@ -1,8 +1,7 @@ "use strict"; var { Writable, Duplex } = require("stream"); -var log = require("loglevel"); -log.setLevel("debug"); +var log = require("./log.js")("DlFactory"); var cp = require("child_process"); var fs = require("fs"); var { getMeta } = require("webradio-metadata"); diff --git a/client/package-lock.json b/client/package-lock.json index b4d524e..29115b6 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -77,6 +77,14 @@ } } }, + "add-dom-event-listener": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz", + "integrity": "sha1-j67SxBAIchzxEdodMNmVuFvkK+0=", + "requires": { + "object-assign": "4.1.1" + } + }, "address": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz", @@ -1234,7 +1242,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { "core-js": "2.5.1", "regenerator-runtime": "0.11.0" @@ -1243,8 +1250,7 @@ "core-js": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz", - "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=", - "dev": true + "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=" } } }, @@ -5629,6 +5635,11 @@ "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", "dev": true }, + "lodash._getnative": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", + "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=" + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -5653,6 +5664,26 @@ "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=", "dev": true }, + "lodash.isarguments": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", + "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=" + }, + "lodash.isarray": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", + "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=" + }, + "lodash.keys": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz", + "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", + "requires": { + "lodash._getnative": "3.9.1", + "lodash.isarguments": "3.1.0", + "lodash.isarray": "3.0.4" + } + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -8146,6 +8177,28 @@ } } }, + "rc-checkbox": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.1.4.tgz", + "integrity": "sha512-a5rDubpIsNzx/8u7yk8rD19RyZOM3uxqwXsUUfRzNhO+wD3Y0xntqRXqNPZ/dYQqXWoK/oRJrqghst1/8pFqZQ==", + "requires": { + "babel-runtime": "6.26.0", + "classnames": "2.2.5", + "prop-types": "15.6.0", + "rc-util": "4.3.1" + } + }, + "rc-util": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.3.1.tgz", + "integrity": "sha512-OVNMKLePnwn0dCX/Gpc+/kGEDpmMo1Rfesg9xFcAckRd+D+YwVqV+dUJMHugP+4nRtbXi55o0HwPlkKIApYfQA==", + "requires": { + "add-dom-event-listener": "1.0.2", + "babel-runtime": "6.26.0", + "prop-types": "15.6.0", + "shallowequal": "0.2.2" + } + }, "react": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/react/-/react-16.1.1.tgz", @@ -8409,8 +8462,7 @@ "regenerator-runtime": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz", - "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==", - "dev": true + "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==" }, "regenerator-transform": { "version": "0.10.1", @@ -8894,6 +8946,14 @@ "safe-buffer": "5.1.1" } }, + "shallowequal": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz", + "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=", + "requires": { + "lodash.keys": "3.1.2" + } + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", diff --git a/client/package.json b/client/package.json index a88af4a..cc0f0c2 100644 --- a/client/package.json +++ b/client/package.json @@ -5,6 +5,7 @@ "dependencies": { "classnames": "^2.2.5", "moment": "^2.20.1", + "rc-checkbox": "^2.1.4", "react": "^16.1.1", "react-dom": "^16.1.1", "styled-components": "^2.4.0" @@ -18,5 +19,5 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, - "homepage" : "https://www.adblockradio.com/buffer" + "homepage": "https://www.adblockradio.com/buffer" } diff --git a/client/src/App.js b/client/src/App.js index eaab415..78ebd73 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -40,6 +40,7 @@ class App extends Component { this.refreshConfig = this.refreshConfig.bind(this); this.insertRadio = this.insertRadio.bind(this); this.removeRadio = this.removeRadio.bind(this); + this.toggleContent = this.toggleContent.bind(this); } componentDidMount() { @@ -169,6 +170,13 @@ class App extends Component { }); } + toggleContent(country, name, contentType, enabled, callback) { + var self = this; + load("/config/radios/content/" + encodeURIComponent(country) + "/" + encodeURIComponent(name) + "/" + encodeURIComponent(contentType) + "/" + (enabled ? "enable" : "disable") + "?t=" + Math.round(Math.random()*1000000), function(res) { + self.refreshConfig(callback); + }); + } + render() { let config = this.state.config; var self = this; @@ -225,65 +233,76 @@ class App extends Component { //console.log("Metadata props: date=" + (+self.state.date) + " clockDiff=" + self.state.clockDiff + " playingDelay=" + self.state.playingDelay); + let mainContents; + if (self.state.playlistEditMode || config.radios.length === 0) { + mainContents = ( + + ); + } else { + mainContents = ( + + {config.radios.map(function(radioObj, i) { + var radio = radioObj.country + "_" + radioObj.name; + var playing = self.state.playingRadio === radio; + + var liveMetadata; + + var metaList = self.state[radio + "|metadata"]; + if (metaList) { + var targetDate = self.state.date - (playing ? self.state.playingDelay : self.defaultDelay(radio)); + for (let j=0; j + + + + {liveMetadata && + + + {liveMetadata.payload.artist} - {liveMetadata.payload.title} + + + + } + + + {metaList && + + } + + + ) + })} + + ); + } + + return ( - - {config.radios.map(function(radioObj, i) { - var radio = radioObj.country + "_" + radioObj.name; - var playing = self.state.playingRadio === radio; - var showMetadata = !self.state.playlistEditMode; - var liveMetadata; - if (showMetadata) { - var metaList = self.state[radio + "|metadata"]; - if (metaList) { - for (let j=0; j - - - - {showMetadata && liveMetadata && - - - {liveMetadata.payload.artist} - {liveMetadata.payload.title} - - - - } - - - {showMetadata && self.state[radio + "|metadata"] && - - } - - - ) - })} - - {(self.state.playlistEditMode || config.radios.length === 0) && - - } + {mainContents} {status} @@ -312,7 +331,8 @@ const AppParent = styled.div` const AppView = styled.div` display: flex; - height: calc(100% - 100px); + height: calc(100% - 60px); + margin: 0 10px; `; const RadioList = styled.div` @@ -355,7 +375,7 @@ const RadioLogo = styled.img` const MetadataItem = styled.div` flex-grow: 1; margin: 0 0 0 15px; - padding: 10px; + padding: 0 10px; flex-shrink: 1; background: #eee; display: flex; @@ -365,6 +385,7 @@ const MetadataItem = styled.div` const MetadataText = styled.p` flex-grow: 1; align-self: center; + margin: 10px 0; ` const MetadataCover = styled.img` diff --git a/client/src/Playlist.js b/client/src/Playlist.js index 2696878..3286447 100644 --- a/client/src/Playlist.js +++ b/client/src/Playlist.js @@ -5,6 +5,8 @@ import PropTypes from "prop-types"; import styled from "styled-components"; import { load } from './load.js'; import classNames from 'classnames'; +import Checkbox from 'rc-checkbox'; +import 'rc-checkbox/assets/index.css'; import defaultCover from "./img/default_radio_logo.svg"; class Playlist extends Component { @@ -41,6 +43,11 @@ class Playlist extends Component { this.props.removeRadio(country, name, this.componentDidMount); } + /*toggleContent(country, name, contentType, enabled) { + console.log("toggleContent radio=" + country + "_" + name + " contentType=" + contentType + " enable=" + enabled); + this.props.toggleContent(country, name, contentType, enabled, this.componentDidMount); + }*/ + render() { var self = this; if (!this.state.radiosLoaded) { @@ -67,11 +74,23 @@ class Playlist extends Component { } {current.map(function(radio, i) { return ( - - - {radio.name} - - + + + + + {radio.name} + + + + + ) })} @@ -83,10 +102,12 @@ class Playlist extends Component { {available.map(function(radio, i) { return ( - - {radio.name} - - + + + + {radio.name} + + ) })} @@ -118,6 +139,7 @@ const PlaylistItem = styled.div` flex-shrink: 0; background: #eee; display: flex; + flex-direction: column; cursor: not-allowed; &.active { @@ -125,16 +147,26 @@ const PlaylistItem = styled.div` } `; +const PlaylistItemTopRow = styled.div` + display: flex; + flex-direction: row; + margin-bottom: 10px; +`; + const PlaylistItemText = styled.p` flex-grow: 1; align-self: center; -` +`; const PlaylistItemLogo = styled.img` width: 60px; height: 60px; align-self: center; - margin-left: 10px; + margin-right: 10px; +`; + +const PlaylistItemConfigContainer = styled.div` + flex-grow: 1; `; export default Playlist; diff --git a/config.js b/config.js index d9ddc6a..bb188a0 100644 --- a/config.js +++ b/config.js @@ -1,6 +1,6 @@ "use strict"; -var log = require("loglevel"); +var log = require("./log.js")("config"); var fs = require("fs"); var { getRadioMetadata } = require("../adblockradio-dl/dl.js"); var { getAvailable } = require("webradio-metadata"); @@ -30,7 +30,7 @@ var isRadioInConfig = function(country, name) { return isAlreadyThere; } -var insertRadio = function(country, name, callback) { +exports.insertRadio = function(country, name, callback) { if (isRadioInConfig()) return callback("Radio already in the list"); if (config.radios.length >= config.user.maxRadios) return callback("Playlist is already full"); @@ -43,7 +43,7 @@ var insertRadio = function(country, name, callback) { "country": country, "name": name, "content": { - "ads": true, + "ads": false, "speech": true, "music": true }, @@ -55,7 +55,7 @@ var insertRadio = function(country, name, callback) { }); } -var removeRadio = function(country, name, callback) { +exports.removeRadio = function(country, name, callback) { for (var i=0; i