Mobile Content Studio

Videos, Papers,
Courses & Posts

Complete guide to the 4 remaining mobile content types — Video Blogs, Research Papers, Educational Courses, and Written Posts. Each has a listing + viewer page pair.

Content Studio-র চারটা content type-এর guide — Vlogs, Research Papers, Courses, Written Posts। প্রতিটার listing page + viewer page আছে।

Mobile Only Video Blogs Research Papers Courses Written Posts
Content Types

4 Content Types — 8 Pages

প্রতিটা content type-এ 2টা page — listing + viewer।

Video Blogs
video-gallery.html
video-viewer.html
YouTube API-powered gallery + in-app player
Research Papers
paper-listing.html
paper-viewer.html
PDF papers with abstract, citation copy, download
Educational Courses
course-listing.html
course-viewer.html
Course playlist viewer with YouTube integration
Written Posts
post-listing.html
post-reader.html
Blog posts listing with prev/next navigation
Section 1
Video Blogs

Video Blogs — Gallery + Viewer

YouTube API থেকে real-time data pull করে gallery। In-app player with gesture controls।

Page 01
Video Gallery
video-gallery.html
Page 02
Video Viewer
video-viewer.html
YouTube API Integration
youtube-api-config.js + youtube-data-fetcher.js দিয়ে real-time video data fetch। Thumbnail, title, views automatically আসে।
Category Tabs + Toolbar
Scrollable category tabs। Toolbar section with filter/sort options। Tap video card → Viewer page।
YouTube IFrame Player
Viewer page-এ YouTube IFrame API embed। আলাদা tab খোলে না — সরাসরি app-এ play।
Gesture Engine
Video viewer-এ gesture controls — swipe, tap to pause/play। Same gesture engine in course-viewer too।
Section 2
Research Papers

Research Papers — Listing + Viewer

Academic papers with filter chips, citation system, and PDF viewing।

Page 01
Paper Listing
paper-listing.html
Page 02
Paper Detail + Viewer
paper-viewer.html
Horizontal Filter Chips
Scrollable filter chips by topic/category। Standard content-studio filter pattern।
Citation Button
Paper listing card-এ Citation button — tap → citation format copy to clipboard। .citation-btn
Paper Info Grid
Viewer page-এ 2-column info grid — journal, year, authors, pages, DOI details। .paper-info-grid
PDF Download Button
Full-width download button → PDF direct download। Viewer header-এ action buttons (info, download)।
Section 3
Educational Courses

Educational Courses — Listing + Viewer

Course playlist structure with YouTube integration। Same gesture engine as video-viewer।

Page 01
Course Listing
course-listing.html
Page 02
Course Viewer
course-viewer.html
Filter Chips
Scrollable filter chips। Course category/topic filter। .filter-chips — same pattern as papers।
Playlist Navigation
Course viewer-এ playlist structure — episode list, current video indicator, next/previous episode।
YouTube IFrame (Embedded)
YouTube IFrame API — same as video-viewer। youtube-api-config.js ব্যবহার করে।
Gesture Engine
Video Gesture Engine — video-viewer-এর same gesture/touch system। Swipe, tap-to-pause, brightness adjust।
Section 4
Written Posts

Written Posts — Listing + Reader

Blog-style written content — filter chips, card listing, full post reader with prev/next navigation।

Page 01
Post Listing
post-listing.html
Page 02
Post Reader
post-reader.html
Filter Chips
Scrollable category filter — same .filter-chips pattern। Topic/category filter।
Post Cards Listing
Title, excerpt, date, category badge, read time। Back button → Content Studio Hub।
Prev / Next Navigation
Post reader-এ .nav-btn — prev/next post navigate। Disabled state when first/last post।
Header Action Buttons
Reader header-এ action buttons — share, bookmark। Sticky header with blur backdrop।
Shared Patterns

Common Patterns Across All Types

সব content type-এ একই UI pattern follow করে।

Horizontal Filter Chips
All 4 content types-এ .filter-chips horizontal scroll। Active chip highlighted red। Touch-friendly scroll।
Sticky Back-Button Header
All viewers — sticky header with back button + action buttons। backdrop-filter: blur() → glass effect।
Content Studio Hub Root
সব listing page back → ../hub.html। Hub-এ 5 content tiles — same cards-grid layout।
Bottom Navigation
All pages — 5-item bottom nav bar। Studio tab active সব content studio pages-এ।
File Map

Complete File Map

File PathContent TypeRole
content-studio/video-blogs/video-gallery.htmlVlogsYouTube API gallery — category tabs, video cards
content-studio/video-blogs/video-viewer.htmlVlogsIFrame player, gesture engine, video info
content-studio/research-papers/paper-listing.htmlPapersPapers list — filter chips, citation buttons
content-studio/research-papers/paper-detail.htmlPapersPaper detail page (intermediate)
content-studio/research-papers/paper-viewer.htmlPapersPDF viewer, info grid, download button
content-studio/educational-courses/course-listing.htmlCoursesCourse cards — filter chips, category filter
content-studio/educational-courses/course-viewer.htmlCoursesYouTube course player, playlist, gesture engine
content-studio/written-posts/post-listing.htmlPostsPost cards — filter chips, excerpts list
content-studio/written-posts/post-reader.htmlPostsFull post reader — prev/next nav, header actions