9649493018

Committed 24 Jun 2024 05:08PM UTC coverage: 7.07% (-0.2%) from 7.256%

Build # 9649493018

Build Type

push

github

Committed by

Betree

Commit Message

feat: Transcript on VideoDebate (#1263)

Run Details

58 of 1778 branches covered (3.26%)

Branch coverage included in aggregate %.

1 of 88 new or added lines in 8 files covered. (1.14%)

2 existing lines in 2 files now uncovered.

269 of 2847 relevant lines covered (9.45%)

0.27 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/app/components/VideoDebate/CaptionsExtractor.jsx

import { gql, useQuery } from '@apollo/client'
import { debounce } from 'lodash'
import React from 'react'
import { withNamespaces } from 'react-i18next'
import { usePopper } from 'react-popper'
import { connect } from 'react-redux'
import styled, { css } from 'styled-components'

import { forcePosition, setPlaying } from '../../state/video_debate/video/reducer'
import Statement from '../Statements/Statement'
import Container from '../StyledUtils/Container'
import { P } from '../StyledUtils/Text'
import UnstyledButton from '../StyledUtils/UnstyledButton'
import { Icon, LoadingFrame } from '../Utils'
import ClickableIcon from '../Utils/ClickableIcon'
import Message from '../Utils/Message'
import ActionBubbleMenu, { ActionBubble } from './ActionBubbleMenu'

const captionsQuery = gql`
  query VideoCaptionsQuery($videoId: ID!) {
    video(hashId: $videoId) {
      id
      captions {
        text
        start
        duration
      }
    }
  }
`

const CaptionText = styled.span`
  color: #000;
  transition:
    color 0.3s,
    text-shadow 0.3s;

  ${({ $isCurrent, $isPlaying, $isPast }) => {
    if ($isPlaying) {
      if ($isCurrent) {
        return css`
          text-shadow: #9f9f9f 1px 1px 0px;
          color: #000;
        `
      } else if (!$isPast) {
        return css`
          color: #999;
        `
      }
    }
  }}
`

// A statement is displayed before each caption whe
const getStatementsAtPosition = (statements, caption, nextCaption) => {
  if (!statements) {
    return []
  }

  const selected = []
  for (const statement of statements) {
    if (statement.time >= caption.start) {
      if (!nextCaption || statement.time < nextCaption.start) {
        selected.push(statement)
      } else {
        break
      }
    }
  }

  return selected
}

const Arrow = styled.div`
  visibility: hidden;

  &,
  &::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
  }

  &::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }
`

const StatementTooltip = styled.div`
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding-bottom: 8px;
  font-size: 12px;
  box-shadow: rgb(112 112 112 / 38%) -4px 7px 8px;

  &[data-popper-placement^='top'] ${Arrow} {
    bottom: -4px;
  }
  &[data-popper-placement^='bottom'] ${Arrow} {
    top: -4px;
  }
  &[data-popper-placement^='left'] ${Arrow} {
    right: -4px;
  }
  &[data-popper-placement^='right'] ${Arrow} {
    left: -4px;
  }
`

const StatementIconButton = styled(UnstyledButton)`
  background: white;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 4px;
  margin-right: 4px;
  cursor: pointer;
  width: 34px;
  height: 34px;
  &:hover {
    background: #f9f9f9;
  }
`

const StatementIndicator = withNamespaces('main')(({ statement, onPlayClick, t }) => {
  const [referenceElement, setReferenceElement] = React.useState(null)
  const [popperElement, setPopperElement] = React.useState(null)
  const [arrowElement, setArrowElement] = React.useState(null)
  const [show, setShow] = React.useState(false)
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: 'top',
    modifiers: [
      { name: 'arrow', options: { element: arrowElement } },
      { name: 'offset', options: { offset: [0, 8] } },
      { name: 'flip', options: { fallbackPlacements: ['bottom'] } },
      { name: 'preventOverflow', options: { padding: 8 } },
    ],
  })

  return (
    <>
      <StatementIconButton ref={setReferenceElement} onClick={() => setShow(true)}>
        <Icon name="commenting-o" size="small" className="has-text-primary" />
      </StatementIconButton>

      {show && (
        <StatementTooltip ref={setPopperElement} style={styles.popper} {...attributes.popper}>
          <Statement
            statement={statement}
            speaker={statement.speaker}
            withoutActions
            customButtons={
              <React.Fragment>
                <ClickableIcon
                  name="play-circle"
                  size="action-size"
                  title={t('actions.play')}
                  onClick={() => onPlayClick(statement.time)}
                />
                <ClickableIcon
                  title={t('actions.close')}
                  name="close"
                  size="action-size"
                  onClick={() => setShow(false)}
                />
              </React.Fragment>
            }
          />
          <Arrow ref={setArrowElement} style={styles.arrow} />
        </StatementTooltip>
      )}
    </>
  )
})

const CaptionsExtractor = ({
  t,
  videoId,
  playbackPosition,
  statements,
  setPlaying,
  forcePosition,
}) => {
  const { data, loading, error } = useQuery(captionsQuery, { variables: { videoId } })
  const [selection, setSelection] = React.useState({ text: null })
  const textContainerRef = React.useRef()

  // Watch for selection changes
  React.useEffect(() => {
    const watchForSelectionChange = debounce(() => {
      if (!textContainerRef.current) {
        return
      }

      const selection = document.getSelection()
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0)
        if (textContainerRef.current.contains(range.commonAncestorContainer)) {
          const firstNode = range.startContainer.parentNode
          setSelection({
            text: selection.toString().trim(),
            start: parseFloat(firstNode.getAttribute('data-start')) || 0,
          })
        }
      }
    }, 100)

    document.addEventListener('selectionchange', watchForSelectionChange)
    return () => {
      document.removeEventListener('selectionchange', watchForSelectionChange)
    }
  }, [])

  if (loading) {
    return <LoadingFrame title={t('loading.captions')} />
  } else if (error) {
    // eslint-disable-next-line no-console
    console.error(error)
    return <Message type="danger">{t('captions.errorLoading')}</Message>
  } else if (!data.video.captions?.length) {
    return <Message type="info">{t('captions.notFound')}</Message>
  }

  return (
    <Container position="relative" textAlign="justify">
      <P fontSize={['16px', '20px']} lineHeight="1.5" ref={textContainerRef}>
        {data.video.captions.map((caption, index) => {
          const nextCaption = data.video.captions[index + 1]
          const statementsAtPosition = getStatementsAtPosition(statements, caption, nextCaption)
          return (
            <React.Fragment key={index}>
              {statementsAtPosition.map((statement) => (
                <StatementIndicator
                  key={statement.id}
                  statement={statement}
                  onPlayClick={(time) => {
                    setPlaying(true)
                    forcePosition(time)
                  }}
                />
              ))}
              <CaptionText
                data-start={caption.start}
                $isPlaying={Boolean(playbackPosition)}
                $isPast={playbackPosition > caption.start + caption.duration}
                $isCurrent={
                  playbackPosition >= caption.start &&
                  playbackPosition <= caption.start + caption.duration
                }
              >
                {caption.text}
              </CaptionText>{' '}
            </React.Fragment>
          )
        })}
      </P>

      <ActionBubbleMenu
        hidden={!selection.text}
        customActions={
          <ActionBubble
            iconName="play-circle"
            label={t('captions.playSelection')}
            activated
            onClick={() => {
              setPlaying(true)
              forcePosition(selection.start)
            }}
          />
        }
        getStatementInitialValues={() => {
          return {
            text: selection.text,
            time: Math.floor(selection.start),
          }
        }}
      />
    </Container>
  )
}

export default connect(
  (state) => ({
    statements: state.VideoDebate.statements.data,
    playbackPosition: state.VideoDebate.video.playback.position,
  }),
  {
    forcePosition,
    setPlaying,
  },
)(withNamespaces('videoDebate')(CaptionsExtractor))

1	import { gql, useQuery } from '@apollo/client'
2	import { debounce } from 'lodash'
3	import React from 'react'
4	import { withNamespaces } from 'react-i18next'
5	import { usePopper } from 'react-popper'
6	import { connect } from 'react-redux'
7	import styled, { css } from 'styled-components'
8
9	import { forcePosition, setPlaying } from '../../state/video_debate/video/reducer'
10	import Statement from '../Statements/Statement'
11	import Container from '../StyledUtils/Container'
12	import { P } from '../StyledUtils/Text'
13	import UnstyledButton from '../StyledUtils/UnstyledButton'
14	import { Icon, LoadingFrame } from '../Utils'
15	import ClickableIcon from '../Utils/ClickableIcon'
16	import Message from '../Utils/Message'
17	import ActionBubbleMenu, { ActionBubble } from './ActionBubbleMenu'
18
NEW 19	const captionsQuery = gql`	×
20	query VideoCaptionsQuery($videoId: ID!) {
21	video(hashId: $videoId) {
22	id
23	captions {
24	text
25	start
26	duration
27	}
28	}
29	}
30	`
31
NEW 32	const CaptionText = styled.span`	×
33	color: #000;
34	transition:
35	color 0.3s,
36	text-shadow 0.3s;
37
38	${({ $isCurrent, $isPlaying, $isPast }) => {
NEW 39	if ($isPlaying) {	×
NEW 40	if ($isCurrent) {	×
NEW 41	return css`	×
42	text-shadow: #9f9f9f 1px 1px 0px;
43	color: #000;
44	`
NEW 45	} else if (!$isPast) {	×
NEW 46	return css`	×
47	color: #999;
48	`
49	}
50	}
51	}}
52	`
53
54	// A statement is displayed before each caption whe
NEW 55	const getStatementsAtPosition = (statements, caption, nextCaption) => {	×
NEW 56	if (!statements) {	×
NEW 57	return []	×
58	}
59
NEW 60	const selected = []	×
NEW 61	for (const statement of statements) {	×
NEW 62	if (statement.time >= caption.start) {	×
NEW 63	if (!nextCaption \|\| statement.time < nextCaption.start) {	×
NEW 64	selected.push(statement)	×
65	} else {
NEW 66	break	×
67	}
68	}
69	}
70
NEW 71	return selected	×
72	}
73
NEW 74	const Arrow = styled.div`	×
75	visibility: hidden;
76
77	&,
78	&::before {
79	position: absolute;
80	width: 8px;
81	height: 8px;
82	background: white;
83	}
84
85	&::before {
86	visibility: visible;
87	content: '';
88	transform: rotate(45deg);
89	}
90	`
91
NEW 92	const StatementTooltip = styled.div`	×
93	background: white;
94	border: 1px solid #ccc;
95	border-radius: 8px;
96	padding-bottom: 8px;
97	font-size: 12px;
98	box-shadow: rgb(112 112 112 / 38%) -4px 7px 8px;
99
100	&[data-popper-placement^='top'] ${Arrow} {
101	bottom: -4px;
102	}
103	&[data-popper-placement^='bottom'] ${Arrow} {
104	top: -4px;
105	}
106	&[data-popper-placement^='left'] ${Arrow} {
107	right: -4px;
108	}
109	&[data-popper-placement^='right'] ${Arrow} {
110	left: -4px;
111	}
112	`
113
NEW 114	const StatementIconButton = styled(UnstyledButton)`	×
115	background: white;
116	border: 1px solid #ccc;
117	border-radius: 50%;
118	padding: 4px;
119	margin-right: 4px;
120	cursor: pointer;
121	width: 34px;
122	height: 34px;
123	&:hover {
124	background: #f9f9f9;
125	}
126	`
127
NEW 128	const StatementIndicator = withNamespaces('main')(({ statement, onPlayClick, t }) => {	×
NEW 129	const [referenceElement, setReferenceElement] = React.useState(null)	×
NEW 130	const [popperElement, setPopperElement] = React.useState(null)	×
NEW 131	const [arrowElement, setArrowElement] = React.useState(null)	×
NEW 132	const [show, setShow] = React.useState(false)	×
NEW 133	const { styles, attributes } = usePopper(referenceElement, popperElement, {	×
134	placement: 'top',
135	modifiers: [
136	{ name: 'arrow', options: { element: arrowElement } },
137	{ name: 'offset', options: { offset: [0, 8] } },
138	{ name: 'flip', options: { fallbackPlacements: ['bottom'] } },
139	{ name: 'preventOverflow', options: { padding: 8 } },
140	],
141	})
142
NEW 143	return (	×
144	<>
NEW 145	<StatementIconButton ref={setReferenceElement} onClick={() => setShow(true)}>	×
146	<Icon name="commenting-o" size="small" className="has-text-primary" />
147	</StatementIconButton>
148
149	{show && (	×
150	<StatementTooltip ref={setPopperElement} style={styles.popper} {...attributes.popper}>
151	<Statement
152	statement={statement}
153	speaker={statement.speaker}
154	withoutActions
155	customButtons={
156	<React.Fragment>
157	<ClickableIcon
158	name="play-circle"
159	size="action-size"
160	title={t('actions.play')}
NEW 161	onClick={() => onPlayClick(statement.time)}	×
162	/>
163	<ClickableIcon
164	title={t('actions.close')}
165	name="close"
166	size="action-size"
NEW 167	onClick={() => setShow(false)}	×
168	/>
169	</React.Fragment>
170	}
171	/>
172	<Arrow ref={setArrowElement} style={styles.arrow} />
173	</StatementTooltip>
174	)}
175	</>
176	)
177	})
178
NEW 179	const CaptionsExtractor = ({	×
180	t,
181	videoId,
182	playbackPosition,
183	statements,
184	setPlaying,
185	forcePosition,
186	}) => {
NEW 187	const { data, loading, error } = useQuery(captionsQuery, { variables: { videoId } })	×
NEW 188	const [selection, setSelection] = React.useState({ text: null })	×
NEW 189	const textContainerRef = React.useRef()	×
190
191	// Watch for selection changes
NEW 192	React.useEffect(() => {	×
NEW 193	const watchForSelectionChange = debounce(() => {	×
NEW 194	if (!textContainerRef.current) {	×
NEW 195	return	×
196	}
197
NEW 198	const selection = document.getSelection()	×
NEW 199	if (selection.rangeCount > 0) {	×
NEW 200	const range = selection.getRangeAt(0)	×
NEW 201	if (textContainerRef.current.contains(range.commonAncestorContainer)) {	×
NEW 202	const firstNode = range.startContainer.parentNode	×
NEW 203	setSelection({	×
204	text: selection.toString().trim(),
205	start: parseFloat(firstNode.getAttribute('data-start')) \|\| 0,	×
206	})
207	}
208	}
209	}, 100)
210
NEW 211	document.addEventListener('selectionchange', watchForSelectionChange)	×
NEW 212	return () => {	×
NEW 213	document.removeEventListener('selectionchange', watchForSelectionChange)	×
214	}
215	}, [])
216
NEW 217	if (loading) {	×
NEW 218	return <LoadingFrame title={t('loading.captions')} />	×
NEW 219	} else if (error) {	×
220	// eslint-disable-next-line no-console
NEW 221	console.error(error)	×
NEW 222	return <Message type="danger">{t('captions.errorLoading')}</Message>	×
NEW 223	} else if (!data.video.captions?.length) {	×
NEW 224	return <Message type="info">{t('captions.notFound')}</Message>	×
225	}
226
NEW 227	return (	×
228	<Container position="relative" textAlign="justify">
229	<P fontSize={['16px', '20px']} lineHeight="1.5" ref={textContainerRef}>
230	{data.video.captions.map((caption, index) => {
NEW 231	const nextCaption = data.video.captions[index + 1]	×
NEW 232	const statementsAtPosition = getStatementsAtPosition(statements, caption, nextCaption)	×
NEW 233	return (	×
234	<React.Fragment key={index}>
235	{statementsAtPosition.map((statement) => (
NEW 236	<StatementIndicator	×
237	key={statement.id}
238	statement={statement}
239	onPlayClick={(time) => {
NEW 240	setPlaying(true)	×
NEW 241	forcePosition(time)	×
242	}}
243	/>
244	))}
245	<CaptionText
246	data-start={caption.start}
247	$isPlaying={Boolean(playbackPosition)}
248	$isPast={playbackPosition > caption.start + caption.duration}
249	$isCurrent={
250	playbackPosition >= caption.start &&	×
251	playbackPosition <= caption.start + caption.duration
252	}
253	>
254	{caption.text}
255	</CaptionText>{' '}
256	</React.Fragment>
257	)
258	})}
259	</P>
260
261	<ActionBubbleMenu
262	hidden={!selection.text}
263	customActions={
264	<ActionBubble
265	iconName="play-circle"
266	label={t('captions.playSelection')}
267	activated
268	onClick={() => {
NEW 269	setPlaying(true)	×
NEW 270	forcePosition(selection.start)	×
271	}}
272	/>
273	}
274	getStatementInitialValues={() => {
NEW 275	return {	×
276	text: selection.text,
277	time: Math.floor(selection.start),
278	}
279	}}
280	/>
281	</Container>
282	)
283	}
284
285	export default connect(
NEW 286	(state) => ({	×
287	statements: state.VideoDebate.statements.data,
288	playbackPosition: state.VideoDebate.video.playback.position,
289	}),
290	{
291	forcePosition,
292	setPlaying,
293	},
294	)(withNamespaces('videoDebate')(CaptionsExtractor))

CaptainFact / captain-fact-frontend / 9649493018

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous