@strawbinary-io/api-video-strapi-5-plugin/dist/_chunks/index-bKpY1jxj.js

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

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
require("react-dom/client");
const designSystem = require("@strapi/design-system");
const icons = require("@strapi/icons");
require("./rulesEngine-B1IxUHbK.js");
require("react-router-dom");
const symbols = require("@strapi/icons/symbols");
const reactIntl = require("react-intl");
const admin = require("@strapi/strapi/admin");
const index = require("./index-m2iLaGni.js");
const chart_js = require("chart.js");
const reactChartjs2 = require("react-chartjs-2");
const ChartDataLabels = require("chartjs-plugin-datalabels");
const getTranslation = require("./getTranslation-DdmT3Dfz.js");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const ChartDataLabels__default = /* @__PURE__ */ _interopDefault(ChartDataLabels);
const Loading = ({ children }) => {
  const { formatMessage } = reactIntl.useIntl();
  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, {
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {
      children: children ?? formatMessage({
        id: "HomePage.widget.loading",
        defaultMessage: "Loading widget content"
      })
    })
  });
};
const Error$1 = ({ children }) => {
  const { formatMessage } = reactIntl.useIntl();
  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, {
    height: "100%",
    direction: "column",
    justifyContent: "center",
    alignItems: "center",
    gap: 2,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, {
        width: "3.2rem",
        height: "3.2rem",
        fill: "danger600"
      }),
      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
        variant: "delta",
        children: formatMessage({
          id: "global.error",
          defaultMessage: "Something went wrong"
        })
      }),
      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
        textColor: "neutral600",
        children: children ?? formatMessage({
          id: "HomePage.widget.error",
          defaultMessage: "Couldn't load widget content."
        })
      })
    ]
  });
};
const NoData = ({ children }) => {
  const { formatMessage } = reactIntl.useIntl();
  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, {
    height: "100%",
    direction: "column",
    justifyContent: "center",
    alignItems: "center",
    gap: 6,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx(symbols.EmptyDocuments, {
        width: "16rem",
        height: "8.8rem"
      }),
      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
        textColor: "neutral600",
        children: children ?? formatMessage({
          id: "HomePage.widget.no-data",
          defaultMessage: "No content found."
        })
      })
    ]
  });
};
const Widget = {
  Loading,
  Error: Error$1,
  NoData
};
chart_js.Chart.register(chart_js.CategoryScale, chart_js.LinearScale, chart_js.BarElement, chart_js.Title, chart_js.Tooltip, chart_js.Legend, ChartDataLabels__default.default);
const Top5VideosWidget = () => {
  const { get } = admin.getFetchClient();
  const { formatMessage } = reactIntl.useIntl();
  const [videos, setVideos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  React.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(`/${index.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__ */ jsxRuntime.jsx(Widget.Loading, {});
  if (error) return /* @__PURE__ */ jsxRuntime.jsx(Widget.Error, {});
  if (videos.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(Widget.NoData, {});
  const data = {
    labels: videos.map((item) => item.video.title),
    datasets: [
      {
        label: formatMessage({
          id: getTranslation.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.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__ */ jsxRuntime.jsx(reactChartjs2.Bar, { data, options, color: "#ffff" });
};
exports.default = Top5VideosWidget;