diff --git a/public/app/features/playlist/PlaylistPageList.tsx b/public/app/features/playlist/PlaylistPageList.tsx index 9c31ac7e4ff..08efa946101 100644 --- a/public/app/features/playlist/PlaylistPageList.tsx +++ b/public/app/features/playlist/PlaylistPageList.tsx @@ -1,9 +1,26 @@ -import React from 'react'; +import React, { useState } from 'react'; import { PlaylistDTO } from './types'; -import { Button, Card, LinkButton, useStyles2 } from '@grafana/ui'; +import { + Button, + Card, + Checkbox, + ClipboardButton, + Field, + FieldSet, + Icon, + Input, + LinkButton, + Modal, + ModalsController, + RadioButtonGroup, + useStyles2, +} from '@grafana/ui'; import { contextSrv } from 'app/core/services/context_srv'; -import { GrafanaTheme2 } from '@grafana/data'; +import { AppEvents, GrafanaTheme2, SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data'; import { css } from '@emotion/css'; +import { DashNavButton } from '../dashboard/components/DashNav/DashNavButton'; +import appEvents from 'app/core/app_events'; +import { buildBaseUrl } from '../dashboard/components/ShareModal/utils'; interface Props { setStartPlaylist: (playlistItem: PlaylistDTO) => void; @@ -11,6 +28,70 @@ interface Props { playlists: PlaylistDTO[] | undefined; } +interface ShareModalProps { + playlistId: number; + onDismiss: () => void; +} + +type PlaylistModes = boolean | 'tv'; + +const PlaylistShareModal = ({ playlistId, onDismiss }: ShareModalProps) => { + const [mode, setMode] = useState(false); + const [autoFit, setAutofit] = useState(false); + + const modes: Array> = [ + { label: 'Normal', value: false }, + { label: 'TV', value: 'tv' }, + { label: 'Kiosk', value: true }, + ]; + + const onShareUrlCopy = () => { + appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']); + }; + + const params: UrlQueryMap = {}; + if (mode) { + params.kiosk = mode; + } + if (autoFit) { + params.autofitpanels = true; + } + + const shareUrl = urlUtil.renderUrl(`${buildBaseUrl()}/play/${playlistId}`, params); + + return ( + +
+ + + + + setAutofit(e.currentTarget.checked)} + /> + + + + shareUrl} onClipboardCopy={onShareUrlCopy}> + Copy + + } + /> + +
+
+ ); +}; + export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => { const styles = useStyles2(getStyles); return ( @@ -18,7 +99,24 @@ export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDel {playlists!.map((playlist: PlaylistDTO) => (
  • - {playlist.name} + + {playlist.name} + + {({ showModal, hideModal }) => ( + { + showModal(PlaylistShareModal, { + playlistId: playlist.id, + onDismiss: hideModal, + }); + }} + /> + )} + +