be-components 4.3.2 → 4.3.4

package/lib/commonjs/SocialComponents/PodcastModule/index.js

@@ -7,17 +7,19 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _api = require("./api");
-var _colors = _interopRequireDefault(require("../../constants/colors"));
 var _api2 = require("../api");
-var _styles = require("../../constants/styles");
 var _Components = require("../../Components");
 var _PodcastEpisodeCard = _interopRequireDefault(require("../PodcastEpisodeCard"));
 var _momentMini = _interopRequireDefault(require("moment-mini"));
 var _PlayerCard = _interopRequireDefault(require("../PlayerCard"));
 var _ClaimPodcastModal = _interopRequireDefault(require("./components/ClaimPodcastModal"));
+var _Themed = require("../../Components/Themed");
+var _useColors = require("../../constants/useColors");
+var _Pagination = _interopRequireDefault(require("../../Components/Pagination"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const sections = ['header', 'players', 'episodes'];
 const PodcastModule = ({
   podcast_id,
   player_id,
@@ -28,6 +30,7 @@ const PodcastModule = ({
   onSharePodcast,
   onSelectPlayer
 }) => {
+  const Colors = (0, _useColors.useColors)();
   const [module_size, setModuleSize] = (0, _react.useState)({
     height: 700,
     width: 330
@@ -109,7 +112,8 @@ const PodcastModule = ({
     });
   };
   const renderPlayers = data => {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+      float: true,
       style: {
         padding: 4
       }
@@ -125,7 +129,12 @@ const PodcastModule = ({
   const renderEpsidoes = data => {
     const ep_width = (module_size.width - 60) / 2;
     const ppe = player_podcast_episodes.find(pp => pp.podcast_episode_id == data.item.podcast_episode_id);
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_PodcastEpisodeCard.default, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+      float: true,
+      style: {
+        margin: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_PodcastEpisodeCard.default, {
       podcast_episode: data.item,
       player_podcast_episode: ppe,
       width: ep_width,
@@ -133,34 +142,318 @@ const PodcastModule = ({
       onSelectEpisode: onSelectEpisode
     }));
   };
-  if (!podcast || loading) {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: {
-        flex: 1
-      }
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-      style: {
-        padding: 20,
-        alignSelf: 'center'
-      },
-      size: "large",
-      color: _colors.default.brand.midnight
-    }));
-  }
   let height = module_size.height * 0.5;
   let width = module_size.width;
-  let description = `${podcast.description.slice(0, 200)}...`;
-  if (podcast.description_override) {
-    description = `${podcast.description.slice(0, 200)}...`;
-  }
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  const renderSections = data => {
+    switch (data.item) {
+      case 'header':
+        if (!podcast) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        let description = `${podcast.description.slice(0, 200)}...`;
+        if (podcast.description_override) {
+          description = `${podcast.description.slice(0, 200)}...`;
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          nativeID: "podcast_header"
+        }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+          source: {
+            uri: _api2.SocialPodcastHelpers.getPodcastImage(podcast)
+          },
+          style: {
+            width,
+            height
+          },
+          resizeMode: "cover"
+        }), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "blur",
+          style: {
+            padding: 20,
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          type: "success",
+          onPress: () => {
+            let episode = podcast_episodes.sort((a, b) => (0, _momentMini.default)(b.publish_date).unix() - (0, _momentMini.default)(a.publish_date).unix())[0];
+            if (!episode) {
+              return alert('Unable to process');
+            }
+            onSelectEpisode(episode);
+          },
+          disabled: podcast_episodes.length == 0 ? true : false,
+          style: {
+            padding: 10,
+            borderRadius: 8,
+            width: module_size.width * 0.7,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.PlayIcon, {
+          size: 20,
+          color: Colors.text.action
+        }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 15
+          },
+          weight: "bold",
+          color: Colors.text.h1
+        }, "Play Episode")), podcast.claim_status ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          type: "success",
+          style: {
+            padding: 10,
+            marginTop: 5,
+            borderRadius: 8,
+            width: module_size.width * 0.7,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: 'center'
+          },
+          onPress: () => setShowClaim(true)
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.HeadphoneIcon, {
+          size: 20,
+          color: Colors.text.h1
+        }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 15
+          },
+          weight: "bold",
+          color: Colors.text.h1
+        }, "Claim This Podcast!")) : podcast.claim_status == 'requested' && player?.role != 'admin' ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            padding: 10,
+            marginTop: 5,
+            borderRadius: 8,
+            width: module_size.width * 0.7,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.HeadphoneIcon, {
+          size: 20,
+          color: Colors.text.h1
+        }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 15
+          },
+          weight: "bold",
+          color: Colors.text.h1
+        }, "Claim Requested!")) : podcast.claim_status == 'requested' && player?.role == 'admin' ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          type: "success",
+          style: {
+            padding: 10,
+            marginTop: 5,
+            borderRadius: 8,
+            width: module_size.width * 0.7,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: 'center'
+          },
+          onPress: () => approveClaim()
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.HeadphoneIcon, {
+          size: 20,
+          color: Colors.text.h1
+        }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 15
+          },
+          weight: "bold",
+          color: Colors.text.h1
+        }, "Approve Claim Request!")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            marginTop: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          size: 24,
+          weight: "bold",
+          color: Colors.text.h1
+        }, podcast.title), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 4
+          },
+          color: Colors.text.h1,
+          weight: "semibold"
+        }, description)), podcast.claim_status == 'claimed' ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            position: 'absolute',
+            top: 20,
+            left: 5,
+            height: 40,
+            width: 40,
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.CheckCirlceIcon, {
+          size: 30,
+          color: Colors.text.success
+        })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), podcast.claim_status == 'claimed' && claimed_player ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          transparent: true,
+          float: true,
+          style: {
+            position: 'absolute',
+            padding: 0,
+            top: 20,
+            right: 5,
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          onPress: () => onSelectPlayer ? onSelectPlayer(claimed_player) : console.log('')
+        }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+          source: {
+            uri: claimed_player.profile_pic && claimed_player.profile_pic != '' ? claimed_player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp'
+          },
+          style: {
+            height: 40,
+            width: 40,
+            borderRadius: 100
+          },
+          resizeMode: "cover"
+        })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            position: 'absolute',
+            top: padding_insets?.top ?? 0,
+            left: 0,
+            right: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, onBack ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          float: true,
+          style: {
+            height: 50,
+            width: 50,
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          onPress: () => onBack()
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
+          direction: "left",
+          color: Colors.text.action,
+          size: 14
+        })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            flex: 1
+          }
+        }), onSharePodcast ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          float: true,
+          style: {
+            height: 50,
+            width: 50,
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          onPress: () => onSharePodcast(podcast)
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ShareIcon, {
+          color: Colors.text.action,
+          size: 14
+        })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)));
+      case 'players':
+        if (players.length == 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Podcasters"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Below are the players that put this podcast on! Check out their profiles"))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          key: "podcastors",
+          data: players,
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          renderItem: renderPlayers,
+          keyExtractor: item => item.player_id.toString()
+        })));
+      case 'episodes':
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Episodes"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Select an episode below to listed to it!"))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true
+        }, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+          offset: episodes_offset,
+          onNext: () => getEpisdoesFromServer(podcast_id, episodes_offset + 1),
+          onPrevious: () => getEpisdoesFromServer(podcast_id, episodes_offset - 1)
+        }), episodes_loading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
+          style: {
+            padding: 20,
+            alignSelf: 'center'
+          },
+          size: "large",
+          color: Colors.text.h1
+        }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+          }
+        }, podcast_episodes.sort((a, b) => (0, _momentMini.default)(b.publish_date).unix() - (0, _momentMini.default)(a.publish_date).unix()).map((e, i) => {
+          return renderEpsidoes({
+            item: e,
+            index: i
+          });
+        }))));
+      default:
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
-      flex: 1,
-      backgroundColor: _colors.default.shades.white
+      flex: 1
     },
     onLayout: ev => {
       const {
@@ -172,321 +465,36 @@ const PodcastModule = ({
         height
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    nativeID: "podcast_header"
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-    source: {
-      uri: _api2.SocialPodcastHelpers.getPodcastImage(podcast)
-    },
-    style: {
-      width,
-      height
-    },
-    resizeMode: "cover"
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      padding: 20,
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      ...style.blur
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    onPress: () => {
-      let episode = podcast_episodes.sort((a, b) => (0, _momentMini.default)(b.publish_date).unix() - (0, _momentMini.default)(a.publish_date).unix())[0];
-      if (!episode) {
-        return alert('Unable to process');
-      }
-      onSelectEpisode(episode);
-    },
-    disabled: podcast_episodes.length == 0 ? true : false,
-    style: {
-      padding: 10,
-      borderRadius: 8,
-      width: module_size.width * 0.7,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'center',
-      backgroundColor: _colors.default.shades.white,
-      ..._styles.view_styles.float
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.PlayIcon, {
-    size: 20,
-    color: _colors.default.brand.electric
-  }), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginLeft: 15
-    },
-    weight: "bold",
-    color: _colors.default.brand.electric
-  }, "Play Episode")), !podcast.claim_status ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      padding: 10,
-      marginTop: 5,
-      borderRadius: 8,
-      width: module_size.width * 0.7,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'center',
-      backgroundColor: _colors.default.utility.success,
-      ..._styles.view_styles.float
-    },
-    onPress: () => setShowClaim(true)
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.HeadphoneIcon, {
-    size: 20,
-    color: _colors.default.shades.white
-  }), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginLeft: 15
-    },
-    weight: "bold",
-    color: _colors.default.shades.white
-  }, "Claim This Podcast!")) : podcast.claim_status == 'requested' && player?.role != 'admin' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      padding: 10,
-      marginTop: 5,
-      borderRadius: 8,
-      width: module_size.width * 0.7,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'center',
-      backgroundColor: _colors.default.brand.midnight,
-      ..._styles.view_styles.float
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.HeadphoneIcon, {
-    size: 20,
-    color: _colors.default.shades.white
-  }), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginLeft: 15
-    },
-    weight: "bold",
-    color: _colors.default.shades.white
-  }, "Claim Requested!")) : podcast.claim_status == 'requested' && player?.role == 'admin' ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      padding: 10,
-      marginTop: 5,
-      borderRadius: 8,
-      width: module_size.width * 0.7,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'center',
-      backgroundColor: _colors.default.utility.success,
-      ..._styles.view_styles.float
-    },
-    onPress: () => approveClaim()
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.HeadphoneIcon, {
-    size: 20,
-    color: _colors.default.shades.white
-  }), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginLeft: 15
-    },
-    weight: "bold",
-    color: _colors.default.shades.white
-  }, "Approve Claim Request!")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      marginTop: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    size: 24,
-    weight: "bold",
-    color: _colors.default.shades.white
-  }, podcast.title), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginTop: 4
-    },
-    color: _colors.default.shades.white,
-    weight: "semibold"
-  }, description)), podcast.claim_status == 'claimed' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      position: 'absolute',
-      top: 20,
-      left: 5,
-      height: 40,
-      width: 40,
-      borderRadius: 100,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.CheckCirlceIcon, {
-    size: 30,
-    color: _colors.default.utility.success
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), podcast.claim_status == 'claimed' && claimed_player ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      position: 'absolute',
-      top: 20,
-      right: 5,
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    onPress: () => onSelectPlayer ? onSelectPlayer(claimed_player) : console.log('')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-    source: {
-      uri: claimed_player.profile_pic && claimed_player.profile_pic != '' ? claimed_player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp'
-    },
-    style: {
-      height: 40,
-      width: 40,
-      borderRadius: 100
-    },
-    resizeMode: "cover"
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), players.length > 0 ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_header
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header"
-  }, "Podcasters"), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body_2"
-  }, "Below are the players that put this podcast on! Check out their profiles"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_body,
-      padding: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
-    key: "podcastors",
-    data: players,
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    renderItem: renderPlayers,
-    keyExtractor: item => item.player_id.toString()
-  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_header
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header"
-  }, "Episodes"), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body_2"
-  }, "Select an episode below to listed to it!"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_body,
-      padding: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, episodes_offset > 0 ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "PREV",
-    title_color: _colors.default.brand.electric,
-    backgroundColor: "transparent",
-    onPress: () => getEpisdoesFromServer(podcast_id, episodes_offset - 1)
-  }) : /*#__PURE__*/_react.default.createElement(_reactNative.View, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "NEXT",
-    title_color: _colors.default.brand.electric,
-    backgroundColor: "transparent",
-    onPress: () => getEpisdoesFromServer(podcast_id, episodes_offset + 1)
-  })), episodes_loading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
+  }, loading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
     style: {
       padding: 20,
       alignSelf: 'center'
     },
     size: "large",
-    color: _colors.default.brand.midnight
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    }
-  }, podcast_episodes.sort((a, b) => (0, _momentMini.default)(b.publish_date).unix() - (0, _momentMini.default)(a.publish_date).unix()).map((e, i) => {
-    return renderEpsidoes({
-      item: e,
-      index: i
-    });
-  }))))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    color: Colors.text.h1
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    data: sections,
+    refreshing: pod_data.loading,
+    onRefresh: () => getPodDataFromServer(podcast_id, 0),
+    key: 'podcast_sections',
+    keyExtractor: item => item,
+    renderItem: renderSections
+  })), show_claim && podcast ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "blur",
     style: {
       position: 'absolute',
-      top: padding_insets?.top ?? 0,
-      left: 0,
+      top: 0,
       right: 0,
-      flexDirection: 'row',
-      alignItems: 'center'
-    }
-  }, onBack ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      ..._styles.view_styles.section,
-      backgroundColor: _colors.default.shades.shade100,
-      height: 50,
-      width: 50,
-      borderRadius: 100,
+      left: 0,
+      bottom: 0,
       justifyContent: 'center',
-      alignItems: 'center'
-    },
-    onPress: () => onBack()
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
-    direction: "left",
-    color: _colors.default.brand.midnight,
-    size: 14
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
+      alignItems: 'center',
+      padding: 20
     }
-  }), onSharePodcast ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      ..._styles.view_styles.section,
-      backgroundColor: _colors.default.shades.shade100,
-      height: 50,
-      width: 50,
-      borderRadius: 100,
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    onPress: () => onSharePodcast(podcast)
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ShareIcon, {
-    color: _colors.default.brand.electric,
-    size: 14
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), show_claim ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
-      position: 'absolute',
-      flex: 1,
-      backgroundColor: _colors.default.shades.black_faded,
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      justifyContent: 'flex-end'
+      maxWidth: 500
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Spring, {
-    slide: "vertical",
-    to: 0,
-    from: 500
   }, /*#__PURE__*/_react.default.createElement(_ClaimPodcastModal.default, {
     podcast: podcast,
     width: module_size.width - 20,
@@ -501,10 +509,4 @@ const PodcastModule = ({
   }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
 };
 var _default = exports.default = PodcastModule;
-const style = {
-  blur: {
-    backdropFilter: 'blur(75px)',
-    backgroundColor: _colors.default.shades.black_faded_heavy
-  }
-};
 //# sourceMappingURL=index.js.map