@fivestarprogramming/fsp-support-v3

v1.0.3

Published

7 days ago

A vanilla JavaScript library for issue reporting with screen capture, video recording, and image annotation. Works with any framework or plain HTML.

0High
0Medium
0Low

issue-reporting bug-tracking screen-capture video-recording support-widget feedback screenshot annotation jira helpdesk

FSP Support v3

A vanilla JavaScript library for issue reporting with screen capture, video recording, and image annotation. Works with any framework (React, Vue, Angular, etc.) or plain HTML/JavaScript websites.

Features

📸 Screenshot Capture - Capture screenshots with built-in annotation tools
🎥 Video Recording - Record screen activity with intelligent codec fallback
🎤 Video + Voice - Record screen with microphone audio and enhanced noise suppression
✏️ Image Editor - Draw, add shapes, arrows, and text annotations
📝 Issue Form - Submit issues with type, priority, summary, and description
🎯 Smart Defaults - Pre-selected issue type and medium priority for faster submissions
🏷️ Icon Dropdowns - Custom dropdowns with dynamic icons for issue types and color-coded priorities
📋 Tickets View - View previously submitted issues with advanced filtering
🔍 Smart Search - Debounced search bar (300ms) for instant ticket filtering
🎨 Dynamic Filters - Status category filter buttons with color-coded indicators loaded from API
📄 Footer Pagination - Navigate through tickets with page counter and prev/next controls
📊 Auto Logging - Captures console errors and network requests during recording
✅ Form Validation - Required field validation ensures screenshots/videos are submitted
⌨️ Keyboard Shortcut - Quick access with Alt+B (customizable)
🎨 Customizable - Theming via CSS variables with support-fsp- prefix
🔧 Framework Agnostic - Works with Angular, React, Vue, or plain HTML

Installation

Via npm

npm install @fivestarprogramming/fsp-support-v3

Via CDN

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/@fivestarprogramming/fsp-support-v3/dist/fsp-support.css">
<script src="https://unpkg.com/@fivestarprogramming/fsp-support-v3/dist/fsp-support.min.js"></script>

<!-- or jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fivestarprogramming/fsp-support-v3/dist/fsp-support.css">
<script src="https://cdn.jsdelivr.net/npm/@fivestarprogramming/fsp-support-v3/dist/fsp-support.min.js"></script>

Quick Start

HTML/JavaScript (Script Tag)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@fivestarprogramming/fsp-support-v3/dist/fsp-support.css">
</head>
<body>
  <!-- Your app content -->
  
  <script src="https://unpkg.com/@fivestarprogramming/fsp-support-v3/dist/fsp-support.min.js"></script>
  <script>
    const support = new FSPSupport({
      apiUrl: 'https://your-api.com/api',
      appName: 'My Application',
      appKey: 'MY-PROJECT-KEY',
      userEmail: '[email protected]',
      userName: 'John Doe'
    });
  </script>
</body>
</html>

Angular (Any Version)

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import FSPSupport from '@fivestarprogramming/fsp-support-v3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private support: any;

  ngOnInit() {
    this.support = new FSPSupport({
      apiUrl: 'https://your-api.com/api',
      appName: 'My Angular App',
      appKey: 'ANGULAR-APP',
      userEmail: this.authService.userEmail,
      userName: this.authService.userName
    });
  }

  ngOnDestroy() {
    this.support?.destroy();
  }
}

/* styles.css or app.component.css */
@import '@fivestarprogramming/fsp-support-v3/dist/fsp-support.css';

React

import { useEffect, useRef } from 'react';
import FSPSupport from '@fivestarprogramming/fsp-support-v3';
import '@fivestarprogramming/fsp-support-v3/dist/fsp-support.css';

function App() {
  const supportRef = useRef(null);

  useEffect(() => {
    supportRef.current = new FSPSupport({
      apiUrl: 'https://your-api.com/api',
      appName: 'My React App',
      appKey: 'REACT-APP',
      userEmail: user?.email,
      userName: user?.name
    });

    return () => {
      supportRef.current?.destroy();
    };
  }, []);

  return <div>Your App</div>;
}

Vue 3

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import FSPSupport from '@fivestarprogramming/fsp-support-v3';
import '@fivestarprogramming/fsp-support-v3/dist/fsp-support.css';

const support = ref(null);

onMounted(() => {
  support.value = new FSPSupport({
    apiUrl: 'https://your-api.com/api',
    appName: 'My Vue App',
    appKey: 'VUE-APP',
    userEmail: '[email protected]'
  });
});

onUnmounted(() => {
  support.value?.destroy();
});
</script>

Next.js

// components/FSPSupportWrapper.js
'use client';
import { useEffect, useRef } from 'react';

export default function FSPSupportWrapper({ config }) {
  const supportRef = useRef(null);

  useEffect(() => {
    // Dynamic import for client-side only
    import('@fivestarprogramming/fsp-support-v3').then((module) => {
      const FSPSupport = module.default;
      supportRef.current = new FSPSupport(config);
    });
    
    import('@fivestarprogramming/fsp-support-v3/dist/fsp-support.css');

    return () => {
      supportRef.current?.destroy();
    };
  }, []);

  return null;
}

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiUrl | string | '' | Base URL of your API | | appName | string | 'Application' | Display name of your application | | appKey | string | '' | Project key for the API | | userEmail | string | null | Current user's email | | userName | string | null | Current user's name | | showBugIcon | boolean | true | Show floating bug icon | | position | string | 'bottom-right' | Bug icon position: 'bottom-right', 'bottom-left', 'top-right', 'top-left' | | hotkey | string | 'Alt+B' | Keyboard shortcut to toggle popup | | onSubmitSuccess | function | null | Callback after successful submission | | onSubmitError | function | null | Callback on submission error |

UI/UX Features

Tickets View

Smart Search Bar: Debounced search (300ms) filters tickets by summary or description as you type
Dynamic Status Filters: Filter buttons are automatically generated from API status categories
Color-Coded Status: Visual indicators with consistent colors:
- 🟠 "To Do" - #FE9A00
- 🔵 "In Progress" - #00A6F4
- ⚪ "Done" - #9F9FA9
Footer Pagination: Shows "X of Y" with previous/next navigation controls
Modern Card Design: Ticket cards display priority indicator, metadata, status badge, and arrow

Issue Form

Custom Icon Dropdowns: Issue types display with their respective icons loaded from API (iconUrl)
Color-Coded Priorities: Priority dropdown shows colored SVG icons:
- 🔴 Critical (1) - Red
- 🟠 High (2) - Orange
- 🟡 Medium (3) - Yellow
- 🔵 Low (4) - Blue
- ⚪ Lowest (5) - Gray
Smart Defaults: Form pre-selects a default issue type (ID: "23") and medium priority (2) for faster submissions
Required Validation: Ensures users attach a screenshot or video before submission with visual error feedback

Screen Recording

Intelligent Codec Fallback: Automatically tries preferred codecs (VP9/Opus, VP8/Opus) and falls back to browser-selected codec if needed
Enhanced Audio Quality: Echo cancellation and noise suppression for clearer voice recordings
Bottom Overlay: Recording indicator positioned at bottom of screen for better visibility

API Methods

`open()`

Opens the support popup.

support.open();

`close()`

Closes the support popup.

support.close();

`toggle()`

Toggles the support popup open/closed.

support.toggle();

`setUser(email, name)`

Updates the current user information.

support.setUser('[email protected]', 'New User');

`destroy()`

Removes the support widget and cleans up resources.

support.destroy();

Distributed Files

| File | Format | Size | Usage | |------|--------|------|-------| | fsp-support.min.js | IIFE | ~350 KB | Production <script> tag | | fsp-support.js | IIFE | ~1.2 MB | Development <script> tag | | fsp-support.esm.js | ES Module | ~1.2 MB | import in bundlers (Webpack, Vite, etc.) | | fsp-support.css | CSS | ~14 KB | Styles |

API Endpoints

The library expects the following backend API endpoints:

`POST /api/Issue`

Submit a new issue. Accepts multipart/form-data:

Id - Unique issue ID
Summary - Issue title
Description - Detailed description
RequestTypeId - Issue type ID
Priority - Priority level (1-5)
ProjectKey - Project identifier
UserEmail - Reporter email
UserName - Reporter name
AttachmentFile - Screenshot/video file
ConsolLogArrJson - JSON array of console logs
NetworkLogArrJson - JSON array of network logs

`GET /api/Issue`

Get issues list. Query params:

StatusCategoryId - Filter by status category
SearchQuery - Search term to filter issues by summary or description (debounced 300ms)
Skip - Pagination offset
Take - Items per page

`GET /api/IssueType/project/{projectKey}`

Get available issue types for a specific project.

{projectKey} - Your project key (e.g., from appKey config)

`GET /api/IssueStatusCategories`

Get available status categories.

`GET /api/Lookups/StatusCategoryLookup`

Get default status category lookup.

Customization

CSS Class Prefix

All CSS classes use the support-fsp- prefix to avoid conflicts with FSP-related applications:

.support-fsp-modal
.support-fsp-bug-icon
.support-fsp-btn
etc.

CSS variables follow the same convention.

CSS Variables

:root {
  --support-fsp-primary: #28a745;
  --support-fsp-primary-hover: #218838;
  --support-fsp-secondary: #6c757d;
  --support-fsp-danger: #dc3545;
  --support-fsp-bg: #ffffff;
  --support-fsp-text: #212529;
  --support-fsp-border: #dee2e6;
  --support-fsp-radius: 8px;
  --support-fsp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Browser Support

| Browser | Minimum Version | |---------|-----------------| | Chrome | 72+ | | Firefox | 66+ | | Safari | 13+ | | Edge | 79+ |

Note: Screen capture and recording require HTTPS in production.

Migration from Angular `@fivestarprogramming/fsp-support`

If you're migrating from the Angular-specific library:

Uninstall the old package:

npm uninstall @fivestarprogramming/fsp-support

Install the new package:

npm install @fivestarprogramming/fsp-support-v3

Remove from app.module.ts:

// Remove this:
// import { UserIssueLibModule } from '@fivestarprogramming/fsp-support';
// UserIssueLibModule.forRoot({...})

Add to your root component:

import FSPSupport from '@fivestarprogramming/fsp-support-v3';

// In ngOnInit:
this.support = new FSPSupport({
  apiUrl: 'https://api.example.com/api',
  appKey: 'MY-APP',
  appName: 'My App',
  userEmail: this.authService.currentUserEmail,
  userName: this.authService.currentUserName
});

// In ngOnDestroy:
this.support?.destroy();

Add CSS import:

@import '@fivestarprogramming/fsp-support-v3/dist/fsp-support.css';

License

MIT License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme