esoftplay 0.0.113 → 0.0.114

package/modules/lib/scrollpicker.tsx

@@ -0,0 +1,219 @@
+
+
+import { LibComponent } from 'esoftplay';
+import React from 'react';
+import {
+  Dimensions,
+  Platform, ScrollView, StyleSheet,
+  Text,
+  View
+} from 'react-native';
+
+export interface LibScrollpickerProps {
+  itemHeight: number;
+  wrapperHeight: number;
+  selectedIndex: number;
+  style?: any;
+  highlightColor: string;
+  wrapperColor: string;
+  renderItem: (item: any, index: number, isSelected: boolean) => any;
+  onValueChange: (value: any, index: number) => void;
+  dataSource: any[];
+}
+export interface LibScrollpickerState {
+  selectedIndex: number;
+}
+
+
+const deviceWidth = Dimensions.get('window').width;
+const deviceHeight = Dimensions.get('window').height;
+
+export default class m extends LibComponent<LibScrollpickerProps, LibScrollpickerState> {
+  itemHeight = 30;
+  wrapperHeight = this.itemHeight * 5;
+  timer: any;
+  sview: any = React.createRef<ScrollView>();
+  isScrollTo = false;
+  dragStarted = false;
+  momentumStarted = false;
+
+  constructor(props: LibScrollpickerProps) {
+    super(props);
+    this.itemHeight = this.props.itemHeight || 30;
+    this.wrapperHeight = this.props.wrapperHeight || (this.props.style ? this.props.style.height : 0) || this.itemHeight * 5;
+    this.state = {
+      selectedIndex: this.props.selectedIndex || 0
+    };
+  }
+
+  componentDidMount() {
+    super.componentDidMount()
+    if (this.props.selectedIndex) {
+      setTimeout(() => {
+        this.scrollToIndex(this.props.selectedIndex);
+      }, 0);
+    }
+  }
+
+  componentWillUnmount() {
+    this.timer && clearTimeout(this.timer);
+  }
+
+  render() {
+    let { header, footer } = this._renderPlaceHolder();
+    let highlightWidth = (this.props.style ? this.props.style.width : 0) || deviceWidth;
+    let highlightColor = this.props.highlightColor || '#333';
+    let wrapperStyle: any = {
+      height: this.wrapperHeight,
+      flex: 1,
+      backgroundColor: this.props.wrapperColor || '#fafafa',
+      overflow: 'hidden',
+    };
+
+    let highlightStyle: any = {
+      position: 'absolute',
+      top: (this.wrapperHeight - this.itemHeight) / 2,
+      height: this.itemHeight,
+      width: highlightWidth,
+      borderTopColor: highlightColor,
+      borderBottomColor: highlightColor,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+    };
+
+    return (
+      <View style={wrapperStyle}>
+        <View style={highlightStyle}></View>
+        <ScrollView
+          ref={(sview) => { this.sview = sview; }}
+          bounces={false}
+          showsVerticalScrollIndicator={false}
+          onMomentumScrollBegin={this._onMomentumScrollBegin.bind(this)}
+          onMomentumScrollEnd={this._onMomentumScrollEnd.bind(this)}
+          onScrollBeginDrag={this._onScrollBeginDrag.bind(this)}
+          onScrollEndDrag={this._onScrollEndDrag.bind(this)}
+        >
+          {header}
+          {this.props.dataSource.map(this._renderItem.bind(this))}
+          {footer}
+        </ScrollView>
+      </View>
+    )
+  }
+
+  _renderPlaceHolder() {
+    let h = (this.wrapperHeight - this.itemHeight) / 2;
+    let header = <View style={{ height: h, flex: 1, }}></View>;
+    let footer = <View style={{ height: h, flex: 1, }}></View>;
+    return { header, footer };
+  }
+
+  _renderItem(data: any, index: number) {
+    let isSelected = index === this.state.selectedIndex;
+    let item = <Text style={isSelected ? [styles.itemText, styles.itemTextSelected] : styles.itemText}>{data}</Text>;
+
+    if (this.props.renderItem) {
+      item = this.props.renderItem(data, index, isSelected);
+    }
+
+    return (
+      <View style={[styles.itemWrapper, { height: this.itemHeight }]} key={index}>
+        {item}
+      </View>
+    );
+  }
+  _scrollFix(e: any, t?: string) {
+    let y = 0;
+    let h = this.itemHeight;
+    if (e.nativeEvent.contentOffset) {
+      y = e.nativeEvent.contentOffset.y;
+    }
+    let selectedIndex = Math.round(y / h);
+    let _y = selectedIndex * h;
+    if (_y !== y) {
+      // using scrollTo in ios, onMomentumScrollEnd will be invoked 
+      if (Platform.OS === 'ios') {
+        this.isScrollTo = true;
+      }
+      this.sview.scrollTo({ y: _y });
+    }
+    if (this.state.selectedIndex === selectedIndex) {
+      return;
+    }
+    // onValueChange
+    if (this.props.onValueChange) {
+      let selectedValue = this.props.dataSource[selectedIndex];
+      this.setState({
+        selectedIndex: selectedIndex,
+      });
+      this.props.onValueChange(selectedValue, selectedIndex);
+    }
+  }
+  _onScrollBeginDrag() {
+    this.dragStarted = true;
+    if (Platform.OS === 'ios') {
+      this.isScrollTo = false;
+    }
+    this.timer && clearTimeout(this.timer);
+  }
+  _onScrollEndDrag(e: any) {
+    this.dragStarted = false;
+    // if not used, event will be garbaged
+    let _e = {
+      nativeEvent: {
+        contentOffset: {
+          y: e.nativeEvent.contentOffset.y,
+        },
+      },
+    };
+    this.timer && clearTimeout(this.timer);
+    this.timer = setTimeout(
+      () => {
+        if (!this.momentumStarted && !this.dragStarted) {
+          this._scrollFix(_e, 'timeout');
+        }
+      },
+      10
+    );
+  }
+  _onMomentumScrollBegin(e: any) {
+    this.momentumStarted = true;
+    this.timer && clearTimeout(this.timer);
+  }
+  _onMomentumScrollEnd(e: any) {
+    this.momentumStarted = false;
+    if (!this.isScrollTo && !this.momentumStarted && !this.dragStarted) {
+      this._scrollFix(e);
+    }
+  }
+
+  scrollToIndex(ind: number) {
+    this.setState({
+      selectedIndex: ind,
+    });
+    let y = this.itemHeight * ind;
+    this.sview.scrollTo({ y: y });
+  }
+
+  getSelected() {
+    let selectedIndex = this.state.selectedIndex;
+    let selectedValue = this.props.dataSource[selectedIndex];
+    return selectedValue;
+  }
+}
+
+
+
+let styles = StyleSheet.create({
+  itemWrapper: {
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  itemText: {
+    color: '#999',
+  },
+  itemTextSelected: {
+    color: '#333',
+  },
+});

package/modules/lib/timepicker.tsx

@@ -1,11 +1,10 @@
 // withHooks 
 // noPage
 
-import { LibStyle, useSafeState } from 'esoftplay';
+import { LibScrollpicker, LibStyle, useSafeState } from 'esoftplay';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useRef } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
-import ScrollPicker from 'react-native-picker-scrollview';
 
 export interface LibTimepickerProps {
   /* hh:mm:ss */
@@ -54,7 +53,7 @@ export default function m(props: LibTimepickerProps): any {
       } else if (minTime && selectedTime < minTime) {
         toTime = minTime;
       }
-      if (toTime != null){
+      if (toTime != null) {
         scrollTo(toTime);
         setSelectedTime(toTime);
       }
@@ -79,7 +78,7 @@ export default function m(props: LibTimepickerProps): any {
       <View style={{ width: 180, flex: 1, height: 175, alignSelf: 'center' }} >
         <View style={{ height: 175, flexDirection: 'row', alignItems: 'center' }} >
           <View style={{ width: showHour ? undefined : 0, flex: showHour ? 1 : 0, }} >
-            <ScrollPicker
+            <LibScrollpicker
               ref={refHour}
               dataSource={time.hours}
               selectedIndex={time.hours.indexOf(sHour)}
@@ -93,7 +92,7 @@ export default function m(props: LibTimepickerProps): any {
           </View>
           <Text style={{ width: showHourMinute ? undefined : 0, fontSize: 30, marginBottom: 5 }} >:</Text>
           <View style={{ width: showHourMinute ? undefined : 0, flex: showHourMinute ? 1 : 0 }} >
-            <ScrollPicker
+            <LibScrollpicker
               ref={refMinute}
               dataSource={time.minutes}
               selectedIndex={time.minutes.indexOf(sMinute)}
@@ -107,7 +106,7 @@ export default function m(props: LibTimepickerProps): any {
           </View>
           <Text style={{ width: showHourMinuteSecond ? undefined : 0, fontSize: 30, marginBottom: 5 }} >:</Text>
           <View style={{ width: showHourMinuteSecond ? undefined : 0, flex: showHourMinuteSecond ? 1 : 0, }} >
-            <ScrollPicker
+            <LibScrollpicker
               ref={refSecond}
               dataSource={time.seconds}
               selectedIndex={time.seconds.indexOf(sSecond)}

package/modules/{content → lib}/video.tsx

@@ -6,14 +6,14 @@ import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
-export interface ContentVideoArgs {
+export interface LibVideoArgs {
 
 }
-export interface ContentVideoProps {
+export interface LibVideoProps {
   code: string,
   style?: any
 }
-export default function m(props: ContentVideoProps): any {
+export default function m(props: LibVideoProps): any {
   const code = props.code
 
   if (!code) {

package/modules/lib/worker.tsx

@@ -48,7 +48,7 @@ export default class m extends Component<LibWorkerProps, LibWorkerState> {
               return `"` + param + `"`
             return param
           })
-          return (`window.ReactNativeWebView.postMessage(JSON.stringify({ data: ` + name + `(` + _params.join(", ") + `), id: ` + id + ` }))`)
+          return (`window.ReactNativeWebView.postMessage(JSON.stringify({ data: ` + name + `(` + _params.join(", ") + `), id: ` + id + ` }));true;`)
         }
         , '', res)
     }
@@ -73,7 +73,7 @@ export default class m extends Component<LibWorkerProps, LibWorkerState> {
               return `"` + param + `"`
             return param
           })
-          return (`(async () => window.ReactNativeWebView.postMessage(JSON.stringify({ data: await ` + name + `(` + _params.join(", ") + `), id: ` + id + ` })))()`)
+          return (`(async () => window.ReactNativeWebView.postMessage(JSON.stringify({ data: await ` + name + `(` + _params.join(", ") + `), id: ` + id + ` })))();true;`)
         }
         , '', res)
     }
@@ -102,7 +102,7 @@ export default class m extends Component<LibWorkerProps, LibWorkerState> {
             return `"` + param + `"`
           return param
         })
-        return (`(async () => window.ReactNativeWebView.postMessage(JSON.stringify({ data: await ` + nameFunction + `(` + _params.join(", ") + `), id: ` + id + ` })))()`)
+        return (`(async () => window.ReactNativeWebView.postMessage(JSON.stringify({ data: await ` + nameFunction + `(` + _params.join(", ") + `), id: ` + id + ` })))();true;`)
       }
       , '', res)
   }
@@ -122,7 +122,7 @@ export default class m extends Component<LibWorkerProps, LibWorkerState> {
           return param
         })
 
-        const out = nameFunction + `\nwindow.ReactNativeWebView.postMessage(JSON.stringify({ data: tempFunction` + `(` + _params.join(",") + `), id: ` + id + ` }))`
+        const out = nameFunction + `\nwindow.ReactNativeWebView.postMessage(JSON.stringify({ data: tempFunction` + `(` + _params.join(",") + `), id: ` + id + ` }));true;`
         return out
       }
       , '', res)

package/modules/lib/workloop.tsx

@@ -49,6 +49,7 @@ export default (() => {
           }
           next()
         }
+        true;
         `)
       }
     }

package/modules/lib/workview.tsx

@@ -23,7 +23,7 @@ export default function m(props: LibWorkviewProps): any {
         ref={_global.LibWorkerBase}
         style={{ width: 0, height: 0 }}
         javaScriptEnabled={true}
-        injectedJavaScript={`\nwindow.ReactNativeWebView.postMessage("BaseWorkerIsReady")\n` + _global.injectedJavaScripts.join('\n') + '\n'}
+        injectedJavaScript={`\nwindow.ReactNativeWebView.postMessage("BaseWorkerIsReady")\n` + _global.injectedJavaScripts.join('\n') + '\ntrue;'}
         originWhitelist={["*"]}
         source={{ uri: esp.config("protocol") + "://" + esp.config("domain") + esp.config("uri") + "dummyPageToBypassCORS" }}
         onMessage={LibWorker.onMessage('BaseWorkerIsReady')}

package/modules/main/index.tsx

@@ -0,0 +1,19 @@
+// withHooks
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface MainIndexArgs {
+
+}
+export interface MainIndexProps {
+
+}
+export default function m(props: MainIndexProps): any {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
+      <Text>{"Hellow Esoftplay developer, jangan lupa bismillah dulu. (-̀ᴗ-́)و ̑̑"}</Text>
+    </View>
+  )
+}

package/modules/use/curl.ts

@@ -16,7 +16,7 @@ export default function m(initialWithLoading?: boolean, withProgressText?: strin
     }, (msg) => {
       LibProgress.hide()
       setLoading(false)
-      setError(msg.msg)
+      setError(msg.message)
     }, debug)
   }
   return [curl, loading, error]

package/modules/user/class.ts

@@ -111,7 +111,7 @@ export default class eclass {
                 AsyncStorage.setItem("token", String(token))
                 resolve(res)
               }, (msg) => {
-                resolve(msg.msg)
+                resolve(msg.message)
               })
           })
         }

package/modules/user/index.tsx

@@ -3,7 +3,7 @@
 
 import { esp, LibDialog, LibImage, LibNet_status, LibProgress, LibStyle, LibToast, LibUpdaterProperty, LibVersion, LibWorker, LibWorkloop, LibWorkview, UseDeeplink, UserClass, UserLoading, UserMain, UserRoutes, useSafeState, _global } from 'esoftplay';
 import * as Font from "expo-font";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";
 import { View } from "react-native";
 import Navs from "../../cache/navs";
 
@@ -30,9 +30,11 @@ function setFonts(): Promise<void> {
 }
 
 
+
 export default function m(props: UserIndexProps): any {
   const [loading, setLoading] = useSafeState(true)
   const user = UserClass.state().useSelector(s => s)
+  const ready = React.useRef(0)
   UseDeeplink()
   //@ts-ignore
   const initialState = __DEV__ ? _global.nav__state : undefined
@@ -45,10 +47,25 @@ export default function m(props: UserIndexProps): any {
     UserRoutes.set(currentState)
   }
 
-  useMemo(() => {
+  useEffect(() => {
     // const timeout = setTimeout(() => {
     //   setLoading(false)
     // }, 15 * 1000);
+    (async () => {
+      await setFonts()
+      ready.current += 1
+      if (ready.current >= 2) {
+        setLoading(false)
+      }
+    })()
+    
+    UserClass.isLogin(async () => {
+      ready.current += 1
+      if (ready.current >= 2) {
+        setLoading(false)
+      }
+      LibUpdaterProperty.check((isNew) => { })
+    })
     if (esp.config('firebase').hasOwnProperty('apiKey')) {
       try {
         const chatFirebase = require('../chatting/firebase')?.default
@@ -58,12 +75,6 @@ export default function m(props: UserIndexProps): any {
 
       }
     }
-    UserClass.isLogin(async () => {
-      await setFonts()
-      LibUpdaterProperty.check((isNew) => { })
-      // clearTimeout(timeout)
-      setLoading(false)
-    })
   }, [])
 
   useEffect(() => {

package/modules/user/login.tsx

@@ -90,7 +90,7 @@ export default class euserLogin extends LibComponent<UserLoginProps, UserLoginSt
         },
         (msg) => {
           // console.log("gagal => " + msg, email)
-          this.onFailedLogin(msg.msg)
+          this.onFailedLogin(msg.message)
           this.setState({ isLoading: false, email: "" })
         }, 1
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay",
-  "version": "0.0.113",
+  "version": "0.0.114",
   "description": "embedding data from esoftplay framework (web based) into mobile app",
   "main": "cache/index.js",
   "types": "../../index.d.ts",

package/modules/content/audio.tsx

@@ -1,126 +0,0 @@
-// noPage
-
-import { LibComponent } from "esoftplay";
-import { Audio } from "expo-av";
-
-export interface ContentAudioProps {
-  code: string,
-  onStatusChange: (status: any) => void
-}
-
-export interface ContentAudioState {
-  playbackInstanceName: string,
-  muted: boolean,
-  playbackInstancePosition: any,
-  playbackInstanceDuration: any,
-  shouldPlay: boolean,
-  isPlaying: boolean,
-  isBuffering: boolean,
-  isLoading: boolean,
-  volume: number,
-}
-
-// create a component
-class eaudio extends LibComponent<ContentAudioProps, ContentAudioState> {
-  playbackInstance: any
-  state: ContentAudioState;
-  props: ContentAudioProps;
-  constructor(props: ContentAudioProps) {
-    super(props)
-    this.props = props;
-    this.playbackInstance = null;
-    this.state = {
-      playbackInstanceName: "loading...",
-      muted: false,
-      playbackInstancePosition: null,
-      playbackInstanceDuration: null,
-      shouldPlay: false,
-      isPlaying: false,
-      isBuffering: false,
-      isLoading: true,
-      volume: 1.0,
-    };
-    this._onPlaybackStatusUpdate = this._onPlaybackStatusUpdate.bind(this)
-    this._loadNewPlaybackInstance = this._loadNewPlaybackInstance.bind(this)
-    this._onPlayPausePressed = this._onPlayPausePressed.bind(this)
-  }
-
-  componentDidMount(): void {
-    super.componentDidMount();
-    Audio.setAudioModeAsync({
-      allowsRecordingIOS: false,
-      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
-      playsInSilentModeIOS: true,
-      shouldDuckAndroid: true,
-      staysActiveInBackground: false,
-      interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
-      playThroughEarpieceAndroid: false
-    });
-    this._loadNewPlaybackInstance(false);
-  }
-
-  componentWillUnmount(): void {
-    super.componentWillUnmount();
-    (async () => {
-      if (this.playbackInstance != null) {
-        await this.playbackInstance.unloadAsync();
-        this.playbackInstance.setOnPlaybackStatusUpdate(null);
-        this.playbackInstance = null;
-      }
-    })()
-  }
-
-  async _loadNewPlaybackInstance(playing: boolean): Promise<void> {
-    if (this.playbackInstance != null) {
-      await this.playbackInstance.unloadAsync();
-      this.playbackInstance.setOnPlaybackStatusUpdate(null);
-      this.playbackInstance = null;
-    }
-
-    const source = { uri: "https://api.soundcloud.com/tracks/" + this.props.code + "/stream?client_id=4a584e57dbc1c522b0ccdb68464f6ec3" };
-    const initialStatus = {
-      shouldPlay: playing,
-      volume: this.state.volume,
-      isMuted: this.state.muted,
-    };
-    const { sound, status } = await Audio.Sound.createAsync(
-      source,
-      initialStatus,
-      this._onPlaybackStatusUpdate
-    );
-    this.playbackInstance = sound;
-  }
-
-  _onPlaybackStatusUpdate(status: any): void {
-    if (status.isLoaded) {
-      this.setState({
-        playbackInstancePosition: status.positionMillis,
-        playbackInstanceDuration: status.durationMillis,
-        shouldPlay: status.shouldPlay,
-        isPlaying: status.isPlaying,
-        isBuffering: status.isBuffering,
-        muted: status.isMuted,
-        volume: status.volume,
-      }, () => this.props.onStatusChange(this.state.isPlaying));
-    } else {
-      if (status.error) {
-      }
-    }
-  };
-
-  _onPlayPausePressed(): void {
-    if (this.playbackInstance != null) {
-      if (this.state.isPlaying) {
-        this.playbackInstance.pauseAsync()
-      } else {
-        this.playbackInstance.playAsync()
-      }
-    }
-  }
-
-  render(): any {
-    return null
-  }
-}
-
-export default eaudio;

package/modules/content/bookmark.tsx

@@ -1,81 +0,0 @@
-// withHooks
-
-import { ContentHeader, ContentItem, LibIcon, LibList, LibStyle, useGlobalReturn, useGlobalState } from 'esoftplay';
-import React from 'react';
-import { Text, View } from 'react-native';
-
-
-export interface ContentBookmarkArgs {
-
-}
-export interface ContentBookmarkProps {
-
-}
-
-export interface ContentBookmarkData {
-  id: string,
-  title: string,
-  intro: string,
-  description: string,
-  image: string,
-  created: string,
-  updated: string,
-  url: string,
-  publish: string,
-  type_id: string,
-  created_by: string,
-  created_by_alias: string,
-  modified_by: string,
-  revised: string,
-  hits: string,
-  rating: string,
-  last_hits: string,
-  is_popimage: string,
-  is_front: string,
-  is_config: string,
-  config: string,
-}
-export interface ContentBookmarkType {
-  ids: number[],
-  data: ContentBookmarkData[]
-}
-
-
-const _state = useGlobalState<ContentBookmarkType>({ data: [], ids: [] }, { persistKey: 'content_bookmark_data' })
-
-export function toggle(row: ContentBookmarkData) {
-  let { data, ids } = _state.get()
-  const idx = ids.indexOf(Number(row.id))
-  if (idx < 0) {
-    data.unshift(row)
-    ids.unshift(Number(row.id))
-  } else {
-    data.splice(idx, 1)
-    ids.splice(idx, 1)
-  }
-  _state.set({ data, ids })
-}
-
-export function state(): useGlobalReturn<ContentBookmarkType> {
-  return _state
-}
-
-export default function m(props: ContentBookmarkProps): any {
-  const data = _state.useSelector(s => s.data)
-  return (
-    <View style={{ flex: 1 }} >
-      <ContentHeader title="Artikel tersimpan" searchButton />
-      <LibList
-        data={data}
-        ListEmptyComponent={
-          <View style={{ height: LibStyle.height - 100, justifyContent: 'center', alignItems: 'center', marginHorizontal: 24 }} >
-            <LibIcon name='bookmark-plus-outline' color={"#FD5593"} size={40} />
-            <Text style={{  fontSize: 34, marginTop: 10, fontWeight: "500", lineHeight: 40, textAlign: "center", color: "#060606" }} >Artikel belum ada</Text>
-            <Text style={{  fontSize: 16, marginTop: 10, lineHeight: 22, textAlign: "center", color: "#686868" }} >Kamu dapat menyimpan artikel untuk dibaca nanti dengan cara klik lambang bookmark</Text>
-          </View>
-        }
-        renderItem={(item) => <ContentItem {...item} />}
-      />
-    </View>
-  )
-}