react-motion-gallery 1.0.0 → 2.0.1

package/dist/index.d.cts

@@ -1,54 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
-
-type MediaItem = {
-    kind: 'image';
-    src: string;
-    alt?: string;
-} | {
-    kind: 'video';
-    src: string;
-    alt?: string;
-    thumb?: string;
-};
-type ThumbnailPosition = 'top' | 'right' | 'bottom' | 'left' | null;
-type FSImageRender = (args: {
-    item: {
-        kind: 'image';
-        src: string;
-        alt?: string;
-    };
-    index: number;
-    isZoomed: boolean;
-    className: string;
-    baseStyle: React.CSSProperties;
-}) => React.ReactNode;
-type PlyrSourceBuilder = (item: MediaItem, index: number) => Plyr.SourceInfo;
-type PlyrOptionsResolver = Plyr.Options | ((item: MediaItem, index: number) => Plyr.Options);
-type Props = {
-    children: ReactNode;
-    thumbnailChildren?: ReactNode;
-    items?: MediaItem[];
-    urls?: string[];
-    thumbnails?: ThumbnailPosition;
-    thumbnailWidth?: number | string;
-    thumbnailHeight?: number | string;
-    loop?: boolean;
-    freeScroll?: boolean;
-    autoPlay?: boolean;
-    autoScroll?: boolean;
-    groupCells?: boolean;
-    centerAlign?: boolean;
-    gap?: number;
-    backgroundColor?: string;
-    fsRenderImage?: FSImageRender;
-    plyrSourceBuilder?: PlyrSourceBuilder;
-    plyrOptions?: PlyrOptionsResolver;
-    responsive?: boolean;
-    containerStyle?: React.CSSProperties;
-    sliderColumnStyle?: React.CSSProperties;
-    sliderHeight?: string;
-};
-declare function Gallery({ children, thumbnailChildren, items, urls, thumbnails, thumbnailWidth, thumbnailHeight, loop, freeScroll, autoPlay, autoScroll, groupCells, centerAlign, gap, backgroundColor, fsRenderImage, plyrSourceBuilder, plyrOptions, responsive, containerStyle, sliderColumnStyle, sliderHeight }: Props): react_jsx_runtime.JSX.Element;
-
-export { type MediaItem, Gallery as default };

package/dist/index.module-DIGTXCJL.module.css

@@ -1,192 +0,0 @@
-.container {
-  overflow: hidden;
-}
-
-.right_column_container {
-  display: flex;
-}
-
-.right_column {
-  display: block;
-  position: relative;
-  width: 400px;
-  overflow: hidden
-}
-
-.right_column_image_container {
-  display: block;
-  position: absolute;
-  left: 0;
-  max-width: 400px;
-}
-
-.right_column_image {
-  display: block;
-  width: 100%;
-  object-fit: contain;
-  cursor: zoom-in;
-  user-select: none;
-}
-
-.image {
-  display: block;
-  object-fit: contain;
-  cursor: zoom-in;
-  user-select: none;
-  position: absolute;
-  left: 0;
-  height: 300px;
-  overflow: hidden;
-}
-
-.responsive_image_container {
-  display: flex;
-  position: absolute;
-  left: 0;
-  flex-direction: column;
-}
-
-.image:active {
-  cursor: grabbing;
-}
-
-.image_container {
-  position: relative;
-  display: flex;
-  
-}
-
-.responsive_image_container {
-  display: flex;
-  position: absolute;
-  left: 0;
-  flex-direction: column;
-}
-
-.responsive_image {
-  display: block;
-  width: 100%;
-  object-fit: contain;
-  cursor: zoom-in;
-  user-select: none;
-}
-
-.responsive_videoShell {
-  display: flex;
-  position: absolute;
-  left: 0;
-  flex-direction: column;
-}
-
-@media (max-width: 600px) {
-  .image,
-  .videoShell {
-    height: 50vw !important;
-  }
-}
-
-.fullscreenImages:active {
-  cursor: grabbing !important;
-}
-
-.imgMargin:active {
-  cursor: grabbing !important;
-}
-
-.videoShell {
-  position: absolute;
-  left: 0;
-  height: 300px;
-  display: inline-block;
-  user-select: none;
-  cursor: zoom-in;
-}
-
-.videoImg {
-  display: block;
-  height: 100%;
-  width: auto;
-  object-fit: contain;
-}
-
-.videoImg:active {
-  cursor: grabbing;
-}
-
-.playBadge {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30%;
-  height: 30%;
-  transform: translate(-50%, -50%);
-  opacity: 0.95;
-  pointer-events: none;
-}
-
-.loadingShell {
-  position: absolute;
-  left: 0;
-  height: 300px;
-  aspect-ratio: 16 / 9;
-  display: inline-block;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: zoom-in;
-  user-select: none;
-}
-
-.loadingFill {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    110deg,
-    rgba(0,0,0,.06) 8%,
-    rgba(0,0,0,.12) 18%,
-    rgba(0,0,0,.06) 33%
-  );
-  background-size: 200% 100%;
-  animation: thumbShimmer 1.2s linear infinite;
-}
-
-@keyframes thumbShimmer {
-  to { background-position-x: -200%; }
-}
-
-.loadingShimmer {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(100deg, #e9eef4 20%, #f6f8fb 40%, #e9eef4 60%);
-  background-size: 200% 100%;
-  animation: thumb-shine 1.1s ease-in-out infinite;
-}
-@keyframes thumb-shine {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-.loadingSpinner {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(0,0,0,.16);
-  border-top-color: rgba(0,0,0,.45);
-  border-radius: 50%;
-  animation: spin .9s linear infinite;
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-
-@media (prefers-reduced-motion: reduce) {
-  .loadingShimmer { animation: none; }
-  .loadingSpinner { animation: none; }
-}
-
-.myPlayer {
-  aspect-ratio: 16 / 9 !important;
-  height: auto !important;
-  max-width: calc(100dvh * (16 / 9)) !important;
-  margin: 0 auto !important;
-  width: 100dvw !important;
-}