From 051b0ac03f6a471266738965cd65dd9f59e335ab Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sat, 9 Jan 2021 15:17:06 -0800 Subject: [PATCH 1/7] add message viz toggle component to be able to toggle one chat message at a time; address https://github.com/owncast/owncast/issues/568 --- web/pages/chat.tsx | 17 +++- .../components/message-visiblity-toggle.tsx | 79 +++++++++++++++++++ web/styles/chat.scss | 31 ++++++-- web/styles/globals.scss | 4 + 4 files changed, 123 insertions(+), 8 deletions(-) create mode 100644 web/pages/components/message-visiblity-toggle.tsx diff --git a/web/pages/chat.tsx b/web/pages/chat.tsx index 1d3a1531b..8deef3750 100644 --- a/web/pages/chat.tsx +++ b/web/pages/chat.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import { Table, Typography, Tooltip, Button } from "antd"; -import { CheckCircleFilled, ExclamationCircleFilled, StopOutlined } from "@ant-design/icons"; +import { CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons"; import classNames from 'classnames'; import { ColumnsType } from 'antd/es/table'; import format from 'date-fns/format' @@ -8,6 +8,7 @@ import format from 'date-fns/format' import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis"; import { MessageType } from '../types/chat'; import { isEmptyObject } from "../utils/format"; +import MessageVisiblityToggle from "./components/message-visiblity-toggle"; const { Title } = Typography; @@ -80,6 +81,11 @@ export default function Chat() { }, }; + const updateMessage = message => { + const messageIndex = messages.findIndex(m => m.id === message.id); + messages.splice(messageIndex, 1, message) + setMessages([...messages]); + }; const resetBulkOutcome = () => { outcomeTimeout = setTimeout(() => { @@ -179,7 +185,13 @@ export default function Chat() { className: 'toggle-col', filters: [{ text: 'Visible messages', value: true }, { text: 'Hidden messages', value: false }], onFilter: (value, record) => record.visible === value, - render: visible => visible ? null : , + render: (visible, record) => ( + + ), width: 30, }, ]; @@ -235,4 +247,3 @@ export default function Chat() { ) } - diff --git a/web/pages/components/message-visiblity-toggle.tsx b/web/pages/components/message-visiblity-toggle.tsx new file mode 100644 index 000000000..7ea5b08c8 --- /dev/null +++ b/web/pages/components/message-visiblity-toggle.tsx @@ -0,0 +1,79 @@ +// Wrapper for AntDesign Switch that makes an api call, then displays a confirmation icon upon + +import React, { useState, useEffect } from "react"; +import { Button, Tooltip } from "antd"; +import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons"; +import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis"; +import { MessageType } from '../../types/chat'; +import { OUTCOME_TIMEOUT } from "../chat"; + +interface MessageToggleProps { + isVisible: boolean; + message: MessageType; + setMessage: (message: MessageType) => void, +}; + + +export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) { + let outcomeTimeout = null; + const [outcome, setOutcome] = useState(0); + + const { id: messageId } = message; + + const resetOutcome = () => { + outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT); + }; + + useEffect(() => { + return () => { + clearTimeout(outcomeTimeout); + }; + }); + + + const updateChatMessage = async () => { + clearTimeout(outcomeTimeout); + setOutcome(0); + const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, { + auth: true, + method: 'POST', + data: { + visible: !isVisible, + idArray: [messageId], + }, + }); + + if (result.success && result.message === "changed") { + setMessage({ ...message, visible: !isVisible }); + setOutcome(1); + } else { + setMessage({ ...message, visible: isVisible }); + setOutcome(-1); + } + resetOutcome(); + } + + + let outcomeIcon = ; + if (outcome) { + outcomeIcon = outcome > 0 ? + : + ; + } + + const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`; + return ( +
+ {outcomeIcon} + +
+ ); +} \ No newline at end of file diff --git a/web/styles/chat.scss b/web/styles/chat.scss index 2d7ab68e1..ea59977a8 100644 --- a/web/styles/chat.scss +++ b/web/styles/chat.scss @@ -4,13 +4,12 @@ min-width: 20px; } .ant-table-tbody > tr > td { - transition: background 0.15s; + transition: background-color 0.15s; } .ant-table-row.hidden { .ant-table-cell { - color: #444450; + color: rgba(0,0,0,.25) } - } .ant-table-cell { font-size: 12px; @@ -43,16 +42,18 @@ .bulk-editor { margin: .5rem 0; padding: .5rem; - border: 1px solid #333; + border: 1px solid #ccc; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; border-radius: 4px; + opacity: .5; &.active { + opacity: 1; .label { - color: #ccc; + color: #000; } } @@ -79,8 +80,28 @@ align-items: center; flex-wrap: nowrap; justify-content: flex-end; + transition: opacity .15s; .outcome-icon { margin-right: .5rem; } + &.hidden { + opacity: .25; + &:hover { + opacity: 1; + } + } + .ant-btn { + .anticon { + opacity: .5; + } + &:hover { + .anticon { + opacity: 1; + } + } + } + .ant-btn-text:hover { + background-color: rgba(0,0,0,.1) + } } diff --git a/web/styles/globals.scss b/web/styles/globals.scss index 49e7e41d8..d0f2d8d9c 100644 --- a/web/styles/globals.scss +++ b/web/styles/globals.scss @@ -34,6 +34,10 @@ pre { .ant-card { border-radius: .5em; } +.ant-btn { + transition-duration: .15s; + transition-delay: 0s; +} @media (prefers-color-scheme: dark) { @import "~antd/dist/antd.dark"; From 7f06da27b69dfd20b39b59f5ae2e0b2df9d4809c Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sat, 9 Jan 2021 15:18:38 -0800 Subject: [PATCH 2/7] comment update --- web/pages/components/message-visiblity-toggle.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/pages/components/message-visiblity-toggle.tsx b/web/pages/components/message-visiblity-toggle.tsx index 7ea5b08c8..6f99398cf 100644 --- a/web/pages/components/message-visiblity-toggle.tsx +++ b/web/pages/components/message-visiblity-toggle.tsx @@ -1,5 +1,4 @@ -// Wrapper for AntDesign Switch that makes an api call, then displays a confirmation icon upon - +// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon import React, { useState, useEffect } from "react"; import { Button, Tooltip } from "antd"; import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons"; From 627fa54db5e80e49e69e61b1d181886c6160295c Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sat, 9 Jan 2021 15:43:52 -0800 Subject: [PATCH 3/7] try and fix a ts error --- web/pages/components/message-visiblity-toggle.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/pages/components/message-visiblity-toggle.tsx b/web/pages/components/message-visiblity-toggle.tsx index 6f99398cf..c202e8d1e 100644 --- a/web/pages/components/message-visiblity-toggle.tsx +++ b/web/pages/components/message-visiblity-toggle.tsx @@ -5,6 +5,7 @@ import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircle import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis"; import { MessageType } from '../../types/chat'; import { OUTCOME_TIMEOUT } from "../chat"; +import { isEmptyObject } from "../../utils/format"; interface MessageToggleProps { isVisible: boolean; @@ -14,10 +15,14 @@ interface MessageToggleProps { export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) { + if (!message || isEmptyObject(message)) { + return null; + } + let outcomeTimeout = null; const [outcome, setOutcome] = useState(0); - const { id: messageId } = message; + const { id: messageId } = message || {}; const resetOutcome = () => { outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT); From b4aad7ccf7de2bc300e26ca01b0dc3f7c0bdc1a3 Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sat, 9 Jan 2021 18:38:22 -0800 Subject: [PATCH 4/7] dark mode accommodations --- web/styles/chat.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/web/styles/chat.scss b/web/styles/chat.scss index ea59977a8..13a84a0cc 100644 --- a/web/styles/chat.scss +++ b/web/styles/chat.scss @@ -10,6 +10,11 @@ .ant-table-cell { color: rgba(0,0,0,.25) } + @media (prefers-color-scheme: dark) { + .ant-table-cell { + color: rgba(255,255,255,.25) + } + } } .ant-table-cell { font-size: 12px; @@ -55,6 +60,11 @@ .label { color: #000; } + @media (prefers-color-scheme: dark) { + .label { + color: #fff; + } + } } .label { @@ -104,4 +114,9 @@ .ant-btn-text:hover { background-color: rgba(0,0,0,.1) } + @media (prefers-color-scheme: dark) { + .ant-btn-text:hover { + background-color: rgba(255,255,255,.3) + } + } } From a4f3d43a7aaea71d5636c1c883a801e103f82fff Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Sun, 31 Jan 2021 20:04:41 -0800 Subject: [PATCH 5/7] Force build on any branch --- web/.github/workflows/build-next.yml | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/web/.github/workflows/build-next.yml b/web/.github/workflows/build-next.yml index d35c03938..cead8518e 100644 --- a/web/.github/workflows/build-next.yml +++ b/web/.github/workflows/build-next.yml @@ -1,11 +1,5 @@ name: Build admin app -on: - push: - branches: - - master - pull_request: - branches: master - +on: [push, pull_request] jobs: run: name: npm run build @@ -15,4 +9,4 @@ jobs: uses: actions/checkout@v2 - name: Install dependencies - run: npm install && npm run build \ No newline at end of file + run: npm install && npm run build From 75c1134cad9288e3efeac6218ae347536c931bc3 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Thu, 4 Feb 2021 23:21:10 -0800 Subject: [PATCH 6/7] Format code on push --- web/.github/workflows/prettier.yml | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 web/.github/workflows/prettier.yml diff --git a/web/.github/workflows/prettier.yml b/web/.github/workflows/prettier.yml new file mode 100644 index 000000000..22bc9db46 --- /dev/null +++ b/web/.github/workflows/prettier.yml @@ -0,0 +1,29 @@ +name: Format code + +# This action works with pull requests and pushes +on: + pull_request: + push: + branches: + - master + +jobs: + prettier: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v2 + with: + # Make sure the actual branch is checked out when running on pull requests + ref: ${{ github.head_ref }} + fetch-depth: 0 + + - name: Prettify code + uses: creyD/prettier_action@v3.1 + with: + # This part is also where you can pass other options, for example: + prettier_options: --write **/*.{js,tsx,jsx} + only_changed: true + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file From 269505d3bf84c8d55f340361e0e3e6b4550e8dbe Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Thu, 4 Feb 2021 23:52:18 -0800 Subject: [PATCH 7/7] Run linter on push --- web/.github/workflows/linter.yml | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 web/.github/workflows/linter.yml diff --git a/web/.github/workflows/linter.yml b/web/.github/workflows/linter.yml new file mode 100644 index 000000000..f81ac136d --- /dev/null +++ b/web/.github/workflows/linter.yml @@ -0,0 +1,21 @@ +name: linter + +# This action works with pull requests and pushes +on: + pull_request: + +jobs: + linter: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 9.8.0 + - name: Install + run: npm install + - name: Run ESLint on changed files + uses: tj-actions/eslint-changed-files@v4 + with: + extensions: 'ts,tsx,js,jsx' + extra-args: '--max-warnings=0' \ No newline at end of file