Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const connectivity = {
  initial: 'unknown',
  states: {
    unknown: {
      on: {
        IMPROVING: "great",
        DEGRADING: "bad"
      },
      after: {
        12000: "bad"
      }
    },
    bad: {
      on: {
        IMPROVING: "poor",
      },
      entry: send("WORST_LEVEL_REACHED")
    },
    poor: {
      on: {
        IMPROVING: "good",
        DEGRADING: "bad"
      }
    },
    good: {
      on: {
        IMPROVING: "great",
        DEGRADING: "poor"
      },
      entry: send("BEST_LEVEL_REACHED")
    },
    great: {
      on: {
        DEGRADING: "good"
      },
    }
  }
};
  
const connectivityModal = {
  initial: 'hidden',
  context: {
    hiddenByUser: false
  },
  states: {
    hidden: {
      on: { WORST_LEVEL_REACHED: "shown" }
    },
    hiddenByUser: {
      on: { BEST_LEVEL_REACHED: "hidden" }
    },
    shown: {
      on: {
        HIDE_CONNECTIVITY_MODAL: "hiddenByUser",
        BEST_LEVEL_REACHED: "hidden"
      }
    }
  }
};
  
const stillOverlay = {
  initial: 'hidden',
  context: {
    hiddenByUser: false
  },
  states: {
    hidden: {
      on: { WORST_LEVEL_REACHED: "shown" }
    },
    shown: {
      on: { BEST_LEVEL_REACHED: "hidden" }
    }
  }
};

const selectingStream = {
  initial: 'loading',
  on: {
    SOURCES_CHANGED: {
      target: 'selectingStream',
      cond: (_, event) => {
        return event.sources && event.sources.tunnel && event.sources.local;
      },
      actions: assign({
        source: () => null,
        sources: (_, event) => event.sources
      })
    },
  },
  states: {
    loading: {
      entry: send('SOURCE_CHANGED'),
      on: {
        LOCAL_REACHABLE: 'local',
        TUNNEL_REACHABLE: 'tunnel',
      }
    },
    local: {
      type: 'final',
      entry: [
        send("SOURCE_CHANGED"),
        assign({
          source:  context => context.sources.local
        })
      ]
    },
    tunnel: {
      entry: [
        send("SOURCE_CHANGED"),
        assign({
          source:  context => context.sources.tunnel
        })
      ],
      on: {
        LOCAL_REACHABLE: {
          target: 'local',
          actions: assign({
            source:  context => context.sources.local
          })
        }
      }
    }
  }
}

const playerMachine = Machine({
  id: 'player',
  initial: 'selectingStream',
  type: 'parallel',
  context: {
    source: null,
    sources: {
      local: 'https://local.com',
      tunnel: 'https://tunnel.com',
    }
  },
  states: {
    selectingStream,
    playback: {
      type: 'parallel',
      states: {
        connectivity,
        connectivityModal,
        stillOverlay
      },
      on: {
        SOURCE_CHANGED: {
          target: "playback",
          actions: (context) => console.log("playing", context.source)
        }
      }
    },
  }
});