Have ideas to improve npm?Join in the discussion! »

    @pakhshkit-js/pakhshkit-js-ui

    0.65.3 • Public • Published

    PakhshKit JS UI - UI Application Framework for the PakhshKit JS Player

    Build Status code style: prettier

    PakhshKit JS UI is a UI Application Framework for composing PakhshKit JS Player UI.

    The application uses Preact to manage virtual DOM and provide a declarative way for building UI and Redux to manage a predictable state container.

    The PakhshKit JS UI framework enables an easy and intuitive way of customize the UI to any purpose and design, either by simple CSS definitions or by letting application define it's entire layout.

    The UI framework exposes a UIManager that handles the life cycle of the UI, and and a library of components which is used to build the UI layout, where each component is responsible of a specific functionality.

    Components library contains any need of the UI, but can be extended to include any additional component an application will require.

    The library also exposes its default presets, which can be used as-is™ or extended.

    PakhshKit JS UI is written in ECMAScript6, statically analysed using Flow and transpiled in ECMAScript5 using Babel.

    Table of Contents

    Getting Started

    Prerequisites

    The UI Manager expects a player that implements the PakhshKit JS Player interface.

    The UI Manager depends on Preact and Redux.

    Installing

    First, clone and run yarn to install dependencies:

    git clone https://gitlab.com/kontorol/pakhshkit-js-ui.git
    cd pakhshkit-js-ui
    yarn install
    

    Building

    Then, build the player

    yarn run build

    Embed the Player In Your Test Page

    Finally, add the bundle as a script tag in your page, and initialize the player

    <script type="text/javascript" src="/PATH/TO/FILE/pakhshkit.js"></script>
    <script type="text/javascript" src="/PATH/TO/FILE/pakhshkit-ui.js"></script>
    <div id="player-placeholder" style="height:360px;width:640px">
      <script type="text/javascript">
        var playerConfig = {...};
        var uiConfig = {targetId: "player-placeholder"};
        var player = pakhshkit.core.loadPlayer(playerConfig);
        var uiManager = new pakhshkit.ui.UIManager(player, uiConfig);
        uiManager.buildDefaultUI();
        player.play();
      </script>
    </div>

    Documentation

    Running the Tests

    Tests can be run locally via Karma, which will run on Chrome, Firefox and Safari.

    yarn run test
    

    You can test individual browsers:

    yarn run test:chrome
    yarn run test:firefox
    yarn run test:safari
    

    And Coding Style Tests

    We use ESLint recommended set with some additions for enforcing Flow types and other rules.

    See ESLint config for full configuration.

    We also use .editorconfig to maintain consistent coding styles and settings, please make sure you comply with the styling.

    Compatibility

    TBD

    Contributing

    Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

    Versioning

    We use SemVer for versioning. For the versions available, see the tags on this repository.

    License

    This project is licensed under the AGPL-3.0 License - see the LICENSE.md file for details

    Install

    npm i @pakhshkit-js/pakhshkit-js-ui

    DownloadsWeekly Downloads

    8

    Version

    0.65.3

    License

    AGPL-3.0

    Unpacked Size

    1.73 MB

    Total Files

    42

    Last publish

    Collaborators

    • avatar