@ndla/video-search 4.1.47 → 5.0.0

package/lib/VideoSearchResultBrightcove.js

@@ -1,101 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = VideoSearchResultBrightcove;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-var _button = require("@ndla/button");
-var _common = require("@ndla/icons/common");
-var _licenses = require("@ndla/licenses");
-var _notion = require("@ndla/notion");
-var _PreviewVideo = _interopRequireDefault(require("./PreviewVideo"));
-var _shapes = require("./shapes");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const classes = new _reactBemHelper.default({
-  name: 'video-search',
-  prefix: 'c-'
-});
-function VideoSearchResultBrightcove(_ref) {
-  let {
-    video,
-    onVideoPreview,
-    selectedVideo,
-    onSelectVideo,
-    locale,
-    translations
-  } = _ref;
-  const active = selectedVideo && selectedVideo.id === video.id ? 'active' : '';
-  const license = video.custom_fields && video.custom_fields.license ? (0, _licenses.getLicenseByNBTitle)(video.custom_fields.license, locale) : '';
-  const thumbnailSource = video.images && video.images.thumbnail ? video.images.thumbnail.src : '';
-  const is360video = video.projection === 'equirectangular';
-  return (0, _jsxRuntime.jsxs)("div", {
-    ...classes('list-item', active),
-    children: [(0, _jsxRuntime.jsxs)("div", {
-      ...classes('list-item-inner'),
-      children: [(0, _jsxRuntime.jsx)("img", {
-        role: "presentation",
-        alt: "presentation",
-        src: thumbnailSource
-      }), (0, _jsxRuntime.jsxs)("div", {
-        ...classes('information'),
-        children: [(0, _jsxRuntime.jsxs)("h2", {
-          ...classes('header'),
-          children: [video.name || '', is360video && (0, _jsxRuntime.jsx)(_common.PanoramaPhotosphere, {})]
-        }), (0, _jsxRuntime.jsx)("div", {
-          ...classes('copyright-author'),
-          children: video.custom_fields && video.custom_fields.licenseinfo ? video.custom_fields.licenseinfo : ''
-        }), (0, _jsxRuntime.jsx)("div", {
-          ...classes('license'),
-          children: license.rights ? (0, _jsxRuntime.jsx)(_notion.LicenseByline, {
-            licenseRights: license.rights,
-            locale: locale
-          }) : license
-        }), (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-          ...classes('button'),
-          variant: "outline",
-          onClick: () => onVideoPreview(video),
-          children: translations.previewVideo
-        }), (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-          "data-testid": "use-video",
-          ...classes('button'),
-          onClick: () => onSelectVideo(video),
-          children: translations.addVideo
-        })]
-      })]
-    }), selectedVideo && selectedVideo.id === video.id ? (0, _jsxRuntime.jsx)(_PreviewVideo.default, {
-      onVideoPreview: onVideoPreview,
-      selectedType: "brightcove",
-      children: (0, _jsxRuntime.jsx)("iframe", {
-        className: "c-video-preview__video",
-        title: selectedVideo.name,
-        src: `//players.brightcove.net/${selectedVideo.account_id}/BkLm8fT_default/index.html?videoId=${selectedVideo.id}`
-        // eslint-disable-next-line react/no-unknown-property
-        ,
-        allowFullScreen: true
-      })
-    }) : '']
-  }, video.id);
-}
-VideoSearchResultBrightcove.propTypes = {
-  license: _shapes.LicenseShape,
-  video: _shapes.BrightcoveShape.isRequired,
-  onVideoPreview: _propTypes.default.func.isRequired,
-  selectedVideo: _shapes.BrightcoveShape,
-  onSelectVideo: _propTypes.default.func.isRequired,
-  locale: _propTypes.default.string.isRequired,
-  translations: _propTypes.default.shape({
-    addVideo: _propTypes.default.string.isRequired,
-    previewVideo: _propTypes.default.string.isRequired
-  })
-};

package/lib/VideoSearchResultYouTube.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = VideoSearchResultYouTube;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-var _button = require("@ndla/button");
-var _PreviewVideo = _interopRequireDefault(require("./PreviewVideo"));
-var _shapes = require("./shapes");
-var _videoHelpers = require("./videoHelpers");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const classes = new _reactBemHelper.default({
-  name: 'video-search',
-  prefix: 'c-'
-});
-function VideoSearchResultYouTube(_ref) {
-  let {
-    video,
-    onVideoPreview,
-    selectedVideo,
-    onSelectVideo,
-    translations,
-    locale
-  } = _ref;
-  const videoData = video?.pagemap?.videoobject?.[0];
-  const activeVideo = selectedVideo?.pagemap?.videoobject?.[0]?.videoid === videoData?.videoid;
-  if (videoData) {
-    return (0, _jsxRuntime.jsxs)("div", {
-      ...classes('list-item', activeVideo ? 'active' : ''),
-      children: [(0, _jsxRuntime.jsxs)("div", {
-        ...classes('list-item-inner'),
-        children: [(0, _jsxRuntime.jsx)("img", {
-          role: "presentation",
-          alt: "presentation",
-          src: videoData.thumbnailurl
-        }), (0, _jsxRuntime.jsxs)("div", {
-          ...classes('information'),
-          children: [(0, _jsxRuntime.jsx)("h2", {
-            children: videoData.name
-          }), (0, _jsxRuntime.jsx)("div", {
-            children: `${translations.publishedDate}: ${(0, _videoHelpers.setLocaleDate)(videoData.datepublished, locale)}`
-          }), (0, _jsxRuntime.jsx)("div", {
-            children: `${translations.duration}: ${(0, _videoHelpers.setYouTubeDuration)(videoData.duration)}`
-          }), (0, _jsxRuntime.jsx)("div", {
-            children: `${translations.interactioncount}: ${videoData.interactioncount}`
-          }), (0, _jsxRuntime.jsx)("div", {
-            children: videoData.description
-          }), (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-            ...classes('button'),
-            variant: "outline",
-            onClick: () => onVideoPreview(video),
-            children: translations.previewVideo
-          }), (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-            "data-testid": "use-video",
-            ...classes('button'),
-            onClick: () => onSelectVideo(video),
-            children: translations.addVideo
-          })]
-        })]
-      }), activeVideo ? (0, _jsxRuntime.jsx)(_PreviewVideo.default, {
-        onVideoPreview: onVideoPreview,
-        selectedType: "youtube",
-        children: (0, _jsxRuntime.jsx)("iframe", {
-          className: "c-video-preview__video",
-          title: selectedVideo.title,
-          src: selectedVideo.pagemap.videoobject[0].embedurl
-          // eslint-disable-next-line react/no-unknown-property
-          ,
-          allowFullScreen: true
-        })
-      }) : '']
-    });
-  } else {
-    return (0, _jsxRuntime.jsx)("div", {});
-  }
-}
-VideoSearchResultYouTube.propTypes = {
-  video: _shapes.YouTubeShape.isRequired,
-  onVideoPreview: _propTypes.default.func.isRequired,
-  selectedVideo: _shapes.YouTubeShape,
-  onSelectVideo: _propTypes.default.func.isRequired,
-  locale: _propTypes.default.string.isRequired,
-  translations: _propTypes.default.shape({
-    addVideo: _propTypes.default.string.isRequired,
-    previewVideo: _propTypes.default.string.isRequired,
-    publishedDate: _propTypes.default.string.isRequired
-  })
-};

package/lib/VideoTabs.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
-var _tabs = _interopRequireDefault(require("@ndla/tabs"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const VideoTabs = _ref => {
-  let {
-    onSearchTypeChange,
-    tabs
-  } = _ref;
-  const [selectedTab, setSelectedTab] = (0, _react.useState)(undefined);
-  const handleOnSelect = value => {
-    setSelectedTab(value);
-    onSearchTypeChange(value);
-  };
-  return (0, _jsxRuntime.jsx)(_tabs.default, {
-    value: selectedTab,
-    onValueChange: handleOnSelect,
-    tabs: tabs
-  });
-};
-VideoTabs.propTypes = {
-  onSearchTypeChange: _propTypes.default.func.isRequired,
-  tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
-    type: _propTypes.default.string,
-    id: _propTypes.default.string,
-    content: _propTypes.default.node
-  })).isRequired
-};
-var _default = exports.default = VideoTabs;

package/lib/shapes.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.YouTubeShape = exports.LicenseShape = exports.BrightcoveShape = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const LicenseShape = exports.LicenseShape = _propTypes.default.shape({
-  short: _propTypes.default.string.isRequired,
-  title: _propTypes.default.string.isRequired,
-  userFriendlyTitle: _propTypes.default.string.isRequired,
-  description: _propTypes.default.string.isRequired,
-  rights: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
-});
-const BrightcoveShape = exports.BrightcoveShape = _propTypes.default.shape({
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  custom_fields: _propTypes.default.shape({
-    licenseinfo: _propTypes.default.string.isRequired,
-    license: _propTypes.default.string.isRequired
-  }),
-  images: _propTypes.default.shape({
-    thumbnail: _propTypes.default.shape({
-      src: _propTypes.default.string.isRequired
-    })
-  })
-});
-const YouTubeShape = exports.YouTubeShape = _propTypes.default.shape({
-  pagemap: _propTypes.default.shape({
-    videoobject: _propTypes.default.arrayOf(_propTypes.default.shape({
-      name: _propTypes.default.string.isRequired,
-      description: _propTypes.default.string.isRequired,
-      videoid: _propTypes.default.string.isRequired,
-      duration: _propTypes.default.string.isRequired,
-      thumbnailurl: _propTypes.default.string.isRequired,
-      embedurl: _propTypes.default.string.isRequired,
-      interactioncount: _propTypes.default.string.isRequired,
-      datepublished: _propTypes.default.string.isRequired
-    }))
-  })
-});

package/lib/videoHelpers.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.youTubeDurationToSeconds = exports.setYouTubeDuration = exports.setLocaleDate = exports.getLastPage = void 0;
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const getLastPage = (search, type) => {
-  if (type === 'youtube') {
-    if (search?.queries?.request?.length > 0) {
-      const request = search.queries.request[0];
-      if (request.totalResults && request.count) {
-        return Math.ceil(request.totalResults / request.count);
-      }
-      return 0;
-    }
-  }
-  return 0;
-};
-exports.getLastPage = getLastPage;
-const youTubeDurationToSeconds = duration => {
-  const match = duration.match(/PT(\d+H)?(\d+M)?(\d+S)?/);
-  const hours = parseInt(match[1], 10) || 0;
-  const minutes = parseInt(match[2], 10) || 0;
-  const seconds = parseInt(match[3], 10) || 0;
-  return hours * 3600 + minutes * 60 + seconds;
-};
-exports.youTubeDurationToSeconds = youTubeDurationToSeconds;
-const setLocaleDate = (date, locale) => {
-  const newDate = new Date(Date.parse(date));
-  const options = {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit'
-  };
-  return newDate.toLocaleDateString(locale, options);
-};
-exports.setLocaleDate = setLocaleDate;
-const setYouTubeDuration = duration => {
-  const seconds = youTubeDurationToSeconds(duration);
-  if (seconds > 86400) {
-    return `24h+ ${new Date(seconds * 1000).toISOString().substr(11, 8)}`;
-  }
-  return new Date(seconds * 1000).toISOString().substr(11, 8);
-};
-exports.setYouTubeDuration = setYouTubeDuration;

package/scss/video-search.scss

@@ -1,245 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-$medium-viewport: '(max-width: 800px)';
-$small-viewport: '(max-width: 600px)';
-
-.c-video-search {
-  padding: 1rem;
-  border: 1px solid $brand-color--lighter;
-  border-radius: 0.2rem;
-  &__form-query {
-    width: 88%;
-    height: 3rem;
-    margin-top: 0;
-    margin-bottom: 0;
-    box-shadow: none;
-    border-width: 2px;
-    float: left;
-    border-radius: 5px 0 0 5px;
-  }
-
-  &__border {
-    margin: 1em -2em;
-    height: 1px;
-    border-bottom: 1px solid $brand-color--lighter;
-  }
-
-  &__form {
-    width: 100%;
-    padding-left: 0;
-    padding-right: 0;
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid #eaeaea;
-  }
-
-  &__form-button {
-    width: 12%;
-    height: 3rem;
-    display: inline-block;
-    margin-left: -2px;
-    border-radius: 0 5px 5px 0;
-    padding: 0.4em;
-
-    &:hover {
-      transform: none;
-    }
-  }
-
-  &__search-form .search-form_btn--gray .icon {
-    font-size: 1.5em;
-  }
-
-  &__list-item {
-    width: 100%;
-    margin-bottom: 3rem;
-  }
-
-  &__list-item:first-child {
-    margin-top: 1rem;
-  }
-
-  &__list-item {
-    &--active {
-      height: inherit;
-    }
-  }
-
-  &__list {
-    display: flex;
-    align-items: stretch;
-    flex-flow: row wrap;
-    position: relative;
-  }
-
-  &__list-inner {
-    width: 100%;
-  }
-
-  &__list-item-inner {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &__list-item-inner img {
-    width: 30%;
-  }
-
-  &__information {
-    width: 70%;
-    display: inline-block;
-    padding-left: 2rem;
-  }
-
-  &__information > * {
-    margin-top: 0.5rem;
-  }
-
-  &__header {
-    margin-top: 0;
-    line-height: 1;
-  }
-
-  &__header > svg {
-    color: $brand-color;
-    margin-left: 0.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  &__title {
-    padding-top: 0;
-    margin: 0;
-  }
-
-  &__tags > b {
-    display: block;
-    margin-bottom: 1em;
-  }
-
-  &__tags > .tag_item {
-    color: black;
-    font-weight: 600;
-    margin-right: 0.5em;
-    margin-bottom: 0.4em;
-    display: inline-block;
-  }
-
-  &__tags > .tag_item:hover {
-    text-decoration: none;
-  }
-
-  &__button + &__button {
-    margin-left: 0.5rem;
-  }
-
-  &__load-videos {
-    width: 100%;
-    text-align: center;
-  }
-
-  &__result-spinner,
-  &__spinner {
-    border: 0.4em solid $brand-grey--light;
-    border-bottom-color: $brand-color;
-    border-radius: 50%;
-    margin: 0 auto;
-    animation: loadVideoSpinner 0.7s linear infinite;
-  }
-
-  &__result-spinner {
-    height: 3em;
-    width: 3em;
-  }
-
-  &__spinner {
-    border-color: $brand-grey;
-    border-bottom-color: $brand-color;
-    width: 2em;
-    height: 2em;
-  }
-}
-
-.c-video-preview {
-  margin-top: 1rem;
-  background-color: $brand-color--lighter;
-  padding: 1rem;
-
-  &__video {
-    border: none;
-    min-height: 300px;
-  }
-
-  &__close {
-    float: right;
-    height: 44px;
-    width: 44px;
-    margin-top: -20px;
-    margin-right: -7px;
-    color: red;
-  }
-
-  &__close svg {
-    float: right;
-    height: 15px;
-    width: 15px;
-    margin-right: 7px;
-    color: $brand-grey;
-  }
-}
-
-@media #{$medium-viewport} {
-  .c-video-search {
-    &__list-item-inner img {
-      width: 100%;
-    }
-
-    &__information {
-      width: 100%;
-      display: block;
-      padding-left: 0;
-      padding-top: 2rem;
-    }
-    &__list-item-inner {
-      flex-direction: column;
-    }
-    &__form-button {
-      width: 20%;
-    }
-    &__form-query {
-      width: 80%;
-    }
-  }
-}
-
-@media #{$small-viewport} {
-  .c-video-search {
-    &__button {
-      display: block;
-    }
-    &__button + &__button {
-      margin-left: 0;
-    }
-    &__form-button {
-      width: 30%;
-    }
-    &__form-query {
-      width: 70%;
-    }
-  }
-}
-
-@keyframes loadVideoSpinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}