From 3edc93c8427c37f0b691da72811f6e9d702baf74 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 22 Aug 2016 08:00:58 -0400 Subject: [PATCH 1/9] Blur NSFW content on home page Also adds a mouse-over overlay explaining you can choose to show NSFW stuff on the Settings page (not implemented yet) --- js/page/discover.js | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/js/page/discover.js b/js/page/discover.js index c76b92827..b2b189f70 100644 --- a/js/page/discover.js +++ b/js/page/discover.js @@ -106,7 +106,9 @@ var SearchResultRow = React.createClass({ } }); - +var featuredContentItemContainerStyle = { + position: 'relative', +}; var FeaturedContentItem = React.createClass({ propTypes: { @@ -118,9 +120,24 @@ var FeaturedContentItem = React.createClass({ metadata: null, title: null, amount: 0.0, + overlayShowing: false, }; }, + handleMouseOver: function() { + if (this.state.metadata && this.state.metadata.nsfw) { + this.setState({ + overlayShowing: true, + }); + } + }, + + handleMouseOut: function() { + this.setState({ + overlayShowing: false, + }); + }, + componentWillMount: function() { lbry.search(this.props.name, (results) => { var result = results[0]; @@ -140,9 +157,16 @@ var FeaturedContentItem = React.createClass({ return null; } - return ; + //@TODO: Make this check the "show NSFW" setting once it's implemented + + return (
+
+ +
+ {!this.state.overlayShowing ? null :

This content is Not Safe For Work. To show NSFW content in Community Content and search results, visit the and enable the option "Show NSFW content."

} +
); } }); From 124b2b9a181e9a281ddecc41d39a26828175465c Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 22 Aug 2016 09:03:36 -0400 Subject: [PATCH 2/9] Add styles --- scss/_global.scss | 1 + scss/_gui.scss | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/scss/_global.scss b/scss/_global.scss index 8bfde1b90..ad5854a36 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -21,6 +21,7 @@ $header-height: $spacing-vertical * 2.5; $default-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); +$blur-intensity: 8px; @mixin clearfix() { diff --git a/scss/_gui.scss b/scss/_gui.scss index 7f042b433..40997c37a 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -17,6 +17,10 @@ section { margin-bottom: 0; } + &:only-child { + /* If it's an only child, assume it's part of a React layout that will handle the last child condition on its own */ + margin-bottom: $spacing-vertical; + } } main h1 { @@ -186,6 +190,28 @@ input[type="text"], input[type="search"], textarea top: 0.16em; } +.blur { + -webkit-filter: blur($blur-intensity); + -moz-filter: blur($blur-intensity); + -o-filter: blur($blur-intensity); + -ms-filter: blur($blur-intensity); + filter: blur($blur-intensity); +} + +.translucent-overlay { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + padding: 5%; + background-color: rgba(210, 210, 210, 0.8); + color: #fff; + display: flex; + align-items: center; + font-weight: 600; +} + .help { font-size: .85em; color: $color-help; From b75004c5f6e52c88a91cc17828dff8a59522c8dc Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 22 Aug 2016 09:14:56 -0400 Subject: [PATCH 3/9] Make search work from pages other than Discover --- js/page/discover.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/js/page/discover.js b/js/page/discover.js index b2b189f70..ba201dd70 100644 --- a/js/page/discover.js +++ b/js/page/discover.js @@ -206,17 +206,25 @@ var DiscoverPage = React.createClass({ componentDidUpdate: function() { if (this.props.query != this.state.query) { - this.setState({ - searching: true, - query: this.props.query, - }); - - lbry.search(this.props.query, this.searchCallback); + this.handleSearchChanged(); } }, + handleSearchChanged: function() { + this.setState({ + searching: true, + query: this.props.query, + }); + + lbry.search(this.props.query, this.searchCallback); + }, + componentDidMount: function() { document.title = "Discover"; + if (this.props.query !== '') { + // Rendering with a query already typed + this.handleSearchChanged(); + } }, getInitialState: function() { From 0a2c0586d423aaf0e6d8c19ed219c6df9f9d2214 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 22 Aug 2016 14:13:41 -0400 Subject: [PATCH 4/9] Light refactor of daemon settings processing - Rename the daemon setter/getter methods to lbry.getDaemonSettings() and lbry.setDaemonSettings() to differentiate them from the new methods for client settings - Add lbry.setDaemonSetting(), for changing individual daemon settings easy to - Refactor Settings page to submit only changed settings instead of re-submitting all settings every time --- js/lbry.js | 14 ++++++++++---- js/page/settings.js | 38 +++++++++++++++----------------------- 2 files changed, 25 insertions(+), 27 deletions(-) diff --git a/js/lbry.js b/js/lbry.js index cca8c6af7..a90f32c2d 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -90,13 +90,19 @@ lbry.getNewAddress = function(callback) { lbry.call('get_new_address', {}, callback); } -lbry.getSettings = function(callback) { +lbry.getDaemonSettings = function(callback) { lbry.call('get_settings', {}, callback); -}; +} -lbry.setSettings = function(settings, callback) { +lbry.setDaemonSettings = function(settings, callback) { lbry.call('set_settings', settings, callback); -}; +} + +lbry.setDaemonSetting = function(setting, value, callback) { + var setSettingsArgs = {}; + setSettingsArgs[setting] = value; + lbry.call('set_settings', setSettingsArgs, callback) +} lbry.getBalance = function(callback) { diff --git a/js/page/settings.js b/js/page/settings.js index 44fb795c5..c7248d190 100644 --- a/js/page/settings.js +++ b/js/page/settings.js @@ -14,44 +14,36 @@ var settingsRadioOptionStyles = { }; var SettingsPage = React.createClass({ - storeSetting: function(setting, val) { - var settings = Object.assign({}, this.state.settings); - settings[setting] = val; - this.setState({ - 'settings': settings - }); - lbry.setSettings(settings); - }, onRunOnStartChange: function (event) { - this.storeSetting('run_on_startup', event.target.checked); + lbry.setDaemonSetting('run_on_startup', event.target.checked); }, onShareDataChange: function (event) { - this.storeSetting('upload_log', event.target.checked); + lbry.setDaemonSetting('upload_log', event.target.checked); }, onDownloadDirChange: function(event) { - this.storeSetting('download_directory', event.target.value); + lbry.setDaemonSetting('download_directory', event.target.value); }, onMaxUploadPrefChange: function(isLimited) { if (!isLimited) { - this.storeSetting('max_upload', 0.0); + lbry.setDaemonSetting('max_upload', 0.0); } this.setState({ isMaxUpload: isLimited }); }, onMaxUploadFieldChange: function(event) { - this.storeSetting('max_upload', Number(event.target.value)); + lbry.setDaemonSetting('max_upload', Number(event.target.value)); }, onMaxDownloadPrefChange: function(isLimited) { if (!isLimited) { - this.storeSetting('max_download', 0.0); + lbry.setDaemonSetting('max_download', 0.0); } this.setState({ isMaxDownload: isLimited }); }, onMaxDownloadFieldChange: function(event) { - this.storeSetting('max_download', Number(event.target.value)); + lbry.setDaemonSetting('max_download', Number(event.target.value)); }, getInitialState: function() { return { @@ -62,16 +54,16 @@ var SettingsPage = React.createClass({ document.title = "Settings"; }, componentWillMount: function() { - lbry.getSettings(function(settings) { + lbry.getDaemonSettings(function(settings) { this.setState({ - settings: settings, + initDaemonSettings: settings, isMaxUpload: settings.max_upload != 0, isMaxDownload: settings.max_download != 0 }); }.bind(this)); }, render: function() { - if (!this.state.settings) { // If the settings aren't loaded yet, don't render anything. + if (!this.state.initDaemonSettings) { return null; } @@ -80,13 +72,13 @@ var SettingsPage = React.createClass({

Run on Startup

Download Directory

Where would you like the files you download from LBRY to be saved?
- +

Bandwidth Limits

@@ -97,7 +89,7 @@ var SettingsPage = React.createClass({
@@ -107,14 +99,14 @@ var SettingsPage = React.createClass({

Share Diagnostic Data

From 0472ea5d9de095c8f745b3362c90e4d4186b16b1 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 22 Aug 2016 15:07:41 -0400 Subject: [PATCH 5/9] Add support for client side settings using localStorage --- js/lbry.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/js/lbry.js b/js/lbry.js index a90f32c2d..cb8a6dc02 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -4,7 +4,8 @@ var lbry = { daemonConnectionString: 'http://localhost:5279/lbryapi', colors: { primary: '#155B4A' - } + }, + defaultClientSettings: {} }; lbry.jsonrpc_call = function (connectionString, method, params, callback, errorCallback, connectFailedCallback) { @@ -104,6 +105,7 @@ lbry.setDaemonSetting = function(setting, value, callback) { lbry.call('set_settings', setSettingsArgs, callback) } + lbry.getBalance = function(callback) { lbry.call("get_balance", {}, callback); @@ -214,6 +216,31 @@ lbry.checkNewVersionAvailable = function(callback) { }); } +lbry.getClientSettings = function() { + var outSettings = {}; + for (let setting of Object.keys(lbry.defaultClientSettings)) { + var localStorageVal = localStorage.getItem('setting_' + setting); + outSettings[setting] = (localStorageVal === null ? lbry.defaultClientSettings[setting] : JSON.parse(localStorageVal)); + } + return outSettings; +} + +lbry.getClientSetting = function(setting) { + var localStorageVal = localStorage.getItem('setting_' + setting); + return (localStorageVal === null ? lbry.defaultClientSettings[setting] : JSON.parse(localStorageVal)); +} + +lbry.setClientSettings = function(settings) { + for (let setting of Object.keys(settings)) { + lbry.setClientSetting(setting, settings[setting]); + } +} + +lbry.setClientSetting = function(setting, value) { + return localStorage.setItem('setting_' + setting, JSON.stringify(value)); +} + + lbry.reportBug = function(message, callback) { lbry.call('upload_log', { name_prefix: 'report', From 8378a7a387563318674c30ac00410107e7e81c1d Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 22 Aug 2016 15:19:04 -0400 Subject: [PATCH 6/9] Add option to show/hide NSFW content --- js/lbry.js | 4 +++- js/page/discover.js | 7 ++++--- js/page/settings.js | 11 +++++++++++ 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/js/lbry.js b/js/lbry.js index cb8a6dc02..00cbbe626 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -5,7 +5,9 @@ var lbry = { colors: { primary: '#155B4A' }, - defaultClientSettings: {} + defaultClientSettings: { + showNsfw: false, + } }; lbry.jsonrpc_call = function (connectionString, method, params, callback, errorCallback, connectFailedCallback) { diff --git a/js/page/discover.js b/js/page/discover.js index ba201dd70..14a085617 100644 --- a/js/page/discover.js +++ b/js/page/discover.js @@ -34,9 +34,10 @@ var SearchNoResults = React.createClass({ var SearchResults = React.createClass({ render: function() { + var showNsfw = lbry.getClientSetting('showNsfw'); var rows = []; this.props.results.forEach(function(result) { - if (!result.value.nsfw) { + if (showNsfw || !result.value.nsfw) { rows.push( @@ -157,10 +158,10 @@ var FeaturedContentItem = React.createClass({ return null; } - //@TODO: Make this check the "show NSFW" setting once it's implemented + var blur = !lbry.getClientSetting('showNsfw') && this.state.metadata.nsfw; return (
-
+
diff --git a/js/page/settings.js b/js/page/settings.js index c7248d190..fef48c711 100644 --- a/js/page/settings.js +++ b/js/page/settings.js @@ -14,6 +14,7 @@ var settingsRadioOptionStyles = { }; var SettingsPage = React.createClass({ + _initClientSettings: null, onRunOnStartChange: function (event) { lbry.setDaemonSetting('run_on_startup', event.target.checked); }, @@ -52,6 +53,7 @@ var SettingsPage = React.createClass({ }, componentDidMount: function() { document.title = "Settings"; + this._initClientSettings = lbry.getClientSettings(); }, componentWillMount: function() { lbry.getDaemonSettings(function(settings) { @@ -62,6 +64,9 @@ var SettingsPage = React.createClass({ }); }.bind(this)); }, + onShowNsfwChange: function(event) { + lbry.setClientSetting('showNsfw', event.target.checked); + }, render: function() { if (!this.state.initDaemonSettings) { return null; @@ -103,6 +108,12 @@ var SettingsPage = React.createClass({
+
+

Content

+ +

Share Diagnostic Data

Content

- +
+ +
NSFW content may include nudity, intense sexuality, profanity, or other adult content.
+

Share Diagnostic Data

diff --git a/scss/_canvas.scss b/scss/_canvas.scss index 0a9ae7f26..2e8f0cc27 100644 --- a/scss/_canvas.scss +++ b/scss/_canvas.scss @@ -157,6 +157,30 @@ $header-icon-size: 1.5em; box-shadow: $default-box-shadow; border-radius: 2px; } +.card-obscured +{ + position: relative; +} +.card-obscured .card-content { + -webkit-filter: blur($blur-intensity); + -moz-filter: blur($blur-intensity); + -o-filter: blur($blur-intensity); + -ms-filter: blur($blur-intensity); + filter: blur($blur-intensity); +} +.card-overlay { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + padding: 20px; + background-color: rgba(128, 128, 128, 0.8); + color: #fff; + display: flex; + align-items: center; + font-weight: 600; +} .card-series-submit { diff --git a/scss/_gui.scss b/scss/_gui.scss index 40997c37a..dc3e19585 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -190,28 +190,6 @@ input[type="text"], input[type="search"], textarea top: 0.16em; } -.blur { - -webkit-filter: blur($blur-intensity); - -moz-filter: blur($blur-intensity); - -o-filter: blur($blur-intensity); - -ms-filter: blur($blur-intensity); - filter: blur($blur-intensity); -} - -.translucent-overlay { - position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; - padding: 5%; - background-color: rgba(210, 210, 210, 0.8); - color: #fff; - display: flex; - align-items: center; - font-weight: 600; -} - .help { font-size: .85em; color: $color-help;