Pausable Observable using takeUntil with repeatWhen

index.js

const { rxObserver, palette } = require('api/v0.3');
const { timer, Subject, from, empty } = require('rxjs');
const { takeUntil, take, repeatWhen, filter, zip, map, share } = require('rxjs/operators');

// stream for coloring
const palette$ = from(palette);

const source$ = timer(0, 10).pipe(
    take(10),
    // get color for each item
    zip(palette$, Marble),
    share()
  );

const pause$ = new Subject();

const ons$ = pause$.pipe(filter(v=>v));
const offs$ = pause$.pipe(filter(v=>!v));

const result$ = source$.pipe(
    takeUntil(ons$),
    repeatWhen(()=>offs$)
  );

turnPause(true, 30);
turnPause(false, 60);

source$.subscribe(rxObserver());
pause$.pipe(
  map(v => v
    ? Marble('||', '#ffffff')
    : Marble('▶', '#ffffff'))
  )
  .subscribe(rxObserver());
result$.subscribe(rxObserver());

// helpers
function turnPause(value, delay){
  setTimeout(()=>{
    pause$.next(value);
  }, delay);
}

// creates a colored Marble
function Marble(value,color) {
  return {
    valueOf: ()=>value
    , color
  };
}