veeroll-vue-package

Installation

this package is build on vuetify and using pinia

1. To install the package and its peer dependencies, run the following commands:

npm install veeroll-vue-package
# npm run install-peers

2. set up your main.js

import "./assets/main.css";

import { createApp, h } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
import { createVuetify } from "vuetify";

import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { VBtn } from "vuetify/components/VBtn";
import { Icon } from "@iconify/vue";
import router from './router';
import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css"

// import '@core/scss/template/index.scss'

// import '@styles/styles.scss'
import "vuetify/styles"; // Ensure you are using css-loader

async function loadFonts() {
  const webFontLoader = await import(
    /* webpackChunkName: "webfontloader" */ "webfontloader"
  );

  webFontLoader.load({
    google: {
      families: [
        "Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap",
      ],
    },
  });
}

loadFonts();

const app = createApp(App);
const pinia = createPinia();

const aliases = {
  collapse: "tabler-chevron-up",
  complete: "tabler-check",
  cancel: "tabler-x",
  close: "tabler-x",
  delete: "tabler-x",
  clear: "tabler-x",
  success: "tabler-circle-check",
  info: "tabler-info-circle",
  warning: "tabler-alert-circle",
  error: "tabler-x",
  prev: "tabler-chevron-left",
  next: "tabler-chevron-right",
  checkboxOn: "custom-checked-checkbox",
  checkboxOff: "custom-unchecked-checkbox",
  checkboxIndeterminate: "custom-indeterminate-checkbox",
  delimiter: "tabler-circle",
  sort: "tabler-arrow-up",
  expand: "tabler-chevron-down",
  menu: "tabler-menu-2",
  subgroup: "tabler-caret-down",
  dropdown: "tabler-chevron-down",
  radioOn: "custom-checked-radio",
  radioOff: "custom-unchecked-radio",
  edit: "tabler-pencil",
  ratingEmpty: "custom-star-empty",
  ratingFull: "custom-star-fill",
  ratingHalf: "custom-star-half",
  loading: "tabler-refresh",
  first: "tabler-player-skip-back",
  last: "tabler-player-skip-forward",
  unfold: "tabler-arrows-move-vertical",
  file: "tabler-paperclip",
  plus: "tabler-plus",
  minus: "tabler-minus",
  sortAsc: "tabler-arrow-up",
  sortDesc: "tabler-arrow-down",
};

const defaults = {
  IconBtn: {
    icon: true,
    color: "default",
    variant: "text",
    density: "comfortable",
    VIcon: {
      size: 22,
    },
  },
  VAlert: {
    density: "comfortable",
    VBtn: {
      color: undefined,
    },
  },
  VBadge: {
    // set v-badge default color to primary
    color: "primary",
  },
  VBtn: {
    // set v-btn default color to primary
    color: "primary",
  },
  VChip: {
    size: "small",
  },
  VExpansionPanel: {
    expandIcon: "tabler-chevron-right",
    collapseIcon: "tabler-chevron-right",
  },
  VExpansionPanelTitle: {
    expandIcon: "tabler-chevron-right",
    collapseIcon: "tabler-chevron-right",
  },
  VList: {
    density: "comfortable",
    VCheckboxBtn: {
      density: "compact",
    },
  },
  VPagination: {
    activeColor: "primary",
    density: "comfortable",
    variant: "tonal",
  },
  VTabs: {
    // set v-tabs default color to primary
    color: "primary",
    density: "comfortable",
    VSlideGroup: {
      showArrows: true,
    },
  },
  VTooltip: {
    // set v-tooltip default location to top
    location: "top",
  },
  VCheckboxBtn: {
    color: "primary",
  },
  VCheckbox: {
    // set v-checkbox default color to primary
    color: "primary",
    density: "comfortable",
    hideDetails: "auto",
  },
  VRadioGroup: {
    color: "primary",
    density: "comfortable",
    hideDetails: "auto",
  },
  VRadio: {
    density: "comfortable",
    hideDetails: "auto",
  },
  VSelect: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
    VChip: {
      color: "primary",
      label: true,
    },
  },
  VRangeSlider: {
    // set v-range-slider default color to primary
    color: "primary",
    trackColor: "rgb(var(--v-theme-on-surface),0.06)",
    trackSize: 6,
    thumbSize: 7,
    density: "comfortable",
    thumbLabel: true,
    hideDetails: "auto",
  },
  VRating: {
    // set v-rating default color to primary
    color: "warning",
  },
  VProgressCircular: {
    // set v-progress-circular default color to primary
    color: "primary",
  },
  VProgressLinear: {
    height: 12,
    roundedBar: true,
    rounded: true,
    bgColor: "rgb(var(--v-theme-on-surface))",
  },
  VSlider: {
    // set v-slider default color to primary
    color: "primary",
    trackColor: "rgb(var(--v-theme-on-surface),0.06)",
    hideDetails: "auto",
    thumbSize: 7,
    trackSize: 6,
  },
  VTextField: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
  },
  VAutocomplete: {
    variant: "outlined",
    color: "primary",
    density: "compact",
    hideDetails: "auto",
    menuProps: {
      contentClass: "app-autocomplete__content v-autocomplete__content",
    },
    VChip: {
      color: "primary",
      label: true,
    },
  },
  VCombobox: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
    VChip: {
      color: "primary",
      label: true,
    },
  },
  VFileInput: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
  },
  VTextarea: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
  },
  VSwitch: {
    // set v-switch default color to primary
    inset: true,
    color: "primary",
    hideDetails: "auto",
  },
  VTimeline: {
    lineThickness: 1,
  },
  VDataTable: {
    VDataTableFooter: {
      VBtn: {
        density: "comfortable",
        color: "default",
      },
    },
  },
};

const iconify = {
  component: (props) => h(Icon, props),
};

const icons = {
  defaultSet: "iconify",
  aliases,
  sets: {
    iconify,
  },
};
const themeConfig = {
  app: {
    title: "",
    logo: "",
  },
};

const staticPrimaryColor = "#04216d";

const theme = {
  defaultTheme: "light", // dark || light
  themes: {
    light: {
      dark: false,
      colors: {
        primary:
          localStorage.getItem(
            `${themeConfig.app.title}-lightThemePrimaryColor`
          ) || staticPrimaryColor,
        "on-primary": "#fff",
        secondary: "#36d9e3",
        "on-secondary": "#fff",
        success: "#28C76F",
        "on-success": "#fff",
        info: "#00CFE8",
        "on-info": "#fff",
        warning: "#FF9F43",
        "on-warning": "#fff",
        error: "#EA5455",
        background: "#F8F7FA",
        "on-background": "#2F2B3D",
        "on-surface": "#2F2B3D",
        "grey-50": "#FAFAFA",
        "grey-100": "#F5F5F5",
        "grey-200": "#EEEEEE",
        "grey-300": "#E0E0E0",
        "grey-400": "#BDBDBD",
        "grey-500": "#9E9E9E",
        "grey-600": "#757575",
        "grey-700": "#616161",
        "grey-800": "#424242",
        "grey-900": "#212121",
        "perfect-scrollbar-thumb": "#DBDADE",
        "skin-bordered-background": "#fff",
        "skin-bordered-surface": "#fff",
      },
      variables: {
        "code-color": "#d400ff",
        "overlay-scrim-background": "#4C4E64",
        "tooltip-background": "#4A5072",
        "overlay-scrim-opacity": 0.5,
        "hover-opacity": 0.04,
        "focus-opacity": 0.12,
        "selected-opacity": 0.06,
        "activated-opacity": 0.16,
        "pressed-opacity": 0.14,
        "dragged-opacity": 0.1,
        "disabled-opacity": 0.42,
        "border-color": "#2F2B3D",
        "border-opacity": 0.16,
        "high-emphasis-opacity": 0.78,
        "medium-emphasis-opacity": 0.68,
        "switch-opacity": 0.2,
        "switch-disabled-track-opacity": 0.3,
        "switch-disabled-thumb-opacity": 0.4,
        "switch-checked-disabled-opacity": 0.3,

        // Shadows
        "shadow-key-umbra-color": "#2F2B3D",
      },
    },
    dark: {
      dark: true,
      colors: {
        primary:
          localStorage.getItem(
            `${themeConfig.app.title}-darkThemePrimaryColor`
          ) || staticPrimaryColor,
        "on-primary": "#fff",
        secondary: "#A8AAAE",
        "on-secondary": "#fff",
        success: "#28C76F",
        "on-success": "#fff",
        info: "#00CFE8",
        "on-info": "#fff",
        warning: "#FF9F43",
        "on-warning": "#fff",
        error: "#EA5455",
        background: "#25293C",
        "on-background": "#D0D4F1",
        surface: "#2F3349",
        "on-surface": "#D0D4F1",
        "grey-50": "#26293A",
        "grey-100": "#2F3349",
        "grey-200": "#26293A",
        "grey-300": "#4A5072",
        "grey-400": "#5E6692",
        "grey-500": "#7983BB",
        "grey-600": "#AAB3DE",
        "grey-700": "#B6BEE3",
        "grey-800": "#CFD3EC",
        "grey-900": "#E7E9F6",
        "perfect-scrollbar-thumb": "#4A5072",
        "skin-bordered-background": "#2f3349",
        "skin-bordered-surface": "#2f3349",
      },
      variables: {
        "code-color": "#d400ff",
        "overlay-scrim-background": "#101121",
        "tooltip-background": "#5E6692",
        "overlay-scrim-opacity": 0.6,
        "hover-opacity": 0.04,
        "focus-opacity": 0.12,
        "selected-opacity": 0.06,
        "activated-opacity": 0.16,
        "pressed-opacity": 0.14,
        "dragged-opacity": 0.1,
        "disabled-opacity": 0.42,
        "border-color": "#D0D4F1",
        "border-opacity": 0.16,
        "high-emphasis-opacity": 0.78,
        "medium-emphasis-opacity": 0.68,
        "switch-opacity": 0.4,
        "switch-disabled-track-opacity": 0.4,
        "switch-disabled-thumb-opacity": 0.8,
        "switch-checked-disabled-opacity": 0.3,

        // Shadows
        "shadow-key-umbra-color": "#0F1422",
      },
    },
  },
};

app.use(VuePlyr, {
  plyr: {},
})

const vuetify = createVuetify({
  aliases: {
    IconBtn: VBtn,
  },
  defaults,
  icons,
  theme,
  components,
  directives,
});
import Vue3Lottie from 'vue3-lottie'

app.use(Toast, {
  position: "top-right",
  timeout: 2500,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: true,
  closeButton: "button",
  icon: false,
  rtl: false,
})

app.use(Vue3Lottie)
app.use(pinia);
app.use(router);
app.use(vuetify);
app.mount("#app");

ensure your App.vue is wrapped on v-app and import DialogComponent from veeroll package

<script setup>
import DialogComponent from 'veeroll-vue-package/src/components/DialogComponent.vue';
import DialogUpgradeAnimate from 'veeroll-vue-package/src/components/DialogComponent.vue';
</script>

<template>
<v-app>
  <main>
  DialogUpgradeAnimate
  <DialogComponent />
    <router-view></router-view>
  </main> 
</v-app>
</template>

<style scoped>
</style>

3. install vite plugin vuetify ( make sure its installed on your project)

 npm i vite-plugin-vuetify

update your vite.config.js and include vuetify from vite-plugin-vuetify

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
   vue(),
   vuetify({ autoImport: true }),
 ],
 resolve: {
   alias: {
     '@': fileURLToPath(new URL('./src', import.meta.url))
   }
 }
})

4. Update your .env make sure this 3 keys are present. Replace the your value for API_KEY and SECRET

VITE_VEEROLL_API_URL=http://vr-backend.test/api/
VITE_VEEROLL_API_KEY={{YOUR API KEY FROM VEEROLL}}
VITE_VEEROLL_SECRET={{YOUR SECRET KEY FROM VEEROLL}}

5. on your route.js , add the route of veeroll package, this is the route to view the details of the created video

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from 'veeroll-vue-package';
import Home from './pages/Home.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...routes,
    {
      path: '/home',
      name: 'home',
      component: Home,
      props: true,
    },
  ]
});

router.beforeEach((to, from, next) => {
  console.log(`Navigating to: ${to.path}`); 
  next();
});

export default router;

6. last is to import the component CreateVideo on your page, this will have two choices for you to select for creating a veeroll video

<script setup>
import { CreateVideo } from "veeroll-vue-package";
</script>

<template>
  <CreateVideo />
</template>

<style scoped></style>