|
| 1 | +/* |
| 2 | + * Copyright 2024 Nordeck IT + Consulting GmbH |
| 3 | + * Copyright 2026 Element Creations Ltd. |
| 4 | + * |
| 5 | + * Licensed under the Apache License, Version 2.0 (the "License"); |
| 6 | + * you may not use this file except in compliance with the License. |
| 7 | + * You may obtain a copy of the License at |
| 8 | + * |
| 9 | + * http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | + * |
| 11 | + * Unless required by applicable law or agreed to in writing, software |
| 12 | + * distributed under the License is distributed on an "AS IS" BASIS, |
| 13 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 14 | + * See the License for the specific language governing permissions and |
| 15 | + * limitations under the License. |
| 16 | + */ |
| 17 | + |
| 18 | +import { type I18nApi, type WidgetApi } from "@element-hq/element-web-module-api"; |
| 19 | +import { IconButton, Tooltip } from "@vector-im/compound-web"; |
| 20 | +import { type IWidget } from "matrix-widget-api"; |
| 21 | +import React, { type JSX } from "react"; |
| 22 | +import styled from "styled-components"; |
| 23 | + |
| 24 | +type Props = { $isInContainer: boolean }; |
| 25 | + |
| 26 | +const Img = styled.img<Props>` |
| 27 | + border-color: ${(): string => "var(--cpd-color-text-action-accent)"}; |
| 28 | + border-radius: 50%; |
| 29 | + border-style: solid; |
| 30 | + border-width: ${({ $isInContainer }): string => ($isInContainer ? "2px" : "0px")}; |
| 31 | + box-sizing: border-box; |
| 32 | + height: 24px; |
| 33 | + width: 24px; |
| 34 | +`; |
| 35 | + |
| 36 | +const Svg = styled.svg<Props>` |
| 37 | + height: 24px; |
| 38 | + fill: ${({ $isInContainer }): string => ($isInContainer ? "var(--cpd-color-text-action-accent)" : "currentColor")}; |
| 39 | + width: 24px; |
| 40 | +`; |
| 41 | + |
| 42 | +function avatarUrl(app: IWidget, widgetApi: WidgetApi): string | null { |
| 43 | + if (app.type.match(/jitsi/i)) { |
| 44 | + return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjQiIGZpbGw9IiM1QUJGRjIiLz4KICAgIDxwYXRoIGQ9Ik0zIDcuODc1QzMgNi44Mzk0NyAzLjgzOTQ3IDYgNC44NzUgNkgxMS4xODc1QzEyLjIyMyA2IDEzLjA2MjUgNi44Mzk0NyAxMy4wNjI1IDcuODc1VjEyLjg3NUMxMy4wNjI1IDEzLjkxMDUgMTIuMjIzIDE0Ljc1IDExLjE4NzUgMTQuNzVINC44NzVDMy44Mzk0NyAxNC43NSAzIDEzLjkxMDUgMyAxMi44NzVWNy44NzVaIiBmaWxsPSJ3aGl0ZSIvPgogICAgPHBhdGggZD0iTTE0LjM3NSA4LjQ0NjQ0TDE2LjEyMDggNy4xMTAzOUMxNi40ODA2IDYuODM1MDIgMTcgNy4wOTE1OCAxNyA3LjU0NDY4VjEzLjAzOTZDMTcgMTMuNTE5OSAxNi40MjUxIDEzLjc2NjkgMTYuMDc2NyAxMy40MzYzTDE0LjM3NSAxMS44MjE0VjguNDQ2NDRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"; |
| 45 | + } |
| 46 | + |
| 47 | + return widgetApi.getAppAvatarUrl(app); |
| 48 | +} |
| 49 | + |
| 50 | +function isInContainer(app: IWidget, widgetApi: WidgetApi, roomId: string): boolean { |
| 51 | + return widgetApi.isAppInContainer(app, "center", roomId) || widgetApi.isAppInContainer(app, "top", roomId); |
| 52 | +} |
| 53 | + |
| 54 | +type WidgetToggleProps = { |
| 55 | + app: IWidget; |
| 56 | + roomId: string; |
| 57 | + widgetApi: WidgetApi; |
| 58 | + i18nApi: I18nApi; |
| 59 | +}; |
| 60 | + |
| 61 | +export function WidgetToggle({ app, roomId, widgetApi, i18nApi }: WidgetToggleProps): JSX.Element { |
| 62 | + const appAvatarUrl = avatarUrl(app, widgetApi); |
| 63 | + const appNameOrType = app.name ?? app.type; |
| 64 | + const inContainer = isInContainer(app, widgetApi, roomId); |
| 65 | + |
| 66 | + const label = i18nApi.translate(inContainer ? "Hide %(name)s" : "Show %(name)s", { name: appNameOrType }); |
| 67 | + |
| 68 | + const onClick = React.useCallback( |
| 69 | + (event: React.MouseEvent<HTMLButtonElement>) => { |
| 70 | + event.stopPropagation(); |
| 71 | + if (inContainer) { |
| 72 | + widgetApi.moveAppToContainer(app, "right", roomId); |
| 73 | + } else { |
| 74 | + widgetApi.moveAppToContainer(app, "top", roomId); |
| 75 | + } |
| 76 | + }, |
| 77 | + [app, inContainer, roomId, widgetApi], |
| 78 | + ); |
| 79 | + |
| 80 | + return ( |
| 81 | + <Tooltip label={label} key={app.id}> |
| 82 | + <IconButton aria-label={label} onClick={onClick}> |
| 83 | + {appAvatarUrl ? ( |
| 84 | + <Img $isInContainer={inContainer} alt={appNameOrType} src={appAvatarUrl} /> |
| 85 | + ) : ( |
| 86 | + <Svg $isInContainer={inContainer} role="presentation"> |
| 87 | + <path d="M16 2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm4 2.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3ZM16 14h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Zm.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3ZM4 14h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Zm.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3Z M8 2H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" /> |
| 88 | + </Svg> |
| 89 | + )} |
| 90 | + </IconButton> |
| 91 | + </Tooltip> |
| 92 | + ); |
| 93 | +} |
0 commit comments