64 | {
65 | !isLoading && prompterObject
66 | ? (
67 |
77 |
78 | )
79 | }
80 |
81 | export default Player
82 |
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 |
14 | on:
15 | push:
16 | branches: [ master ]
17 | pull_request:
18 | # The branches below must be a subset of the branches above
19 | branches: [ master ]
20 | schedule:
21 | - cron: '33 4 * * 4'
22 |
23 | jobs:
24 | analyze:
25 | name: Analyze
26 | runs-on: ubuntu-latest
27 |
28 | strategy:
29 | fail-fast: false
30 | matrix:
31 | language: [ 'javascript' ]
32 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
33 | # Learn more:
34 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
35 |
36 | steps:
37 | - name: Checkout repository
38 | uses: actions/checkout@v2
39 |
40 | # Initializes the CodeQL tools for scanning.
41 | - name: Initialize CodeQL
42 | uses: github/codeql-action/init@v1
43 | with:
44 | languages: ${{ matrix.language }}
45 | # If you wish to specify custom queries, you can do so here or in a config file.
46 | # By default, queries listed here will override any specified in a config file.
47 | # Prefix the list here with "+" to use these queries and those in the config file.
48 | # queries: ./path/to/local/query, your-org/your-repo/queries@main
49 |
50 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
51 | # If this step fails, then you should remove it and run the build manually (see below)
52 | - name: Autobuild
53 | uses: github/codeql-action/autobuild@v1
54 |
55 | # ℹ️ Command-line programs to run using the OS shell.
56 | # 📚 https://git.io/JvXDl
57 |
58 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
59 | # and modify them (or add more) to build your code if your project
60 | # uses a compiled language
61 |
62 | #- run: |
63 | # make bootstrap
64 | # make release
65 |
66 | - name: Perform CodeQL Analysis
67 | uses: github/codeql-action/analyze@v1
68 |
--------------------------------------------------------------------------------
/src/components/ForgottenPasswordModal/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { v4 as uuidv4 } from 'uuid'
4 |
5 | import Modal from '../common/Modal'
6 | import styles from './ForgottenPasswordModal.module.scss'
7 | import Input from '../common/Input'
8 | import Button from '../common/Button'
9 | import { requestPasswordRecovery, getToken, sendPasswordRecoveryEmail } from '../../store/actions/user'
10 | import Loader from '../Loader'
11 | import { INLINE_LOADER } from '../../utils/consts'
12 |
13 | /**
14 | * @author zilahir
15 | * @function ForgottenPasswordModal
16 | * */
17 |
18 | const ForgottenPasswordModal = props => {
19 | const { showPasswordModal, requestClose } = props
20 | const [email, setEmail] = useState(null)
21 | const [isEmailsent, toggleEmailSent] = useState(false)
22 | const [isLoading, togleLoading] = useState(false)
23 |
24 | function sendForgottenPasswordEmail() {
25 | const slug = uuidv4().split('-')[0]
26 | togleLoading(isLoading)
27 | const requestPassword = requestPasswordRecovery(slug, email)
28 | requestPassword.then(() => {
29 | const token = getToken(email)
30 | token.then(tokenRes => {
31 | const sendEmail = sendPasswordRecoveryEmail(email, slug, tokenRes.token)
32 | sendEmail.then(() => {
33 | toggleEmailSent(true)
34 | })
35 | })
36 | })
37 | }
38 |
39 | return (
40 | <>
41 | 51 | Enter your email address, and we will send a recovery email 52 |
53 |
54 | setEmail(v)}
58 | />
59 |
60 |
61 |
66 | : 'Send'
69 | }
70 | disabled={!email || isLoading}
71 | onClick={() => sendForgottenPasswordEmail()}
72 | />
73 |
74 |
75 | ) : (
76 |
77 |
83 | )
84 | }
85 | We have sent you an email. Check your inbox!
78 | 82 |
40 |
94 |
95 |
96 | )
97 | }
98 |
99 | export default Preview
100 |
--------------------------------------------------------------------------------
/src/components/Segment/Segment.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 | @import '../../styles/mixins/paragraph';
3 |
4 | .oneSegment {
5 | display: flex;
6 | padding: 5px;
7 | border-radius: 10px;
8 | border-width: 2px;
9 | border-style: solid;
10 | flex-direction: column;
11 | position: relative;
12 |
13 | &:hover {
14 | cursor: pointer;
15 | }
16 |
17 | .segmentHeader {
18 | margin-top: 4px;
19 |
20 | .segmentName {
21 | border-radius: $border-radius;
22 | margin: 0;
23 | height: 30px;
24 | display: flex;
25 | flex: 1;
26 | margin-right: 10px;
27 |
28 | label {
29 | height: 100%;
30 | width: 100%;
31 | input {
32 | @include paragraph(14px, #ffffff, 0.42px);
33 | width: 100%;
34 | background: rgba($color: $gray-2, $alpha: 1);
35 | padding: 10px;
36 | }
37 | }
38 | }
39 |
40 | display: flex;
41 | justify-content: space-between;
42 |
43 | ul {
44 | list-style-type: none;
45 | margin: 0;
46 | padding: 0;
47 | width: 70px;
48 | display: flex;
49 | justify-content: flex-end;
50 | align-items: center;
51 | position: relative;
52 | top: 3px;
53 |
54 | li {
55 | display: flex;
56 | align-items: center;
57 |
58 | .segmentColorIndicator {
59 | width: 16px;
60 | height: 16px;
61 | display: block;
62 | border-radius: 100%;
63 | margin: 0 10px;
64 | }
65 |
66 | .deleteBtn {
67 | color: #ffffff;
68 | background: none;
69 | box-shadow: none;
70 | border: none;
71 | margin: 0;
72 | padding: 0;
73 | font-size: unset;
74 | width: 24px;
75 | height: 24px;
76 |
77 | &:hover {
78 | cursor: pointer;
79 | }
80 |
81 | &:focus {
82 | outline: none;
83 | }
84 | }
85 | }
86 | }
87 | }
88 |
89 | .segmentBody {
90 | margin-top: 10px;
91 |
92 | .segmentText {
93 | @include paragraph(14px, #ffffff, 0.42px)
94 | resize: none;
95 | border: 0;
96 | background: rgba($color: $gray-2, $alpha: 1);
97 | width: calc(100% - 20px);
98 | padding: 10px;
99 | min-height: fit-content;
100 | border-radius: $border-radius;
101 |
102 | &:focus {
103 | outline: none;
104 | }
105 | }
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/components/UserSettingsModal/UserSettingsModal.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/variables";
2 | @import "../../styles/mixins/paragraph";
3 | @import "../../styles/mixins/heading";
4 |
5 | .userSettingsModal {
6 | width: 520px;
7 |
8 |
9 | .topContainer {
10 | display: flex;
11 | justify-content: center;
12 | flex-direction: column;
13 |
14 | h1 {
15 | @include heading();
16 | font-size: 25px;
17 | letter-spacing: 0.75px;
18 | text-align: center;
19 | margin: 10px 0;
20 | margin-bottom: 0;
21 | color: #ffffff;
22 | }
23 |
24 | h2 {
25 | @include heading();
26 | font-size: 15px;
27 | letter-spacing: 0.75px;
28 | text-align: center;
29 | margin: 10px 0;
30 | margin-top: 0;
31 | font-weight: 400;
32 | color: #ffffff;
33 | }
34 |
35 | p {
36 | @include paragraph(14px, #ffffff, 0.42px);
37 | text-align: center;
38 | margin: 0;
39 | padding: 0;
40 | &:hover {
41 | color: $purple;
42 | cursor: pointer;
43 | }
44 | }
45 |
46 | .info {
47 | &.hidden {
48 | display: none;
49 | }
50 |
51 | &.success {
52 | background: rgba($color: $success, $alpha: 0.9);
53 | }
54 |
55 | &.warning {
56 | background: rgba($color: $warning, $alpha: 0.9);
57 | }
58 |
59 | &.error {
60 | background: rgba($color: $error, $alpha: 0.9);
61 | }
62 |
63 | display: flex;
64 | align-items: center;
65 | padding: 10px;
66 | border-radius: $border-radius;
67 | p {
68 | @include paragraph(14px, #ffffff, 0.42px);
69 | margin-left: 10px;
70 | }
71 | }
72 | }
73 | .footerBtnContainer {
74 | display: flex;
75 | justify-content: space-between;
76 | margin-top: 40px;
77 | .btnClass {
78 | button {
79 | height: 45px;
80 | }
81 | }
82 | }
83 |
84 | .inputContainer {
85 | input {
86 | border: 2px solid transparent;
87 | }
88 |
89 | .newUsername {
90 | input {
91 | border: 2px solid $orange;
92 | }
93 | }
94 | .newPasswordContainer {
95 | display: flex;
96 | justify-content: space-between;
97 | }
98 |
99 | p {
100 | @include paragraph(14px, #fff, 0.39px);
101 | margin: 0;
102 | }
103 |
104 | .settingsInput {
105 | margin: 10px 0;
106 | }
107 | }
108 |
109 | .deleteContainer {
110 | margin: 20px 0;
111 | p {
112 | @include paragraph(14px, #fff, 0.39px);
113 | }
114 |
115 | .deleteInner {
116 | .checkBoxContainer {
117 | display: flex;
118 | justify-content: center;
119 | align-items: center;
120 | position: relative;
121 | top: 5px;
122 | }
123 |
124 | display: flex;
125 | justify-content: space-between;
126 | align-items: center;
127 |
128 | p {
129 | margin-left: 10px;
130 | }
131 | .settingsInput {
132 | margin: 10px 0;
133 | }
134 | }
135 | }
136 | }
--------------------------------------------------------------------------------
/src/components/TextEditor/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-shadow */
2 | /* eslint-disable react/jsx-props-no-spreading */
3 | import React, { useState, useEffect } from 'react'
4 | import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
5 | import { useStore, useDispatch } from 'react-redux'
6 |
7 | import segmentsApi from '../../utils/fakeApi/segments'
8 | import Segment from '../Segment'
9 | import { setSegments } from '../../store/actions/segments'
10 | import { SEGMENT } from '../../utils/consts'
11 | import Break from '../common/Break'
12 |
13 | const TextEditor = () => {
14 | const reorder = (list, startIndex, endIndex) => {
15 | const result = Array.from(list)
16 | const [removed] = result.splice(startIndex, 1)
17 | result.splice(endIndex, 0, removed)
18 |
19 | return result
20 | }
21 |
22 | const [segments, setAllSegments] = useState(segmentsApi.getAllSegments())
23 | const store = useStore()
24 | const dispatch = useDispatch()
25 |
26 | function onDragEnd(result) {
27 | if (!result.destination) {
28 | return
29 | }
30 |
31 | const newItems = reorder(
32 | segments,
33 | result.source.index,
34 | result.destination.index,
35 | )
36 |
37 | setAllSegments(newItems)
38 | dispatch(setSegments(newItems))
39 | }
40 |
41 | const grid = 8
42 |
43 | const getItemStyle = (isDragging, draggableStyle) => ({
44 | userSelect: 'none',
45 | padding: `${grid}px 0`,
46 | margin: `0 0 ${grid}px 0`,
47 | background: isDragging ? 'transport' : 'transport',
48 | ...draggableStyle,
49 | })
50 |
51 | useEffect(() => store.subscribe(() => {
52 | const currentSegmentList = store.getState().segments.segments
53 | setAllSegments(currentSegmentList)
54 | }), [store])
55 |
56 | return (
57 |
41 |
93 |
42 |
52 |
62 |
63 |
64 |
92 |
65 |
77 |
89 |
90 |
64 | {segments.map((currSegment, index) => (
65 |
66 | {(provided, snapshot) => (
67 |
90 | ))}
91 | {provided.placeholder}
92 |
93 | )}
94 |
76 | {
77 | currSegment.type === SEGMENT.toLowerCase() ? (
78 |
88 | )}
89 |
26 |
29 |
30 |
84 |
85 |
86 | )
87 | }
88 |
89 | About.propTypes = {
90 | onClose: PropTypes.func.isRequired,
91 | }
92 |
93 | export default About
94 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://app.netlify.com/sites/prompterme/deploys)  [](https://github.com/semantic-release/semantic-release)
2 |
3 |
4 |
35 |
42 |
43 |
44 |
82 |
83 | 45 | What is Prompter.me? 46 |
47 |48 | Prompter.me is a free, open source teleprompter on the web. Using it doesn't 49 | require you to download anything or to sign up for anything. 50 | It was made to give content creators an actually useful free teleprompter, 51 | which would allow them to use it on their own without any additional apps or hacks. 52 | After all, a lot of video content creators out there are one-person operations, 53 | and we know using a prompter without help can be a real pain in the tuchus. 54 |
55 |56 | Prompter.me was designed by Mikko Oittinen and developed by Richard Zilahi. 57 |
58 |59 | Mikko is a Finnish designer and content creator, who knows the pain of using 60 | bad prompters all too well. Mikko is a graphic designer by trade, and you 61 | canlook at (and buy) some of his work at Club Camomile, an online store for 62 | sustainable and ethical print streetwear he co-founded. For his occasional videos 63 | (which almost always utilize teleprompters), check out his YouTube channel 64 | Expert Opinion. 65 |
66 |67 | Richard is a fullstack developer originally from Hungary, 68 | now living in Finland. Richard is enthusiastic about modern stacks, 69 | clean code and open source technology. Interested in big 70 | data and deep data analysis. 71 | Richard is the co-host of the 72 | podcast "Szauna Szenátus", in Hungarian language. 73 | Check out some of Richard's work on his GitHub page and his website. 74 |
75 |76 | Legal stuff 77 |
78 |79 | Read our privacy policy. 80 |
81 |
5 |
6 | 
9 |
10 |
12 | An opensource teleprompter application for the browser. 13 |
14 | 15 | # Teleprompter 16 | 17 |  18 | 19 | ## What is Prompter.me? 20 | 21 | Prompter.me is a _free_, _open source_ teleprompter on the web. Using it doesn't require you to download anything or to sign up for anything. It was made to give content creators an actually useful free teleprompter, which would allow them to use it on their own without any additional apps or hacks. After all, a lot of video content creators out there are one-person operations, and we know using a prompter without help can be a real pain in the tuchus. 22 | 23 | ## Server 24 | 25 | The project's server side repository can be found [here](https://github.com/zilahir/teleprompter-server). 26 | 27 | The server is currently deployed to `AWS – Lambda`. You can crate your own instane if you wish to have a _self-hosted_ version of prompter. Or anywhere else if you wish, you need a `node` environment, and a `MongoDB`. 28 | 29 | ## Contributors 30 | 31 | - :nail_care: _design_: Mikko Oitinen 🇫🇮 ([design](https://xd.adobe.com/view/614443a6-af97-49a7-603e-e82e2c667a77-1775/)) 32 | - :computer: _dev_: Richard Zilahi [http](https://richardzilahi.hu) 🇭🇺 33 | 34 | ## Project dependencies 35 | 36 | This project heavily depends on the following `open source` projects. 37 | 38 | 1. [`redux`](https://github.com/reduxjs/redux) 39 | 2. [`react-redux`](https://github.com/reduxjs/react-redux) 40 | 3. [`redux-thunk`](https://github.com/reduxjs/redux-thunk) 41 | 4. [`redux-persist`](https://github.com/rt2zz/redux-persist) 42 | 5. [`styled-components`](https://github.com/styled-components) 43 | 6. [`use-socket.io-client`](https://github.com/iamgyz/use-socket.io-client) 44 | 7. [`uuid`](https://github.com/uuidjs/uuid) 45 | 8. [`classnames`](https://github.com/JedWatson/classnames) 46 | 9. [`prop-tpyes`](https://github.com/facebook/prop-types) 47 | 10. [`hex-to-rgba`](https://github.com/misund/hex-to-rgba) 48 | 11. [... and a lot other](https://github.com/zilahir/teleprompter/blob/master/package.json) 49 | 50 | ## Developing 51 | 52 | Contribution is very welcome! You need to clone this, and the [server](https://github.com/zilahir/teleprompter-server) repository. 53 | 54 | For the client: 55 | 56 | 1. `npm i` 57 | 2. `npm run start` 58 | 3. The client is listening on `:4444` 59 | 60 | For the server: 61 | 62 | 1. `npm install` 63 | 2. `npm run dev` 64 | 3. The server is listening on `:5000` 65 | 66 | ## Misc 67 | 68 | This project is deployed via [netlify](https://netlify.com). 69 | 70 | Special thanks to [@munkacsimark](https://github.com/munkacsimark/) for helping me out with the scrolling function. :wave: 71 | 72 | [This](https://open.spotify.com/track/6ULAF7fV7JPQPPHz1aP3vc?si=M8ieNoCJR6Ob8JatZ8JEAA) is most listened song during the development of [promoter.me](https://http://prompter.me/). 73 | 74 | ## Licence 75 | 76 | This is a _free_ product, and it's licenced under `BSD 3-Clause License`. -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at info@prompter.me. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "teleprompter", 3 | "version": "2.1.0", 4 | "private": true, 5 | "author": { 6 | "name": "Richard Zilahi", 7 | "email": "zilahi@gmail.com", 8 | "url": "https://richardzilahi.hu" 9 | }, 10 | "engines": { 11 | "node": ">=12 < 15" 12 | }, 13 | "dependencies": { 14 | "@fortawesome/fontawesome": "^1.1.8", 15 | "@fortawesome/fontawesome-free-brands": "^5.0.13", 16 | "@fortawesome/react-fontawesome": "0.0.20", 17 | "@material-ui/core": "^4.11.0", 18 | "@material-ui/icons": "^4.9.1", 19 | "@popmotion/popcorn": "^0.4.4", 20 | "@zilahir/use-socket.io-client": "^1.2.0", 21 | "array-move": "^3.0.1", 22 | "axios": "^0.21.1", 23 | "classnames": "^2.2.6", 24 | "env-cmd": "^10.1.0", 25 | "framer-motion": "^4.0.3", 26 | "hex-to-rgba": "^2.0.1", 27 | "lodash": "^4.17.20", 28 | "moment": "^2.24.0", 29 | "prop-types": "^15.7.2", 30 | "random": "^2.2.0", 31 | "rc-slider": "^9.2.3", 32 | "react": "^17.0.1", 33 | "react-autosize-textarea": "^7.1.0", 34 | "react-beautiful-dnd": "^13.1.0", 35 | "react-color": "^2.18.1", 36 | "react-copy-to-clipboard": "^5.0.2", 37 | "react-device-detect": "^1.17.0", 38 | "react-dom": "^16.13.1", 39 | "react-ga": "^3.3.0", 40 | "react-grid-system": "^7.1.2", 41 | "react-helmet": "^6.0.0", 42 | "react-icons-kit": "^1.3.1", 43 | "react-intersection-observer": "^8.26.1", 44 | "react-keyboard-event-handler": "^1.5.4", 45 | "react-loading": "^2.0.3", 46 | "react-mde": "^11.0.6", 47 | "react-redux": "^7.1.3", 48 | "react-router": "^5.1.2", 49 | "react-router-dom": "^5.1.2", 50 | "react-scripts": "^4.0.3", 51 | "react-scroll": "^1.7.9", 52 | "react-svg-morph": "^0.2.1", 53 | "react-toggle": "^4.1.2", 54 | "react-waypoint": "^9.0.3", 55 | "redux": "^4.0.5", 56 | "redux-devtools-extension": "^2.13.8", 57 | "redux-persist": "^6.0.0", 58 | "redux-thunk": "^2.3.0", 59 | "shortid": "^2.2.15", 60 | "styled-components": "^5.2.0", 61 | "uuid": "^8.3.0" 62 | }, 63 | "scripts": { 64 | "cm": "cz", 65 | "start": "CI=false PORT=4444 react-scripts start", 66 | "build": "react-scripts build", 67 | "build-production": "env-cmd -f config/.env.prod react-scripts build", 68 | "test": "react-scripts test", 69 | "eject": "react-scripts eject", 70 | "format": "prettier --write", 71 | "lint:js": "eslint --ext .js,.jsx .", 72 | "lint:scss": "stylelint" 73 | }, 74 | "eslintConfig": { 75 | "extends": "react-app" 76 | }, 77 | "browserslist": { 78 | "production": [ 79 | ">0.2%", 80 | "not dead", 81 | "not op_mini all" 82 | ], 83 | "development": [ 84 | "last 1 chrome version", 85 | "last 1 firefox version", 86 | "last 1 safari version" 87 | ] 88 | }, 89 | "devDependencies": { 90 | "@semantic-release/changelog": "^5.0.1", 91 | "@semantic-release/commit-analyzer": "^8.0.1", 92 | "@semantic-release/git": "^9.0.0", 93 | "@semantic-release/npm": "github:semantic-release/npm", 94 | "@semantic-release/release-notes-generator": "^9.0.2", 95 | "@typescript-eslint/parser": "^4.19.0", 96 | "@zilahir/eslint-config": "^1.0.1", 97 | "@zilahir/stylelint-config": "^3.0.7", 98 | "commitizen": "^4.2.3", 99 | "conventional-changelog-conventionalcommits": "^4.5.0", 100 | "cz-conventional-changelog": "^3.3.0", 101 | "eslint-config-airbnb": "^18.0.1", 102 | "eslint-config-prettier": "^8.1.0", 103 | "eslint-plugin-import": "^2.22.0", 104 | "eslint-plugin-jsx-a11y": "^6.2.3", 105 | "eslint-plugin-promise": "^4.2.1", 106 | "eslint-plugin-react": "^7.20.6", 107 | "husky": "^5.1.3", 108 | "lint-staged": "^10.4.2", 109 | "node-sass": "^4.14.1", 110 | "prettier": "^2.2.1", 111 | "sass-loader": "^10.0.2", 112 | "semantic-release": "^17.4.2", 113 | "yarn": "^1.17.3" 114 | }, 115 | "lint-staged": { 116 | "*.{js,jsx}": [ 117 | "yarn lint:js", 118 | "git add" 119 | ] 120 | }, 121 | "eslint-plugin-jsx-a11y": "^6.2.3" 122 | } 123 | -------------------------------------------------------------------------------- /src/store/actions/user.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | import { AUTH_USER, REMOVE_USER } from './actionTypes' 4 | import { apiEndpoints } from '../../utils/apiEndpoints' 5 | 6 | const headers = { 7 | 'Content-Type': 'application/json', 8 | } 9 | 10 | export const setUser = user => dispatch => new Promise(resolve => { 11 | dispatch({ 12 | type: AUTH_USER, 13 | payload: { 14 | user, 15 | }, 16 | }) 17 | resolve(user) 18 | }) 19 | 20 | export const removeUser = () => dispatch => new Promise(resolve => { 21 | dispatch({ 22 | type: REMOVE_USER, 23 | payload: {}, 24 | }) 25 | resolve(true) 26 | }) 27 | 28 | export const authUser = user => dispatch => new Promise(resolve => { 29 | const authObject = { 30 | email: `${user.email}`, 31 | password: `${user.password}`, 32 | } 33 | axios.post(apiEndpoints.authUser, JSON.stringify(authObject), { 34 | headers, 35 | }) 36 | .then(resp => { 37 | dispatch(setUser(resp.data)) 38 | resolve(resp.data) 39 | }) 40 | }) 41 | 42 | export const refreshToken = token => dispatch => new Promise(resolve => { 43 | axios.get(apiEndpoints.refreshToken, { 44 | params: { 45 | refresh_token: token, 46 | }, 47 | }) 48 | .then(resp => { 49 | dispatch(setUser(resp.data)) 50 | resolve(resp.data) 51 | }) 52 | }) 53 | 54 | export const logOutUser = () => dispatch => new Promise(resolve => { 55 | dispatch(removeUser()) 56 | resolve(true) 57 | }) 58 | 59 | export const modifyPassword = (authToken, userId, newPassword) => new Promise(resolve => { 60 | axios.defaults.headers.common.authorization = `Bearer ${authToken}` 61 | axios.patch(`${apiEndpoints.modifyPassword}/${userId}`, { password: newPassword }, { 62 | headers, 63 | }) 64 | .then(res => { 65 | resolve({ 66 | isSuccess: true, 67 | ...res, 68 | }) 69 | }) 70 | }) 71 | 72 | export const getPasswordResetObject = slug => new Promise(resolve => { 73 | axios.get(`${apiEndpoints.getPasswordRecovery}/${slug}`, { 74 | headers, 75 | }) 76 | .then(res => { 77 | resolve({ 78 | isSuccess: true, 79 | ...res.data, 80 | }) 81 | }) 82 | }) 83 | 84 | export const resetPassword = (newPassword, authToken, userId) => new Promise(resolve => { 85 | axios.defaults.headers.common.authorization = `Bearer ${authToken}` 86 | axios.patch(`${apiEndpoints.resetpassword}/${userId}`, JSON.stringify({ 87 | password: newPassword, 88 | }), { 89 | headers, 90 | }) 91 | .then(res => { 92 | resolve({ 93 | isSuccess: true, 94 | ...res, 95 | }) 96 | }) 97 | }) 98 | 99 | export const requestPasswordRecovery = (slug, email) => new Promise(resolve => { 100 | axios.post(`${apiEndpoints.requestPasswordRecovery}`, JSON.stringify({ 101 | slug, 102 | email, 103 | }), { 104 | headers, 105 | }) 106 | .then(res => { 107 | resolve({ 108 | ...res.data, 109 | }) 110 | }) 111 | }) 112 | 113 | export const sendPasswordRecoveryEmail = (username, slug, token) => new Promise(resolve => { 114 | axios.post(`${apiEndpoints.sendPasswordRecoveryEmail}`, JSON.stringify({ 115 | slug, 116 | username, 117 | token, 118 | }), { 119 | headers, 120 | }) 121 | .then(res => { 122 | resolve({ 123 | ...res.data, 124 | }) 125 | }) 126 | }) 127 | 128 | export const getToken = username => new Promise(resolve => { 129 | axios.post(apiEndpoints.getToken, JSON.stringify({ 130 | username, 131 | }), { 132 | headers, 133 | }) 134 | .then(res => { 135 | resolve({ 136 | ...res.data, 137 | }) 138 | }) 139 | }) 140 | 141 | export const setPasswordRecoveryToUsed = slug => new Promise(resolve => { 142 | axios.patch(`${apiEndpoints.setPasswordRecoveryToUsed}/${slug}`, { 143 | headers, 144 | }) 145 | .then(res => { 146 | resolve({ 147 | ...res.data, 148 | }) 149 | }) 150 | }) 151 | 152 | export const modifyUsername = (authToken, userId, newUsername) => new Promise(resolve => { 153 | axios.defaults.headers.common.authorization = `Bearer ${authToken}` 154 | axios.patch(`${apiEndpoints.modifyUserName}/${userId}`, { username: newUsername }, { 155 | headers, 156 | }) 157 | .then(res => { 158 | resolve({ 159 | isSuccess: true, 160 | ...res, 161 | }) 162 | }) 163 | }) 164 | -------------------------------------------------------------------------------- /src/components/Password/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import ReactGA from 'react-ga' 3 | import { Row, Container, Col } from 'react-grid-system' 4 | import { useParams } from 'react-router-dom' 5 | import classnames from 'classnames' 6 | import { alertTriangle } from 'react-icons-kit/feather/alertTriangle' 7 | import Icon from 'react-icons-kit' 8 | 9 | import styles from './Password.module.scss' 10 | import Button from '../common/Button' 11 | import Input from '../common/Input' 12 | import Logo from '../common/Logo' 13 | import { getPasswordResetObject, resetPassword, setPasswordRecoveryToUsed } from '../../store/actions/user' 14 | import { FORGOTTEN_PW, PASSWORD } from '../../utils/consts' 15 | 16 | /** 17 | * @author zilahir 18 | * @function Password 19 | * */ 20 | 21 | const Password = () => { 22 | const [newPassword, setNewPassword] = useState(null) 23 | const [confirmNewPassword, setConfirmNewpassword] = useState(null) 24 | const [alertMessage, setAlertMessage] = useState({}) 25 | const [isHidden, toggleHidden] = useState(true) 26 | const [userId, setUserId] = useState(null) 27 | const { slug } = useParams() 28 | const { token } = useParams() 29 | 30 | ReactGA.pageview(`${FORGOTTEN_PW}`) 31 | function handlePasswordUpdate() { 32 | const passwordReset = resetPassword(newPassword, token, userId) 33 | passwordReset.then(() => { 34 | setPasswordRecoveryToUsed(slug).then(res => { 35 | if (res.success) { 36 | toggleHidden(true) 37 | setAlertMessage({ 38 | text: 'Your passwsord has been changed!', 39 | state: 'success', 40 | }) 41 | } 42 | }) 43 | }) 44 | } 45 | 46 | useEffect(() => { 47 | const passwordRecoveryRequest = getPasswordResetObject(slug) 48 | passwordRecoveryRequest.then(res => { 49 | if (res.isUsed || res.expiresAt < new Date().getMinutes()) { 50 | setAlertMessage({ 51 | text: 'This password reset had expired', 52 | state: 'error', 53 | }) 54 | } else { 55 | setUserId(res.email) 56 | toggleHidden(false) 57 | } 58 | }) 59 | }, []) 60 | return ( 61 |
62 |
65 |
66 |
128 |
129 |
130 | )
131 | }
132 |
133 | export default Password
134 |
--------------------------------------------------------------------------------
/src/store/actions/prompter.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | import { headers } from '../../utils/consts'
4 | import { apiEndpoints } from '../../utils/apiEndpoints'
5 | import { GET_ALL_PROMPTER, SET_PROMPTER_SLUG, SET_PROJECT_NAME, CLEAR_ALL_PROMPTER, COPY_PROMPTER_OBJECT, CLEAR_PROMPTER_OBJECT } from './actionTypes'
6 |
7 | export const setAllPrompterForUser = usersPrompters => dispatch => new Promise(resolve => {
8 | dispatch({
9 | type: GET_ALL_PROMPTER,
10 | payload: {
11 | usersPrompters,
12 | },
13 | })
14 | resolve(usersPrompters)
15 | })
16 |
17 | export const clearUserPrompters = () => dispatch => new Promise(resolve => {
18 | dispatch({
19 | type: CLEAR_ALL_PROMPTER,
20 | payload: {},
21 | })
22 | resolve({
23 | success: true,
24 | })
25 | })
26 |
27 | export const getAllUserPrompter = (userId, authToken) => dispatch => new Promise(resolve => {
28 | axios.defaults.headers.common.authorization = `Bearer ${authToken}`
29 | axios.get(`${apiEndpoints.getAllPrompterForUser}/${userId}`, {
30 | headers,
31 | })
32 | .then(resp => {
33 | dispatch(clearUserPrompters())
34 | dispatch(setAllPrompterForUser(resp.data))
35 | resolve(resp.data)
36 | })
37 | })
38 |
39 | export const setPrompterSlug = prompterSlug => dispatch => new Promise(resolve => {
40 | dispatch({
41 | type: SET_PROMPTER_SLUG,
42 | payload: {
43 | prompterSlug,
44 | },
45 | })
46 | resolve(prompterSlug)
47 | })
48 |
49 | export const setPrompterProjectName = projectName => dispatch => new Promise(resolve => {
50 | dispatch({
51 | type: SET_PROJECT_NAME,
52 | payload: {
53 | projectName,
54 | },
55 | })
56 | resolve(projectName)
57 | })
58 |
59 | export const copyPrompterObject = prompterObject => dispatch => new Promise(resolve => {
60 | dispatch({
61 | type: COPY_PROMPTER_OBJECT,
62 | payload: {
63 | prompterObject,
64 | },
65 | })
66 | resolve(prompterObject)
67 | })
68 |
69 | export const clearPrompterObject = () => dispatch => new Promise(resolve => {
70 | dispatch({
71 | type: CLEAR_PROMPTER_OBJECT,
72 | payload: {},
73 | })
74 | resolve(true)
75 | })
76 |
77 | export const createNewPrompterNoAuth = (
78 | newPrompterObject, endPoint,
79 | ) => new Promise(resolve => {
80 | axios.post(`${endPoint}`, newPrompterObject, {
81 | headers,
82 | })
83 | .then(res => {
84 | resolve({
85 | isSuccess: true,
86 | ...res,
87 | })
88 | })
89 | })
90 |
91 | export const createNewPrompter = (
92 | newPrompterObject, authToken,
93 | ) => new Promise(resolve => {
94 | axios.defaults.headers.common.authorization = `Bearer ${authToken}`
95 | axios.post(`${apiEndpoints.newPrompter}`, newPrompterObject, {
96 | headers,
97 | })
98 | .then(res => {
99 | resolve({
100 | isSuccess: true,
101 | ...res,
102 | })
103 | })
104 | })
105 |
106 | export const deletePrompter = (idToDel, authToken) => new Promise(resolve => {
107 | axios.defaults.headers.common.authorization = `Bearer ${authToken}`
108 | axios.delete(`${apiEndpoints.delPrompter}/${idToDel}`, {
109 | headers,
110 | })
111 | .then(res => {
112 | resolve({
113 | isSuccess: true,
114 | ...res,
115 | })
116 | })
117 | })
118 |
119 | export const updatePrompterNoAuth = updatedPrompterObject => new Promise(resolve => {
120 | axios.patch(`${apiEndpoints.updatePrompterNoAuth}/${updatedPrompterObject.slug}`, updatedPrompterObject, {
121 | headers,
122 | })
123 | .then(res => {
124 | resolve({
125 | isSuccess: true,
126 | ...res,
127 | })
128 | })
129 | })
130 |
131 | export const isProverSaved = slug => new Promise(resolve => {
132 | axios.get(`${apiEndpoints.getPrompterBySlug}/${slug}`, {
133 | headers,
134 | })
135 | .then(res => {
136 | resolve({
137 | ...res.data,
138 | })
139 | })
140 | })
141 |
142 | export const updatePrompter = updatedPrompterObject => new Promise(resolve => {
143 | axios.patch(`${apiEndpoints.modifyPrompter}/${updatedPrompterObject.slug}`, updatedPrompterObject, {
144 | headers,
145 | })
146 | .then(res => {
147 | resolve({
148 | isSuccess: true,
149 | ...res,
150 | })
151 | })
152 | })
153 |
154 | export const getPrompterBySlug = slug => new Promise(resolve => {
155 | axios.get(`${apiEndpoints.getPrompterBySlugNoAuth}/${slug}`, {
156 | headers,
157 | })
158 | .then(response => {
159 | resolve(response.data)
160 | })
161 | })
162 |
--------------------------------------------------------------------------------
/src/components/Segment/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable jsx-a11y/click-events-have-key-events */
2 | /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
3 | import React, { useContext, useRef, useState } from 'react'
4 | import PropTypes from 'prop-types'
5 | import styled from 'styled-components'
6 | import { useSelector, useDispatch } from 'react-redux'
7 | import CloseIcon from '@material-ui/icons/Close'
8 | import TextareaAutosize from 'react-autosize-textarea'
9 |
10 | import rootContext from '../Main/rootContext'
11 | import styles from './Segment.module.scss'
12 | import Input from '../common/Input'
13 | import ColorPicker from '../ColorPicker'
14 | import { modifySegment, setSegments } from '../../store/actions/segments'
15 |
16 | /**
17 | * @author zilahir
18 | * @function Segemnt
19 | * */
20 |
21 | const OnseSegment = styled.div`
22 | border-color: ${props => props.borderColor};
23 | `
24 |
25 | const SegmentIndicator = styled.span`
26 | background-color: ${props => props.segmentColor};
27 | `
28 |
29 | const Segment = ({
30 | segmentColor,
31 | segmentTitle,
32 | segmentKey,
33 | segmentId,
34 | }) => {
35 | const thisSegmentRef = useRef(null)
36 | const [isColorPickerOpen, toggleColorPickerOpen] = useState(false)
37 | const dispatch = useDispatch()
38 | const context = useContext(rootContext)
39 |
40 | const thisSegment = useSelector(
41 | state => state.segments.segments.find(segment => segment.id === segmentId),
42 | )
43 |
44 | const allSegments = useSelector(state => state.segments.segments)
45 |
46 | function handleSegmentNameChange(newSegmentTitle) {
47 | dispatch(modifySegment({
48 | ...thisSegment,
49 | segmentTitle: newSegmentTitle,
50 | }))
51 | }
52 |
53 | function handleSegmentTextChange(newSegmentText) {
54 | dispatch(modifySegment({
55 | ...thisSegment,
56 | segmentText: newSegmentText,
57 | }))
58 | }
59 |
60 | function segmentTextOnBlur(event) {
61 | context.setTextPreview(event.target.value)
62 | }
63 |
64 | function handleSegmentColorChange(newColor) {
65 | dispatch(modifySegment({
66 | ...thisSegment,
67 | segmentColor: newColor,
68 | }))
69 | toggleColorPickerOpen(false)
70 | }
71 |
72 | function handleSegmentDelete() {
73 | const filteredSegments = allSegments.filter(segment => segment.id !== segmentId)
74 | dispatch(setSegments(filteredSegments))
75 | }
76 |
77 | function handleFocusOut(event) {
78 | handleSegmentNameChange(event.target.value)
79 | }
80 |
81 | return (
82 | <>
83 |
69 |
125 |
126 |
70 |
90 | {
91 | !isHidden
92 | ? (
93 | <>
94 |
80 |
87 | ) : null
88 | }
89 | 82 | { 83 | alertMessage.text 84 | } 85 |
86 |
95 |
99 | 96 | Password reset 97 |
98 |
100 | setNewPassword(v)}
103 | inputType={PASSWORD}
104 | labelText="New password"
105 | />
106 | setConfirmNewpassword(v)}
110 | labelText="Confirm new password"
111 | />
112 |
113 |
88 | handleFocusOut(event)}
93 | inheritedValue={segmentTitle}
94 | />
95 |
115 | -
96 |
- toggleColorPickerOpen(currStatus => !currStatus)}
98 | >
99 |
103 |
104 | - 105 | 112 | 113 |
116 | handleSegmentTextChange(event.target.value)}
118 | className={styles.segmentText}
119 | value={thisSegment.segmentText}
120 | ref={thisSegmentRef}
121 | onBlur={event => segmentTextOnBlur(event)}
122 | />
123 |
124 |
101 |
146 | )
147 | }
148 |
149 | TextPreview.propTypes = {
150 | isAnimationRunning: PropTypes.bool.isRequired,
151 | scrollSpeed: PropTypes.number.isRequired,
152 | }
153 |
154 | export default TextPreview
155 |
--------------------------------------------------------------------------------
/src/components/MobileController/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import ReactGA from 'react-ga'
3 | import { useParams } from 'react-router-dom'
4 | import { useSocket } from '@zilahir/use-socket.io-client'
5 | import classnames from 'classnames'
6 | import styled from 'styled-components'
7 | import { MorphReplace } from 'react-svg-morph'
8 | import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp'
9 | import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'
10 | import FastRewindIcon from '@material-ui/icons/FastRewind'
11 | import FastForwardIcon from '@material-ui/icons/FastForward'
12 | import InfoIcon from '@material-ui/icons/Info'
13 |
14 | import styles from './MobileContainer.module.scss'
15 | import arrowBg from '../../assets/controls/bg.svg'
16 | import { REMOTE } from '../../utils/consts'
17 | import Logo from '../common/Logo'
18 |
19 | /**
20 | * @author zilahir
21 | * @function MobileController
22 | * */
23 |
24 | const BTN = styled.div`
25 | &:before {
26 | content: '';
27 | background-image: url(${arrowBg})
28 | }
29 | `
30 |
31 | const MobileController = () => {
32 | ReactGA.pageview(`${REMOTE}`)
33 | const { slug } = useParams()
34 | const [isPlaying, togglePlaying] = useState(false)
35 | const [socket] = useSocket(process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:5000' : process.env.REACT_APP_BACKEND_V2)
36 | function handleStartStop() {
37 | togglePlaying(!isPlaying)
38 | }
39 |
40 | function incScrollingSpeed() {
41 | if (socket) {
42 | socket.emit('incSpeed', {
43 | prompterId: slug,
44 | })
45 | }
46 | }
47 |
48 | function decScrollingSpeed() {
49 | if (socket) {
50 | socket.emit('decSpeed', {
51 | prompterId: slug,
52 | })
53 | }
54 | }
55 |
56 | function jumpUp() {
57 | if (socket) {
58 | socket.emit('jumpUp', {
59 | prompterId: slug,
60 | })
61 | }
62 | }
63 |
64 | function jumpDown() {
65 | if (socket) {
66 | socket.emit('jumpDown', {
67 | prompterId: slug,
68 | })
69 | }
70 | }
71 |
72 | useEffect(() => {
73 | if (socket) {
74 | socket.emit('isPlaying', {
75 | prompterId: slug,
76 | isPlaying,
77 | })
78 | }
79 | }, [isPlaying])
80 |
81 | return (
82 |
105 |
114 |
122 |
123 |
117 |
121 | 118 | {textPreview} 119 |
120 |
127 |
136 |
144 |
145 |
139 |
143 | 140 | {textPreview} 141 |
142 |
83 | jumpUp()}
98 | >
99 |
101 | jumpDown()}
155 | >
156 |
158 |
159 | )
160 | }
161 |
162 | export default MobileController
163 |
--------------------------------------------------------------------------------
/src/components/MobileController/MobileContainer.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 | @import '../../styles/mixins/paragraph';
3 |
4 | .mainContainer {
5 | overflow: hidden;
6 | background: rgba($color: $gray-6, $alpha: 1.0);
7 |
8 | .logoContainer {
9 | width: 100%;
10 | display: flex;
11 | justify-content: center;
12 | position: absolute;
13 | flex-direction: column;
14 | top: 5%;
15 |
16 | p {
17 | @include paragraph(16px, $gray-4, 0);
18 | text-align: center;
19 | position: relative;
20 | margin: 20px;
21 | }
22 |
23 | div {
24 | width: inherit;
25 | margin-left: 0;
26 | display: flex;
27 | justify-content: center;
28 | }
29 |
30 | .infoIcon {
31 | margin-left: 10px;
32 | position: absolute;
33 | right: 0;
34 | }
35 | }
36 |
37 | div {
38 | &:focus {
39 | outline: none;
40 | }
41 | }
42 |
43 | display: flex;
44 | justify-content: center;
45 | align-items: center;
46 | flex-direction: column;
47 | flex: 1;
48 | height: 100vh;
49 | .top {
50 |
51 | svg {
52 | position: absolute;
53 | bottom: 15px;
54 | }
55 |
56 | &:active {
57 | opacity: .4;
58 | }
59 |
60 | &:before {
61 | width: 135px;
62 | height: 135px;
63 | background-repeat: no-repeat;
64 | position: absolute;
65 | bottom: 0px;
66 | transform: rotate(180deg);
67 | display: flex;
68 | justify-content: flex-end;
69 | }
70 | position: relative;
71 | display: flex;
72 | flex: 1;
73 | justify-content: center;
74 | width: 150px;
75 | height: 200px;
76 | top: 20px;
77 | z-index: 9;
78 | img {
79 | transform: scale(1);
80 | display: flex;
81 | align-self: flex-end;
82 | position: relative;
83 | top: -20px;
84 | }
85 | }
86 | .middle {
87 | display: flex;
88 | justify-content: center;
89 | align-items: center;
90 | position: relative;
91 | flex: 1;
92 | width: 100%;
93 | .oneButton {
94 | svg {
95 | z-index: 9;
96 | }
97 |
98 | &:active {
99 | opacity: .4;
100 | }
101 |
102 | position: relative;
103 | height: 200px;
104 | width: 150px;
105 | display: flex;
106 | justify-content: center;
107 | align-items: center;
108 | &:first-of-type {
109 | position: absolute;
110 | left: 0;
111 | &:before {
112 | width: 135px;
113 | height: 135px;
114 | position: absolute;
115 | background-repeat: no-repeat;
116 | transform: scale(1);
117 | transform: rotate(90deg);
118 | top: unset;
119 | left: -30px;
120 | z-index: 1;
121 | }
122 | }
123 | &:last-of-type {
124 | position: absolute;
125 | right: 0;
126 | &:before {
127 | width: 135px;
128 | height: 135px;
129 | position: absolute;
130 | background-repeat: no-repeat;
131 | transform: scale(1);
132 | transform: rotate(-90deg);
133 | top: unset;
134 | left: 45px;
135 | z-index: 1;
136 | }
137 | }
138 | &.playPause {
139 | background: rgba($color: $purple, $alpha: 1.0);
140 | width: 140px;
141 | height: 140px;
142 | border-radius: 100px;
143 | display: flex;
144 | justify-content: center;
145 | align-items: center;
146 | }
147 | &.dirButton {
148 |
149 | }
150 | }
151 | }
152 | .bottom {
153 | svg {
154 | position: absolute;
155 | top: -10px;
156 | }
157 | &:active {
158 | opacity: .4;
159 | }
160 | &:before {
161 | width: 135px;
162 | height: 135px;
163 | background-repeat: no-repeat;
164 | position: absolute;
165 | top: -30px;
166 | display: flex;
167 | justify-content: flex-end;
168 | }
169 | top: 15px;
170 | position: relative;
171 | display: flex;
172 | flex: 1;
173 | width: 100%;
174 | justify-content: center;
175 | img {
176 | transform: scale(1);
177 | display: flex;
178 | align-self: flex-start;
179 | }
180 | }
181 | }
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | // This optional code is used to register a service worker.
3 | // register() is not called by default.
4 |
5 | // This lets the app load faster on subsequent visits in production, and gives
6 | // it offline capabilities. However, it also means that developers (and users)
7 | // will only see deployed updates on subsequent visits to a page, after all the
8 | // existing tabs open on the page have been closed, since previously cached
9 | // resources are updated in the background.
10 |
11 | // To learn more about the benefits of this model and instructions on how to
12 | // opt-in, read https://bit.ly/CRA-PWA
13 |
14 | const isLocalhost = Boolean(
15 | window.location.hostname === 'localhost' ||
16 | // [::1] is the IPv6 localhost address.
17 | window.location.hostname === '[::1]' ||
18 | // 127.0.0.1/8 is considered localhost for IPv4.
19 | window.location.hostname.match(
20 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
21 | )
22 | );
23 |
24 | export function register(config) {
25 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
26 | // The URL constructor is available in all browsers that support SW.
27 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
28 | if (publicUrl.origin !== window.location.origin) {
29 | // Our service worker won't work if PUBLIC_URL is on a different origin
30 | // from what our page is served on. This might happen if a CDN is used to
31 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
32 | return;
33 | }
34 |
35 | window.addEventListener('load', () => {
36 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
37 |
38 | if (isLocalhost) {
39 | // This is running on localhost. Let's check if a service worker still exists or not.
40 | checkValidServiceWorker(swUrl, config);
41 |
42 | // Add some additional logging to localhost, pointing developers to the
43 | // service worker/PWA documentation.
44 | navigator.serviceWorker.ready.then(() => {
45 | console.log(
46 | 'This web app is being served cache-first by a service ' +
47 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
48 | );
49 | });
50 | } else {
51 | // Is not localhost. Just register service worker
52 | registerValidSW(swUrl, config);
53 | }
54 | });
55 | }
56 | }
57 |
58 | function registerValidSW(swUrl, config) {
59 | navigator.serviceWorker
60 | .register(swUrl)
61 | .then(registration => {
62 | registration.onupdatefound = () => {
63 | const installingWorker = registration.installing;
64 | if (installingWorker == null) {
65 | return;
66 | }
67 | installingWorker.onstatechange = () => {
68 | if (installingWorker.state === 'installed') {
69 | if (navigator.serviceWorker.controller) {
70 | // At this point, the updated precached content has been fetched,
71 | // but the previous service worker will still serve the older
72 | // content until all client tabs are closed.
73 | console.log(
74 | 'New content is available and will be used when all ' +
75 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
76 | );
77 |
78 | // Execute callback
79 | if (config && config.onUpdate) {
80 | config.onUpdate(registration);
81 | }
82 | } else {
83 | // At this point, everything has been precached.
84 | // It's the perfect time to display a
85 | // "Content is cached for offline use." message.
86 | console.log('Content is cached for offline use.');
87 |
88 | // Execute callback
89 | if (config && config.onSuccess) {
90 | config.onSuccess(registration);
91 | }
92 | }
93 | }
94 | };
95 | };
96 | })
97 | .catch(error => {
98 | console.error('Error during service worker registration:', error);
99 | });
100 | }
101 |
102 | function checkValidServiceWorker(swUrl, config) {
103 | // Check if the service worker can be found. If it can't reload the page.
104 | fetch(swUrl)
105 | .then(response => {
106 | // Ensure service worker exists, and that we really are getting a JS file.
107 | const contentType = response.headers.get('content-type');
108 | if (
109 | response.status === 404 ||
110 | (contentType != null && contentType.indexOf('javascript') === -1)
111 | ) {
112 | // No service worker found. Probably a different app. Reload the page.
113 | navigator.serviceWorker.ready.then(registration => {
114 | registration.unregister().then(() => {
115 | window.location.reload();
116 | });
117 | });
118 | } else {
119 | // Service worker found. Proceed as normal.
120 | registerValidSW(swUrl, config);
121 | }
122 | })
123 | .catch(() => {
124 | console.log(
125 | 'No internet connection found. App is running in offline mode.'
126 | );
127 | });
128 | }
129 |
130 | export function unregister() {
131 | if ('serviceWorker' in navigator) {
132 | navigator.serviceWorker.ready.then(registration => {
133 | registration.unregister();
134 | });
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/images/prompterme-logo-dark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/prompterme-logo-dark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Login/Login.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 | @import '../../styles/mixins/paragraph';
3 |
4 | .loginBoxContainer {
5 | position: absolute;
6 | border-radius: $login-box-border-radius;
7 | box-shadow: 3px 3px 20px rgba($color: #000000, $alpha: 0.8);
8 | background-color: $login-box-bg-color;
9 | top: 50px;
10 | right: unset;
11 | display: flex;
12 | flex-direction: column;
13 | justify-content: center;
14 | align-items: center;
15 | padding: 20px;
16 | z-index: 2;
17 |
18 | .additionalInfo {
19 | width: 275px;
20 |
21 | p {
22 | @include paragraph(14px, #ffffff);
23 | letter-spacing: 0;
24 | line-height: 1.7;
25 | padding: 10px 20px;
26 |
27 | a {
28 | color: $purple;
29 | text-decoration: none;
30 |
31 | &:hover {
32 | text-decoration: underline;
33 | }
34 | }
35 | }
36 | }
37 |
38 | &.registering {
39 | transition: all .3s ease;
40 | width: 280px;
41 | height: 100px;
42 | padding-top: 0;
43 | padding-bottom: 0;
44 | }
45 |
46 | &.saveContainer {
47 | width: 280px;
48 | height: 150px;
49 | .success {
50 | &.hidden {
51 | display: none;
52 | }
53 | &.visible {
54 | display: block;
55 | }
56 | width: 100%;
57 | position: absolute;
58 | bottom: 0;
59 | overflow: hidden;
60 | border-bottom-right-radius: 5px;
61 | border-bottom-left-radius: 5px;
62 | display: flex;
63 | justify-content: center;
64 | align-items: center;
65 | background-color: rgba($color: $success, $alpha: 0.8);
66 | p {
67 | @include paragraph(12px, #ffffff, 0);
68 | text-transform: uppercase;
69 | padding: 20px 0;
70 | }
71 | }
72 | }
73 | &.hidden {
74 | display: none;
75 | }
76 | &.visible {
77 | display: block;
78 | }
79 | .loginInput {
80 | margin: 10px;
81 | input {
82 | font-size: 14px !important;
83 | }
84 | }
85 | .loginInputWError {
86 | margin: 0 10px;
87 | input {
88 | font-size: 14px !important;
89 | border: 2px solid $orange !important;
90 | }
91 | }
92 | .loginBtn {
93 | margin: 0;
94 | margin-top: 20px;
95 | button {
96 | height: 45px;
97 | font-weight: 300;
98 | }
99 | }
100 | &.itemBoxContainer {
101 | right: unset;
102 | padding: 0;
103 | .savedItems {
104 | list-style-type: none;
105 | padding: 0;
106 | width: 260px;
107 | li {
108 | @include paragraph(15px, #ffffff);
109 | padding: 10px 0;
110 | transition: all .2s ease;
111 | display: flex;
112 | justify-content: space-between;
113 | padding: 10px 10px;
114 | padding-left: 20px;
115 | &:hover {
116 | cursor: pointer;
117 | background-color: rgba($color: $gray-3, $alpha: 1.0);
118 | transition: all .2s ease;
119 | }
120 | .rootIcon {
121 | display: flex;
122 | align-items: center;
123 | .icon {
124 | opacity: 0.6;
125 | margin-left: 15px;
126 | &:focus {
127 | outline: none;
128 | }
129 | &:hover {
130 | transition: all .2s ease;
131 | opacity: 1;
132 | cursor: pointer;
133 | }
134 | margin-left: 15px;
135 | &.rotate {
136 | transform: rotate(90deg);
137 | position: relative;
138 | top: 2px;
139 | }
140 | color: $purple;
141 | svg {
142 | fill: $purple;
143 | }
144 | }
145 | }
146 | &:last-of-type {
147 | border: none;
148 | }
149 | }
150 | }
151 | }
152 |
153 | .errorContainer {
154 | &.hidden {
155 | display: none;
156 | }
157 | padding-top: 10px;
158 | p {
159 | @include paragraph(14px, $orange, 0);
160 | }
161 | }
162 |
163 | .forgottenContainer {
164 | &:focus {
165 | outline: none
166 | }
167 |
168 | p {
169 | @include paragraph(14px, $purple, 0);
170 | margin-top: 20px;
171 | opacity: .8;
172 | &:hover {
173 | cursor: pointer;
174 | opacity: 1;
175 | transition: all 0.2s ease;
176 | text-decoration: underline;
177 | }
178 | }
179 | }
180 | }
181 |
182 | .modal {
183 | padding: 30px;
184 |
185 | h3 {
186 | @include paragraph(14px, #ffffff);
187 | font-weight: 300;
188 | margin: 0;
189 | margin-bottom: 20px;
190 | }
191 |
192 | p {
193 | @include paragraph(14px, #ffffff);
194 | }
195 |
196 | .buttonContainer {
197 | display: flex;
198 | padding-top: 30px;
199 | button {
200 | margin: 0 10px;
201 | font-weight: 300;
202 | }
203 | }
204 | }
205 |
206 | .overLay {
207 | position: absolute;
208 | width: 100%;
209 | height: 100%;
210 | left: 0;
211 | top: 0;
212 | }
--------------------------------------------------------------------------------
/src/components/EditorSidebar/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useDispatch, useSelector } from 'react-redux'
3 | import { Col } from 'react-grid-system'
4 | import Toggle from 'react-toggle'
5 | import 'react-toggle/style.css'
6 | import Icon from 'react-icons-kit'
7 | import { github } from 'react-icons-kit/fa/github'
8 |
9 | import SliderAlt from '../common/SliderAlt'
10 | import Selector from '../common/Selector'
11 | import { scrollWidthSettngs, colorSchemeSettings, fontOptions, alignmentOptions, Colors } from '../../utils/consts'
12 | import { SET_FONT_SIZE, SET_LINE_HEIGHT, SET_LETTER_SPACING, SET_SCROLL_SPEED } from '../../store/actions/actionTypes'
13 | import styles from './EditorSidebar.module.scss'
14 | import './Toggle.scss'
15 | import { toggleMirror, setScrollWidth, setFont, setTextAlignment } from '../../store/actions/text'
16 | import { setColorScheme } from '../../store/actions/misc'
17 |
18 | /**
19 | * @author zilahir
20 | * @function EditorSidebar
21 | * */
22 |
23 | const EditorSidebar = () => {
24 | const dispatch = useDispatch()
25 | function handleFlip(boolean) {
26 | dispatch(toggleMirror(boolean.target.checked))
27 | }
28 |
29 | const fontSize = useSelector(state => state.text.fontSize)
30 | const letterSpacing = useSelector(state => state.text.letterSpacing)
31 | const lineHeight = useSelector(state => state.text.lineHeight)
32 | const scrollSpeed = useSelector(state => state.text.scrollSpeed)
33 | const flipped = useSelector(state => state.text.isFlipped)
34 |
35 | const scrollWidth = useSelector(state => state.text.scrollWidth)
36 | const activeScrollId = scrollWidthSettngs.find(curr => (
37 | curr.label === scrollWidth
38 | ))
39 |
40 | const colorScheme = useSelector(state => state.misc.chosenColorScheme)
41 | const activeColorScheme = colorSchemeSettings.find(currColorScheme => (
42 | currColorScheme.label === colorScheme.toLowerCase()
43 | ))
44 |
45 | const selectedFont = useSelector(state => state.text.chosenFont)
46 | const activeFont = fontOptions.find(currentFont => (
47 | currentFont.label === selectedFont.toLowerCase()
48 | ))
49 |
50 | const selectedAlignment = useSelector(state => state.text.textAlignment)
51 | const activeAlignment = alignmentOptions.find(curentAlignment => (
52 | curentAlignment.id === selectedAlignment
53 | ))
54 |
55 | function handleScrollWidthChange(chosenScrollWidthId) {
56 | const chosenValue = scrollWidthSettngs.find(item => (
57 | item.id === chosenScrollWidthId
58 | ))
59 |
60 | dispatch(setScrollWidth(chosenValue.label))
61 | }
62 |
63 | function handleColorSchemeChange(chosenColorSchemeId) {
64 | const thisColorScheme = colorSchemeSettings.find(
65 | currentColorScheme => currentColorScheme.id === chosenColorSchemeId,
66 | )
67 | dispatch(setColorScheme(thisColorScheme.label))
68 | }
69 |
70 | function handleFontChange(chosenFontId) {
71 | const thisChosenFont = fontOptions.find(
72 | currentFont => currentFont.id === chosenFontId,
73 | )
74 | dispatch(setFont(thisChosenFont.label))
75 | }
76 |
77 | function handleAlignmentChange(chosenAlignmentId) {
78 | dispatch(setTextAlignment(chosenAlignmentId))
79 | }
80 |
81 | return (
82 | <>
83 |
84 |
92 |
86 | {slug}
87 |
88 |
102 | decScrollingSpeed()}
108 | >
109 |
111 | incScrollingSpeed()}
145 | >
146 |
148 |
149 | handleStartStop()}
118 | onKeyDown={null}
119 | tabIndex={-1}
120 | >
121 |
125 | {
126 | !isPlaying
127 | ? (
128 |
129 | )
130 | : (
131 |
132 | )
133 | }
134 |
135 |
136 |
88 |
169 |
112 | handleScrollWidthChange(id)}
119 | />
120 |
121 | 113 | Scroll width 114 |
115 |
129 | handleColorSchemeChange(id)}
136 | />
137 |
138 | 130 | Color Scheme 131 |
132 |
139 | handleFontChange(id)}
146 | />
147 |
148 | 140 | Font 141 |
142 |
149 | handleAlignmentChange(id)}
156 | />
157 |
158 | 150 | Alignment 151 |
152 |
159 | handleFlip(bool)}
164 | checked={flipped}
165 | icons={null}
166 | />
167 |
168 | 160 | Flip for reflection 161 |
162 |
170 |
183 |
184 |
185 | )
186 | }
187 |
188 | export default EditorSidebar
189 |
--------------------------------------------------------------------------------
171 | 176 | Powered by Netlify 177 | 178 |
179 | 180 |