{"id":16751622,"url":"https://github.com/lancercomet/muso","last_synced_at":"2025-10-09T19:34:10.324Z","repository":{"id":162023841,"uuid":"633508701","full_name":"LancerComet/Muso","owner":"LancerComet","description":"Yet another photo viewer. Especially designed for manga reading.","archived":false,"fork":false,"pushed_at":"2023-05-05T17:43:01.000Z","size":473,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T17:35:20.256Z","etag":null,"topics":["canvas","comics-reader","manga-reader","photo-gallery","photo-viewer","swiper"],"latest_commit_sha":null,"homepage":"https://lancercomet.github.io/Muso/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LancerComet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-04-27T16:47:44.000Z","updated_at":"2024-06-13T00:51:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"8eee8149-fa80-4b33-acd9-2517fcaed74d","html_url":"https://github.com/LancerComet/Muso","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LancerComet%2FMuso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LancerComet%2FMuso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LancerComet%2FMuso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LancerComet%2FMuso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LancerComet","download_url":"https://codeload.github.com/LancerComet/Muso/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826784,"owners_count":20354222,"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":["canvas","comics-reader","manga-reader","photo-gallery","photo-viewer","swiper"],"created_at":"2024-10-13T02:44:28.403Z","updated_at":"2025-10-09T19:34:05.305Z","avatar_url":"https://github.com/LancerComet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Muso\n\n![logo](static/logo.png)\n\nYet another photo viewer. Especially designed for manga reading.\n\nIt is completely canvas-based, aims to have native-like touching experience.\n\n## Feature\n\n- Implement in canvas. Native-like touching experience.\n- Reactive sizing. Suitable for all type of devices.\n- Three viewing mode: left swipe, right swipe, vertical scrolling.\n- Zero dependency.\n\n## Demo\n\n - [Demo](https://lancercomet.github.io/Muso/) - This is a basic demo showing a fullscreen Muso. \n - [Bilibili Manga](https://manga.bilibili.com/m/mc28201/463667) - Please use mobile device to visit this page, otherwise it will redirect to the desktop version which is nothing to do with Muso. And this Muso is a little different from the one in the repo, some bugs are not fixed yet, and the animation is too fast if the refresh rate is \u003e 60 fps.\n\n## Quick Start\n\n```ts\nimport { Muso } from '@lancercomet/muso'\n\nconst myCanvas = document.querySelector('#my-canvas')\nconst muso = new Muso({...})\nmuso.mount(myCanvas)\n```\n\n## API\n\n```ts\nclass Muso {\n  // Mount to target canvas element.\n  mount (canvas: HTMLCanvasElement): void\n  \n  // Destroy muso instance.\n  destroy (): void\n\n  // Add an image to the end.  \n  addImage (url: string): number\n  \n  // Prepend an image to the front.\n  prependImage (url: string): number\n  \n  // Remove an image at specific index.\n  removeImage (index: number): void\n  \n  // Reload target index.\n  reload (index: number): void\n  \n  // Pagination.\n  goPrevPage(): void\n  goNextPage(): void\n  goTargetPage(page: number): void\n\n  // Set scrolling mode.\n  setScrollingMode(mode: ScrollingMode): void\n  \n  // Set flip direction in Horizontal scrolling mode.\n  setHorizontalDirection (direction: HorizontalDirection): Promise\u003cvoid\u003e\n  \n  // Events.\n  on(eventName: EventType, callback: EventBusCallback): void\n  off(eventName: EventType, callback: EventBusCallback): void\n  \n  constructor(option?: Partial\u003cIMusoOption\u003e)\n}\n```\n\n```ts\ninterface IMusoOption {\n  /**\n   * Enable auto resizing.\n   * \n   * @default true\n   */\n  autoResizing: boolean\n\n  /**\n   * The background color of Muso.\n   * \n   * @default #222\n   */\n  stageColor: string\n\n  /**\n   * The padding around every images.\n   * \n   * @default 0\n   */\n  stagePadding: number\n\n  /**\n   * How many pixels should user swipe to trigger paging.\n   * \n   * @default 150\n   */\n  swipeDistanceOfPaging: number\n\n  /**\n   * How many images to display at same time.\n   * \n   * @default 5\n   */\n  renderingImageCount: number\n\n  /**\n   * The flip direction in Horizontal Scrolling Mode.\n   * \n   * @default HorizontalDirection.LTR\n   */\n  horizontalDirection: HorizontalDirection\n\n  /**\n   * The max display width of the image.\n   * \n   * @default () =\u003e 0\n   */\n  maxWidth: () =\u003e number\n\n  /**\n   * The min display width of the image.\n   *\n   * @default () =\u003e 0\n   */\n  minWidth: () =\u003e number\n\n  /**\n   * The max display height of the image.\n   *\n   * @default () =\u003e 0\n   */\n  maxHeight: () =\u003e number\n\n  /**\n   * The min display height of the image.\n   *\n   * @default () =\u003e 0\n   */\n  minHeight: () =\u003e number\n\n  /**\n   * The image will scale to 1.0 if the current scale factor is less than this value.\n   * \n   * @default 1.3\n   */\n  restoreScaleRate: number\n\n  /**\n   * The scrolling mode of Muso.\n   * Horizontal and Vertical.\n   * \n   * @default ScrollingMode.Horizontal\n   */\n  scrollingMode: ScrollingMode\n\n  /**\n   * If true, built-in input will be unavailable (like touching).\n   * You can use the \"swiper\" object to manipulate Muso.\n   * \n   * @default false\n   */\n  noDefaultControl: boolean\n\n  /**\n   * This function will be invoked before every single image was loaded. \n   * \n   * @default null\n   */\n  beforeImageLoad: (url: string) =\u003e Promise\u003cstring\u003e\n\n  /**\n   * The acceleration ratio in vertical scrolling mode.\n   * \n   * @default 1.35\n   */\n  vTouchMoveAcc: number\n\n  /**\n   * The acceleration ratio for zooming.\n   * \n   * @default 1.05\n   */\n  zoomTouchMoveAcc: number\n\n  /**\n   * The placeholder image.\n   * \n   * @default null\n   */\n  placeholder: HTMLImageElement | HTMLCanvasElement | ImageBitmap\n\n  /**\n   * Image loading timeout.\n   * \n   * @default 5000\n   */\n  imageTimeout: number\n\n  /**\n   * The rendering alpha for non current page.\n   * \n   * @default 1\n   */\n  otherPageAlpha: () =\u003e number\n}\n```\n\n```ts\nenum ScrollingMode {\n  Horizontal = \"horizontal\",\n  Vertical = \"vertical\"\n}\n\nenum HorizontalDirection {\n  LTR = \"ltr\",\n  RTL = \"rtl\"\n}\n```\n\n```ts\nenum EventType {\n  EnterDuoTouch = \"enter-double-touch\",\n  ImageLoadingFailure = \"image-loading-failure\",\n  LeaveDuoTouch = \"leave-double-touch\",\n  MouseWheel = \"mousewheel\",\n  ScrollingMode = \"scrolling-mode\",\n  Swipe = \"touch-swipe\",\n  TouchStart = \"touch-start\",\n  TouchMove = \"touch-move\",\n  TouchEnd = \"touch-end\",\n  TouchMoveX = \"touch-move-x\",\n  TouchMoveY = \"touch-move-y\",\n  Paging = \"paging\",\n  Resize = \"resize\",\n  Zooming = \"zooming\",\n  ZoomCenterMove = \"zoom-center-move\"\n}\n```\n\n## License\n\nApache-2.0\n\nLogo was generated by MidJourney.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flancercomet%2Fmuso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flancercomet%2Fmuso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flancercomet%2Fmuso/lists"}