HiveReactKit & HiveSuite Development Update: 3Speak Player Integration, Feed Unification & Navigation Improvements

---

HiveReactKit improves 3Speak playback while HiveSuite unifies feeds, navigation, and auth handling.

HiveReactKit — 3Speak Player Improvements

Native 3Speak Player Integration

• Added native ThreeSpeakPlayer with:
  • HLS playback support
  • CDN fallback support

• Uses json_metadata.video as the primary video source.

• Removes duplicate iframe embeds and unnecessary 3Speak links from post body content.

Fallback & Rendering Improvements

• Added fallback DOM replacement for embedded 3Speak links when needed.

• Added automatic aspect ratio detection to fix player size mismatches.

• Improved thumbnail handling:

  • Thumbnail visible only before playback
  • Added hideThumbnail option support

Feed-Specific Player Behavior

• HiveDetailPost now uses:
  • Single clean player view
  • No duplicate thumbnail rendering

• Snaps feed uses the same player while preserving thumbnails for feed browsing.

CSS & Layout Improvements

• Improved responsive player layouts.

• Added centered player alignment.

• Fixed modal overflow issues for embedded media playback.

• Outcome:
  • Cleaner 3Speak playback experience
  • Better media rendering consistency
  • Improved responsive video handling across Hive applications

Native ThreeSpeakPlayer & Responsive 3Speak Playback

Portrait Video - Native ThreeSpeakPlayer Supports in User Profile Media Pop Preview

Portrait Video - Native ThreeSpeakPlayer Supports in Post Detail Page

Landscape Video - Native ThreeSpeakPlayer Supports in User Profile Media Pop Preview

Landscape Video - Native ThreeSpeakPlayer Supports in Post Detail Page

---

HiveSuite App — Feed Unification & Sidebar Improvements

Unified Blog Feed Navigation

• feat(blogs): unify feeds under dropdown selector.
• Unified blog-related feeds under a single dropdown selector:
  • Blogs
  • My Communities
  • My Friends

• Added reusable BlogFeedSelector dropdown component.

• Dropdown automatically adapts to authentication state:

  • Logged-out users only see Blogs feed

Sidebar & Navigation Refactor

• refactor(nav): simplify sidebar + active route handling.
• Cleaned up sidebar navigation:
  • Removed standalone “My Friends”
  • Removed standalone “My Communities”

• Unified navigation structure under Blogs section.

• Improved active route handling throughout the application.

Feed View Improvements

• BlogFeedView now supports dynamic ReactNode titles.

• Updated pages to use dropdown selector directly as page title component.

• Added observer support for My Friends feed loading and updates.

• Outcome:
  • Cleaner navigation structure
  • Better scalability for future feed additions
  • Improved feed accessibility and organization

Unified Blog Feed Selector

Sidebar Navigation Improvements

---

Authentication & Route Protection Improvements

Auth Flow & Redirect Handling

• feat(auth): restrict feeds + add global logout redirect.
• Added feed access restrictions for authentication-only sections.

• Implemented centralised logout redirect handling across all protected routes.

• Users are automatically redirected to:
  • /dashboard/blogs

• Improved authentication consistency across navigation flows.

• Outcome:
  • More reliable protected route handling
  • Cleaner logout experience
  • Better navigation stability after auth state changes

Global Logout Redirect to Blogs Feed

Protected Feed Navigation - For Authenticated User - Feed Selector

---

Powering the Hive Ecosystem

• Continuously improving reusable media infrastructure and feed systems for Hive applications
• Building scalable and creator-focused user experiences for the Hive community
• Contributing towards a cleaner, more modern, and feature-rich Hive ecosystem

---

Final Note

• This post has been refined with the help of AI to improve readability and structure
• The original development updates and optimized version are both available for reference

---

More Links

HiveSuite App	Vote as Witness	Support via Discord

---

---

▶️ 3Speak