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

▶️ Watch on 3Speak

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