@ndla/video-search 8.0.20-alpha.0 → 8.0.22-alpha.0

package/README.md

@@ -41,6 +41,7 @@ const translations = {
   duration: "Duration",
   interactioncount: "Views",
   is360Video: "360 video",
+  close: "Close",
 };
 
 <VideoSearch onVideoSelect={onVideoSelect} searchVideos={searchVideos} translations={translations} locale="nb" />;

package/dist/panda.buildinfo.json

@@ -0,0 +1,33 @@
+{
+  "schemaVersion": "0.46.0",
+  "styles": {
+    "atomic": [
+      "display]___[value:flex",
+      "gap]___[value:small",
+      "minHeight]___[value:surface.xxsmall",
+      "display]___[value:grid",
+      "gap]___[value:xsmall",
+      "gridTemplateColumns]___[value:repeat(3,1fr)",
+      "padding]___[value:small",
+      "borderBlockEnd]___[value:1px solid",
+      "borderColor]___[value:stroke.subtle",
+      "minWidth]___[value:surface.xxsmall",
+      "height]___[value:surface.4xsmall",
+      "objectFit]___[value:cover",
+      "border]___[value:1px solid",
+      "flexDirection]___[value:column",
+      "gap]___[value:xxsmall",
+      "alignItems]___[value:flex-end",
+      "flexDirection]___[value:column]___[cond:tabletDown",
+      "alignItems]___[value:flex-start]___[cond:tabletDown",
+      "marginLeft]___[value:auto",
+      "paddingBlock]___[value:medium",
+      "listStyle]___[value:none",
+      "width]___[value:100%",
+      "justifyContent]___[value:center",
+      "gap]___[value:medium",
+      "alignItems]___[value:center"
+    ],
+    "recipes": {}
+  }
+}

package/dist/styles.css

@@ -0,0 +1,102 @@
+@layer utilities {
+  .d_flex {
+    display: flex;
+}
+
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
+  .min-h_surface\.xxsmall {
+    min-height: var(--sizes-surface-xxsmall);
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
+}
+
+  .p_small {
+    padding: var(--spacing-small);
+}
+
+  .bd-be_1px_solid {
+    border-block-end: 1px solid;
+}
+
+  .min-w_surface\.xxsmall {
+    min-width: var(--sizes-surface-xxsmall);
+}
+
+  .h_surface\.4xsmall {
+    height: var(--sizes-surface-4xsmall);
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
+  .bd_1px_solid {
+    border: 1px solid;
+}
+
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
+  .py_medium {
+    padding-block: var(--spacing-medium);
+}
+
+  .li-s_none {
+    list-style: none;
+}
+
+  .w_100\% {
+    width: 100%;
+}
+
+  .gap_medium {
+    gap: var(--spacing-medium);
+}
+
+  .grid-tc_repeat\(3\,1fr\) {
+    grid-template-columns: repeat(3,1fr);
+}
+
+  .bd-c_stroke\.subtle {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .ai_flex-end {
+    align-items: flex-end;
+}
+
+  .ml_auto {
+    margin-left: auto;
+}
+
+  .jc_center {
+    justify-content: center;
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  @media screen and (max-width: 37.56rem) {
+    .tabletDown\:flex-d_column {
+      flex-direction: column;
+}
+    .tabletDown\:ai_flex-start {
+      align-items: flex-start;
+}
+}
+}

package/es/VideoListItem.js

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useState } from "react";
+import { CloseLine } from "@ndla/icons/action";
+import { PanoramaPhotosphere } from "@ndla/icons/common";
+import { getLicenseByNBTitle } from "@ndla/licenses";
+import { Image, Text, ListItemContent, ListItemRoot, Button, IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ButtonWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "small"
+  }
+});
+const PreviewIframe = styled("iframe", {
+  base: {
+    minHeight: "surface.xxsmall"
+  }
+});
+const PreviewWrapper = styled("div", {
+  base: {
+    display: "grid",
+    gap: "xsmall",
+    gridTemplateColumns: "repeat(3,1fr)",
+    padding: "small",
+    borderBlockEnd: "1px solid",
+    borderColor: "stroke.subtle"
+  }
+});
+const StyledImage = styled(Image, {
+  base: {
+    minWidth: "surface.xxsmall",
+    height: "surface.4xsmall",
+    objectFit: "cover",
+    border: "1px solid",
+    borderColor: "stroke.subtle"
+  }
+});
+const StyledVideoMeta = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xxsmall"
+  }
+});
+const StyledListItemContent = styled(ListItemContent, {
+  base: {
+    alignItems: "flex-end",
+    tabletDown: {
+      flexDirection: "column",
+      alignItems: "flex-start"
+    }
+  }
+});
+const StyledIconButton = styled(IconButton, {
+  base: {
+    marginLeft: "auto"
+  }
+});
+const StyledListItemRoot = styled(ListItemRoot, {
+  base: {
+    paddingBlock: "medium",
+    tabletDown: {
+      flexDirection: "column",
+      alignItems: "flex-start"
+    }
+  }
+});
+const License = _ref => {
+  let {
+    license
+  } = _ref;
+  if (typeof license === "string") return /*#__PURE__*/_jsx(Text, {
+    children: license
+  });
+  if (license.url?.length) {
+    return /*#__PURE__*/_jsx("a", {
+      href: license.url,
+      rel: "license",
+      children: license.abbreviation
+    });
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    children: license.abbreviation
+  });
+};
+export const VideoListItem = _ref2 => {
+  let {
+    video,
+    onVideoSelect,
+    translations,
+    locale
+  } = _ref2;
+  const [isPreviewing, setIsPreviewing] = useState(false);
+  const license = video.custom_fields?.license ? getLicenseByNBTitle(video.custom_fields.license, locale) : "";
+  return /*#__PURE__*/_jsxs("li", {
+    children: [/*#__PURE__*/_jsxs(StyledListItemRoot, {
+      variant: "list",
+      nonInteractive: true,
+      children: [/*#__PURE__*/_jsx(StyledImage, {
+        src: video.images?.thumbnail?.src ?? "",
+        alt: "",
+        variant: "rounded"
+      }), /*#__PURE__*/_jsxs(StyledListItemContent, {
+        children: [/*#__PURE__*/_jsxs(StyledVideoMeta, {
+          children: [/*#__PURE__*/_jsxs(Text, {
+            textStyle: "title.medium",
+            children: [video.name, video.projection === "equirectangular" && /*#__PURE__*/_jsx(PanoramaPhotosphere, {
+              "aria-hidden": false,
+              "aria-label": translations.is360Video,
+              title: translations.is360Video
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            children: video.custom_fields?.licenseinfo ?? ""
+          }), /*#__PURE__*/_jsx(License, {
+            license: license
+          })]
+        }), /*#__PURE__*/_jsxs(ButtonWrapper, {
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            size: "small",
+            onClick: () => setIsPreviewing(p => !p),
+            "aria-expanded": isPreviewing,
+            "aria-controls": `video-preview-${video.id}`,
+            children: translations.previewVideo
+          }), /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            onClick: () => onVideoSelect(video),
+            children: translations.addVideo
+          })]
+        })]
+      })]
+    }), isPreviewing && /*#__PURE__*/_jsxs(PreviewWrapper, {
+      id: `video-preview-${video.id}`,
+      children: [/*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx(PreviewIframe, {
+        title: video.name,
+        src: `//players.brightcove.net/${video.account_id}/BkLm8fT_default/index.html?videoId=${video.id}`,
+        allowFullScreen: true
+      }), /*#__PURE__*/_jsx(StyledIconButton, {
+        variant: "secondary",
+        "aria-label": translations.close,
+        title: translations.close,
+        onClick: () => setIsPreviewing(false),
+        children: /*#__PURE__*/_jsx(CloseLine, {})
+      })]
+    })]
+  });
+};