@@ -288,7 +288,7 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
288288 }
289289 scrollToPartInstance ( partInstanceId : PartInstanceId ) : void {
290290 const scrollMargin = this . calculateScrollPosition ( )
291- const target = document . querySelector < HTMLElement > ( `#partInstance_ ${ partInstanceId } )
291+ const target = document . querySelector < HTMLElement > ( `[data-part-instance-id=" ${ partInstanceId } "] ` )
292292
293293 if ( target ) {
294294 Velocity ( document . body , 'finish' )
@@ -376,63 +376,60 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
376376 private checkCurrentTakeMarkers = ( ) => {
377377 const playlist = this . props . rundownPlaylist
378378
379- if ( playlist !== undefined ) {
380- const positionTop = window . scrollY
381- const positionBottom = positionTop + window . innerHeight
379+ if ( playlist === undefined ) return
380+ const positionTop = window . scrollY
381+ const positionBottom = positionTop + window . innerHeight
382382
383- let currentPartElement : Element | null = null
384- let currentPartElementAfter : Element | null = null
385- let nextPartElementAfter : Element | null = null
383+ let currentPartElement : Element | null = null
384+ let currentPartElementAfter : Element | null = null
385+ let nextPartElementAfter : Element | null = null
386386
387- const anchors : Array < Element > = Array . from ( document . querySelectorAll ( '.scroll-anchor' ) )
387+ const anchors : Array < Element > = Array . from ( document . querySelectorAll ( '.scroll-anchor' ) )
388388
389- for ( let index = 0 ; index < anchors . length ; index ++ ) {
390- const current = anchors [ index ]
391- const next = index + 1 < anchors . length ? anchors [ index + 1 ] : null
389+ for ( let index = 0 ; index < anchors . length ; index ++ ) {
390+ const current = anchors [ index ]
391+ const next = index + 1 < anchors . length ? anchors [ index + 1 ] : null
392392
393- if ( playlist . currentPartInfo && current . classList . contains ( `live` ) ) {
394- currentPartElement = current
395- currentPartElementAfter = next
396- }
397- if ( playlist . nextPartInfo && current . classList . contains ( `next` ) ) {
398- nextPartElementAfter = next
399- }
393+ if ( playlist . currentPartInfo && current . classList . contains ( `live` ) ) {
394+ currentPartElement = current
395+ currentPartElementAfter = next
396+ }
397+ if ( playlist . nextPartInfo && current . classList . contains ( `next` ) ) {
398+ nextPartElementAfter = next
400399 }
400+ }
401401
402- const currentPositionStart = currentPartElement
403- ? currentPartElement . getBoundingClientRect ( ) . top + positionTop
404- : null
405- const currentPositionEnd = currentPartElementAfter
406- ? currentPartElementAfter . getBoundingClientRect ( ) . top + positionTop
407- : null
408-
409- const nextPositionEnd = nextPartElementAfter
410- ? nextPartElementAfter . getBoundingClientRect ( ) . top + positionTop
411- : null
412-
413- const takeIndicator = document . querySelector ( '.take-indicator' )
414- if ( takeIndicator ) {
415- if ( currentPositionEnd && currentPositionEnd < positionTop ) {
416- // Display take "^" indicator
417- takeIndicator . classList . remove ( 'hidden' )
418- takeIndicator . classList . add ( 'top' )
419- } else if ( currentPositionStart && currentPositionStart > positionBottom ) {
420- // Display take "v" indicator
421- takeIndicator . classList . remove ( 'hidden' , 'top' )
422- } else {
423- takeIndicator . classList . add ( 'hidden' )
424- }
402+ const currentPositionStart = currentPartElement
403+ ? currentPartElement . getBoundingClientRect ( ) . top + positionTop
404+ : null
405+ const currentPositionEnd = currentPartElementAfter
406+ ? currentPartElementAfter . getBoundingClientRect ( ) . top + positionTop
407+ : null
408+
409+ const nextPositionEnd = nextPartElementAfter ? nextPartElementAfter . getBoundingClientRect ( ) . top + positionTop : null
410+
411+ const takeIndicator = document . querySelector ( '.take-indicator' )
412+ if ( takeIndicator ) {
413+ if ( currentPositionEnd && currentPositionEnd < positionTop ) {
414+ // Display take "^" indicator
415+ takeIndicator . classList . remove ( 'hidden' )
416+ takeIndicator . classList . add ( 'top' )
417+ } else if ( currentPositionStart && currentPositionStart > positionBottom ) {
418+ // Display take "v" indicator
419+ takeIndicator . classList . remove ( 'hidden' , 'top' )
420+ } else {
421+ takeIndicator . classList . add ( 'hidden' )
425422 }
423+ }
426424
427- const nextIndicator = document . querySelector ( '.next-indicator' )
428- if ( nextIndicator ) {
429- if ( nextPositionEnd && nextPositionEnd < positionTop ) {
430- // Display next "^" indicator
431- nextIndicator . classList . remove ( 'hidden' )
432- nextIndicator . classList . add ( 'top' )
433- } else {
434- nextIndicator . classList . add ( 'hidden' )
435- }
425+ const nextIndicator = document . querySelector ( '.next-indicator' )
426+ if ( nextIndicator ) {
427+ if ( nextPositionEnd && nextPositionEnd < positionTop ) {
428+ // Display next "^" indicator
429+ nextIndicator . classList . remove ( 'hidden' )
430+ nextIndicator . classList . add ( 'top' )
431+ } else {
432+ nextIndicator . classList . add ( 'hidden' )
436433 }
437434 }
438435 }
@@ -740,24 +737,32 @@ const PrompterContent = withTranslation()(
740737 // Go through the anchors and use the first one that we find:
741738 for ( const scrollAnchor of scrollAnchors ) {
742739 const anchor = document . getElementById ( scrollAnchor . anchorId )
743- if ( anchor ) {
744- const { top } = anchor . getBoundingClientRect ( )
745-
746- if ( scrollAnchor . offset !== null ) {
747- window . scrollBy ( {
748- top : top - scrollAnchor . offset ,
749- } )
750- // We've scrolled, exit the function!
751- return
752- } else {
753- // Note: config.margin does not have to be taken into account here,
754- // the css margins magically does it for us.
755- window . scrollBy ( {
756- top : top - readPosition ,
757- } )
758- // We've scrolled, exit the function!
759- return
760- }
740+ if ( ! anchor ) continue
741+
742+ const { top } = anchor . getBoundingClientRect ( )
743+
744+ if ( scrollAnchor . offset !== null ) {
745+ this . props . config . debug &&
746+ logger . debug (
747+ `Selected anchor ${ scrollAnchor . anchorId } ${ scrollAnchor . offset }
748+ )
749+
750+ window . scrollBy ( {
751+ top : top - scrollAnchor . offset ,
752+ } )
753+ // We've scrolled, exit the function!
754+ return
755+ } else {
756+ this . props . config . debug &&
757+ logger . debug ( `Selected anchor ${ scrollAnchor . anchorId } )
758+
759+ // Note: config.margin does not have to be taken into account here,
760+ // the css margins magically does it for us.
761+ window . scrollBy ( {
762+ top : top - readPosition ,
763+ } )
764+ // We've scrolled, exit the function!
765+ return
761766 }
762767 }
763768 // None of the anchors where found at this point.
@@ -769,6 +774,7 @@ const PrompterContent = withTranslation()(
769774 . join ( ', ' ) } `
770775 )
771776
777+ // TODO: In the past 4 months this has been here, this hasn't logged a single line, should we keep it?
772778 // Below is for troubleshooting, see if the anchor is in prompterData:
773779 if ( ! this . props . prompterData ) {
774780 logger . error ( `Read anchor troubleshooting: no prompterData` )
@@ -862,9 +868,9 @@ const PrompterContent = withTranslation()(
862868 }
863869
864870 private getPartStatus ( prompterData : PrompterData , part : PrompterDataPart ) {
865- if ( prompterData . currentPartInstanceId === part . id ) {
871+ if ( prompterData . currentPartInstanceId === part . partInstanceId ) {
866872 return 'live'
867- } else if ( prompterData . nextPartInstanceId === part . id ) {
873+ } else if ( prompterData . nextPartInstanceId === part . partInstanceId ) {
868874 return 'next'
869875 } else {
870876 return null
@@ -915,9 +921,10 @@ const PrompterContent = withTranslation()(
915921 for ( const part of segment . parts ) {
916922 lines . push (
917923 < div
918- id = { `partInstance_ ${ part . id } }
924+ id = { `part_ ${ part . id } }
919925 data-obj-id = { segment . id + '_' + part . id }
920- key = { 'partInstance_' + part . id }
926+ data-part-instance-id = { part . partInstanceId }
927+ key = { 'part_' + part . id }
921928 className = { ClassNames ( 'prompter-part' , 'scroll-anchor' , this . getPartStatus ( prompterData , part ) ) }
922929 >
923930 { part . title || 'N/A' }
0 commit comments