@strawbinary-io/api-video-strapi-5-plugin/dist/_chunks/index-Bc3r9M1Z.mjs

A powerful Strapi plugin to easily manage your videos and integrate them in your project

import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import "react-dom/client";
import { Flex, Loader, Typography } from "@strapi/design-system";
import { WarningCircle } from "@strapi/icons";
import "./rulesEngine-BdlgvQPi.mjs";
import "react-router-dom";
import { EmptyDocuments } from "@strapi/icons/symbols";
import { useIntl } from "react-intl";
import { getFetchClient } from "@strapi/strapi/admin";
import { P as PLUGIN_ID } from "./index-Cf19Igd1.mjs";
import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js";
import { Bar } from "react-chartjs-2";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { g as getTranslation } from "./getTranslation-L59n1CGL.mjs";
const Loading = ({ children }) => {
  const { formatMessage } = useIntl();
  return /* @__PURE__ */ jsx(Flex, {
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    children: /* @__PURE__ */ jsx(Loader, {
      children: children ?? formatMessage({
        id: "HomePage.widget.loading",
        defaultMessage: "Loading widget content"
      })
    })
  });
};
const Error$1 = ({ children }) => {
  const { formatMessage } = useIntl();
  return /* @__PURE__ */ jsxs(Flex, {
    height: "100%",
    direction: "column",
    justifyContent: "center",
    alignItems: "center",
    gap: 2,
    children: [
      /* @__PURE__ */ jsx(WarningCircle, {
        width: "3.2rem",
        height: "3.2rem",
        fill: "danger600"
      }),
      /* @__PURE__ */ jsx(Typography, {
        variant: "delta",
        children: formatMessage({
          id: "global.error",
          defaultMessage: "Something went wrong"
        })
      }),
      /* @__PURE__ */ jsx(Typography, {
        textColor: "neutral600",
        children: children ?? formatMessage({
          id: "HomePage.widget.error",
          defaultMessage: "Couldn't load widget content."
        })
      })
    ]
  });
};
const NoData = ({ children }) => {
  const { formatMessage } = useIntl();
  return /* @__PURE__ */ jsxs(Flex, {
    height: "100%",
    direction: "column",
    justifyContent: "center",
    alignItems: "center",
    gap: 6,
    children: [
      /* @__PURE__ */ jsx(EmptyDocuments, {
        width: "16rem",
        height: "8.8rem"
      }),
      /* @__PURE__ */ jsx(Typography, {
        textColor: "neutral600",
        children: children ?? formatMessage({
          id: "HomePage.widget.no-data",
          defaultMessage: "No content found."
        })
      })
    ]
  });
};
const Widget = {
  Loading,
  Error: Error$1,
  NoData
};
Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels);
const Top5VideosWidget = () => {
  const { get } = getFetchClient();
  const { formatMessage } = useIntl();
  const [videos, setVideos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchTopVideos = async () => {
      try {
        const from = new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString();
        const to = (/* @__PURE__ */ new Date()).toISOString();
        const response = await get(`/${PLUGIN_ID}/api-video-asset/getTopVideos`, {
          params: { startDate: from, endDate: to }
        });
        setVideos(response.data);
      } catch (err) {
        setError(err instanceof Error ? err : new Error(String(err)));
      } finally {
        setLoading(false);
      }
    };
    fetchTopVideos();
  }, []);
  if (loading) return /* @__PURE__ */ jsx(Widget.Loading, {});
  if (error) return /* @__PURE__ */ jsx(Widget.Error, {});
  if (videos.length === 0) return /* @__PURE__ */ jsx(Widget.NoData, {});
  const data = {
    labels: videos.map((item) => item.video.title),
    datasets: [
      {
        label: formatMessage({
          id: getTranslation("widget.top5videos.views"),
          defaultMessage: "Views"
        }),
        data: videos.map((item) => item.metrics.views),
        backgroundColor: "#7b79ff",
        borderColor: "#7b79ff",
        borderWidth: 1,
        color: "#ffff"
      }
    ]
  };
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    indexAxis: "y",
    layout: {
      padding: {
        top: 16,
        bottom: 16,
        left: 16,
        right: 16
      }
    },
    scales: {
      x: {
        beginAtZero: true,
        grid: { drawOnChartArea: false, color: "#32324d" },
        ticks: { color: "#ffff" }
      },
      y: {
        beginAtZero: true,
        grid: { drawTicks: false, color: "#32324d" },
        ticks: { display: false }
      }
    },
    plugins: {
      legend: { display: false },
      title: {
        display: true,
        text: formatMessage({
          id: getTranslation("widget.top5videos.title"),
          defaultMessage: "Top 5 Videos by Views"
        }),
        color: "#ffff"
      },
      datalabels: {
        anchor: "start",
        align: "right",
        color: "#ffff",
        formatter: (_value, context) => context.chart.data.labels[context.dataIndex]
      }
    }
  };
  return /* @__PURE__ */ jsx(Bar, { data, options, color: "#ffff" });
};
export {
  Top5VideosWidget as default
};