the absolute positioned mobile action button was attached
to the body causing it to float during scrolling. Now, we wrap
the action buttons inside a relative div so that they are attached
to this div which prevents them from scrolling with page
Fixes#3271
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
* Fix embedded status bar being cut off
This should resolve https://github.com/owncast/owncast/issues/3210.
As recommended in the discussion, flexbox was the way to solve this issue.
The main thing that needed to be addressed though was not applying too many constraints on the OwncastPlayer component just because it was embedded.
By removing the embedded constraints, styling appears to be working as expected.
I'll attach screenshots to the pull request.
* Fix eslint error
This resolves https://github.com/owncast/owncast/issues/3240
From the comments:
This was trickier than expected, but the root of the problem is Firefox will set `#` in the URL bar when `window.location.hash` is set to _any_ string, even a blank string. The morale of the story is, don't mutate base data if you just want to copy values. 😅
Sample of Firefox JavaScript console session that demonstrates the issue:
```javascript
>> window.location.href
"https://github.com/owncast/owncast/issues/3240"
>> const setBlankHash = () => { window.location.hash = ''; };
undefined
>> window.location.hash
""
>> window.location.href
"https://github.com/owncast/owncast/issues/3240"
>> setBlankHash()
undefined
>> // My browser just jumped to the top of the page
undefined
>> window.location.hash
""
>> window.location.href
"https://github.com/owncast/owncast/issues/3240#"
```
* Update ClientTable.tsx
solves: #3339
## Changes
changed owncast/web/components/admin/ClientTable.tsx line 44 `value={selectedKeys[0]})` to `value={selectedKeys[0].toString()} // Convert selectedKeys[0] to string
` as the value attribute expects a value of type string | number | readonly string[]` but previously it was assigned bigint.
* Update ClientTable.tsx
solves: #3339
## Changes
changed owncast/web/components/admin/ClientTable.tsx line 44 `value={selectedKeys[0]})` to `value={selectedKeys[0].toString()} // Convert selectedKeys[0] to string
` as the value attribute expects a value of type `string | number | readonly string[]` but previously it was assigned bigint.
the absolute positioned mobile action button was attached
to the body causing it to float during scrolling. Now, we wrap
the action buttons inside a relative div so that they are attached
to this div which prevents them from scrolling with page
Fixes#3271
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
* Fix embedded status bar being cut off
This should resolve https://github.com/owncast/owncast/issues/3210.
As recommended in the discussion, flexbox was the way to solve this issue.
The main thing that needed to be addressed though was not applying too many constraints on the OwncastPlayer component just because it was embedded.
By removing the embedded constraints, styling appears to be working as expected.
I'll attach screenshots to the pull request.
* Fix eslint error
This resolves https://github.com/owncast/owncast/issues/3240
From the comments:
This was trickier than expected, but the root of the problem is Firefox will set `#` in the URL bar when `window.location.hash` is set to _any_ string, even a blank string. The morale of the story is, don't mutate base data if you just want to copy values. 😅
Sample of Firefox JavaScript console session that demonstrates the issue:
```javascript
>> window.location.href
"https://github.com/owncast/owncast/issues/3240"
>> const setBlankHash = () => { window.location.hash = ''; };
undefined
>> window.location.hash
""
>> window.location.href
"https://github.com/owncast/owncast/issues/3240"
>> setBlankHash()
undefined
>> // My browser just jumped to the top of the page
undefined
>> window.location.hash
""
>> window.location.href
"https://github.com/owncast/owncast/issues/3240#"
```
* Update ClientTable.tsx
solves: #3339
## Changes
changed owncast/web/components/admin/ClientTable.tsx line 44 `value={selectedKeys[0]})` to `value={selectedKeys[0].toString()} // Convert selectedKeys[0] to string
` as the value attribute expects a value of type string | number | readonly string[]` but previously it was assigned bigint.
* Update ClientTable.tsx
solves: #3339
## Changes
changed owncast/web/components/admin/ClientTable.tsx line 44 `value={selectedKeys[0]})` to `value={selectedKeys[0].toString()} // Convert selectedKeys[0] to string
` as the value attribute expects a value of type `string | number | readonly string[]` but previously it was assigned bigint.
* fix emojis overflowing the chat message
* fix: force ignoring of certain paths?
---------
Co-authored-by: janWilejan <>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
We add a resize handler to the window when the ChatContainer is created. If a
second ChatContainer is created due to React redrawing, remove the old handler.
Co-authored-by: janWilejan <>
Firefox only breaks at word boundaries by default, meaning we need a horizontal
scrollbar to handle long words like AAAAAAAAAAAAAAAAAAAAAAAAAAAAA.
Co-authored-by: janWilejan <>
* Name change: better unicode handling
Client-side:
* Changes the NameChangeModal to show text "Over limit" when a proposed display
name is too long.
* Allows names to go over limit to prevent splitting graphemes on input.
Server-side:
* Changes the MakeSafeStringOfLength to count number of unicode code points
instead of string bytes.
* name modal: check that newName is defined before iterating
* change chat from a sidebar to a column
Using a 2-column layout prevents the chat scrollbar from overlapping the page
scrollbar. Also, it no longer needs to calculate extra padding for elements.
* remove unused Sidebar.tsx
* fix css for chat column
* re-center "Go to last message" button
* main content column always uses maximum height
* lint
* re-hide scrollbars in mainContent on chromium
* fix chat column width when input is over-full
* chat is only fixed-width in desktop
---------
Co-authored-by: janWilejan <>
* core: remove file extension from emoji name
* web: transform emotes to labels when sending
* chat: replace br with line break
* core: implement emoji cache
* chat: send shortcodes for custom emoji
* chat: correct esling errors
* core: move emoji injection into dedicated function
* emoji: integrate emoji into markdown renderer, fix formatting
* chat protocol: correct golangci-lint findings
* chat field: specify that the contentEditable is an HTMLElement
* admin: mention that emoji should have unique names
* Prettified Code!
* regenerate pack-lock
* chat: correct the emphasis tag, provide fallback for other elements
---------
Co-authored-by: jprjr <jprjr@users.noreply.github.com>
* highlighting: make case-insensitive, support unicode
* highlighting: also highlight simplified/normalized form
* highlighting: use MDN-recommended escape pattern
Gabe Kangas
Pranav Joglekar
Patrick Bollinger
armadi1809
Vishal Sharma
janWilejan
renovate[bot]
John Regan
Dev Gupta