Add videos to list.

Video icon added on each item.
keithluchtel · May 22, 2022 · 9a38997 · 9a38997
1 parent 084c38c
commit 9a38997
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/app/components/asset-list/recycler-asset-list/asset-items/asset-item.tsx b/app/components/asset-list/recycler-asset-list/asset-items/asset-item.tsx
@@ -1,12 +1,12 @@
 import React, { memo } from "react"
 import { StyleSheet, View, Image, NativeSyntheticEvent, ImageErrorEventData } from "react-native"
-import { useTheme } from "@rneui/themed"
+import { Icon, Text, useTheme } from "@rneui/themed"
 import { Asset } from "../../../../types"
-import { palette } from "../../../../theme/palette"
 import { Checkbox } from "../../../checkbox/checkbox"
 
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated"
 import { SharedElement } from "react-navigation-shared-element"
+import { convertDurationToTime } from "../../../../utils/helper"
 
 interface Props {
   asset: Asset
@@ -57,6 +57,11 @@ const AssetItem = (props: Props): JSX.Element => {
           />
         </SharedElement>
       </Animated.View>
+      {asset?.mediaType === "video" &&
+        <View style={styles.videoIconContainer}>
+          <Text style={styles.videoDurationText}>{convertDurationToTime(asset?.duration)}</Text>
+          <Icon name="play-circle" type="material-community" size={20} color="gray" />
+        </View>}
       {selectionMode ? <Checkbox value={selected} style={styles.checkbox} /> : null}
     </View>
   )
@@ -86,6 +91,20 @@ const styles = StyleSheet.create({
   sharedElementContainer: {
     flex: 1,
   },
+  videoIconContainer: {
+    right: 10,
+    position: "absolute",
+    top: 10,
+    zIndex: 99,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  videoDurationText: {
+    color: "gray",
+    fontSize: 10,
+    padding: 1
+  }
 })
 
 const areEqual = (prev: Props, next: Props) => {

diff --git a/app/services/asset-service.ts b/app/services/asset-service.ts
@@ -113,10 +113,12 @@ export const getAssets = async (
             first: pageSize,
             after: afterAssetId,
             sortBy: sortBy,
+            mediaType: ["photo", "video"],
           }
         : {
             first: pageSize,
             sortBy: sortBy,
+            mediaType: ["photo", "video"],
           },
     )
     return medias

diff --git a/app/utils/helper.ts b/app/utils/helper.ts
@@ -1,3 +1,11 @@
 export const translateOrigin = (center: number, d: number) => {
   return center - d / 2
 }
+export const convertDurationToTime = (duration: number): string => {
+  const h = Math.floor(duration / 3600)
+  const m = Math.floor((duration % 3600) / 60)
+  const s = Math.floor(duration % 60)
+  return h
+    ? `${h.toString().padStart(2, "0")}:`
+    : "" + `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`
+}