FIX : Admin custom CSS area forces entire page to scroll #2886 (#2892)

* Update EditPageContent.tsx Adding Scroll to codemirror * Prettified Code! * Fixing CSS- code mirror scroll issue Removing excess code and fixing CSS code mirror * Prettified Code! * Prettified Code! --------- Co-authored-by: dev265545 <dev265545@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: gabek <gabek@users.noreply.github.com>
2024-11-25 06:12:23 +03:00 · 2023-04-04 09:33:44 +05:30 · 2023-04-04 09:33:44 +05:30 · 1eac2a1632
commit 1eac2a1632
parent 39041ea9fa
4 changed files with 113 additions and 97 deletions
--- a/README.md
+++ b/README.md
@ -74,6 +74,7 @@ In general, Owncast is compatible with any software that uses `RTMP` to broadcas
 OBS, Streamlabs, Restream and many others have been used with Owncast. [Read more about compatibility with existing software](https://owncast.online/docs/broadcasting/).

 ## Building from Source
+
 Owncast consists of two projects.

 1. The Owncast backend is written in Go.
@ -108,7 +109,6 @@ The frontend is the web interface that includes the player, chat, embed componen
 1. Run `npm install` to install the Javascript dependencies.
 1. Run `npm run dev`

-
 ## Contributing

 Owncast is a growing open source project that is giving freedom, flexibility and fun to live streamers.
--- a/owncast_for_windows.md
+++ b/owncast_for_windows.md
@ -24,8 +24,7 @@

 # Owncast-for-windows

-> Note:  Owncast currently **does not support Windows Operating System**. This is a workaround to run Owncast on Windows.
-
+> Note: Owncast currently **does not support Windows Operating System**. This is a workaround to run Owncast on Windows.

 This document list out the steps in detail to install and run Owncast in Windows using Windows Subsystem for Linux, specifically **WSL2**.  
 The steps provided are for both the use cases whether you want to use Owncast or build and install Owncast for contributing to the project.
@ -33,59 +32,68 @@ The steps provided are for both the use cases whether you want to use Owncast or
 ---

 ### Installing WSL2 in Windows.
+
 There are lots of tutorials available online (videos and docs both) on how to install WSL2.  
 Here are the official documents from Microsoft -> [Install Linux on Windows with WSL](https://learn.microsoft.com/en-us/windows/wsl/setup/environment)
-Some points to remember -> 
+Some points to remember ->
+
 - Preferable method to install WSL2 is by using the `wsl --install `. If you are facing issues with this method you can look at - [Manual installation steps for older versions of WSL](https://learn.microsoft.com/en-us/windows/wsl/install-manual)
 - Make sure you have enabled the Virtual Machine feature. (ignore if used wsl --install method)
 - Make sure you have WSL2
 - Installed your Linux distribution of choice and make sure you installed the latest available version (Preferably Ubuntu)

-
 ### Setting up WSL2 and the distribution of your choice.
+
 After basic setup, you can look into setting WSL2 for development. Here is the link for a detailed document by Microsoft - [https://learn.microsoft.com/en-us/windows/wsl/setup/environment](https://learn.microsoft.com/en-us/windows/wsl/setup/environment)

 <hr>

-
 ## Now for the users who just want to use Owncast
+
 ### Installing Owncast for streaming.

 One of the many ways to install Owncast is to use the Quick Installer script.
 In the WSL2 terminal run, the following command
+
 ```
-curl -s https://owncast.online/install.sh | bash  
-cd owncast  
-./owncast   
+curl -s https://owncast.online/install.sh | bash
+cd owncast
+./owncast
 ```
+
 If everything is installed correctly you will be able to access the admin interface at port `localhost:8080/admin`.  
 Here are other ways listed you can use to install Owncast -[Owncast Quickstart](https://owncast.online/quickstart/)
 If you face any errors you can look at the Error List at the end of the document.

 <hr>

-##  Next steps are for developers and users looking to build and install Owncast.
+## Next steps are for developers and users looking to build and install Owncast.

 ### Make sure all the prerequisites are installed in WSL2.
+
 Here is the list for all the prerequisites required ->
- - C compiler, such as [GCC compiler](https://gcc.gnu.org/install/download.html) or a [Musl-compatible compiler](https://musl.libc.org/)
- - npm (Node Package Manager) is installed as `sudo apt install npm`. 
- - Node.js is installed (LTS Version) `sudo apt install nodejs`.
- - [ffmpeg](https://ffmpeg.org/download.html)
- - Install the [Go toolchain](https://golang.org/dl/) (1.18 or above).
+
+- C compiler, such as [GCC compiler](https://gcc.gnu.org/install/download.html) or a [Musl-compatible compiler](https://musl.libc.org/)
+- npm (Node Package Manager) is installed as `sudo apt install npm`.
+- Node.js is installed (LTS Version) `sudo apt install nodejs`.
+- [ffmpeg](https://ffmpeg.org/download.html)
+- Install the [Go toolchain](https://golang.org/dl/) (1.18 or above).

 ---

 These steps are for building and install Owncast on Windows for development and contributing to this project.

 ### Installing Owncast Backend
+
 The Owncast backend is a service written in Go.
+
 1. Clone the repo. `git clone https://github.com/owncast/owncast`
 1. `go run main.go` will run from the source.
 1. Visit `http://yourserver:8080` to access the web interface or `http://yourserver:8080/admin` to access the admin.
 1. Point your [broadcasting software](https://owncast.online/docs/broadcasting/) at your new server and start streaming.

 ### Installing Owncast Frontend
+
 The frontend is the web interface that includes the player, chat, embed components, and other UI.

 1. This project lives in the `web` directory.
@ -93,35 +101,38 @@ The frontend is the web interface that includes the player, chat, embed componen
 1. Run `npm run dev`

 Further information about the development is [here](https://owncast.online/development/)
- 
----

+---
+
+#### Congratulations !!! If you have reached here. You have successfully installed and run Owncast locally on Windows. Happy Streaming.

-#### Congratulations !!!  If you have reached here. You have successfully installed and run Owncast locally on Windows. Happy Streaming.
 You can contribute to Owncast here [https://github.com/owncast/owncast](https://github.com/owncast/owncast)

-
 <hr>
 ### Some errors you can face while following these steps.

-#### Error 1. 
-**You have an older version of Nodejs installed in the WSL2.**     
-To solve this issue you can look at nvm. Here is one tutorial - [Node-Version-Manager](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04#option-3-installing-node-using-the-node-version-manager).   
+#### Error 1.
+
+**You have an older version of Nodejs installed in the WSL2.**  
+To solve this issue you can look at nvm. Here is one tutorial - [Node-Version-Manager](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04#option-3-installing-node-using-the-node-version-manager).
+
 <hr>

-#### Error 2.  
-**The broadcasting Software failed to connect to the server.**   
+#### Error 2.
+
+**The broadcasting Software failed to connect to the server.**  
 This issue arises when you try to use `rtmp://localhost:1935/live` for example in OBS.
 To solve this issue you need to find the correct IP address for the WSL2 you are running and use that instead of localhost.
 You can use the below commands to find that ->  
 Note: you can use either of these, whichever works for you.
- - In WSL2 Terminal - 
-   `ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'`
- - In Windows Terminal - 
-   `wsl -- ip -o -4 -json addr list eth0`
-   In this result look for "local": X.X.X.X
-   
-After finding the IP address in your broadcasting software make the server point to   
+
+- In WSL2 Terminal -
+  `ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'`
+- In Windows Terminal -
+  `wsl -- ip -o -4 -json addr list eth0`
+  In this result look for "local": X.X.X.X
+
+After finding the IP address in your broadcasting software make the server point to  
 `rtmp://<your version of IP address>:1935/live`

 Example in OBS-Studio ->
@ -134,6 +145,7 @@ Now check again, you will be able to stream.
 <!-- CONTACT -->

 ## Contact
+
 Thanks for installing Owncast if you face any problems. You can contact here.

 Project chat: [Join us on Rocket.Chat](https://owncast.rocket.chat/home) if you want to contribute, follow along, or if you have questions.
--- a/web/components/admin/config/general/AppearanceConfig.tsx
+++ b/web/components/admin/config/general/AppearanceConfig.tsx
@ -229,78 +229,81 @@ export default function Appearance() {
    });

  return (
-    <Space direction="vertical">
-      <Title>Customize Appearance</Title>
-      <Paragraph>The following colors are used across the user interface.</Paragraph>
-      <div>
-        <Collapse defaultActiveKey={['1']}>
-          <Panel header={<Title level={3}>Section Colors</Title>} key="1">
-            <p>
-              Certain sections of the interface can be customized by selecting new colors for them.
-            </p>
-            <Row gutter={[16, 16]}>
-              <ColorCollection
-                variables={transformToColorMap(componentColorVariables)}
-                updateColor={updateColor}
-              />
-            </Row>
-          </Panel>
-          <Panel header={<Title level={3}>Chat User Colors</Title>} key="2">
-            <Row gutter={[16, 16]}>
-              <ColorCollection
-                variables={transformToColorMap(chatColorVariables)}
-                updateColor={updateColor}
-              />
-            </Row>
-          </Panel>
-          <Panel header={<Title level={3}>Other Settings</Title>} key="4">
-            How rounded should corners be?
-            <Row gutter={[16, 16]}>
-              <Col span={12}>
-                <Slider
-                  min={0}
-                  max={20}
-                  tooltip={{ formatter: null }}
-                  onChange={v => {
-                    onBorderRadiusChange(v);
-                  }}
-                  value={Number(
-                    customValues?.['theme-rounded-corners']?.value?.replace('px', '') ??
-                      defaultValues?.['theme-rounded-corners']?.value?.replace('px', '') ??
-                      0,
-                  )}
+    <>
+      <Space direction="vertical">
+        <Title>Customize Appearance</Title>
+        <Paragraph>The following colors are used across the user interface.</Paragraph>
+        <div>
+          <Collapse defaultActiveKey={['1']}>
+            <Panel header={<Title level={3}>Section Colors</Title>} key="1">
+              <p>
+                Certain sections of the interface can be customized by selecting new colors for
+                them.
+              </p>
+              <Row gutter={[16, 16]}>
+                <ColorCollection
+                  variables={transformToColorMap(componentColorVariables)}
+                  updateColor={updateColor}
                />
-              </Col>
-              <Col span={4}>
-                <div
-                  style={{
-                    width: '100px',
-                    height: '30px',
-                    borderRadius: `${
-                      customValues?.['theme-rounded-corners']?.value ??
-                      defaultValues?.['theme-rounded-corners']?.value
-                    }`,
-                    backgroundColor: 'var(--theme-color-palette-7)',
-                  }}
+              </Row>
+            </Panel>
+            <Panel header={<Title level={3}>Chat User Colors</Title>} key="2">
+              <Row gutter={[16, 16]}>
+                <ColorCollection
+                  variables={transformToColorMap(chatColorVariables)}
+                  updateColor={updateColor}
                />
-              </Col>
-            </Row>
-          </Panel>
-        </Collapse>
-      </div>
+              </Row>
+            </Panel>
+            <Panel header={<Title level={3}>Other Settings</Title>} key="4">
+              How rounded should corners be?
+              <Row gutter={[16, 16]}>
+                <Col span={12}>
+                  <Slider
+                    min={0}
+                    max={20}
+                    tooltip={{ formatter: null }}
+                    onChange={v => {
+                      onBorderRadiusChange(v);
+                    }}
+                    value={Number(
+                      customValues?.['theme-rounded-corners']?.value?.replace('px', '') ??
+                        defaultValues?.['theme-rounded-corners']?.value?.replace('px', '') ??
+                        0,
+                    )}
+                  />
+                </Col>
+                <Col span={4}>
+                  <div
+                    style={{
+                      width: '100px',
+                      height: '30px',
+                      borderRadius: `${
+                        customValues?.['theme-rounded-corners']?.value ??
+                        defaultValues?.['theme-rounded-corners']?.value
+                      }`,
+                      backgroundColor: 'var(--theme-color-palette-7)',
+                    }}
+                  />
+                </Col>
+              </Row>
+            </Panel>
+          </Collapse>
+        </div>

-      <Space direction="horizontal">
-        <Button type="primary" onClick={save}>
-          Save Colors
-        </Button>
-        <Button type="ghost" onClick={reset}>
-          Reset to Defaults
-        </Button>
+        <Space direction="horizontal">
+          <Button type="primary" onClick={save}>
+            Save Colors
+          </Button>
+          <Button type="ghost" onClick={reset}>
+            Reset to Defaults
+          </Button>
+        </Space>
+        <FormStatusIndicator status={submitStatus} />
      </Space>
-      <FormStatusIndicator status={submitStatus} />
      <div className="form-module page-content-module">
        <EditCustomStyles />
      </div>
-    </Space>
+    </>
  );
 }
--- a/web/components/admin/config/general/EditPageContent.tsx
+++ b/web/components/admin/config/general/EditPageContent.tsx
@ -101,6 +101,7 @@ export default function EditPageContent() {
        value={content}
        placeholder="Enter your custom page content here..."
        theme={bbedit}
+        height="200px"
        onChange={handleEditorChange}
        extensions={[markdown({ base: markdownLanguage, codeLanguages: languages })]}
      />