Use useCallback()
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
dd304d3569
commit
c61bc46673
2 changed files with 12 additions and 3 deletions
|
@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
import React, { forwardRef } from "react";
|
import React, { forwardRef, useCallback } from "react";
|
||||||
import { PressEvent } from "@react-types/shared";
|
import { PressEvent } from "@react-types/shared";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { useButton } from "@react-aria/button";
|
import { useButton } from "@react-aria/button";
|
||||||
|
@ -273,8 +273,12 @@ export function FullscreenButton({
|
||||||
fullscreen,
|
fullscreen,
|
||||||
...rest
|
...rest
|
||||||
}: FullscreenButtonProps) {
|
}: FullscreenButtonProps) {
|
||||||
|
const getTooltip = useCallback(() => {
|
||||||
|
return fullscreen ? "Exit full screen" : "Full screen";
|
||||||
|
}, [fullscreen]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TooltipTrigger tooltip={() => "Full screen"}>
|
<TooltipTrigger tooltip={getTooltip}>
|
||||||
<Button variant="icon" {...rest}>
|
<Button variant="icon" {...rest}>
|
||||||
{fullscreen ? <FullscreenExit /> : <Fullscreen />}
|
{fullscreen ? <FullscreenExit /> : <Fullscreen />}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -22,6 +22,7 @@ import { useRoomMemberName } from "./useRoomMemberName";
|
||||||
import { VideoTile } from "./VideoTile";
|
import { VideoTile } from "./VideoTile";
|
||||||
import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
|
import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
|
||||||
import { useModalTriggerState } from "../Modal";
|
import { useModalTriggerState } from "../Modal";
|
||||||
|
import { useCallback } from "react";
|
||||||
|
|
||||||
export function VideoTileContainer({
|
export function VideoTileContainer({
|
||||||
item,
|
item,
|
||||||
|
@ -65,6 +66,10 @@ export function VideoTileContainer({
|
||||||
videoTileSettingsModalState.open();
|
videoTileSettingsModalState.open();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onFullscreenCallback = useCallback(() => {
|
||||||
|
onFullscreen(item);
|
||||||
|
}, [onFullscreen, item]);
|
||||||
|
|
||||||
// Firefox doesn't respect the disablePictureInPicture attribute
|
// Firefox doesn't respect the disablePictureInPicture attribute
|
||||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
|
||||||
|
|
||||||
|
@ -85,7 +90,7 @@ export function VideoTileContainer({
|
||||||
onOptionsPress={onOptionsPress}
|
onOptionsPress={onOptionsPress}
|
||||||
localVolume={localVolume}
|
localVolume={localVolume}
|
||||||
isFullscreen={isFullscreen}
|
isFullscreen={isFullscreen}
|
||||||
onFullscreen={() => onFullscreen(item)}
|
onFullscreen={onFullscreenCallback}
|
||||||
{...rest}
|
{...rest}
|
||||||
/>
|
/>
|
||||||
{videoTileSettingsModalState.isOpen && (
|
{videoTileSettingsModalState.isOpen && (
|
||||||
|
|
Loading…
Reference in a new issue