Skip to content

Technical Frontend

Daniel Neto edited this page Oct 29, 2026 · 1 revision

Technical frontend and player integration

Audience: developers. Baseline reviewed: 2026-10-29.

Page and asset composition

Core pages use shared PHP views and Page helpers. Plugins add assets/markup through render hooks or page-specific includes. Inspect the actual page's head/footer and Page extra scripts/styles before assuming an installed npm dependency is loaded globally.

package.json describes dependency ranges; the lockfile describes resolved install versions. A local node_modules tree can differ from both. The default legacy UI loads the bundled Bootstrap 3 path; Bootstrap 5 exists as an optional compatibility path. Match the actual page rather than mixing markup/attributes from both versions.

Shared utilities

Need Existing integration to inspect
Async loading state modal.showPleaseWait() / modal.hidePleaseWait()
Server-response feedback avideoResponse() and avideoToast*()
Alerts/dialogs avideoAlert*(), avideoConfirm*(), iframe/modal helpers
Additional page assets The Page object's setExtraScripts() / setExtraStyles()
Image cropping getCroppie() / saveCroppieImage()
Rich text getTinyMCE() and display-side content handling
Guided workflows getTourHelpButton() / startTour()
Date/calendar/chart widgets Existing bundled library and nearest page implementation

Use the source references for exact declarations and overloads. Not every similarly named utility is a stable public interface.

Player behavior

The existing player is shared by video pages and enabled player plugins. Additional controls, advertisements, subtitles, quality selectors, previews, overlays and media-session behavior can interact. Find the hook or initialization stage that adds a feature before creating another player instance.

Check actual source URLs, MIME/content, playback state and dependent requests. A player error can originate in HLS delivery, authorization, an ad integration, unavailable subtitles or browser policy rather than the skin.

Layout compatibility

Gallery, YouPHPFlix2, FirstPageChannelList and shared Layout wrappers can render common components differently. Changes to shared navigation/cards/player/modals need the relevant homepage modes, mobile breakpoints and light/dark themes checked.

Diagnosis

Capture the failing request and console error, identify which file loaded the script, confirm actual library/runtime versions and trace the event to its server endpoint. Preserve input/output contracts and loading/error states. Browser console inspection should not expose credential-bearing request URLs in reports.

No browser UI, player/media or theme compatibility tests were run by generating the documentation.

Clone this wiki locally