Headless components for AirLST Live Events

Table of Contents

1. Why
2. Requirements
3. Installation
4. Usage
5. Available components

Why?

Live events headless components provide complete functionality for certain features without implementation limitations. They are called "headless" because these components do not provide any HTML or design related parts. They only expose specific properties and events that can be used in any project for building design.

Headless components approach gives us following benefits:

• Complete flexibility on how HTML structure or design should look like

• Separates and isolates functionality. When using headless components developer/designer should not worry about how things work behind the scenes or being afraid of breaking something unintentionally.

• Isolated and packaged component are very fast to implement and use, even if it has huge functionality behind it, like Chat, Video call, or Live stream.

• Headless components built with Plug&Play idea in mind. Most of the components require little-to-none coding knowledge to implement. Need chat functionality on page? That's just 5 lines of HTML code. Need video call? That's 10 lines of HTML.

• Allows code versioning. Something is broken on functionality side? We can push changes to headless components and fix the issue with zero code changes on customer project. Versioning allows us move forward with changes and new features without breaking old customer projects.

Requirements

• Vue v2

Components can be used in any project that has Vue v2 support. This includes basic HTML pages, Blade/Twig views or frontend Vue frameworks like Nuxt.js or Gridsome.

At the moment Vue v3 is not supported. Because it is still new and not fully supported by some frameworks like Nuxt.js. We plan to add v3 support in the future when it gets more popular and supported by all other frameworks.

Installation

yarn add @airlst/live-events-headless-components
// or
npm install @airlst/live-events-headless-components

Usage

Most of the components work isolated with their own state and functionality. Depending on the component they can require special properties and provide slot properties and events.

General terminology

General specifications:

• Requires authenticated state - if "Yes" then this component will not work if user is not authenticated

• Requires alias - if "Yes" then this component requires unique alias for a component instance. If not provided " default" alias will be used.

• Supports dynamic alias - if "Yes" then this component can handle changing component instance based on dynamic alias changes

• Model/Entity configuration - usually when component requires an "alias" this means that component instance is connected to specific model in the API backend. This also means that model can have special configuration options and changing them happens live for all users and reflects on component's behavior.

Component specifications:

• Properties - are custom HTML attributes that passed to component when mounted.

• Slot properties - are properties exposed from v-slot and can provide special data or function.

• Events - are custom HTML events getting fired on special cases from component

In the following Chat component example alias and new-message are properties, v-slot provides exposed slot property messages, and @message-sent is firing an event when new message is successfully sent

<template>
  <chat
      alias="my-chat-component"
      :new-message="newMessage"
      v-slot="{ messages }"
      @message-sent="() => ($refs.newMessage.value = '')"
  >
    <form @submit.prevent="messages.sendMessage">
      <input
          type="text"
          placeholder="Type your message"
          ref="newMessage"
          @input="({ target }) => messages.setNew(target.value)"
      />
      <button>Send</button>
    </form>
  </chat>
</template>

<script>
import { Chat } from '@airlst/live-events-headless-components'

export default {
  components: {
    Chat
  }
}
</script>

Important: To work properly, the only requirement for all components is wrapping them inside main BaseComponent. This component acts as parent to all headless components and provides base state, functions, properties.

Available components

• BaseComponent

• Auth

• Clappomat

• Chat

• Countdown

• ProfileUpdate

• Registration

• Slido

• Q&A

  • Q&A Queue

  • Q&A Queue Item

• Agenda

• LiveStream

• ContactForm

• Gallery

• Big Blue Button

  • AutoJoinRoom

  • RoomDisplayGroup

  • SingleRoom

• Speakers

  • SpeakerList

  • SingleSpeaker

• Virtual Venue

  • VirtualVenueRoomGroup

  • VirtualVenueRoom

• Video Call

  • VideoCallLocalParticipant

  • VideoCallRemoteParticipant

• Settings

• Password Checker

• External Video Call

• Reactomat

• PhotoBox

  • PhotoBoxAnimation

  • PhotoBoxCamera