m1ngsama/chat-bubbles-for-yt
1
0
Fork 0
mirror of https://github.com/m1ngsama/chat-bubbles-for-yt.git synced 2025-12-24 10:51:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/main'

Browse source
This commit is contained in:
Bash Elliott 2023-06-27 15:26:57 +10:00
commit e416d69920
17 changed files with 1158 additions and 1834 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

2793
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

17
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "chat-bubbles", "name": "chat-bubbles",
"private": true, "private": true,
"version": "0.1.0", "version": "0.2.0",
"license": "Apache-2.0", "license": "Apache-2.0",
"scripts": { "scripts": {
"dev": "vite --host", "dev": "vite --host",
@ -9,14 +9,17 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"framer-motion": "^6.2.8", "framer-motion": "^9.0.7",
"react": "^17.0.2", "react": "^18.2.0",
"react-color": "^2.19.3", "react-color": "^2.19.3",
"react-dom": "^17.0.2" "react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^1.0.7", "@types/react": "^18.0.27",
"prettier": "^2.5.1", "@types/react-color": "^3.0.6",
"vite": "^2.9.6" "@types/react-dom": "^18.0.10",
"@vitejs/plugin-react-swc": "^3.0.0",
"typescript": "^4.9.3",
"vite": "^4.1.0"
} }
} }

12
src/App.jsx → src/App.tsx
View file

@ -1,10 +1,10 @@
import { useState, useCallback } from 'react' import { AnimatePresence } from 'framer-motion'
import { useCallback, useState } from 'react'
import './App.css' import './App.css'
import Chat from './chat'
import Bubble from './bubble' import Bubble from './bubble'
import BubbleInput from './bubble-input' import BubbleInput from './bubble-input'
import Chat from './chat'
import useMessages from './use-messages' import useMessages from './use-messages'
import { motion, AnimatePresence } from 'framer-motion'
import { SketchPicker } from 'react-color' import { SketchPicker } from 'react-color'
import React from 'react' import React from 'react'
@ -15,7 +15,7 @@ function App() {
const [strokeColour, setStrokeColour] = useState('#000') const [strokeColour, setStrokeColour] = useState('#000')
const handleSubmit = useCallback( const handleSubmit = useCallback(
bubbleHeight => { (bubbleHeight: number) => {
if (newMessage.length > 0) { if (newMessage.length > 0) {
addMessage({ addMessage({
id: +new Date(), id: +new Date(),
@ -28,12 +28,12 @@ function App() {
[newMessage, messages] [newMessage, messages]
) )
const handleFillColourChange = (color) => { const handleFillColourChange = (color: { hex: string }) => {
setFillColour(color.hex); setFillColour(color.hex);
console.log(color); console.log(color);
}; };
const handleStrokeColourChange = (color) => { const handleStrokeColourChange = (color: { hex: string }) => {
setStrokeColour(color.hex); setStrokeColour(color.hex);
console.log(color); console.log(color);
}; };

2
src/bubble-input.css
View file

@ -15,7 +15,7 @@
} }
.bubble.input > div { .bubble.input > div {
background-color: #eee; background-color: var(--bubble-background-color);
font-size: 32px; font-size: 32px;
min-width: 30px; min-width: 30px;
} }

28
src/bubble-input.jsx → src/bubble-input.tsx
View file

@ -1,14 +1,30 @@
import React, { useCallback, useState, useRef, useEffect } from 'react' import {
KeyboardEventHandler,
useCallback,
useEffect,
useRef,
useState
} from 'react'
import './bubble-input.css' import './bubble-input.css'
const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }) => { interface BubbleInputProps {
const refEditable = useRef() onChange: (value: string) => void
const refContainer = useRef() onSubmit: (height: number) => void
value: string
fillColour: string
strokeColour: string
}
const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }: BubbleInputProps) => {
const refEditable = useRef<HTMLDivElement>(null)
const refContainer = useRef<HTMLDivElement>(null)
const [submitted, setSubmitted] = useState(false) const [submitted, setSubmitted] = useState(false)
const handleKeyDown = e => { const handleKeyDown: KeyboardEventHandler = e => {
const { current: elContainer } = refContainer const { current: elContainer } = refContainer
const { current: elEditable } = refEditable const { current: elEditable } = refEditable
if (elContainer === null || elEditable === null) return
const { isComposing } = e.nativeEvent const { isComposing } = e.nativeEvent
if (e.key === 'Enter' && !isComposing) { if (e.key === 'Enter' && !isComposing) {
const height = elContainer.clientHeight const height = elContainer.clientHeight
@ -46,7 +62,7 @@ const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }) =>
spellCheck="false" spellCheck="false"
onBlur={handleBlur} onBlur={handleBlur}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onInput={e => onChange(e.target.innerText)} onInput={e => onChange(e.currentTarget.innerText)}
/> />
</div> </div>
) )

28
src/bubble.css
View file

@ -1,10 +1,10 @@
.bubble { .bubble {
width: 100%; width: 100%;
color: var(--bubble-color);
} }
.bubble-content { .bubble-content {
max-width: 600px; background-color: var(--background-color);
display: inline-block;
border-radius: 30px; border-radius: 30px;
padding: 12px 20px; padding: 12px 20px;
margin-top: 5px; margin-top: 5px;
@ -16,13 +16,14 @@
.bubble-content { .bubble-content {
margin-right: 25%; margin-right: 25%;
position: relative; position: relative;
overflow-wrap: break-word;
} }
.bubble:last-child .bubble-content:before, .bubble:last-child .bubble-content:before,
.bubble:nth-last-child(2) .bubble-content:before { .bubble:nth-last-child(2) .bubble-content:before {
content: ''; content: '';
position: absolute; position: absolute;
z-index: 50; z-index: 0;
bottom: 0; bottom: 0;
left: -12px; left: -12px;
height: 26px; height: 26px;
@ -33,18 +34,13 @@
.bubble:last-child .bubble-content:after, .bubble:last-child .bubble-content:after,
.bubble:nth-last-child(2) .bubble-content:after { .bubble:nth-last-child(2) .bubble-content:after {
content: ''; background: #00a000!important;
position: absolute;
z-index: 100;
bottom: 0;
left: -15px;
width: 15px;
height: 27px;
background: #00a000;
border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;
} bottom: 0;
content: "";
.bubble:last-child:before, height: 27px;
.bubble:nth-last-child(2):before { left: -15px;
z-index: 75; position: absolute;
width: 15px;
z-index: 1;
} }

19
src/bubble.jsx → src/bubble.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { motion, usePresence } from 'framer-motion' import { motion, usePresence } from 'framer-motion'
import React from 'react'
import './bubble.css' import './bubble.css'
const transition = { const transition = {
@ -11,15 +11,20 @@ const transition = {
} }
} }
const Bubble = ({ id, children, sender, dy, fillColour, strokeColour }) => { interface BubbleProps {
id: number
dy: number
children: React.ReactNode
fillColour: string
strokeColour: string
}
const Bubble = ({ id, children, dy, fillColour, strokeColour }: BubbleProps) => {
const [isPresent, safeToRemove] = usePresence() const [isPresent, safeToRemove] = usePresence()
const animations = { const animations = {
layout: true, layout: true,
initial: 'out', initial: 'out',
style: {
position: 'static'
},
animate: 'in', animate: 'in',
variants: { variants: {
in: { opacity: 1, translateY: 0 }, in: { opacity: 1, translateY: 0 },
@ -32,7 +37,9 @@ const Bubble = ({ id, children, sender, dy, fillColour, strokeColour }) => {
return ( return (
<motion.div key={id} className="bubble" {...animations}> <motion.div key={id} className="bubble" {...animations}>
<div className="bubble-content" style={{backgroundColor: fillColour, color: strokeColour}}>{children}</div> <div style={{ position: 'static' }}>
<div className="bubble-content" style={{backgroundColor: fillColour, color: strokeColour}}>{children}</div>
</div>
</motion.div> </motion.div>
) )
} }

4
src/chat.jsx → src/chat.tsx
View file

@ -1,7 +1,7 @@
import React from 'react' import { ReactNode } from 'react'
import './chat.css' import './chat.css'
const Chat = ({ children }) => { const Chat = ({ children }: { children: ReactNode }) => {
return <div className="chat">{children}</div> return <div className="chat">{children}</div>
} }

16
src/index.css
View file

@ -1,8 +1,15 @@
:root{
--bubble-background-color: #eee;
--bubble-color: #000;
--background-color: #00a000
}
html, html,
body, body,
#root { #root {
width: 100%; width: 100vw;
height: 100%; height: 100vh;
} }
body { body {
@ -14,8 +21,3 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: black; background-color: black;
} }
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

11
src/main.jsx
View file

@ -1,11 +0,0 @@
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')
)

10
src/main.tsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

14
src/use-messages.js → src/use-messages.ts
View file

@ -1,10 +1,16 @@
import { useState, useCallback } from 'react' import { useCallback, useState } from 'react'
const useMessages = (initialValue = []) => { export interface Message {
id: number
text: string
height: number
}
const useMessages = (initialValue: Array<Message> = []) => {
const [messages, setMessages] = useState(initialValue) const [messages, setMessages] = useState(initialValue)
const addMessage = useCallback( const addMessage = useCallback(
msg => { (msg: Message) => {
setMessages(messages => [...messages, msg]) setMessages(messages => [...messages, msg])
setTimeout(() => { setTimeout(() => {
setMessages(current => { setMessages(current => {
@ -17,7 +23,7 @@ const useMessages = (initialValue = []) => {
[setMessages] [setMessages]
) )
return [messages, addMessage] return [messages, addMessage] as const
} }
export default useMessages export default useMessages

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
tsconfig.json Normal file
View file

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

9
tsconfig.node.json Normal file
View file

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

5
vite.config.js → vite.config.ts
View file

@ -1,7 +1,10 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
server: {
port: 3000
},
plugins: [react()] plugins: [react()]
}) })