import React from 'react' ; import styled from 'styled-components' ; import TtyPlayer from 'teleport/lib/term/ttyPlayer' ; import TtyPlayerEventProvider from 'teleport/lib/term/ttyPlayerEventProvider' ; import { PlayerNext } from './PlayerNext' ; export default { title : 'Teleport/PlayerNext' , } ; export const Vim = ( ) => { const mocked = useMockedEvents ( import ( './fixtures/vim' ) . then ( vim => vim . default ) ) ; return renderMocked ( mocked ) ; } ; export const Npm = ( ) => { const mocked = useMockedEvents ( import ( './fixtures/npm' ) . then ( vim => vim . default ) ) ; return renderMocked ( mocked ) ; } ; function useMockedEvents ( loader ) { const [ data , setData ] = React . useState ( null ) ; loader . then ( data => { setData ( data ) ; } ) ; if ( ! data ) { return null ; } const eventProvider = new TtyPlayerEventProvider ( { url : 'localhost' } ) ; const tty = new TtyPlayer ( eventProvider ) ; const events = tty . _eventProvider . _createEvents ( data . ttyEvents ) ; eventProvider . _fetchEvents = ( ) => Promise . resolve ( events ) ; eventProvider . _fetchContent = ( ) => Promise . resolve ( data . ttyStream ) ; return { events , tty , auditEvents : data . auditEvents , } ; } function renderMocked ( mocked ) { return ( < Box > { mocked && < PlayerNext tty = { mocked . tty } bpfEvents = { mocked . auditEvents } / > } < /Box>); } const Box = styled . div `
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
` ;