@@ -289,7 +289,7 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
289289 }
290290 scrollToPartInstance ( partInstanceId : PartInstanceId ) : void {
291291 const scrollMargin = this . calculateScrollPosition ( )
292- const target = document . querySelector < HTMLElement > ( `#partInstance_ ${ partInstanceId } )
292+ const target = document . querySelector < HTMLElement > ( `[data-part-instance-id=" ${ partInstanceId } "] ` )
293293
294294 if ( target ) {
295295 Velocity ( document . body , 'finish' )
@@ -377,63 +377,60 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
377377 private checkCurrentTakeMarkers = ( ) => {
378378 const playlist = this . props . rundownPlaylist
379379
380- if ( playlist !== undefined ) {
381- const positionTop = window . scrollY
382- const positionBottom = positionTop + window . innerHeight
380+ if ( playlist === undefined ) return
381+ const positionTop = window . scrollY
382+ const positionBottom = positionTop + window . innerHeight
383383
384- let currentPartElement : Element | null = null
385- let currentPartElementAfter : Element | null = null
386- let nextPartElementAfter : Element | null = null
384+ let currentPartElement : Element | null = null
385+ let currentPartElementAfter : Element | null = null
386+ let nextPartElementAfter : Element | null = null
387387
388- const anchors : Array < Element > = Array . from ( document . querySelectorAll ( '.scroll-anchor' ) )
388+ const anchors : Array < Element > = Array . from ( document . querySelectorAll ( '.scroll-anchor' ) )
389389
390- for ( let index = 0 ; index < anchors . length ; index ++ ) {
391- const current = anchors [ index ]
392- const next = index + 1 < anchors . length ? anchors [ index + 1 ] : null
390+ for ( let index = 0 ; index < anchors . length ; index ++ ) {
391+ const current = anchors [ index ]
392+ const next = index + 1 < anchors . length ? anchors [ index + 1 ] : null
393393
394- if ( playlist . currentPartInfo && current . classList . contains ( `live` ) ) {
395- currentPartElement = current
396- currentPartElementAfter = next
397- }
398- if ( playlist . nextPartInfo && current . classList . contains ( `next` ) ) {
399- nextPartElementAfter = next
400- }
394+ if ( playlist . currentPartInfo && current . classList . contains ( `live` ) ) {
395+ currentPartElement = current
396+ currentPartElementAfter = next
397+ }
398+ if ( playlist . nextPartInfo && current . classList . contains ( `next` ) ) {
399+ nextPartElementAfter = next
401400 }
401+ }
402402
403- const currentPositionStart = currentPartElement
404- ? currentPartElement . getBoundingClientRect ( ) . top + positionTop
405- : null
406- const currentPositionEnd = currentPartElementAfter
407- ? currentPartElementAfter . getBoundingClientRect ( ) . top + positionTop
408- : null
409-
410- const nextPositionEnd = nextPartElementAfter
411- ? nextPartElementAfter . getBoundingClientRect ( ) . top + positionTop
412- : null
413-
414- const takeIndicator = document . querySelector ( '.take-indicator' )
415- if ( takeIndicator ) {
416- if ( currentPositionEnd && currentPositionEnd < positionTop ) {
417- // Display take "^" indicator
418- takeIndicator . classList . remove ( 'hidden' )
419- takeIndicator . classList . add ( 'top' )
420- } else if ( currentPositionStart && currentPositionStart > positionBottom ) {
421- // Display take "v" indicator
422- takeIndicator . classList . remove ( 'hidden' , 'top' )
423- } else {
424- takeIndicator . classList . add ( 'hidden' )
425- }
403+ const currentPositionStart = currentPartElement
404+ ? currentPartElement . getBoundingClientRect ( ) . top + positionTop
405+ : null
406+ const currentPositionEnd = currentPartElementAfter
407+ ? currentPartElementAfter . getBoundingClientRect ( ) . top + positionTop
408+ : null
409+
410+ const nextPositionEnd = nextPartElementAfter ? nextPartElementAfter . getBoundingClientRect ( ) . top + positionTop : null
411+
412+ const takeIndicator = document . querySelector ( '.take-indicator' )
413+ if ( takeIndicator ) {
414+ if ( currentPositionEnd && currentPositionEnd < positionTop ) {
415+ // Display take "^" indicator
416+ takeIndicator . classList . remove ( 'hidden' )
417+ takeIndicator . classList . add ( 'top' )
418+ } else if ( currentPositionStart && currentPositionStart > positionBottom ) {
419+ // Display take "v" indicator
420+ takeIndicator . classList . remove ( 'hidden' , 'top' )
421+ } else {
422+ takeIndicator . classList . add ( 'hidden' )
426423 }
424+ }
427425
428- const nextIndicator = document . querySelector ( '.next-indicator' )
429- if ( nextIndicator ) {
430- if ( nextPositionEnd && nextPositionEnd < positionTop ) {
431- // Display next "^" indicator
432- nextIndicator . classList . remove ( 'hidden' )
433- nextIndicator . classList . add ( 'top' )
434- } else {
435- nextIndicator . classList . add ( 'hidden' )
436- }
426+ const nextIndicator = document . querySelector ( '.next-indicator' )
427+ if ( nextIndicator ) {
428+ if ( nextPositionEnd && nextPositionEnd < positionTop ) {
429+ // Display next "^" indicator
430+ nextIndicator . classList . remove ( 'hidden' )
431+ nextIndicator . classList . add ( 'top' )
432+ } else {
433+ nextIndicator . classList . add ( 'hidden' )
437434 }
438435 }
439436 }
@@ -741,24 +738,32 @@ const PrompterContent = withTranslation()(
741738 // Go through the anchors and use the first one that we find:
742739 for ( const scrollAnchor of scrollAnchors ) {
743740 const anchor = document . getElementById ( scrollAnchor . anchorId )
744- if ( anchor ) {
745- const { top } = anchor . getBoundingClientRect ( )
746-
747- if ( scrollAnchor . offset !== null ) {
748- window . scrollBy ( {
749- top : top - scrollAnchor . offset ,
750- } )
751- // We've scrolled, exit the function!
752- return
753- } else {
754- // Note: config.margin does not have to be taken into account here,
755- // the css margins magically does it for us.
756- window . scrollBy ( {
757- top : top - readPosition ,
758- } )
759- // We've scrolled, exit the function!
760- return
761- }
741+ if ( ! anchor ) continue
742+
743+ const { top } = anchor . getBoundingClientRect ( )
744+
745+ if ( scrollAnchor . offset !== null ) {
746+ this . props . config . debug &&
747+ logger . debug (
748+ `Selected anchor ${ scrollAnchor . anchorId } ${ scrollAnchor . offset }
749+ )
750+
751+ window . scrollBy ( {
752+ top : top - scrollAnchor . offset ,
753+ } )
754+ // We've scrolled, exit the function!
755+ return
756+ } else {
757+ this . props . config . debug &&
758+ logger . debug ( `Selected anchor ${ scrollAnchor . anchorId } )
759+
760+ // Note: config.margin does not have to be taken into account here,
761+ // the css margins magically does it for us.
762+ window . scrollBy ( {
763+ top : top - readPosition ,
764+ } )
765+ // We've scrolled, exit the function!
766+ return
762767 }
763768 }
764769 // None of the anchors where found at this point.
@@ -770,6 +775,7 @@ const PrompterContent = withTranslation()(
770775 . join ( ', ' ) } `
771776 )
772777
778+ // TODO: In the past 4 months this has been here, this hasn't logged a single line, should we keep it?
773779 // Below is for troubleshooting, see if the anchor is in prompterData:
774780 if ( ! this . props . prompterData ) {
775781 logger . error ( `Read anchor troubleshooting: no prompterData` )
@@ -863,9 +869,9 @@ const PrompterContent = withTranslation()(
863869 }
864870
865871 private getPartStatus ( prompterData : PrompterData , part : PrompterDataPart ) {
866- if ( prompterData . currentPartInstanceId === part . id ) {
872+ if ( prompterData . currentPartInstanceId === part . partInstanceId ) {
867873 return 'live'
868- } else if ( prompterData . nextPartInstanceId === part . id ) {
874+ } else if ( prompterData . nextPartInstanceId === part . partInstanceId ) {
869875 return 'next'
870876 } else {
871877 return null
@@ -916,9 +922,10 @@ const PrompterContent = withTranslation()(
916922 for ( const part of segment . parts ) {
917923 lines . push (
918924 < div
919- id = { `partInstance_ ${ part . id } }
925+ id = { `part_ ${ part . id } }
920926 data-obj-id = { segment . id + '_' + part . id }
921- key = { 'partInstance_' + part . id }
927+ data-part-instance-id = { part . partInstanceId }
928+ key = { 'part_' + part . id }
922929 className = { ClassNames ( 'prompter-part' , 'scroll-anchor' , this . getPartStatus ( prompterData , part ) ) }
923930 >
924931 { part . title || 'N/A' }
0 commit comments