mirror of
https://github.com/m1ngsama/chat-bubbles-for-yt.git
synced 2025-12-24 10:51:21 +00:00
feat(*): initial commit
This commit is contained in:
Takuya Matsuyama
parent
ea9391d0d9
commit
d646b164cb
21 changed files with 2746 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
4
README.md
Normal file
4
README.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
Chat bubbles for YT
|
||||
==================
|
||||
|
||||
A tool for recording typing animations and sounds with imitated chat UI.
|
||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chat Bubbles Recorder</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2353
package-lock.json
generated
Normal file
2353
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
20
package.json
Normal file
20
package.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "chat-bubbles",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^6.2.8",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^1.0.7",
|
||||
"prettier": "^2.5.1",
|
||||
"vite": "^2.8.0"
|
||||
}
|
||||
}
|
||||
11
prettier.config.js
Normal file
11
prettier.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
const options = {
|
||||
arrowParens: 'avoid',
|
||||
singleQuote: true,
|
||||
bracketSpacing: true,
|
||||
endOfLine: 'lf',
|
||||
semi: false,
|
||||
tabWidth: 2,
|
||||
trailingComma: 'none'
|
||||
}
|
||||
|
||||
module.exports = options
|
||||
7
src/App.css
Normal file
7
src/App.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.App {
|
||||
background-color: #00a000;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
41
src/App.jsx
Normal file
41
src/App.jsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { useState, useCallback } from 'react'
|
||||
import logo from './logo.svg'
|
||||
import './App.css'
|
||||
import Chat from './chat'
|
||||
import Bubble from './bubble'
|
||||
import BubbleInput from './bubble-input'
|
||||
import useMessages from './use-messages'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
function App() {
|
||||
const [messages, addMessage] = useMessages([])
|
||||
const [newMessage, setNewMessage] = useState('')
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (newMessage.length > 0) {
|
||||
addMessage(newMessage)
|
||||
setNewMessage('')
|
||||
}
|
||||
}, [newMessage, messages])
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Chat>
|
||||
<AnimatePresence>
|
||||
{messages.map(m => (
|
||||
<Bubble key={m} id={m}>
|
||||
{m}
|
||||
</Bubble>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
<BubbleInput
|
||||
value={newMessage}
|
||||
onChange={setNewMessage}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</Chat>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
20
src/bubble-input.css
Normal file
20
src/bubble-input.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.bubble.input {
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bubble.input.submitted {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.bubble.input.empty {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bubble.input > div {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #eee;
|
||||
font-size: 32px;
|
||||
min-width: 30px;
|
||||
}
|
||||
44
src/bubble-input.jsx
Normal file
44
src/bubble-input.jsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React, { useCallback, useState } from 'react'
|
||||
import './bubble-input.css'
|
||||
import ContentEditable from './content-editable'
|
||||
|
||||
const BubbleInput = ({ onChange, onSubmit, value }) => {
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleChange = useCallback(
|
||||
e => {
|
||||
onChange && onChange(e.target.value)
|
||||
},
|
||||
[onChange]
|
||||
)
|
||||
const handleKeyDown = useCallback(
|
||||
e => {
|
||||
if (e.keyCode === 13) {
|
||||
onSubmit && onSubmit()
|
||||
e.preventDefault()
|
||||
setSubmitted(true)
|
||||
setTimeout(() => {
|
||||
window.document.querySelector('.bubble.input > div').focus()
|
||||
setSubmitted(false)
|
||||
}, 10)
|
||||
}
|
||||
},
|
||||
[onSubmit]
|
||||
)
|
||||
console.log('value:', value)
|
||||
return (
|
||||
<div
|
||||
className={`bubble input ${value.length === 0 ? 'empty' : ''} ${
|
||||
submitted ? 'submitted' : ''
|
||||
}`}
|
||||
>
|
||||
<ContentEditable
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
value={value}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BubbleInput
|
||||
40
src/bubble.css
Normal file
40
src/bubble.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.bubble {
|
||||
border-radius: 30px;
|
||||
padding: 12px 20px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
margin-right: 25%;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bubble:last-child:before,
|
||||
.bubble:nth-last-child(2):before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
bottom: 0;
|
||||
left: -12px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
background: #eee;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.bubble:last-child:after,
|
||||
.bubble:nth-last-child(2):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: -15px;
|
||||
width: 15px;
|
||||
height: 27px;
|
||||
background: #00a000;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
19
src/bubble.jsx
Normal file
19
src/bubble.jsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import './bubble.css'
|
||||
|
||||
const Bubble = ({ id, children, sender }) => {
|
||||
return (
|
||||
<motion.div
|
||||
key={id}
|
||||
className="bubble"
|
||||
initial={{ opacity: 1, translateY: 60 }}
|
||||
animate={{ opacity: 1, translateY: 0 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Bubble
|
||||
10
src/chat.css
Normal file
10
src/chat.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.chat {
|
||||
padding-left: 34px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
font-size: 32px;
|
||||
}
|
||||
8
src/chat.jsx
Normal file
8
src/chat.jsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react'
|
||||
import './chat.css'
|
||||
|
||||
const Chat = ({ children }) => {
|
||||
return <div className="chat">{children}</div>
|
||||
}
|
||||
|
||||
export default Chat
|
||||
47
src/content-editable.jsx
Normal file
47
src/content-editable.jsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import * as React from 'react'
|
||||
|
||||
class ContentEditable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.refElement = React.createRef()
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
key={Math.random()}
|
||||
ref={this.refElement}
|
||||
onInput={this.emitChange}
|
||||
onBlur={this.emitChange}
|
||||
onKeyDown={this.emitKeyDown}
|
||||
contentEditable
|
||||
spellCheck="false"
|
||||
dangerouslySetInnerHTML={{ __html: this.props.value }}
|
||||
></div>
|
||||
)
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
const { current: div } = this.refElement
|
||||
return nextProps.value !== div.innerText
|
||||
}
|
||||
|
||||
emitChange = () => {
|
||||
const { current: div } = this.refElement
|
||||
var value = div.innerText
|
||||
if (this.props.onChange && value !== this.lastValue) {
|
||||
this.props.onChange({
|
||||
target: {
|
||||
value
|
||||
}
|
||||
})
|
||||
}
|
||||
this.lastValue = value
|
||||
}
|
||||
|
||||
emitKeyDown = e => {
|
||||
const { onKeyDown } = this.props
|
||||
onKeyDown && onKeyDown(e)
|
||||
}
|
||||
}
|
||||
|
||||
export default ContentEditable
|
||||
15
src/favicon.svg
Normal file
15
src/favicon.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#41D1FF"/>
|
||||
<stop offset="1" stop-color="#BD34FE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEA83"/>
|
||||
<stop offset="0.0833333" stop-color="#FFDD35"/>
|
||||
<stop offset="1" stop-color="#FFA800"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
21
src/index.css
Normal file
21
src/index.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
7
src/logo.svg
Normal file
7
src/logo.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
11
src/main.jsx
Normal file
11
src/main.jsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
)
|
||||
24
src/use-messages.js
Normal file
24
src/use-messages.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { useState, useCallback } from 'react'
|
||||
|
||||
const useMessages = (initialValue = []) => {
|
||||
const [messages, setMessages] = useState(initialValue)
|
||||
|
||||
const addMessage = useCallback(
|
||||
msg => {
|
||||
const i = messages.length
|
||||
setMessages([...messages, msg])
|
||||
setTimeout(() => {
|
||||
setMessages(current => {
|
||||
const n = [...current]
|
||||
n.shift()
|
||||
return n
|
||||
})
|
||||
}, 10000)
|
||||
},
|
||||
[messages]
|
||||
)
|
||||
|
||||
return [messages, addMessage]
|
||||
}
|
||||
|
||||
export default useMessages
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()]
|
||||
})
|
||||
Loading…
Reference in a new issue