diff options
| -rw-r--r-- | src/App.css | 9 | ||||
| -rw-r--r-- | src/App.js | 57 | ||||
| -rw-r--r-- | src/Home.js | 12 | ||||
| -rw-r--r-- | src/Post.js | 15 | ||||
| -rw-r--r-- | src/ReplyForm.js | 3 | ||||
| -rw-r--r-- | src/Settings.js | 169 | ||||
| -rw-r--r-- | src/Thread.js | 11 |
7 files changed, 242 insertions, 34 deletions
diff --git a/src/App.css b/src/App.css index 73001f9..7bf667b 100644 --- a/src/App.css +++ b/src/App.css @@ -182,4 +182,13 @@ .ui.items>.item>.content>a.header.inverted { color: #4183C4; ; +} + +.ui.checkbox, +.select { + margin-top: 0.5em; +} + +.settingCheckbox { + display: block !important; }
\ No newline at end of file @@ -20,6 +20,7 @@ import NotFound from "./NotFound"; import ThreadList from "./ThreadList"; import FAQ from "./FAQ"; import ChangeLogPage from "./ChangelogPage"; +import SettingsModal from "./Settings"; class App extends Component { constructor() { @@ -29,7 +30,7 @@ class App extends Component { isLoaded: false, nightMode: false }; - this.toggleTheme = this.toggleTheme.bind(this); + this.updateTheme = this.updateTheme.bind(this); } componentDidMount() { @@ -56,18 +57,31 @@ class App extends Component { }); }); - let _nightMode = localStorage.getItem("nightMode"); - if (_nightMode === null) { - localStorage.setItem("nightMode", false); + let lsSettings = localStorage.getItem("settings"); + let settings = JSON.parse(lsSettings); + + if (lsSettings === null) { + let defaultSettings = { + homeSound: "msn", + threadSound: "msn", + nightMode: false, + notifyOnHome: true, + notifyOnThread: true, + autoUpdateThreads: true, + showAvatars: true, + postPassword: this.genPassword() + }; + localStorage.setItem("settings", JSON.stringify(defaultSettings)); + settings = defaultSettings; } else { - this.setState({ nightMode: JSON.parse(_nightMode) }); - } - let password = localStorage.getItem("password"); - if (password === null) { - localStorage.setItem("password", this.genPassword()); + this.setState({ nightMode: settings.nightMode }); } } + updateTheme(mode) { + this.setState({ nightMode: mode }); + } + genPassword() { let pass = ""; for (let i = 0; i < 10; i++) { @@ -95,12 +109,6 @@ class App extends Component { } } - toggleTheme() { - this.setState({ nightMode: !this.state.nightMode }, () => { - localStorage.setItem("nightMode", this.state.nightMode); - }); - } - render() { const { boardList, nightMode, isLoaded } = this.state; @@ -120,8 +128,9 @@ class App extends Component { <Menu.Item as={Link} to="/"> <Icon name="home" /> Home </Menu.Item> - <Dropdown text="BBS" className="link item"> + <Dropdown text="Boards" className="link item"> <Dropdown.Menu> + <Dropdown.Header>Bolletin Board System</Dropdown.Header> {boardList.map(board => board.board_type === 1 ? ( <Dropdown.Item @@ -133,10 +142,7 @@ class App extends Component { </Dropdown.Item> ) : null )} - </Dropdown.Menu> - </Dropdown> - <Dropdown text="Imageboard" className="link item"> - <Dropdown.Menu> + <Dropdown.Header>Imageboard</Dropdown.Header> {boardList.map(board => board.board_type === 0 ? ( <Dropdown.Item @@ -154,9 +160,14 @@ class App extends Component { <Icon name="help" /> FAQ </Menu.Item> <Menu.Menu position="right"> - <Menu.Item as="a" onClick={this.toggleTheme}> - {nightMode ? <Icon name="sun" /> : <Icon name="moon" />} - </Menu.Item> + <SettingsModal + trigger={ + <Menu.Item as="a"> + <Icon name="configure" /> + </Menu.Item> + } + handler={this.updateTheme} + /> </Menu.Menu> </Container> </Menu> diff --git a/src/Home.js b/src/Home.js index 0cdad72..1695ed4 100644 --- a/src/Home.js +++ b/src/Home.js @@ -19,8 +19,9 @@ class Home extends Component { this.refreshCooldown = 15; this.cooldownCounter = 0; this.lastTimeNoAge = 0; + let homeSound = JSON.parse(localStorage.getItem("settings")).homeSound; this.notificationSound = new Audio( - "https://bienvenidoainternet.org/msn.ogg" + `https://bienvenidoainternet.org/static/sfx/${homeSound}.ogg` ); this.handeMouseMove = this.handeMouseMove.bind(this); this.mouseVars = {}; @@ -77,6 +78,9 @@ class Home extends Component { } async updateAges() { + if (!JSON.parse(localStorage.getItem("settings")).autoUpdateThreads) { + return; + } this.cooldownCounter++; if (this.cooldownCounter < this.refreshCooldown) { return; @@ -96,7 +100,9 @@ class Home extends Component { lastAgeThreads: resource.threads }); this.refreshCooldown = 30; - this.notificationSound.play(); + if (JSON.parse(localStorage.getItem("settings")).notifyOnHome) { + this.notificationSound.play(); + } } else { this.refreshCooldown += 15; this.lastTimeNoAge = resource.time; @@ -131,7 +137,7 @@ class Home extends Component { className={nightMode ? "homeContainer inverted" : "homeContainer"} > <Grid.Row centered columns={1}> - <Grid.Column centered textAlign="center"> + <Grid.Column textAlign="center"> <div id="baiLogo" className={nightMode ? "invLogo" : "whiLogo"}> BaI </div> diff --git a/src/Post.js b/src/Post.js index 18d81e0..68ba36e 100644 --- a/src/Post.js +++ b/src/Post.js @@ -91,7 +91,7 @@ class Post extends Component { handleConfirm() { this.setState({ deleteDialog: false }); const { post, currentBoard } = this.props; - let password = localStorage.getItem("password"); + let password = JSON.parse(localStorage.getItem("settings")).postPassword; fetch( `https://bienvenidoainternet.org/cgi/api/delete?dir=${currentBoard.dir}&id=${post.id}&password=${password}` ) @@ -251,12 +251,17 @@ class Post extends Component { isDeleteable = false; } + let settingRenderAvatar = JSON.parse(localStorage.getItem("settings")) + .showAvatars; + return ( <Comment inverted={nightMode}> - <Comment.Avatar - src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`} - style={{ filter: `hue-rotate(${hue}deg)` }} - /> + {settingRenderAvatar && ( + <Comment.Avatar + src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`} + style={{ filter: `hue-rotate(${hue}deg)` }} + /> + )} <Comment.Content> <Comment.Author as="a" diff --git a/src/ReplyForm.js b/src/ReplyForm.js index 4fe45a8..bac770e 100644 --- a/src/ReplyForm.js +++ b/src/ReplyForm.js @@ -63,7 +63,8 @@ class ReplyForm extends Component { selectedFile } = this.state; const { currentBoard, parent } = this.props; - let password = localStorage.getItem("password"); + let password = JSON.parse(localStorage.getItem("settings")) + .postPassword; let data = { board: currentBoard.dir, parent: parent, diff --git a/src/Settings.js b/src/Settings.js new file mode 100644 index 0000000..f5f298d --- /dev/null +++ b/src/Settings.js @@ -0,0 +1,169 @@ +import React, { Component } from "react"; +import { Dropdown, Checkbox, Modal, Header, Input } from "semantic-ui-react"; + +const notificationSounds = [ + { key: "bed", value: "bed", text: "Bed squeak" }, + { key: "bongchime", value: "bongchime", text: "Bongchime" }, + { key: "boombang", value: "boombang", text: "Boom bang!" }, + { key: "chime", value: "chime", text: "Chime" }, + { key: "dootdoot", value: "dootdoot", text: "Mr Skeltal - Doot doot" }, + { key: "iqc", value: "iqc", text: "Notificación IQC" }, + { key: "msn", value: "msn", text: "Notificación MSN" }, + { key: "manscream", value: "manscream", text: "Man Scream (Loud)" }, + { + key: "messageforme", + value: "messageforme", + text: "IT Crowd - Message for me!" + }, + { key: "nootnoot", value: "nootnoot", text: "Pengu - noot noot" }, + { key: "ohwahahahahah", value: "ohwahahahahah", text: "Oh wah ah ah ah!" }, + { key: "pincheputita", value: "pincheputita", text: "Pinche putita" }, + { key: "idk", value: "idk", text: "??? Pájaro" }, + { key: "whoa", value: "whoa", text: "Woow" } +]; + +class SettingsModal extends Component { + constructor(props) { + super(props); + this.state = { + homeSound: "msn", + threadSound: "dootdoot", + nightMode: true, + notifyOnHome: true, + notifyOnThread: true, + autoUpdateThreads: true, + showAvatars: true, + postPassword: "" + }; + this.handleChange = this.handleChange.bind(this); + this.toggleSetting = this.toggleSetting.bind(this); + } + + componentDidMount() { + let settings = JSON.parse(localStorage.getItem("settings")); + this.setState({ + homeSound: settings.homeSound, + threadSound: settings.threadSound, + nightMode: settings.nightMode, + notifyOnHome: settings.notifyOnHome, + notifyOnThread: settings.notifyOnThread, + autoUpdateThreads: settings.autoUpdateThreads, + showAvatars: settings.showAvatars, + postPassword: settings.postPassword + }); + } + + handleChange(e, { name, value }) { + this.setState({ [name]: value }, () => { + new Audio( + `https://bienvenidoainternet.org/static/sfx/${ + name === "threadSound" ? this.state.threadSound : this.state.homeSound + }.ogg` + ).play(); + this.saveSettings(); + }); + } + + toggleSetting(e, { name, checked }) { + this.setState({ [name]: checked }, () => { + this.props.handler(this.state.nightMode); + this.saveSettings(); + }); + } + + saveSettings() { + localStorage.setItem("settings", JSON.stringify(this.state)); + } + + render() { + const { + homeSound, + threadSound, + nightMode, + autoUpdateThreads, + notifyOnHome, + notifyOnThread, + postPassword, + showAvatars + } = this.state; + return ( + <Modal trigger={this.props.trigger} size="tiny" centered={false}> + <Modal.Header>Configuración</Modal.Header> + <Modal.Content> + <Modal.Description> + <Header as="h4" dividing> + Apariencia + </Header> + <Checkbox + label="Modo nocturno" + checked={nightMode} + name="nightMode" + onChange={this.toggleSetting} + className="settingCheckbox" + /> + <Checkbox + label="Mostrar avatares" + checked={showAvatars} + name="showAvatars" + onChange={this.toggleSetting} + className="settingCheckbox" + /> + <Header as="h4" dividing> + Comportamiento + </Header> + <Checkbox + label="Actualizar automáticamente hilos" + checked={autoUpdateThreads} + name="autoUpdateThreads" + onChange={this.toggleSetting} + className="settingCheckbox" + /> + <Checkbox + label="Notificar cuando existan nuevas respuestas" + checked={notifyOnHome} + name="notifyOnHome" + onChange={this.toggleSetting} + className="settingCheckbox" + /> + <div className="select"> + Sonido de notificación:{" "} + <Dropdown + inline + select + options={notificationSounds} + value={homeSound} + onChange={this.handleChange} + name="homeSound" + /> + </div> + <Checkbox + label="Notificar cuando un hilo reciba nuevas respuestas" + checked={notifyOnThread} + name="notifyOnThread" + onChange={this.toggleSetting} + className="settingCheckbox" + /> + + <div className="select"> + Sonido de notificación :{" "} + <Dropdown + inline + select + options={notificationSounds} + value={threadSound} + onChange={this.handleChange} + name="threadSound" + /> + </div> + <Header as="h4" dividing> + Posteo + </Header> + <Input label="Contraseña" value={postPassword} type="password" /> + </Modal.Description> + </Modal.Content> + </Modal> + ); + } +} + +export default SettingsModal; diff --git a/src/Thread.js b/src/Thread.js index c79e7e0..b656b9f 100644 --- a/src/Thread.js +++ b/src/Thread.js @@ -28,8 +28,9 @@ class Thread extends Component { this.refreshCooldown = 15; this.cooldownCounter = 0; this.newPostCounter = 0; + let threadSound = JSON.parse(localStorage.getItem("settings")).threadSound; this.notificationSound = new Audio( - "https://bienvenidoainternet.org/msn.ogg" + `https://bienvenidoainternet.org/static/sfx/${threadSound}.ogg` ); } @@ -64,6 +65,10 @@ class Thread extends Component { } async updateReplies() { + if (!JSON.parse(localStorage.getItem("settings")).autoUpdateThreads) { + return; + } + this.cooldownCounter++; if (this.cooldownCounter < this.refreshCooldown) { return; @@ -87,7 +92,9 @@ class Thread extends Component { const newPosts = this.state.thread.posts.concat(resource.posts); this.refreshCooldown = 15; this.newPostCounter += resource.posts.length; - this.notificationSound.play(); + if (JSON.parse(localStorage.getItem("settings")).notifyOnThread) { + this.notificationSound.play(); + } this.setState(({ thread }) => ({ thread: { ...thread, |