[VNXF] Story là Add-on hiển thị tin ngắn (Stories) theo phong cách Facebook và Instagram dành cho XenForo 2.3+. Cho phép biến các bài đăng, chủ đề diễn đàn chứa hình ảnh, video đính kèm và video nhúng (YouTube, TikTok, Facebook...) thành thanh trượt Story hiện đại và trình xem toàn màn hình tương tác cao.

Features / Tính năng nổi bật

• Widget Carousel phong cách Facebook (Story Carousel Widget):
• Thanh trượt thẻ Story thiết kế tối giản, loại bỏ thanh tiêu đề cồng kềnh (headerless).
• Sử dụng thư viện Swiper 11 mượt mà, hỗ trợ cuộn theo cụm thẻ tự động (slidesPerGroupAuto).
• Nút điều hướng tròn nổi (Circular Floating Navigation Buttons):
• Nằm trực tiếp trên dải thẻ, căn giữa theo chiều dọc (top: 50%).
• Tự động ẩn khi ở đầu hoặc cuối danh sách cuộn (.swiper-button-disabled).
• Hỗ trợ hoàn hảo cả giao diện Sáng (Light Mode) và Tối (Dark Mode).
• Thẻ "Tạo tin" (Create Story Card):
• Chuẩn thiết kế Facebook: Ảnh đại diện người dùng ở nửa trên, nửa dưới nền phẳng với nút tròn xanh dấu cộng + nổi bật nằm ở đường phân cách.
• Thẻ Story của thành viên:
• Ảnh đại diện có viền tròn xanh nổi bật (border: 3px solid #0064d2).
• Tên người dùng hiển thị rõ nét, hỗ trợ xuống dòng tối đa 2 dòng khi tên dài.
• Icon phân biệt video embed / video đính kèm trực quan.
• Tự động nhận diện Đa phương tiện (Rich Media Detection):
• Video Embed: Tự động nhận diện liên kết nhúng từ YouTube, TikTok, Facebook, Twitter/X, Vimeo, Instagram.
• Trích xuất ảnh bìa (Thumbnail Extraction): Tự động lấy thumbnail chất lượng cao từ video YouTube hoặc ảnh đại diện nền tảng mạng xã hội.
• Tệp đính kèm (Attachments): Hỗ trợ tệp đính kèm hình ảnh và video trực tiếp từ bài viết đầu tiên của chủ đề.
• Trình xem Story Fullscreen (Story Modal Viewer):
• Mở xem Story dạng Overlay / Popup toàn màn hình mượt mà bằng AJAX mà không cần tải lại trang.
• Tự động phát nội dung media, hỗ trợ chuyển qua lại giữa các Story kế tiếp (Next / Previous).
• Bình luận trực tiếp (Inline AJAX Comments): Cho phép thành viên đọc và gửi bình luận ngay trong khung xem Story mà không phải rời khỏi giao diện.
• Nút "Xem thêm" nội dung mô tả khi nội dung văn bản dài.
• Phân loại Diễn đàn linh hoạt (Dedicated Story Forums):
• Tách biệt hoặc kết hợp giữa diễn đàn Story Hình ảnh (vnxf_story_image_forum) và Story Video (vnxf_story_video_forum).
• Phím tắt "Tạo tin" tự động chuyển hướng người dùng đăng bài vào đúng diễn đàn Story đã được thiết lập.
• Bộ nhớ đệm thông minh (Smart Caching):
• Tích hợp bộ nhớ đệm widget với thời gian TTL tùy chỉnh (cache_minutes), giảm thiểu truy vấn cơ sở dữ liệu.
• Tự động xóa cache khi lưu hoặc cập nhật cấu hình widget.

Structure / Cấu trúc thư mục

VNXF/Story/
├── addon.json                               # Khai báo thông tin add-on & phiên bản
├── build.json                               # Cấu hình đóng gói bản phát hành
├── Pub/Controller/
│   └── StoryController.php                  # Xử lý xem Story, đăng bình luận AJAX, tạo Story
├── Repository/
│   └── StoryRepository.php                  # Logic bóc tách media, lấy thumbnail, phân quyền
├── Widget/
│   └── StoryCarousel.php                    # Widget định nghĩa thanh trượt Story Carousel
├── XF/Pub/Controller/
│   └── Thread.php                           # Mở rộng Controller Thread tích hợp Story
└── _output/templates/
    ├── admin/
    │   └── widget_def_options_vnxf_story_carousel.html  # Tùy chọn cấu hình widget trong AdminCP
    └── public/
        ├── vnxf_story.less                  # CSS giao diện trang Story và Modal xem Story
        ├── vnxf_story_view.html             # Template xem chi tiết Story
        ├── vnxf_story_comments.html         # Danh sách bình luận trong Story
        ├── vnxf_story_widget_carousel.html  # Template Widget Carousel hiển thị ngoài trang chủ
        └── vnxf_story_widget.less           # CSS giao diện thanh trượt Story Carousel

Requirements / Yêu cầu hệ thống

• XenForo: 2.3.0 trở lên.
• PHP: 8.0 trở lên (khuyên dùng PHP 8.2+).
• Trình duyệt: Hỗ trợ CSS Flexbox, Grid và JavaScript hiện đại.

Installation / Cài đặt

1. Tải thư mục mã nguồn và đặt vào cây thư mục của diễn đàn:

• Thư mục add-on: src/addons/VNXF/Story/

1. Truy cập vào trang Quản trị diễn đàn: AdminCP > Add-ons.
2. Tìm [VNXF] Story và nhấn nút Install (Cài đặt).
3. Hoặc thực hiện cài đặt qua dòng lệnh CLI: <br/> ``bash <br/> php cmd.php xf-addon:install VNXF/Story <br/> ``

Configuration / Cấu hình

1. Tùy chọn add-on (AdminCP > Setup > Options > [VNXF] Story):

• Diễn đàn Story Hình ảnh (vnxf_story_image_forum): Chọn diễn đàn chứa các bài viết dạng Story hình ảnh.
• Diễn đàn Story Video (vnxf_story_video_forum): Chọn diễn đàn chứa các bài viết dạng Story video.
• Số bình luận tối đa (vnxf_story_max_comments): Số lượng bình luận tải ban đầu khi xem Story.
• Số lượng Story mỗi trang (vnxf_story_per_page): Số lượng story hiển thị trong trang danh sách.

2. Thêm Widget Story Carousel (AdminCP > Appearance > Widgets):

• Nhấn Add widget > chọn kiểu [VNXF] Story Carousel.
• Thiết lập Widget key (ví dụ: story_carousel).
• Đặt vào vị trí mong muốn (khuyên dùng: Forum list: Above nodes hoặc Portal: Above).
• Tùy chọn số lượng Story hiển thị (Limit) và thời gian lưu bộ nhớ đệm (Cache minutes).

Permissions / Phân quyền

Truy cập AdminCP > Groups & permissions > User groups để cấu hình quyền hạn cho từng nhóm thành viên:

• vnxfStory-view: Quyền xem danh sách và xem chi tiết Story.
• vnxfStory-create: Quyền tạo Story mới (hiển thị thẻ "Tạo tin").
• vnxfStory-editOwn: Chỉnh sửa Story của chính mình.
• vnxfStory-editAny: Chỉnh sửa Story của thành viên khác.
• vnxfStory-deleteOwn: Xóa Story của chính mình.
• vnxfStory-deleteAny: Xóa Story của thành viên khác (dành cho Ban quản trị).

Changelog / Lịch sử cập nhật

1.0.0

• Phát hành phiên bản đầu tiên cho XenForo 2.3+.
• Tối ưu thanh trượt Carousel: Ẩn thanh header, nút điều hướng dạng tròn nổi chuẩn phong cách Facebook.
• Nâng cấp thẻ "Tạo tin" và thẻ thành viên hiển thị tối ưu cho cả giao diện Sáng và Tối.
• Tự động nạp CSS Swiper an toàn qua <xf:head> tránh xung đột bộ xử lý css.php.
• Tích hợp cơ chế kiểm tra và khởi tạo Swiper thông minh tương thích cơ chế tải tài nguyên không đồng bộ của XenForo 2.3.