railbird/react-native-video
10
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into feat/web

Browse Source
This commit is contained in:
Ivan Malison
2024-10-12 22:33:11 -06:00
parent 6768c22139 a8d5841c7c
commit d79b5c9a83
99 changed files with 5602 additions and 4049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/pages/component/ads.md
View File

@@ -23,3 +23,16 @@ Example:
onReceiveAdEvent={event => console.log(event)}
...
```
### Localization
To change the language of the IMA SDK, you need to pass `adLanguage` prop to `Video` component. List of supported languages, you can find [here](https://developers.google.com/interactive-media-ads/docs/sdks/android/client-side/localization#locale-codes)
By default, ios will use system language and android will use `en`
Example:
```jsx
...
adLanguage="fr"
...
```

14
docs/pages/component/drm.mdx
View File

@@ -137,6 +137,20 @@ You can specify the DRM type, either by string or using the exported DRMType enu
Valid values are, for Android: DRMType.WIDEVINE / DRMType.PLAYREADY / DRMType.CLEARKEY.
for iOS: DRMType.FAIRPLAY
### `localSourceEncryptionKeyScheme`
<PlatformsList types={['iOS']} />
Set the url scheme for stream encryption key for local assets
Type: String
Example:
```
localSourceEncryptionKeyScheme="my-offline-key"
```
## Common Usage Scenarios
### Send cookies to license server

8
docs/pages/component/events.mdx
View File

@@ -67,7 +67,7 @@ Example:
### `onBandwidthUpdate`
<PlatformsList types={['Android']} />
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when the available bandwidth changes.
@@ -225,13 +225,14 @@ NOTE: tracks (`audioTracks`, `textTracks` & `videoTracks`) are not available on
Payload:
| Property | Type | Description |
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|-------------|--------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| currentTime | number | Time in seconds where the media will start |
| duration | number | Length of the media in seconds |
| naturalSize | object | Properties:<br/> _ width - Width in pixels that the video was encoded at<br/> _ height - Height in pixels that the video was encoded at<br/> \* orientation - "portrait", "landscape" or "square" |
| audioTracks | array | An array of audio track info objects with the following properties:<br/> _ index - Index number<br/> _ title - Description of the track<br/> _ language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br/> _ type - Mime type of track |
| textTracks | array | An array of text track info objects with the following properties:<br/> _ index - Index number<br/> _ title - Description of the track<br/> _ language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br/> _ type - Mime type of track |
| videoTracks | array | An array of video track info objects with the following properties:<br/> _ trackId - ID for the track<br/> _ bitrate - Bit rate in bits per second<br/> _ codecs - Comma separated list of codecs<br/> _ height - Height of the video<br/> \* width - Width of the video |
| trackId | string | Provide key information about the video track, typically including: `Resolution`, `Bitrate`. |
Example:
@@ -263,7 +264,8 @@ Example:
{ index: 0, bitrate: 3987904, codecs: "avc1.640028", height: 720, trackId: "f1-v1-x3", width: 1280 },
{ index: 1, bitrate: 7981888, codecs: "avc1.640028", height: 1080, trackId: "f2-v1-x3", width: 1920 },
{ index: 2, bitrate: 1994979, codecs: "avc1.4d401f", height: 480, trackId: "f3-v1-x3", width: 848 }
]
],
trackId: "720p 2400kbps"
}
```

14
docs/pages/component/methods.mdx
View File

@@ -115,6 +115,16 @@ This function will change the volume exactly like [volume](./props#volume) prope
This function retrieves and returns the precise current position of the video playback, measured in seconds.
This function will throw an error if player is not initialized.
### `setSource`
<PlatformsList types={['Android', 'iOS']} />
`setSource(source: ReactVideoSource): Promise<void>`
This function will change the source exactly like [source](./props#source) property.
Changing source with this function will overide source provided as props.
### `setFullScreen`
<PlatformsList types={['Android', 'iOS', 'web']} />
@@ -148,9 +158,9 @@ const someCoolFunctions = async () => {
videoRef.current.presentFullscreenPlayer();
videoRef.current.dismissFullscreenPlayer();
// pause or play the video
videoRef.current.play();
// pause or resume the video
videoRef.current.pause();
videoRef.current.resume();
// save video to your Photos with current filter prop
const response = await videoRef.current.save();

321
docs/pages/component/props.mdx
View File

@@ -8,6 +8,9 @@ This page shows the list of available properties to configure player
### `adTagUrl`
> [!WARNING]
> Deprecated, use source.ad.adTagUrl instead
<PlatformsList types={['Android', 'iOS']} />
Sets the VAST uri to play AVOD ads.
@@ -135,8 +138,7 @@ Determines whether to show player controls.
- **false (default)** - Don't show player controls
- **true** - Show player controls
Note on iOS, controls are always shown when in fullscreen mode.
Note on Android, native controls are available by default.
Controls are always shown in fullscreen mode, even when `controls={false}`.
If needed, you can also add your controls or use a package like [react-native-video-controls](https://github.com/itsnubix/react-native-video-controls) or [react-native-media-console](https://github.com/criszz77/react-native-media-console), see [Useful Side Project](/projects).
### `controlsStyles`
@@ -145,25 +147,53 @@ If needed, you can also add your controls or use a package like [react-native-vi
Adjust the control styles. This prop is need only if `controls={true}` and is an object. See the list of prop supported below.
| Property | Type | Description |
|-----------------|---------|-----------------------------------------------------------------------------------------|
| hideSeekBar | boolean | The default value is `false`, allowing you to hide the seek bar for live broadcasts. |
| seekIncrementMS | number | The default value is `10000`. You can change the value to increment forward and rewind. |
| Property | Type | Description |
|-------------------------------------|---------|---------------------------------------------------------------------------------------------|
| hidePosition | boolean | Hides the position indicator. Default is `false`. |
| hidePlayPause | boolean | Hides the play/pause button. Default is `false`. |
| hideForward | boolean | Hides the forward button. Default is `false`. |
| hideRewind | boolean | Hides the rewind button. Default is `false`. |
| hideNext | boolean | Hides the next button. Default is `false`. |
| hidePrevious | boolean | Hides the previous button. Default is `false`. |
| hideFullscreen | boolean | Hides the fullscreen button. Default is `false`. |
| hideSeekBar | boolean | The default value is `false`, allowing you to hide the seek bar for live broadcasts. |
| hideDuration | boolean | The default value is `false`, allowing you to hide the duration. |
| hideNavigationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the navigation bar on full-screen mode. |
| hideNotificationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the notification bar on full-screen mode. |
| hideSettingButton | boolean | The default value is `true`, allowing you to hide the setting button. |
| seekIncrementMS | number | The default value is `10000`. You can change the value to increment forward and rewind. |
| liveLabel | string | Allowing you to set a label for live video. |
Example with default values:
```javascript
controlsStyles={{
hidePosition: false,
hidePlayPause: false,
hideForward: false,
hideRewind: false,
hideNext: false,
hidePrevious: false,
hideFullscreen: false,
hideSeekBar: false,
hideDuration: false,
hideNavigationBarOnFullScreenMode: true,
hideNotificationBarOnFullScreenMode: true,
hideSettingButton: true,
seekIncrementMS: 10000,
liveLabel: "LIVE"
}}
```
### `contentStartTime`
> [!WARNING]
> Deprecated, use source.contentStartTime instead
<PlatformsList types={['Android']} />
The start time in ms for SSAI content. This determines at what time to load the video info like resolutions. Use this only when you have SSAI stream where ads resolution is not the same as content resolution.
Note: This feature only works on DASH streams
### `debug`
@@ -330,19 +360,6 @@ Controls the iOS silent switch behavior
- **"ignore"** - Play audio even if the silent switch is set
- **"obey"** - Don't play audio if the silent switch is set
### `localSourceEncryptionKeyScheme`
<PlatformsList types={['iOS']} />
Set the url scheme for stream encryption key for local assets
Type: String
Example:
```
localSourceEncryptionKeyScheme="my-offline-key"
```
### `maxBitRate`
@@ -352,6 +369,9 @@ Sets the desired limit, in bits per second, of network bandwidth consumption whe
Default: 0. Don't limit the maxBitRate.
Note: This property can interact with selectedVideoTrack.
To use `maxBitrate`, selectedVideoTrack shall be undefined or `{type: SelectedVideoTrackType.AUTO}`.
Example:
```javascript
@@ -437,13 +457,26 @@ Determine whether the media should continue playing when notifications or the Co
### `poster`
<PlatformsList types={['All']} />
> [!WARNING]
> Value: string with a URL for the poster is deprecated, use `poster` as object instead
An image to display while the video is loading
Value: string with a URL for the poster, e.g. "https://baconmockup.com/300/200/"
Value: Props for the `Image` component. The poster is visible when the source attribute is provided.
```javascript
<Video>
poster={{
source: { uri: "https://baconmockup.com/300/200/" },
resizeMode: "cover",
// ...
}}
</Video>
````
### `posterResizeMode`
> [!WARNING]
> deprecated, use `poster` with `resizeMode` key instead
<PlatformsList types={['All']} />
Determines how to resize the poster image when the frame doesn't match the raw video dimensions.
@@ -489,6 +522,37 @@ Speed at which the media should play.
- **1.0** - Play at normal speed (default)
- **Other values** - Slow down or speed up playback
### `renderLoader`
<PlatformsList types={['All']} />
Allows you to create custom components to display while the video is loading.
If `renderLoader` is provided, `poster` and `posterResizeMode` will be ignored.
renderLoader is either a component or a function returning a component.
It is recommended to use the function for optimization matter.
`renderLoader` function be called with parameters of type `ReactVideoRenderLoaderProps` to be able to adapt loader
```typescript
interface ReactVideoRenderLoaderProps {
source?: ReactVideoSource; /// source of the video
style?: StyleProp<ImageStyle>; /// style to apply
resizeMode?: EnumValues<VideoResizeMode>; /// resizeMode provided to the video component
}
````
Sample:
```javascript
<Video>
renderLoader={() => (
<View>
<Text>Custom Loader</Text>
</View>)
}
</Video>
````
### `repeat`
<PlatformsList types={['All']} />
@@ -735,7 +799,7 @@ The following other types are supported on some platforms, but aren't fully docu
#### Using DRM content
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'visionOS', 'tvOS']} />
To setup DRM please follow [this guide](/component/drm)
@@ -753,8 +817,6 @@ Example:
},
```
> ⚠️ DRM is not supported on visionOS yet
#### Start playback at a specific point in time
@@ -801,6 +863,33 @@ source={{
}}
```
### `ad`
<PlatformsList types={['Android', 'iOS']} />
Sets the ad configuration.
Example:
```
ad: {
adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpodbumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
adLanguage="fr"
}
```
See: [./ads.md] for more informations
Note: You need enable IMA SDK in gradle or pod file - [enable client side ads insertion](/installation)
#### `contentStartTime`
<PlatformsList types={['Android']} />
The start time in ms for SSAI content. This determines at what time to load the video info like resolutions. Use this only when you have SSAI stream where ads resolution is not the same as content resolution.
Note: This feature only works on DASH streams
#### `textTracksAllowChunklessPreparation`
<PlatformsList types={['Android']} />
@@ -816,37 +905,19 @@ source={{
}}
```
### `subtitleStyle`
| Property | Description | Platforms |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| fontSize | Adjust the font size of the subtitles. Default: font size of the device | Android |
| paddingTop | Adjust the top padding of the subtitles. Default: 0 | Android |
| paddingBottom | Adjust the bottom padding of the subtitles. Default: 0 | Android |
| paddingLeft | Adjust the left padding of the subtitles. Default: 0 | Android |
| paddingRight | Adjust the right padding of the subtitles. Default: 0 | Android |
| opacity | Adjust the visibility of subtitles with 0 hiding and 1 fully showing them. Android supports float values between 0 and 1 for varying opacity levels, whereas iOS supports only 0 or 1. Default: 1. | Android, iOS |
Example:
```javascript
subtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}
```
### `textTracks`
#### `textTracks`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:
> ⚠️ This feature does not work with HLS playlists (e.g m3u8) on iOS
| Property | Description |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title | Descriptive name for the track |
| language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
| type | Mime type of the track _ TextTrackType.SRT - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) \* TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3 |
| uri | URL for the text track. Currently, only tracks hosted on a webserver are supported |
| Property | Description |
|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| title | Descriptive name for the track |
| language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
| type | Mime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) \* TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3 |
| uri | URL for the text track. Currently, only tracks hosted on a webserver are supported |
On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks as part of the playlist.
@@ -867,7 +938,92 @@ textTracks={[
{
title: "Spanish Subtitles",
language: "es",
type: TextTrackType.SRT, // "application/x-subrip"
type: TextTrackType.SUBRIP, // "application/x-subrip"
uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
}
]}
```
### `subtitleStyle`
<PlatformsList types={['Android', 'iOS']} />
| Property | Platform | Description | Platforms |
| ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| fontSize | Android | Adjust the font size of the subtitles. Default: font size of the device | Android |
| paddingTop | Android | Adjust the top padding of the subtitles. Default: 0 | Android |
| paddingBottom | Android | Adjust the bottom padding of the subtitles. Default: 0 | Android |
| paddingLeft | Android | Adjust the left padding of the subtitles. Default: 0 | Android |
| paddingRight | Android | Adjust the right padding of the subtitles. Default: 0 | Android |
| opacity | Android, iOS | Adjust the visibility of subtitles with 0 hiding and 1 fully showing them. Android supports float values between 0 and 1 for varying opacity levels, whereas iOS supports only 0 or 1. Default: 1. | Android, iOS |
| subtitlesFollowVideo | Android | Boolean to adjust position of subtitles. Default: true |
Example:
```javascript
subtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}
```
Note for `subtitlesFollowVideo`
`subtitlesFollowVideo` helps to determine how the subtitles are positionned.
To understand this prop you need to understand how views management works.
The main View style passed to react native video is the position reserved to display the video component.
It may not match exactly the real video size.
For exemple, you can pass a 4:3 video view and render a 16:9 video inside.
So there is a second view, the video view.
Subtitles are managed in a third view.
First react-native-video resize the video to keep aspect ratio (depending on `resizeMode` property) and put it in main view.
* When putting subtitlesFollowVideo to true, the subtitle view will be adapt to the video view.
It means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.
* When putting subtitlesFollowVideo to false, the subtitle view will keep adapting to the main view.
It means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.
This prop can be changed on runtime.
### `textTracks`
> [!WARNING]
> deprecated, use source.textTracks instead. changing text tracks will restart playback
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:
> ⚠️ This feature does not work with HLS playlists (e.g m3u8) on iOS
| Property | Description |
|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| title | Descriptive name for the track |
| language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
| type | Mime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) \* TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3 |
| uri | URL for the text track. Currently, only tracks hosted on a webserver are supported |
On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks as part of the playlist.
Note: Due to iOS limitations, sidecar text tracks are not compatible with Airplay. If textTracks are specified, AirPlay support will be automatically disabled.
Example:
```javascript
import { TextTrackType }, Video from 'react-native-video';
textTracks={[
{
title: "English CC",
language: "en",
type: TextTrackType.VTT, // "text/vtt"
uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
},
{
title: "Spanish Subtitles",
language: "es",
type: TextTrackType.SUBRIP, // "application/x-subrip"
uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
}
]}
@@ -972,3 +1128,68 @@ Adjust the volume.
- **1.0 (default)** - Play at full volume
- **0.0** - Mute the audio
- **Other values** - Reduce volume
### `cmcd`
<PlatformsList types={['Android']} />
Configure CMCD (Common Media Client Data) parameters. CMCD is a standard for conveying client-side metrics and capabilities to servers, which can help improve streaming quality and performance.
For detailed information about CMCD, please refer to the [CTA-5004 Final Specification](https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf).
- **false (default)** - Don't use CMCD
- **true** - Use default CMCD configuration
- **object** - Use custom CMCD configuration
When providing an object, you can configure the following properties:
| Property | Type | Description |
|----------|-------------------------|----------------------------------------------------|
| `mode` | `CmcdMode` | The mode for sending CMCD data |
| `request` | `CmcdData` | Custom key-value pairs for the request object |
| `session` | `CmcdData` | Custom key-value pairs for the session object |
| `object` | `CmcdData` | Custom key-value pairs for the object metadata |
| `status` | `CmcdData` | Custom key-value pairs for the status information |
Note: The `mode` property defaults to `CmcdMode.MODE_QUERY_PARAMETER` if not specified.
#### `CmcdMode`
CmcdMode is an enum that defines how CMCD data should be sent:
- `CmcdMode.MODE_REQUEST_HEADER` (0) - Send CMCD data in the HTTP request headers.
- `CmcdMode.MODE_QUERY_PARAMETER` (1) - Send CMCD data as query parameters in the URL.
#### `CmcdData`
CmcdData is a type representing custom key-value pairs for CMCD data. It's defined as:
```typescript
type CmcdData = Record<`${string}-${string}`, string | number>;
```
Custom key names MUST include a hyphenated prefix to prevent namespace collisions. It's recommended to use a reverse-DNS syntax for custom prefixes.
Example:
```javascript
<Video
source={{
uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
cmcd: {
mode: CmcdMode.MODE_QUERY_PARAMETER,
request: {
'com-custom-key': 'custom-value'
},
session: {
sid: 'session-id'
},
object: {
br: '3000',
d: '4000'
},
status: {
rtp: '1200'
}
}
}}
// or other video props
/>
```

6
docs/pages/installation.md
View File

@@ -57,12 +57,14 @@ $RNVideoUseGoogleIMA=true
## Android
From version >= 6.0.0, your application needs to have kotlin version >= 1.7.0
From version >= 6.0.0, your application needs to have kotlin version >= 1.8.0
```:
buildscript {
...
ext.kotlinVersion = '1.7.0'
ext.kotlinVersion = '1.8.0',
ext.compileSdkVersion = 34
ext.targetSdkVersion = 34
...
}
```

7
docs/pages/other/debug.md
View File

@@ -86,11 +86,6 @@ buildscript {
}
```
### Desugaring
to be able to link you may also need to enable coreLibraryDesugaringEnabled in your app.
See: https://developer.android.com/studio/write/java8-support?hl=fr#library-desugaring for more informations.
## It's still not working
You can try to open a ticket now !
You can try to open a ticket or contact us for [premium support](https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs#Contact)!

6
docs/pages/updating.md
View File

@@ -22,7 +22,7 @@ In your project Podfile add support for static dependency linking. This is requi
Add `use_frameworks! :linkage => :static` just under `platform :ios` in your ios project Podfile.
[See the example ios project for reference](examples/basic/ios/Podfile#L5)
[See the example ios project for reference](https://github.com/TheWidlarzGroup/react-native-video/blob/master/examples/basic/ios/Podfile#L5)
##### podspec
@@ -34,7 +34,7 @@ You can remove following lines from your podfile as they are not necessary anymo
- `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
```
If you were previously using VideoCaching, you should $RNVideoUseVideoCaching flag in your podspec, see: [installation section](https://react-native-video.github.io/react-native-video/installation#video-caching)
If you were previously using VideoCaching, you should $RNVideoUseVideoCaching flag in your podspec, see: [installation section](https://thewidlarzgroup.github.io/react-native-video/installation#video-caching)
#### Android
@@ -66,4 +66,4 @@ allprojects {
}
}
```
If you encounter an error `Could not find com.android.support:support-annotations:27.0.0.` reinstall your Android Support Repository.
If you encounter an error `Could not find com.android.support:support-annotations:27.0.0.` reinstall your Android Support Repository.

56
docs/theme.config.jsx
View File

@@ -52,6 +52,62 @@ export default {
</span>
),
},
toc: {
extraContent: (
<>
<style>{`
:is(html[class~=dark]) .extra-container {
background-color: #87ccef;
}
:is(html[class~=dark]) .extra-text {
color: #171717;
}
:is(html[class~=dark]) .extra-button {
background-color: #171717;
}
.extra-container {
display: flex;
flex-direction: column;
margin-top: 0.5rem;
text-align: center;
background-color: #171717;
padding: 1rem;
gap: 1rem;
border-radius: 0.5rem;
}
.extra-text {
padding-left: 0.5rem;
padding-right: 0.5rem;
font-weight: bold;
color: #fff;
}
.extra-button {
width: 100%;
border: none;
padding: 0.5rem 1rem;
font-weight: 500;
background-color: #f9d85b;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.extra-button:hover {
transform: scale(1.05);
background-color: #fff;
}
`}</style>
<div className="extra-container">
<span className="extra-text">We are TheWidlarzGroup</span>
<a
target="_blank"
href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs#Contact"
className="extra-button"
rel="noreferrer">
Premium support →
</a>
</div>
</>
),
},
useNextSeoProps() {
return {
titleTemplate: '%s – Video',