diff --git a/config/includedScripts.ts b/config/includedScripts.ts index a9fb11e3d..ca2df644e 100644 --- a/config/includedScripts.ts +++ b/config/includedScripts.ts @@ -17,6 +17,11 @@ const scripts: ScriptItem[] = [ async: true, nonce: "SIGNALWIRE_DOCS_CSP_NONCE", }, + { + src: "/scripts/noticeable.js", + async: true, + nonce: "SIGNALWIRE_DOCS_CSP_NONCE", + }, { src: "/scripts/koala.js", async: true, diff --git a/config/navbar.ts b/config/navbar.ts index 2af1738f3..c3cd13c0b 100644 --- a/config/navbar.ts +++ b/config/navbar.ts @@ -170,6 +170,7 @@ const navbar: NavbarItem[] = [ ], }, + { to: "/changelog", label: "Changelog", position: "right" }, { href: "https://signalwire.com/signin", label: "Dashboard", diff --git a/config/sidebarsConfig/home-sidebar.ts b/config/sidebarsConfig/home-sidebar.ts index 551b9c3ac..c0cb10333 100644 --- a/config/sidebarsConfig/home-sidebar.ts +++ b/config/sidebarsConfig/home-sidebar.ts @@ -67,6 +67,11 @@ const homeSidebar: SidebarsConfig = { label: "Guides", href: "/guides", }, + { + type: "link", + label: "Changelog", + href: "/changelog", + }, { type: "link", label: "Community", diff --git a/docs/home/changelog/index.mdx b/docs/home/changelog/index.mdx new file mode 100644 index 000000000..5eb13f33c --- /dev/null +++ b/docs/home/changelog/index.mdx @@ -0,0 +1,17 @@ +--- +slug: /changelog +displayed_sidebar: homeSidebar +--- + +# Changelog + +import NoticeableWidget from "@site/src/components/NoticeableWidget"; + + + +{/* + +*/} + + + \ No newline at end of file diff --git a/docs/home/platform/dashboard/_ui-admonition.mdx b/docs/home/platform/dashboard/_ui-admonition.mdx new file mode 100644 index 000000000..1fbb5d663 --- /dev/null +++ b/docs/home/platform/dashboard/_ui-admonition.mdx @@ -0,0 +1,35 @@ +import Admonition from '@theme/Admonition'; +import Frame from "@site/src/components/Extras/Frame/Frame"; +import { FaRegWindowMaximize } from "react-icons/fa"; + + console.log('Accordion state:', isOpen)} +> + +{/**/} + A new UI is coming to the SignalWire Space Dashboard. + + +
+
+ + ![The main sidebar menu of the new SignalWire Space Dashboard UI.](/images/dashboard/sidebar/new-sidebar.webp) + +
+
+ The new SignalWire Dashboard features a streamlined sidebar menu. + Many items are now located in the unified Resource menu. + + ![The selection menu when a new Resource is created.](/images/dashboard/resources/add-new-resource.webp) + +
+
+ + Legacy Dashboard + +{/**/} + + \ No newline at end of file diff --git a/docs/home/platform/dashboard/getting-started/navigating-your-space/index.mdx b/docs/home/platform/dashboard/getting-started/navigating-your-space/index.mdx index c48f3467f..232cea957 100644 --- a/docs/home/platform/dashboard/getting-started/navigating-your-space/index.mdx +++ b/docs/home/platform/dashboard/getting-started/navigating-your-space/index.mdx @@ -1,21 +1,25 @@ --- slug: /platform/dashboard/getting-started/navigating-your-space -description: A detailed guide on how to Navigate your SignalWire Space. +description: Explore your SignalWire Space. x-custom: ported_from_readme: true tags: - product:signalwire_space --- +import NewLegacy from '/docs/home/platform/dashboard/_ui-admonition.mdx' -# Navigating your SignalWire Space +# Navigate your SignalWire Space + + Congratulations, now you have a SignalWire Space! + If not, [create one here](https://signalwire.com/signups/new). You can then _log in_ at [here](https://signalwire.com/signin). Here's a quick walkthrough to make sure you can find everything you need. -## Toolbar +## Toolbar {#test} In the upper-right corner, you'll notice your toolbar has several items of importance. diff --git a/docs/home/platform/dashboard/getting-started/signing-up-for-a-space/SW-homepage.webP b/docs/home/platform/dashboard/getting-started/signing-up-for-a-space/SW-homepage.webP deleted file mode 100644 index 8a3e51f97..000000000 Binary files a/docs/home/platform/dashboard/getting-started/signing-up-for-a-space/SW-homepage.webP and /dev/null differ diff --git a/docs/home/platform/dashboard/getting-started/signing-up-for-a-space/index.mdx b/docs/home/platform/dashboard/getting-started/signing-up-for-a-space/index.mdx index 2f3664bd7..37aa02ab9 100644 --- a/docs/home/platform/dashboard/getting-started/signing-up-for-a-space/index.mdx +++ b/docs/home/platform/dashboard/getting-started/signing-up-for-a-space/index.mdx @@ -1,22 +1,18 @@ --- -description: The first step on your SignalWire journey is to create a Space and your first project. +description: Open a new Space, or user account, on the SignalWire platform. slug: /platform/dashboard/getting-started/signing-up-for-a-space +sidebar_position: 0 x-custom: author: rsowald tags: - product:signalwire_space --- -# Creating a SignalWire Space +# Create a SignalWire Space To use our services and products, you need a new SignalWire account. From the [website home page](https://signalwire.com/), click on Sign Up in the top right. -
- A screenshot of the SignalWire.com homepage. -
Signalwire.com homepage
-
- ## Signing up with a social account You have two options for sign up. diff --git a/docs/home/products/video/getting-started/creating-a-video-room/ad5760e-video-conference.webP b/docs/home/products/video/getting-started/creating-a-video-room/ad5760e-video-conference.webP deleted file mode 100644 index 09afab7a9..000000000 Binary files a/docs/home/products/video/getting-started/creating-a-video-room/ad5760e-video-conference.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/creating-a-video-room/index.mdx b/docs/home/products/video/getting-started/creating-a-video-room/index.mdx index d721ad939..e8747663e 100644 --- a/docs/home/products/video/getting-started/creating-a-video-room/index.mdx +++ b/docs/home/products/video/getting-started/creating-a-video-room/index.mdx @@ -19,18 +19,10 @@ If, instead of a widget, you are interested in advanced use cases (such as a custom UI, or a custom authentication mechanism), take a look at [First steps with Video](../video-first-steps/index.mdx). It will show you how to write a custom video application from scratch using our lower level APIs. -
- A screenshot of a working video room with two participants. Menu buttons at the bottom enable muting and unmuting audio and video. A red button in the bottom right is labeled 'Leave'. -
- You can embed the Video Conference widget in any kind of webpage just by - pasting a code snippet. -
-
+ + + ![A screenshot of a working video room with two participants. Menu buttons at the bottom enable muting and unmuting audio and video. A red button in the bottom right is labeled 'Leave'.](@image/video/conference.webp) + ## What do you need to get started? @@ -54,15 +46,9 @@ create a new room (with UI included). Finally, click on the dropdown menu next t **Moderator Embed Code** and click on **Guest Embed Code** to copy the code. A screen like the following will open: -
- A screenshot of the Guest Embed Code dialog. Users can copy the provided embed code. -
Guest Embed Code Snippet
-
+ + ![A screenshot of the Guest Embed Code dialog. Users can copy the provided embed code.](@image/video/guest-embed-code.webp) + You can copy either the code for guests, or the code for accessing the room with moderator permissions. How do they differ? @@ -86,10 +72,9 @@ Since your room's Moderator code snippet gives website visitors permissions over You can change the look of your Video Conferences in the **Appearance** tab. There are two color schemes available: light and dark, and you can change them accordingly so they fit the look of your web page depending on the time of day. -
- A screenshot of the Appearance tab of a Video Conference. Users can edit the Background, Foreground, Primary, Success, and Negative colors for both Light and Dark color schemes with a live preview. -
Video Conference Appearance Tab
-
+ + ![A screenshot of the Appearance tab of a Video Conference. Users can edit the Background, Foreground, Primary, Success, and Negative colors for both Light and Dark color schemes with a live preview.](@image/video/conference-appearance.webp) + ## Using the code @@ -111,43 +96,33 @@ To learn more about the ways you can make more advanced changes to your code sni Integrating video meetings in WordPress to meet with your team or your customers has never been easier than with Video Conferences! You can add your Video Conference guest code to any page or post, using the **Custom HTML** block. Paste the code snippet in the HTML block, and you are ready to go. -
- An animated Gif showing a user adding a Custom HTML block with the Video Conference guest code to a WordPress page. -
How to add a Custom HTML Block to a page or post.
-
+ + ![An animated Gif showing a user adding a Custom HTML block with the Video Conference guest code to a WordPress page.](@image/video/wp-custom-html.gif) + #### Restricting access to your moderator page Since we do not want everyone to have Moderator permissions, we can create an extra page, for internal use only, by making it Private and only visible to Administrators and Editors. -
- An animated Gif showing a private WordPress page with the Moderator Video Conference code in an HTML block. -
How to make a page private.
-
+ + ![An animated Gif showing a private WordPress page with the Moderator Video Conference code in an HTML block.](@image/video/wp-private-page.gif) + #### Restricting access to your guest page You can password-protect your guest page to only allow certain people to join in. This has the benefit of having a consistent meeting link, but with the added benefit of changing the page password as needed. -
- An animated Gif showing a password-protected WordPress page with the Guest Video Conference code in an HTML block. -
How to password-protect a page.
-
+ + ![An animated Gif showing a password-protected WordPress page with the Guest Video Conference code in an HTML block.](@image/video/wp-password-protected.gif) + ### Ghost Conferencing with readers in Ghost is very simple. To turn any post into a meeting/conference page all you need to do is add the guest code to an **HTML card**. -
- An animated GIF showing a user adding an HTML block to a post in the Ghost CMS. The user pastes the Video Conference Guest code into this HTML block. -
- How to add the code snippet to a post using the HTML card. -
-
+ + ![An animated Gif showing a user adding an HTML block to a post in the Ghost CMS. The user pastes the Video Conference Guest code into this HTML block.](@image/video/ghost-html.gif) + ## Wrap Up diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/2d8a6d6-project_id_sample.webP b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/2d8a6d6-project_id_sample.webP deleted file mode 100644 index db740532b..000000000 Binary files a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/2d8a6d6-project_id_sample.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/356e5f3-new_project.webP b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/356e5f3-new_project.webP deleted file mode 100644 index 3c2280f2a..000000000 Binary files a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/356e5f3-new_project.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/6212c25-video_room.webP b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/6212c25-video_room.webP deleted file mode 100644 index c2f8c00c0..000000000 Binary files a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/6212c25-video_room.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/833e1ce-cropped_project_side_menu.webP b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/833e1ce-cropped_project_side_menu.webP deleted file mode 100644 index eb1e48858..000000000 Binary files a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/833e1ce-cropped_project_side_menu.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/8cc8986-api_tokens.webP b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/8cc8986-api_tokens.webP deleted file mode 100644 index 6e73bba71..000000000 Binary files a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/8cc8986-api_tokens.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/index.mdx b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/index.mdx index f75273ae9..ccb41f045 100644 --- a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/index.mdx +++ b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/index.mdx @@ -26,15 +26,10 @@ This is what we will cover: When the site is finished, it will look something like this: -
- A screenshot of a video call with two participants and a button labeled 'Hang up' beneath the video. -
The end result.
-
+ +![A screenshot of a video call with two participants and a button labeled 'Hang up' beneath the video.](./video-room.webp) + + Before we begin, try using the [demo app](https://codesandbox.io/s/simple-video-demo-1ntfr2?file=/src/frontend/index.js). This is what we will build, step by step. Feel free to explore the codebase. @@ -48,26 +43,13 @@ If you already have a SignalWire account, can [sign in to the SignalWire website If you're not already registered, you can [**sign up**](https://signalwire.com/signups/new) in trial mode, which comes with a $5 credit. This will be plenty to follow along with this guide. -Once you've signed up and verified your email, create a new project. -Chose any name you like. For this example, we will use "hello world". +Once you've signed up and verified your email, create a new project. Next, [navigate to the API page](/platform/dashboard/getting-started/navigating-your-space) from the sidebar. -
- A screenshot of an input field. The section is labeled 'Create a New Project'. The input field is labeled 'NAME', with an asterisk marking this input as mandatory. Beneath this input field, there is a blue Save button. -
+ -After the project has been created, you'll be taken to that project's page. +![The API page shows the active Project ID and Space URL, and a list of API tokens organized by Name, Token, and Last Used.](@image/dashboard/credentials/api-credentials.webP) -
- A screenshot of the project page. The project is titled 'hello world'. Beneath the project title are two tabs, 'Resources' and 'Settings'. 'Resources' is currently selected, and includes the Project ID and Space URL. -
+ Two important pieces of information about our project are displayed there: @@ -77,32 +59,8 @@ Two important pieces of information about our project are displayed there: There is one more piece of information that we need from our new project. We need to generate an **API token** to access SignalWire's APIs from our own code. -We can do that by navigating to the "API" page from the sidebar. -Once you have navigated to the API page, click on **"Create Token"**. -Give it an easily idenitifable name, and make sure that the **"Video" scope** is enabled. Then hit **"Save"**. - -
- A screenshot of the sidebar in the SignalWire Space. The options shown are Dashboard, Video, Integrations, API, and Usage. -
- Sidebar in the SignalWire Space. Click on "API" to create a token. -
-
- -After the token is created, you will see it listed in the table. - -
- A table with columns labeled Name, Token, and Last Used. -
The API token.
-
+To generate an API token, click on the New Token button. +Give it an easily identifiable name, and make sure that the **"Video" scope** is enabled. Then hit **"Save"**. :::caution API Tokens are confidential @@ -130,11 +88,29 @@ Your server can directly access the SignalWire servers (for example, to get a li However, for a client to interact with SignalWire servers, it must first ask _your server_ to provide a limited-scope token (we call this the _Video Room Token_).
- A diagram depicting interactions between SignalWire servers, your server, and the client. + +```mermaid +sequenceDiagram + participant SW as SignalWire Servers + participant YS as Your Server + participant C as Client (Browser, App, ...) + + YS->>SW: GET list of rooms + SW-->>YS: [Room A, Room B, Room C] + + C->>YS: GET Video Room Token for Room A + YS->>SW: GET Video Room Token + SW-->>YS: { Token } + YS-->>C: { Token } + + C->>SW: Join Room A via RELAY Browser SDK + SW-->>C: WebRTC Stream (Video & Events) + + C->>SW: Change Room Layout + C->>SW: Mute Audio + C->>SW: Leave Room +``` +
A diagram showing the relationship between SignalWire Servers, Your Server, and the Client, such as a browser or app. The SignalWire Servers communicate a list of rooms @@ -374,12 +350,11 @@ to see complete code or fork the repository. Here is the final result of our development with a preview of some added features: -This screenshot shows a SignalWire video call with three participants. The buttons beneath the video allow the user to do the following actions: Leave the call, Share Screen, change video grid, Mute or Unmute Audio and Video, and change the camera and microphone. + + +![A screenshot of a SignalWire video call with three participants. The buttons beneath the video allow the user to do the following actions: Leave the call, Share Screen, change video grid, Mute or Unmute Audio and Video, and change the camera and microphone.](./video-room-final.webp) + + The most noteworthy thing about SignalWire Video technology is that it only streams a single video stream no matter how many participants there are. The video is composited on powerful SignalWire servers by stitching all of the individual video streams together. diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/sequence.svg b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/sequence.svg deleted file mode 100644 index a14c1f7bf..000000000 --- a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/sequence.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/50b0037-Screenshot_2021-09-27_at_12.33.07.webP b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room-final.webP similarity index 100% rename from docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/50b0037-Screenshot_2021-09-27_at_12.33.07.webP rename to docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room-final.webP diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room-final.webp b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room-final.webp new file mode 100644 index 000000000..47518b887 Binary files /dev/null and b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room-final.webp differ diff --git a/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room.webp b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room.webp new file mode 100644 index 000000000..485c07381 Binary files /dev/null and b/docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/video-room.webp differ diff --git a/docs/home/products/video/getting-started/video-conferences/93fc431-video-conference.webP b/docs/home/products/video/getting-started/video-conferences/93fc431-video-conference.webP deleted file mode 100644 index 09afab7a9..000000000 Binary files a/docs/home/products/video/getting-started/video-conferences/93fc431-video-conference.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/video-conferences/a18983e-settting.webP b/docs/home/products/video/getting-started/video-conferences/a18983e-settting.webP deleted file mode 100644 index 868f46d6f..000000000 Binary files a/docs/home/products/video/getting-started/video-conferences/a18983e-settting.webP and /dev/null differ diff --git a/docs/home/products/video/getting-started/video-conferences/index.mdx b/docs/home/products/video/getting-started/video-conferences/index.mdx index d3b6456b8..5691de71b 100644 --- a/docs/home/products/video/getting-started/video-conferences/index.mdx +++ b/docs/home/products/video/getting-started/video-conferences/index.mdx @@ -10,14 +10,9 @@ description: Quick start with ready-to-use UI-included video conferences with Si The SignalWire Video APIs give you full flexibility to build your own personalized video conferencing experience. But if you need a simpler level of personalization, and you want to get started fast, you can use Video Conferences. -
- A screenshot of a SignalWire Video Conference labeled 'Test' with two participants. Icons for microphone, camera, and other settings are visible in the bottom left. A red button labeled 'Leave' is visible in the bottom right. -
- With Video Conferences you get a ready-to-use UI which includes device selectors, - recording, screen sharing, participants list, and more. And if you need to, you can - always extend them with custom code. -
-
+ +![A screenshot of a SignalWire Video Conference labeled 'Test' with two participants. Icons for microphone, camera, and other settings are visible in the bottom left. A red button labeled 'Leave' is visible in the bottom right.](@image/video/conference.webp) + A Video Conference is a pre-built videoconferencing room that you can create from your SignalWire Space UI. No code is required. You can configure the style and features of the room, and you can share links for joining it. You can even embed it in your CMS like WordPress, Drupal, or any other kind of static HTML page, simply by copy-pasting a snippet of HTML code. @@ -29,10 +24,9 @@ To create a new conference room, log into your SignalWire Space, go to the _Vide After selecting a name, you are redirected to the configuration page for that Conference room. -
- A screenshot showing the overview of a Video Conference called 'CloudEngineering'. The left pane shows a room description with stock text. A participant counter shows that 0 of 200 maximum participants are in the Conference. Buttons show options to 'Join Room as Moderator', 'Copy Moderator Link', 'Moderator Embed Code', 'Copy Moderator Token', and 'Reset Tokens'. A preview of the Video Conference is shown on the right. -
Overview screen for a Video Conference.
-
+ +![A screenshot showing the overview of a Video Conference called 'CloudEngineering'. The left pane shows a room description with stock text. A participant counter shows that 0 of 200 maximum participants are in the Conference. Buttons show options to 'Join Room as Moderator', 'Copy Moderator Link', 'Moderator Embed Code', 'Copy Moderator Token', and 'Reset Tokens'. A preview of the Video Conference is shown on the right.](@image/video/conference-overview.webp) + On the right, you see a preview of the room's content. Note that this will be enabled only if you have enabled room previews. @@ -57,9 +51,9 @@ Pressing this button will reset the security tokens associated with a room. Pres In the second section, you will find two tabs to help you customize your room. -
- This screenshot shows the configuration options for Video Conferences. At the top of the screen, there are two tabs: 'Settings' and 'Appearance'. Under the selected 'Settings' tab, there are the following options. 'Availability' sets the dates and times that members will be able to enter the room. There are also settings for Quality, Layout, Size, and Record on Start. -
+ +![This screenshot shows the configuration options for Video Conferences. At the top of the screen, there are two tabs: 'Settings' and 'Appearance'. Under the selected 'Settings' tab, there are the following options. 'Availability' sets the dates and times that members will be able to enter the room. There are also settings for Quality, Layout, Size, and Record on Start.](@image/video/conference-settings.png) + ### Settings Tab {#settings-tab} diff --git a/docs/home/products/video/getting-started/video-first-steps/index.mdx b/docs/home/products/video/getting-started/video-first-steps/index.mdx index 04aef8f0b..20a1e4446 100644 --- a/docs/home/products/video/getting-started/video-first-steps/index.mdx +++ b/docs/home/products/video/getting-started/video-first-steps/index.mdx @@ -11,14 +11,9 @@ sidebar_custom_props: In this guide, you will learn how to set up a minimal video room using the JavaScript SDK. -
- A screenshot of a video room in a Safari browser window. There are two participants, one with video muted. -
The end result.
-
+ +![A screenshot of a video room in a Safari browser window. There are two participants, one with video muted.](./video-api-example.webp) + If you need to embed a prebuilt video conferencing widget into your web page, follow our guide for [Video Conferences](../video-conferences/index.mdx). Otherwise, keep reading to start coding a fully customizable video application. @@ -106,10 +101,10 @@ Having your own server will also allow you to access the following additional AP - [REST APIs](/rest): create and manage tokens, rooms, recordings, and more. - [Realtime SDK](/sdks/reference/realtime-sdk/relay-v4): receive events from active video rooms and control them server-side (mute users, start recordings, change layouts, and so on). -To access these full capabilities, you should provide your own `video_token` endpoint using your own server. Follow the guide to keep learning: +import { FaVideo } from 'react-icons/fa'; -
+} > -[Get Started With a Simple Video Demo ❯](/video/getting-started/simple-video-demo) +To access these full capabilities, you should provide your own video_token endpoint using your own server. Follow this guide to keep learning. -
+ diff --git a/docs/home/products/video/getting-started/video-first-steps/c4d0175-Screenshot_2022-02-01_at_15.22.12.webP b/docs/home/products/video/getting-started/video-first-steps/video-api-example.webp similarity index 100% rename from docs/home/products/video/getting-started/video-first-steps/c4d0175-Screenshot_2022-02-01_at_15.22.12.webP rename to docs/home/products/video/getting-started/video-first-steps/video-api-example.webp diff --git a/docs/home/products/video/guides/layout-positions/b3cf3b4-Screenshot_2022-04-04_at_15.34.35.webP b/docs/home/products/video/guides/layout-positions/b3cf3b4-Screenshot_2022-04-04_at_15.34.35.webP deleted file mode 100644 index 4908c8766..000000000 Binary files a/docs/home/products/video/guides/layout-positions/b3cf3b4-Screenshot_2022-04-04_at_15.34.35.webP and /dev/null differ diff --git a/docs/home/products/video/guides/layout-positions/index.mdx b/docs/home/products/video/guides/layout-positions/index.mdx index 6d078d710..6fc664c78 100644 --- a/docs/home/products/video/guides/layout-positions/index.mdx +++ b/docs/home/products/video/guides/layout-positions/index.mdx @@ -11,19 +11,9 @@ sidebar_custom_props: SignalWire Video APIs provide a powerful layout system that you can use in your calls. Let's see how it works. -
- A screenshot of a 5 by 5 grid layout in a SignalWire video room. -
-

A 5x5 grid layout. Using the SDK you can assign a manual position to each member: in this example, the member in the second position (standard-2) has been moved to the center of the video (standard-13).

-
-
+ +![A screenshot of a 5 by 5 grid layout in a SignalWire video room.](@image/video/layouts/5x5.webp) + This guide assumes that you have a video already set up in a web page. Follow [First steps with Video](/video/getting-started/video-first-steps) if you need help getting started. diff --git a/docs/home/products/video/guides/layouts/index.mdx b/docs/home/products/video/guides/layouts/index.mdx index 344330ae4..f1d065a76 100644 --- a/docs/home/products/video/guides/layouts/index.mdx +++ b/docs/home/products/video/guides/layouts/index.mdx @@ -16,175 +16,51 @@ SignalWire Video Conferences offer a wide set of layouts to display the members Here is an overview of the layouts and positions you can choose from. -import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from "./index.module.scss"; - -
- -
- -
grid-responsive
-
- (1x1, 2x1, 1x1-2x1, 2x2, 5up, 3x3, 4x4, 5x5, 6x6, 8x8, 10x10, 15x15) -
- - -
highlight-1-responsive
- - -
screen-share
- - -
screen-share-2
- - -
full-screen
- - -
+## Grid Responsive Layouts + + + +![](@image/video/layouts/1x1.webp) +![](@image/video/layouts/2x1.webp) +![](@image/video/layouts/1x1-2x1.webp) +![](@image/video/layouts/2x2.webp) +![](@image/video/layouts/5up.webp) +![](@image/video/layouts/3x3.webp) +![](@image/video/layouts/4x4.webp) +![](@image/video/layouts/5x5.webp) +![](@image/video/layouts/6x6.webp) +![](@image/video/layouts/8x8.webp) +![](@image/video/layouts/10x10.webp) +![](@image/video/layouts/15x15.webp) + + + +## Highlight-1 Responsive Layouts + + + +![](@image/video/layouts/1up-top-left5.webp) +![](@image/video/layouts/1up-top-left7.webp) +![](@image/video/layouts/1up-top-left9.webp) +![](@image/video/layouts/1up-top-left16.webp) +![](@image/video/layouts/1up-top-left24.webp) +![](@image/video/layouts/1up-top-left32.webp) + + + +## Screen Share Layouts + + + +![](@image/video/layouts/screen-share.webp) +![](@image/video/layouts/presenter-dual-horizontal.webp) + + + +## Full Screen Layout + + + +![](@image/video/layouts/full-screen.webp) + + diff --git a/docs/home/products/video/guides/layouts/index.module.scss b/docs/home/products/video/guides/layouts/index.module.scss deleted file mode 100644 index b28dde050..000000000 --- a/docs/home/products/video/guides/layouts/index.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -.swTitle { - text-align: center; - font-size: 1.3em; -} - -.swSubtitle { - text-align: center; - font-style: italic; -} - -.swLayout { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 5px; - margin-top: 5px; - margin-bottom: 40px; -} - -.swLayout img { - width: 260px; -} - -.swLayout img { - transition: transform 0.25s ease; -} -.swLayout img:hover { - transform: scale(1.8); -} diff --git a/docs/home/products/video/guides/making-a-clubhouse-clone/98bfb56-Screenshot_2021-10-08_at_20.10.33.webP b/docs/home/products/video/guides/making-a-clubhouse-clone/98bfb56-Screenshot_2021-10-08_at_20.10.33.webP deleted file mode 100644 index e885777cc..000000000 Binary files a/docs/home/products/video/guides/making-a-clubhouse-clone/98bfb56-Screenshot_2021-10-08_at_20.10.33.webP and /dev/null differ diff --git a/docs/home/products/video/guides/making-a-clubhouse-clone/clubhouse-like-video.mp4 b/docs/home/products/video/guides/making-a-clubhouse-clone/clubhouse-like-video.mp4 new file mode 100644 index 000000000..1a2f9fefb Binary files /dev/null and b/docs/home/products/video/guides/making-a-clubhouse-clone/clubhouse-like-video.mp4 differ diff --git a/docs/home/products/video/guides/making-a-clubhouse-clone/index.mdx b/docs/home/products/video/guides/making-a-clubhouse-clone/index.mdx index b1138ec39..8946decc4 100644 --- a/docs/home/products/video/guides/making-a-clubhouse-clone/index.mdx +++ b/docs/home/products/video/guides/making-a-clubhouse-clone/index.mdx @@ -22,7 +22,7 @@ Our Video APIs can do more than video! In this guide, we will build an audio-onl