{"_id":"@aspect-ratio/core","_rev":"1-6e0236727700d755a192f66a89c7aedf","name":"@aspect-ratio/core","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aspect-ratio/core","version":"1.0.0","author":{"name":"Angel Fraga Parodi","url":"https://github.com/angelfraga"},"repository":{"type":"git","directory":"packages/core","url":"git+https://github.com/angelfraga/aspect-ratio-js.git"},"description":"This library tries to supply a responsive aspect ratio calculation for canvas elements which are located on top of a video elements.","bugs":{"url":"https://github.com/angelfraga/aspect-ratio-js/issues"},"homepage":"https://github.com/angelfraga/aspect-ratio-js#readme","_id":"@aspect-ratio/core@1.0.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Nyy3ObJamoRZLknXISDfK7FhfO3uVp+3FwzGYnpfIU6Q1g9GW/UtxpvNumqEdlBZHMars4Gcrc/Qu60Y8tuYWw==","shasum":"5e95e34a3249a99a7813cc8691c30d2d0cec9678","tarball":"https://registry.npmjs.org/@aspect-ratio/core/-/core-1.0.0.tgz","fileCount":8,"unpackedSize":13383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxOuzCRA9TVsSAnZWagAAobIP/0rI+4vdaeaaalp5lAdo\noCJomLfAlPkARe52o4MIz/Y7VSuI4rGLAJuY5RkTVPQYlPky+G7PbuGzJ3mt\nssRRREArUAU+l/y9r7OdDEYWNeRA4jZfiUEvoXIt1fQdT+hepwVxL5jbqNxb\nfv7WQ0jcMt28zYKCFbHSgZPnqminZKIAVQzsawdhVOUVQwBlgGAgYnFbcL6+\nS0Kb6Bm9sqktJbyAbAaf7NtvmUD1+pis5HLT4PR27bMl8i95eAprmPqUeA/K\nMSXedqx6ZV/HcIKAPUxPI8rhnGilHU3Zc1RJf96Ggkoe7Om6LOxr/LrC3ofc\nD9G8biQjIOlYVTAQzYMwpOkwtheLqlCY5ruxIrPyRmFm/IoZ1pt3+HlKFWQV\n0ptXUWEjRbrFPCIgr1NmgS1frP9EeQeLPCwWa9USHeA66vUSCwLeoiOI0xX1\nf31rOonRSZ/7nzqKR4tXON2nAhOGYqHkUU9HO658OheEQYBjX3cI4kcKPpk8\npfCn32ICLFTyXYQ3dnwCM5DkBwEhhAsMXTtp0uarKrEf9CRRZ0seJAG+//61\nWdauJoxVREsdDlY7J3TdwGAJBPyw1e0T0GIYnHxQpEHcnVcYg7QX0qeboENb\n/2mmq8oQ00zXA1kVtt0bPKZXpz/HkF82lClSp0KciaAeb8RwGmDe5KpSvORa\nlrxf\r\n=1ox9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFsJ99dgxyQLMKYpt4eXgwFAjzEpmX2tBndjizZCa83QIgayF5vkWlfbsw4RPRcPOtM0irdfqBZQaU2EGtz8zj+s4="}]},"_npmUser":{"name":"angelfragap","email":"angelfragap@outlook.es"},"directories":{},"maintainers":[{"name":"angelfragap","email":"angelfragap@outlook.es"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_1.0.0_1623518131800_0.17027314132286753"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-12T17:15:31.408Z","1.0.0":"2021-06-12T17:15:31.911Z","modified":"2022-04-04T15:48:15.410Z"},"maintainers":[{"name":"angelfragap","email":"angelfragap@outlook.es"}],"description":"This library tries to supply a responsive aspect ratio calculation for canvas elements which are located on top of a video elements.","homepage":"https://github.com/angelfraga/aspect-ratio-js#readme","repository":{"type":"git","directory":"packages/core","url":"git+https://github.com/angelfraga/aspect-ratio-js.git"},"author":{"name":"Angel Fraga Parodi","url":"https://github.com/angelfraga"},"bugs":{"url":"https://github.com/angelfraga/aspect-ratio-js/issues"},"readme":"# @aspect-ratio/core\r\n\r\n# Initial Motivation\r\n\r\nThis library tries to supply a responsive aspect ratio calculation for canvas elements which are located on top of a video elements.\r\n\r\nVideo elements add black borders in order to adjust the aspect ratio of the frame picture being displayed (displayed area). \r\nSince Video elements do not emit events about the disaplyed area's size this calculation must be done mostly via javascript or css.\r\n\r\n# What library does\r\n\r\nWith JS we wouldn't be able to be full 100% responsive outbox , eg when oppening a sidebar no windows resize event get fired.\r\n\r\nWith CSS we could calculate aspect ratio, but mostly CSS solutions are just taking in count the width since they are based on padding.\r\nThat could end up in an element which overflow the size of its parent and making visible a scrollbar.\r\n\r\n*I only found a solution taking in count the `height`* but only works if the element fits width the viewport size.\r\n\r\nBy using an iframe we can apply the last solution, forcing the iframe to fit with its parent. \r\nThe nested window will fire the resize event once iframe's parent size changes.\r\n\r\n\r\n# Install \r\n\r\n```\r\nnpm i @aspect-ratio/core\r\n```\r\n\r\n# Usage\r\n\r\n\r\n```html\r\n\r\n<div id=\"container\">\r\n\t<div id=\"mask\">\r\n\t\t<!-- content to apply aspect ratio -->\r\n\t</div>\r\n</div>\r\n\r\n```\r\n\r\n## Typescript\r\n\r\n```typescript\r\nimport { AspectRatio } from \"./src/aspect-ratio\";\r\n\r\nconst aspectRatio = new AspectRatio({\r\n  container: document.querySelector(\"#container\"),\r\n  mask: document.querySelector(\"#mask\"),\r\n  minHeight: 90,\r\n  minWidth: 160,\r\n  ratio: \"16/9\",\r\n  align: \"center center\"\r\n});\r\n\r\n```\r\n\r\n\r\n# Collaboration\r\nPlease check README.md file in the repository\r\n\r\n\r\n# License \r\n\r\nMIT License, please check the \"LICENSE\" file in the repository.","readmeFilename":"README.md"}