@lockin90/ui-native 0.0.0-stage → 1.0.1

package/lib/module/components/VideoThumbnail.js

@@ -0,0 +1,147 @@
+"use strict";
+
+import { View, Text, Image, Pressable, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import Svg, { Path } from 'react-native-svg';
+import { colors, radii, fonts, gradients } from '@lockin90/tokens';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VideoThumbnail — a media tile with a centered glass play disc and an optional
+ * duration badge, mirroring the web `@lockin90/ui` `VideoThumbnail`. Sized by
+ * `width` + the `aspect` ratio (height = width / aspect). Renders the poster
+ * `<Image>` (cover) when `src` is given, else a violet flux-gradient placeholder.
+ * With `onPress` the tile is a `Pressable` that dims slightly while pressed.
+ */
+export function VideoThumbnail({
+  src,
+  alt,
+  duration,
+  width = 150,
+  aspect = 1.4,
+  onPress,
+  ...rest
+}) {
+  const height = Math.round(width / aspect);
+  const box = {
+    width,
+    height
+  };
+  const inner = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [src ? /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: src
+      },
+      style: styles.img,
+      resizeMode: "cover",
+      accessibilityLabel: alt
+    }) : /*#__PURE__*/_jsx(LinearGradient, {
+      colors: gradients.violet.stops,
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 1
+      },
+      style: styles.placeholder
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.play,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Svg, {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24",
+        style: styles.playGlyph,
+        children: /*#__PURE__*/_jsx(Path, {
+          d: "M9 6.5v11l9-5.5z",
+          fill: colors.text
+        })
+      })
+    }), duration ? /*#__PURE__*/_jsx(View, {
+      style: styles.durPill,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.durText,
+        children: duration
+      })
+    }) : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: alt,
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [styles.thumb, box, pressed && styles.pressed],
+      ...rest,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.thumb, box],
+    ...rest,
+    children: inner
+  });
+}
+const styles = StyleSheet.create({
+  thumb: {
+    position: 'relative',
+    borderRadius: radii.sm,
+    overflow: 'hidden',
+    backgroundColor: colors.bg1,
+    borderWidth: 1,
+    borderColor: colors.border
+  },
+  pressed: {
+    opacity: 0.85
+  },
+  img: {
+    width: '100%',
+    height: '100%'
+  },
+  placeholder: {
+    width: '100%',
+    height: '100%',
+    opacity: 0.45
+  },
+  play: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: 40,
+    height: 40,
+    marginTop: -20,
+    marginLeft: -20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 20,
+    backgroundColor: 'rgba(12,15,26,0.42)',
+    borderWidth: 1,
+    borderColor: colors.border2
+  },
+  // nudge the play glyph optically to the disc centre
+  playGlyph: {
+    marginLeft: 2
+  },
+  durPill: {
+    position: 'absolute',
+    right: 6,
+    bottom: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: radii.sm,
+    backgroundColor: 'rgba(5,6,11,0.72)',
+    borderWidth: 1,
+    borderColor: colors.border
+  },
+  durText: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    lineHeight: 14,
+    letterSpacing: 0.2,
+    color: colors.text
+  }
+});
+//# sourceMappingURL=VideoThumbnail.js.map

package/lib/module/components/VideoThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","Image","Pressable","StyleSheet","LinearGradient","Svg","Path","colors","radii","fonts","gradients","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","VideoThumbnail","src","alt","duration","width","aspect","onPress","rest","height","Math","round","box","inner","children","source","uri","style","styles","img","resizeMode","accessibilityLabel","violet","stops","start","x","y","end","placeholder","play","pointerEvents","viewBox","playGlyph","d","fill","text","durPill","durText","accessibilityRole","pressed","thumb","create","position","borderRadius","sm","overflow","backgroundColor","bg1","borderWidth","borderColor","border","opacity","top","left","marginTop","marginLeft","alignItems","justifyContent","border2","right","bottom","paddingHorizontal","paddingVertical","fontFamily","mono","fontSize","lineHeight","letterSpacing","color"],"sourceRoot":"../../../src","sources":["components/VideoThumbnail.tsx"],"mappings":"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","ignoreList":[]}