{"id":23904757,"url":"https://github.com/reveldigital/reveldigital-client-library","last_synced_at":"2026-04-01T19:02:26.835Z","repository":{"id":81731467,"uuid":"298328542","full_name":"RevelDigital/reveldigital-client-library","owner":"RevelDigital","description":"Angular library for developing Revel Digital gadgets","archived":false,"fork":false,"pushed_at":"2025-01-29T22:13:59.000Z","size":4806,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T02:12:51.537Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.reveldigital.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RevelDigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-24T16:02:50.000Z","updated_at":"2025-01-05T18:42:28.000Z","dependencies_parsed_at":"2024-12-26T22:30:24.315Z","dependency_job_id":null,"html_url":"https://github.com/RevelDigital/reveldigital-client-library","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"ba1e108432ca78b288ffbc0fcc400ec802569fcf"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevelDigital%2Freveldigital-client-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevelDigital%2Freveldigital-client-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevelDigital%2Freveldigital-client-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevelDigital%2Freveldigital-client-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RevelDigital","download_url":"https://codeload.github.com/RevelDigital/reveldigital-client-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248328163,"owners_count":21085261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-05T00:30:37.330Z","updated_at":"2026-02-11T22:55:31.940Z","avatar_url":"https://github.com/RevelDigital.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Revel Digital gadget library for Angular\n\nAngular library for building custom Revel Digital gadgets. This library simplies the player/gadget interface making it easier\nto build full featured gadgets utilizing the Angular framework.\n\n## Quickstart\n\n**New to Angular?** [Check out the Angular documentation](https://angular.io/guide/setup-local) for getting your environment configured for development.\n\n\n### **Step 1.** GitHub Repository Creation (Optional)\n\n**Not hosting your app on Github? Skip to step #2.**\n\nCreate a new repository on [GitHub.com](https://github.com/). For more information, see \"[Creating a new repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository).\"\n\n\nCopy your remote repository URL\n\n![Alt text](https://reveldigital.github.io/reveldigital-client-library/images/copy-remote-repository-url-quick-setup.jpg)\n\n```sh\ngit remote add origin \u003cREMOTE_URL\u003e\n# Sets the new remote\ngit remote -v\n# Verifies the new remote URL\n```\n\n### **Step 2.** Create a new Angular app\n\nFrom within your working folder, run the following Angular CLI command using the name of your app.\n\n```sh\nng new my-app --directory ./\n# Generates the boilerplate code for a new Angular app\n```\n\n### **Step 3.** Add the Revel Digital libaries\n\nRun the Revel Digital angular schematic which will configure your app for use as a Revel Digital gadget.\n\n```sh\nng add @reveldigital/player-client@latest\n# Run the Revel Digital Angular schematic\n```\n\n### **Step 4.** Build\n\nThe build script will generate the Angular app along with a the gadget XML definition file.\n\n```sh\nnpm run build:gadget\n# Run the gadget build script\n```\n\n### **Step 5.** Deploy\n\nThe app can be hosted using any number of hosting services, however the provided schematic includes a simplified option for publishing to [GitHub Pages](https://pages.github.com/).\n\nAssuming your working folder is associated with your GitHub repository, simply run the following command to deploy the app to the `gh-pages` branch. The gadget app and associated XML file will be publicly visibile and available for use in your signage.\n\n```sh\nnpm run deploy:gadget\n# Deploy to GitHub Pages\n```\n\n## Sample usage\n\nThe majority of the functionality is contained within the [PlayerClientService](https://reveldigital.github.io/reveldigital-client-library/injectables/PlayerClientService.html). The service and supporting library exposes the following functionality:\n\n- Methods for obtaining player details such as device time, locale, etc\n- Methods for interfacting with the player including sending commands and calling into player scripting\n- Player lifecycle methods (ready/start/stop)\n- Gadget property accessors such as user preferences\n- Miscellaneous helpers such as the SafeStyle pipe\n\nSimply inject this service in your Angular component constructor in order to access the player client interface.\n\n```ts\n  constructor(public client: PlayerClientService) {\n\n    this.prefs = client.getPrefs();\n    \n    this.style = this.prefs.getString('myStylePref');\n    \n    this.client.onReady$.subscribe((val) =\u003e {\n      console.log(val ? 'Ready' : 'Not ready');\n    });\n\n    this.client.onCommand$.subscribe((cmd) =\u003e {\n      console.log(`onCommand: ${cmd.name}, ${cmd.arg}`);\n    });\n\n    this.client.onStart$.subscribe(() =\u003e {\n      console.log(\"onStart\");\n    });\n\n    this.client.onStop$.subscribe(() =\u003e {\n      console.log(\"onStop\");\n    });\n  }\n```\n\n## Gadget Definition \u0026 Preferences\n\nThe `assets/gadget.yaml` file is the definition file for your gadget, responsible for defining the basic properties and features of the gadget as presented to the user. These properties include the gadget name, description, support URL, and preferences. A sample `gadgets.yaml` file is included in your project after running the schematic.\n\nPreferences are the primary method for providing customization options of your gadget. They allow signage designers to change and preview gadget properties at design time within the Revel Digital CMS.\n\nThe following is the sample `gadgets.yaml` included with the schematic:\n\n```yaml\n# Basic properties of the gadget must include the following:\n#   title: Title of the gadget as it will appear in the Revel Digital CMS UX\n#   title_url: Optional support URL for the gadget\n#   description: Details of the gadget. Will appear within the Revel Digital CMS\n#   author: Name of author or organization credited with developing the gadget\n#   background: (Deprecated) should always be transparent for most gadgets\n#\ntitle: My Gadget\ntitle_url: https://mysupporturl.org\ndescription: Describe the purpose of your gadget here\nauthor: My Organization\nbackground: transparent\n\n# Requirements enable certain features of the gadget. Available options include:\n#   reveldigital (core Revel Digital features)\n#   offline (Enable service worker caching for offline support)\n#   webfont (Enable Google WebFonts for dynamic font loading)\n#   moment (Enable the moment library for localized date/time, initialized with device timezone)\n#   jquery (Enable the jQuery libary)\n#\nrequirements:\n  - reveldigital\n  - offline\n  - webfont\n  - moment\n  - jquery\n\n# Locales are use for localization within the gadget definition (XML) itself.\n#  Docs for using the Gadget API for i18n are available here: https://developers.google.com/gadgets/docs/i18n\n#\n# Angular applications should use the i18n support provided by the Angular framework:\n#  https://angular.io/guide/i18n-overview\n#\nlocales:\n  - messages: https://reveldigital.github.io/reveldigital-gadgets/ALL_ALL.xml\n\n  - lang: fr\n    messages: https://reveldigital.github.io/reveldigital-gadgets/ALL_ALL.xml\n\n# Preferences provide customization options for the gadget and are accessible at both design time and runtime.\n#\n# Propreties of a preference include:\n#   name: Unique name or ID for the preference\n#   display_name: Name as shown in the UX\n#   datatype: string, enum, hidden, bool, style, list\n#   default_value: Default value\n#   required: Make this prefence mandatory, must have a value\n#   multiple: Allows for multiple selection of list items (enum pref type only)\n#   multiline: Enables multiline text (string pref type only)\n#   depends: The visibility of this preference depends on other preferences. This requires the name\n#     of the dependent preference along with a list of values. Condition types can include\n#     any_of, all_of, none_of. Nested depends conditions are also supported.\n#\nprefs:\n  - name: myStringPref\n    display_name: Sample string preference\n    datatype: string\n    default_value: test string\n    required: true\n    multiline: false\n\n  - name: myBoolPref\n    display_name: Sample boolean preference\n    datatype: bool\n    default_value: true\n    required: true\n    depends:\n      - name: myEnumPref\n        any_of:\n          - values:\n            - fast\n          \n  - name: myStylePref\n    display_name: Sample style preference\n    datatype: style\n    default_value: font-family:Verdana;color:rgb(255, 255, 255);font-size:18px;\n    required: true\n\n  - name: myEnumPref\n    display_name: Sample enum preference\n    datatype: enum\n    default_value: fast\n    required: true\n    multiple: false\n    options:\n      - value: fastest\n        display_value: Fastest\n      - value: fast\n        display_value: Fast\n      - value: medium\n        display_value: Medium\n\n  - name: myListPref\n    display_name: Sample list preference\n    datatype: list\n    default_value: dog|cat\n    required: false\n```\n\nThis definition file results in the following user experience when designing your gadget in a template:\n\n![Alt text](https://reveldigital.github.io/reveldigital-client-library/images/sample-gadget-editor.png)\n\nYou will see the preferences exposed in the editor which can then be modified at design time.\n\nIndividual preferences are able to be accessed in your gadget code like so:\n\n```ts\nthis.prefs = client.getPrefs();\n\nthis.prefs.getString('myStringPref');\nthis.prefs.getBool('myBoolPref');\nthis.prefs.getFloat('myFloatPref');\nthis.prefs.getInt('myIntPref');\nthis.prefs.getArray('myListPref');\n```\n\n## Angular Library Documentation\n\nNPM: [https://www.npmjs.com/package/@reveldigital/player-client](https://www.npmjs.com/package/@reveldigital/player-client)\n\nLibrary documentation is available here: [https://reveldigital.github.io/reveldigital-client-library/](https://reveldigital.github.io/reveldigital-client-library/)\n\nA sample Angular app is available in this repo under [https://github.com/RevelDigital/reveldigital-client-library/tree/master/projects/test-app](https://github.com/RevelDigital/reveldigital-client-library/tree/master/projects/test-app).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freveldigital%2Freveldigital-client-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freveldigital%2Freveldigital-client-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freveldigital%2Freveldigital-client-library/lists"}