vm-live-indicator

This can be used to indicate to the user that the current media is being streamed live.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-live-indicator></vm-live-indicator>

</vm-controls>

</vm-ui>

</vm-player>

React

import React from 'react';

import { Player, Ui, Controls, LiveIndicator } from '@vime/react';

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Controls>

<LiveIndicator />

</Controls>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<LiveIndicator />

</Controls>

</Ui>

</Player>

</template>

<script>

import { Player, Ui, Controls, LiveIndicator } from '@vime/vue';

export default {

components: {

Player,

Ui,

Controls,

LiveIndicator,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<LiveIndicator />

</Controls>

</Ui>

</Player>

<script lang="ts">

import { Player, Ui, Icons, Controls, LiveIndicator } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-controls>

<vm-live-indicator />

</vm-controls>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-live-indicator></vm-live-indicator>

</vm-controls>

</vm-ui>

</vm-player>

CSS Custom Properties

Name	Description
--vm-live-indicator-color	The color of the live indicator dot.

Dependencies

Used by

• vm-default-controls