[ { "path": ".babelrc", "content": "{\n \"presets\": [\n [\"@babel/preset-env\", { \"targets\": { \"chrome\": \"110\" } }],\n [\"@babel/preset-react\", { \"runtime\": \"automatic\" }]\n ]\n}\n" }, { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: alyssaxuu\n" }, { "path": ".gitignore", "content": "logs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nnode_modules/\n.DS_Store\n.vscode/\n.env\n.env.local\n.env.development\n.env.production\n.env.*.local\nbuild/\ndocs/\ntools/" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nhi@alyssax.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n" }, { "path": "LICENSE", "content": " GNU GENERAL PUBLIC LICENSE\n Version 3, 29 June 2007\n\nCopyright (C) 2007 Free Software Foundation, Inc. \nEveryone is permitted to copy and distribute verbatim copies\nof this license document, but changing it is not allowed.\n\n Preamble\n\nThe GNU General Public License is a free, copyleft license for\nsoftware and other kinds of works.\n\nThe licenses for most software and other practical works are designed\nto take away your freedom to share and change the works. By contrast,\nthe GNU General Public License is intended to guarantee your freedom to\nshare and change all versions of a program--to make sure it remains free\nsoftware for all its users. We, the Free Software Foundation, use the\nGNU General Public License for most of our software; it applies also to\nany other work released this way by its authors. You can apply it to\nyour programs, too.\n\nWhen we speak of free software, we are referring to freedom, not\nprice. Our General Public Licenses are designed to make sure that you\nhave the freedom to distribute copies of free software (and charge for\nthem if you wish), that you receive source code or can get it if you\nwant it, that you can change the software or use pieces of it in new\nfree programs, and that you know you can do these things.\n\nTo protect your rights, we need to prevent others from denying you\nthese rights or asking you to surrender the rights. Therefore, you have\ncertain responsibilities if you distribute copies of the software, or if\nyou modify it: responsibilities to respect the freedom of others.\n\nFor example, if you distribute copies of such a program, whether\ngratis or for a fee, you must pass on to the recipients the same\nfreedoms that you received. You must make sure that they, too, receive\nor can get the source code. And you must show them these terms so they\nknow their rights.\n\nDevelopers that use the GNU GPL protect your rights with two steps:\n(1) assert copyright on the software, and (2) offer you this License\ngiving you legal permission to copy, distribute and/or modify it.\n\nFor the developers' and authors' protection, the GPL clearly explains\nthat there is no warranty for this free software. For both users' and\nauthors' sake, the GPL requires that modified versions be marked as\nchanged, so that their problems will not be attributed erroneously to\nauthors of previous versions.\n\nSome devices are designed to deny users access to install or run\nmodified versions of the software inside them, although the manufacturer\ncan do so. This is fundamentally incompatible with the aim of\nprotecting users' freedom to change the software. The systematic\npattern of such abuse occurs in the area of products for individuals to\nuse, which is precisely where it is most unacceptable. Therefore, we\nhave designed this version of the GPL to prohibit the practice for those\nproducts. If such problems arise substantially in other domains, we\nstand ready to extend this provision to those domains in future versions\nof the GPL, as needed to protect the freedom of users.\n\nFinally, every program is threatened constantly by software patents.\nStates should not allow patents to restrict development and use of\nsoftware on general-purpose computers, but in those that do, we wish to\navoid the special danger that patents applied to a free program could\nmake it effectively proprietary. To prevent this, the GPL assures that\npatents cannot be used to render the program non-free.\n\nThe precise terms and conditions for copying, distribution and\nmodification follow.\n\n TERMS AND CONDITIONS\n\n0. Definitions.\n\n\"This License\" refers to version 3 of the GNU General Public License.\n\n\"Copyright\" also means copyright-like laws that apply to other kinds of\nworks, such as semiconductor masks.\n\n\"The Program\" refers to any copyrightable work licensed under this\nLicense. Each licensee is addressed as \"you\". \"Licensees\" and\n\"recipients\" may be individuals or organizations.\n\nTo \"modify\" a work means to copy from or adapt all or part of the work\nin a fashion requiring copyright permission, other than the making of an\nexact copy. The resulting work is called a \"modified version\" of the\nearlier work or a work \"based on\" the earlier work.\n\nA \"covered work\" means either the unmodified Program or a work based\non the Program.\n\nTo \"propagate\" a work means to do anything with it that, without\npermission, would make you directly or secondarily liable for\ninfringement under applicable copyright law, except executing it on a\ncomputer or modifying a private copy. Propagation includes copying,\ndistribution (with or without modification), making available to the\npublic, and in some countries other activities as well.\n\nTo \"convey\" a work means any kind of propagation that enables other\nparties to make or receive copies. Mere interaction with a user through\na computer network, with no transfer of a copy, is not conveying.\n\nAn interactive user interface displays \"Appropriate Legal Notices\"\nto the extent that it includes a convenient and prominently visible\nfeature that (1) displays an appropriate copyright notice, and (2)\ntells the user that there is no warranty for the work (except to the\nextent that warranties are provided), that licensees may convey the\nwork under this License, and how to view a copy of this License. If\nthe interface presents a list of user commands or options, such as a\nmenu, a prominent item in the list meets this criterion.\n\n1. Source Code.\n\nThe \"source code\" for a work means the preferred form of the work\nfor making modifications to it. \"Object code\" means any non-source\nform of a work.\n\nA \"Standard Interface\" means an interface that either is an official\nstandard defined by a recognized standards body, or, in the case of\ninterfaces specified for a particular programming language, one that\nis widely used among developers working in that language.\n\nThe \"System Libraries\" of an executable work include anything, other\nthan the work as a whole, that (a) is included in the normal form of\npackaging a Major Component, but which is not part of that Major\nComponent, and (b) serves only to enable use of the work with that\nMajor Component, or to implement a Standard Interface for which an\nimplementation is available to the public in source code form. A\n\"Major Component\", in this context, means a major essential component\n(kernel, window system, and so on) of the specific operating system\n(if any) on which the executable work runs, or a compiler used to\nproduce the work, or an object code interpreter used to run it.\n\nThe \"Corresponding Source\" for a work in object code form means all\nthe source code needed to generate, install, and (for an executable\nwork) run the object code and to modify the work, including scripts to\ncontrol those activities. However, it does not include the work's\nSystem Libraries, or general-purpose tools or generally available free\nprograms which are used unmodified in performing those activities but\nwhich are not part of the work. For example, Corresponding Source\nincludes interface definition files associated with source files for\nthe work, and the source code for shared libraries and dynamically\nlinked subprograms that the work is specifically designed to require,\nsuch as by intimate data communication or control flow between those\nsubprograms and other parts of the work.\n\nThe Corresponding Source need not include anything that users\ncan regenerate automatically from other parts of the Corresponding\nSource.\n\nThe Corresponding Source for a work in source code form is that\nsame work.\n\n2. Basic Permissions.\n\nAll rights granted under this License are granted for the term of\ncopyright on the Program, and are irrevocable provided the stated\nconditions are met. This License explicitly affirms your unlimited\npermission to run the unmodified Program. The output from running a\ncovered work is covered by this License only if the output, given its\ncontent, constitutes a covered work. This License acknowledges your\nrights of fair use or other equivalent, as provided by copyright law.\n\nYou may make, run and propagate covered works that you do not\nconvey, without conditions so long as your license otherwise remains\nin force. You may convey covered works to others for the sole purpose\nof having them make modifications exclusively for you, or provide you\nwith facilities for running those works, provided that you comply with\nthe terms of this License in conveying all material for which you do\nnot control copyright. Those thus making or running the covered works\nfor you must do so exclusively on your behalf, under your direction\nand control, on terms that prohibit them from making any copies of\nyour copyrighted material outside their relationship with you.\n\nConveying under any other circumstances is permitted solely under\nthe conditions stated below. Sublicensing is not allowed; section 10\nmakes it unnecessary.\n\n3. Protecting Users' Legal Rights From Anti-Circumvention Law.\n\nNo covered work shall be deemed part of an effective technological\nmeasure under any applicable law fulfilling obligations under article\n11 of the WIPO copyright treaty adopted on 20 December 1996, or\nsimilar laws prohibiting or restricting circumvention of such\nmeasures.\n\nWhen you convey a covered work, you waive any legal power to forbid\ncircumvention of technological measures to the extent such circumvention\nis effected by exercising rights under this License with respect to\nthe covered work, and you disclaim any intention to limit operation or\nmodification of the work as a means of enforcing, against the work's\nusers, your or third parties' legal rights to forbid circumvention of\ntechnological measures.\n\n4. Conveying Verbatim Copies.\n\nYou may convey verbatim copies of the Program's source code as you\nreceive it, in any medium, provided that you conspicuously and\nappropriately publish on each copy an appropriate copyright notice;\nkeep intact all notices stating that this License and any\nnon-permissive terms added in accord with section 7 apply to the code;\nkeep intact all notices of the absence of any warranty; and give all\nrecipients a copy of this License along with the Program.\n\nYou may charge any price or no price for each copy that you convey,\nand you may offer support or warranty protection for a fee.\n\n5. Conveying Modified Source Versions.\n\nYou may convey a work based on the Program, or the modifications to\nproduce it from the Program, in the form of source code under the\nterms of section 4, provided that you also meet all of these conditions:\n\n a) The work must carry prominent notices stating that you modified\n it, and giving a relevant date.\n\n b) The work must carry prominent notices stating that it is\n released under this License and any conditions added under section\n 7. This requirement modifies the requirement in section 4 to\n \"keep intact all notices\".\n\n c) You must license the entire work, as a whole, under this\n License to anyone who comes into possession of a copy. This\n License will therefore apply, along with any applicable section 7\n additional terms, to the whole of the work, and all its parts,\n regardless of how they are packaged. This License gives no\n permission to license the work in any other way, but it does not\n invalidate such permission if you have separately received it.\n\n d) If the work has interactive user interfaces, each must display\n Appropriate Legal Notices; however, if the Program has interactive\n interfaces that do not display Appropriate Legal Notices, your\n work need not make them do so.\n\nA compilation of a covered work with other separate and independent\nworks, which are not by their nature extensions of the covered work,\nand which are not combined with it such as to form a larger program,\nin or on a volume of a storage or distribution medium, is called an\n\"aggregate\" if the compilation and its resulting copyright are not\nused to limit the access or legal rights of the compilation's users\nbeyond what the individual works permit. Inclusion of a covered work\nin an aggregate does not cause this License to apply to the other\nparts of the aggregate.\n\n6. Conveying Non-Source Forms.\n\nYou may convey a covered work in object code form under the terms\nof sections 4 and 5, provided that you also convey the\nmachine-readable Corresponding Source under the terms of this License,\nin one of these ways:\n\n a) Convey the object code in, or embodied in, a physical product\n (including a physical distribution medium), accompanied by the\n Corresponding Source fixed on a durable physical medium\n customarily used for software interchange.\n\n b) Convey the object code in, or embodied in, a physical product\n (including a physical distribution medium), accompanied by a\n written offer, valid for at least three years and valid for as\n long as you offer spare parts or customer support for that product\n model, to give anyone who possesses the object code either (1) a\n copy of the Corresponding Source for all the software in the\n product that is covered by this License, on a durable physical\n medium customarily used for software interchange, for a price no\n more than your reasonable cost of physically performing this\n conveying of source, or (2) access to copy the\n Corresponding Source from a network server at no charge.\n\n c) Convey individual copies of the object code with a copy of the\n written offer to provide the Corresponding Source. This\n alternative is allowed only occasionally and noncommercially, and\n only if you received the object code with such an offer, in accord\n with subsection 6b.\n\n d) Convey the object code by offering access from a designated\n place (gratis or for a charge), and offer equivalent access to the\n Corresponding Source in the same way through the same place at no\n further charge. You need not require recipients to copy the\n Corresponding Source along with the object code. If the place to\n copy the object code is a network server, the Corresponding Source\n may be on a different server (operated by you or a third party)\n that supports equivalent copying facilities, provided you maintain\n clear directions next to the object code saying where to find the\n Corresponding Source. Regardless of what server hosts the\n Corresponding Source, you remain obligated to ensure that it is\n available for as long as needed to satisfy these requirements.\n\n e) Convey the object code using peer-to-peer transmission, provided\n you inform other peers where the object code and Corresponding\n Source of the work are being offered to the general public at no\n charge under subsection 6d.\n\nA separable portion of the object code, whose source code is excluded\nfrom the Corresponding Source as a System Library, need not be\nincluded in conveying the object code work.\n\nA \"User Product\" is either (1) a \"consumer product\", which means any\ntangible personal property which is normally used for personal, family,\nor household purposes, or (2) anything designed or sold for incorporation\ninto a dwelling. In determining whether a product is a consumer product,\ndoubtful cases shall be resolved in favor of coverage. For a particular\nproduct received by a particular user, \"normally used\" refers to a\ntypical or common use of that class of product, regardless of the status\nof the particular user or of the way in which the particular user\nactually uses, or expects or is expected to use, the product. A product\nis a consumer product regardless of whether the product has substantial\ncommercial, industrial or non-consumer uses, unless such uses represent\nthe only significant mode of use of the product.\n\n\"Installation Information\" for a User Product means any methods,\nprocedures, authorization keys, or other information required to install\nand execute modified versions of a covered work in that User Product from\na modified version of its Corresponding Source. The information must\nsuffice to ensure that the continued functioning of the modified object\ncode is in no case prevented or interfered with solely because\nmodification has been made.\n\nIf you convey an object code work under this section in, or with, or\nspecifically for use in, a User Product, and the conveying occurs as\npart of a transaction in which the right of possession and use of the\nUser Product is transferred to the recipient in perpetuity or for a\nfixed term (regardless of how the transaction is characterized), the\nCorresponding Source conveyed under this section must be accompanied\nby the Installation Information. But this requirement does not apply\nif neither you nor any third party retains the ability to install\nmodified object code on the User Product (for example, the work has\nbeen installed in ROM).\n\nThe requirement to provide Installation Information does not include a\nrequirement to continue to provide support service, warranty, or updates\nfor a work that has been modified or installed by the recipient, or for\nthe User Product in which it has been modified or installed. Access to a\nnetwork may be denied when the modification itself materially and\nadversely affects the operation of the network or violates the rules and\nprotocols for communication across the network.\n\nCorresponding Source conveyed, and Installation Information provided,\nin accord with this section must be in a format that is publicly\ndocumented (and with an implementation available to the public in\nsource code form), and must require no special password or key for\nunpacking, reading or copying.\n\n7. Additional Terms.\n\n\"Additional permissions\" are terms that supplement the terms of this\nLicense by making exceptions from one or more of its conditions.\nAdditional permissions that are applicable to the entire Program shall\nbe treated as though they were included in this License, to the extent\nthat they are valid under applicable law. If additional permissions\napply only to part of the Program, that part may be used separately\nunder those permissions, but the entire Program remains governed by\nthis License without regard to the additional permissions.\n\nWhen you convey a copy of a covered work, you may at your option\nremove any additional permissions from that copy, or from any part of\nit. (Additional permissions may be written to require their own\nremoval in certain cases when you modify the work.) You may place\nadditional permissions on material, added by you to a covered work,\nfor which you have or can give appropriate copyright permission.\n\nNotwithstanding any other provision of this License, for material you\nadd to a covered work, you may (if authorized by the copyright holders of\nthat material) supplement the terms of this License with terms:\n\n a) Disclaiming warranty or limiting liability differently from the\n terms of sections 15 and 16 of this License; or\n\n b) Requiring preservation of specified reasonable legal notices or\n author attributions in that material or in the Appropriate Legal\n Notices displayed by works containing it; or\n\n c) Prohibiting misrepresentation of the origin of that material, or\n requiring that modified versions of such material be marked in\n reasonable ways as different from the original version; or\n\n d) Limiting the use for publicity purposes of names of licensors or\n authors of the material; or\n\n e) Declining to grant rights under trademark law for use of some\n trade names, trademarks, or service marks; or\n\n f) Requiring indemnification of licensors and authors of that\n material by anyone who conveys the material (or modified versions of\n it) with contractual assumptions of liability to the recipient, for\n any liability that these contractual assumptions directly impose on\n those licensors and authors.\n\nAll other non-permissive additional terms are considered \"further\nrestrictions\" within the meaning of section 10. If the Program as you\nreceived it, or any part of it, contains a notice stating that it is\ngoverned by this License along with a term that is a further\nrestriction, you may remove that term. If a license document contains\na further restriction but permits relicensing or conveying under this\nLicense, you may add to a covered work material governed by the terms\nof that license document, provided that the further restriction does\nnot survive such relicensing or conveying.\n\nIf you add terms to a covered work in accord with this section, you\nmust place, in the relevant source files, a statement of the\nadditional terms that apply to those files, or a notice indicating\nwhere to find the applicable terms.\n\nAdditional terms, permissive or non-permissive, may be stated in the\nform of a separately written license, or stated as exceptions;\nthe above requirements apply either way.\n\n8. Termination.\n\nYou may not propagate or modify a covered work except as expressly\nprovided under this License. Any attempt otherwise to propagate or\nmodify it is void, and will automatically terminate your rights under\nthis License (including any patent licenses granted under the third\nparagraph of section 11).\n\nHowever, if you cease all violation of this License, then your\nlicense from a particular copyright holder is reinstated (a)\nprovisionally, unless and until the copyright holder explicitly and\nfinally terminates your license, and (b) permanently, if the copyright\nholder fails to notify you of the violation by some reasonable means\nprior to 60 days after the cessation.\n\nMoreover, your license from a particular copyright holder is\nreinstated permanently if the copyright holder notifies you of the\nviolation by some reasonable means, this is the first time you have\nreceived notice of violation of this License (for any work) from that\ncopyright holder, and you cure the violation prior to 30 days after\nyour receipt of the notice.\n\nTermination of your rights under this section does not terminate the\nlicenses of parties who have received copies or rights from you under\nthis License. If your rights have been terminated and not permanently\nreinstated, you do not qualify to receive new licenses for the same\nmaterial under section 10.\n\n9. Acceptance Not Required for Having Copies.\n\nYou are not required to accept this License in order to receive or\nrun a copy of the Program. Ancillary propagation of a covered work\noccurring solely as a consequence of using peer-to-peer transmission\nto receive a copy likewise does not require acceptance. However,\nnothing other than this License grants you permission to propagate or\nmodify any covered work. These actions infringe copyright if you do\nnot accept this License. Therefore, by modifying or propagating a\ncovered work, you indicate your acceptance of this License to do so.\n\n10. Automatic Licensing of Downstream Recipients.\n\nEach time you convey a covered work, the recipient automatically\nreceives a license from the original licensors, to run, modify and\npropagate that work, subject to this License. You are not responsible\nfor enforcing compliance by third parties with this License.\n\nAn \"entity transaction\" is a transaction transferring control of an\norganization, or substantially all assets of one, or subdividing an\norganization, or merging organizations. If propagation of a covered\nwork results from an entity transaction, each party to that\ntransaction who receives a copy of the work also receives whatever\nlicenses to the work the party's predecessor in interest had or could\ngive under the previous paragraph, plus a right to possession of the\nCorresponding Source of the work from the predecessor in interest, if\nthe predecessor has it or can get it with reasonable efforts.\n\nYou may not impose any further restrictions on the exercise of the\nrights granted or affirmed under this License. For example, you may\nnot impose a license fee, royalty, or other charge for exercise of\nrights granted under this License, and you may not initiate litigation\n(including a cross-claim or counterclaim in a lawsuit) alleging that\nany patent claim is infringed by making, using, selling, offering for\nsale, or importing the Program or any portion of it.\n\n11. Patents.\n\nA \"contributor\" is a copyright holder who authorizes use under this\nLicense of the Program or a work on which the Program is based. The\nwork thus licensed is called the contributor's \"contributor version\".\n\nA contributor's \"essential patent claims\" are all patent claims\nowned or controlled by the contributor, whether already acquired or\nhereafter acquired, that would be infringed by some manner, permitted\nby this License, of making, using, or selling its contributor version,\nbut do not include claims that would be infringed only as a\nconsequence of further modification of the contributor version. For\npurposes of this definition, \"control\" includes the right to grant\npatent sublicenses in a manner consistent with the requirements of\nthis License.\n\nEach contributor grants you a non-exclusive, worldwide, royalty-free\npatent license under the contributor's essential patent claims, to\nmake, use, sell, offer for sale, import and otherwise run, modify and\npropagate the contents of its contributor version.\n\nIn the following three paragraphs, a \"patent license\" is any express\nagreement or commitment, however denominated, not to enforce a patent\n(such as an express permission to practice a patent or covenant not to\nsue for patent infringement). To \"grant\" such a patent license to a\nparty means to make such an agreement or commitment not to enforce a\npatent against the party.\n\nIf you convey a covered work, knowingly relying on a patent license,\nand the Corresponding Source of the work is not available for anyone\nto copy, free of charge and under the terms of this License, through a\npublicly available network server or other readily accessible means,\nthen you must either (1) cause the Corresponding Source to be so\navailable, or (2) arrange to deprive yourself of the benefit of the\npatent license for this particular work, or (3) arrange, in a manner\nconsistent with the requirements of this License, to extend the patent\nlicense to downstream recipients. \"Knowingly relying\" means you have\nactual knowledge that, but for the patent license, your conveying the\ncovered work in a country, or your recipient's use of the covered work\nin a country, would infringe one or more identifiable patents in that\ncountry that you have reason to believe are valid.\n\nIf, pursuant to or in connection with a single transaction or\narrangement, you convey, or propagate by procuring conveyance of, a\ncovered work, and grant a patent license to some of the parties\nreceiving the covered work authorizing them to use, propagate, modify\nor convey a specific copy of the covered work, then the patent license\nyou grant is automatically extended to all recipients of the covered\nwork and works based on it.\n\nA patent license is \"discriminatory\" if it does not include within\nthe scope of its coverage, prohibits the exercise of, or is\nconditioned on the non-exercise of one or more of the rights that are\nspecifically granted under this License. You may not convey a covered\nwork if you are a party to an arrangement with a third party that is\nin the business of distributing software, under which you make payment\nto the third party based on the extent of your activity of conveying\nthe work, and under which the third party grants, to any of the\nparties who would receive the covered work from you, a discriminatory\npatent license (a) in connection with copies of the covered work\nconveyed by you (or copies made from those copies), or (b) primarily\nfor and in connection with specific products or compilations that\ncontain the covered work, unless you entered into that arrangement,\nor that patent license was granted, prior to 28 March 2007.\n\nNothing in this License shall be construed as excluding or limiting\nany implied license or other defenses to infringement that may\notherwise be available to you under applicable patent law.\n\n12. No Surrender of Others' Freedom.\n\nIf conditions are imposed on you (whether by court order, agreement or\notherwise) that contradict the conditions of this License, they do not\nexcuse you from the conditions of this License. If you cannot convey a\ncovered work so as to satisfy simultaneously your obligations under this\nLicense and any other pertinent obligations, then as a consequence you may\nnot convey it at all. For example, if you agree to terms that obligate you\nto collect a royalty for further conveying from those to whom you convey\nthe Program, the only way you could satisfy both those terms and this\nLicense would be to refrain entirely from conveying the Program.\n\n13. Use with the GNU Affero General Public License.\n\nNotwithstanding any other provision of this License, you have\npermission to link or combine any covered work with a work licensed\nunder version 3 of the GNU Affero General Public License into a single\ncombined work, and to convey the resulting work. The terms of this\nLicense will continue to apply to the part which is the covered work,\nbut the special requirements of the GNU Affero General Public License,\nsection 13, concerning interaction through a network will apply to the\ncombination as such.\n\n14. Revised Versions of this License.\n\nThe Free Software Foundation may publish revised and/or new versions of\nthe GNU General Public License from time to time. Such new versions will\nbe similar in spirit to the present version, but may differ in detail to\naddress new problems or concerns.\n\nEach version is given a distinguishing version number. If the\nProgram specifies that a certain numbered version of the GNU General\nPublic License \"or any later version\" applies to it, you have the\noption of following the terms and conditions either of that numbered\nversion or of any later version published by the Free Software\nFoundation. If the Program does not specify a version number of the\nGNU General Public License, you may choose any version ever published\nby the Free Software Foundation.\n\nIf the Program specifies that a proxy can decide which future\nversions of the GNU General Public License can be used, that proxy's\npublic statement of acceptance of a version permanently authorizes you\nto choose that version for the Program.\n\nLater license versions may give you additional or different\npermissions. However, no additional obligations are imposed on any\nauthor or copyright holder as a result of your choosing to follow a\nlater version.\n\n15. Disclaimer of Warranty.\n\nTHERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY\nAPPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT\nHOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM \"AS IS\" WITHOUT WARRANTY\nOF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,\nTHE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR\nPURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM\nIS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF\nALL NECESSARY SERVICING, REPAIR OR CORRECTION.\n\n16. Limitation of Liability.\n\nIN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING\nWILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS\nTHE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY\nGENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE\nUSE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF\nDATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD\nPARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),\nEVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF\nSUCH DAMAGES.\n\n17. Interpretation of Sections 15 and 16.\n\nIf the disclaimer of warranty and limitation of liability provided\nabove cannot be given local legal effect according to their terms,\nreviewing courts shall apply local law that most closely approximates\nan absolute waiver of all civil liability in connection with the\nProgram, unless a warranty or assumption of liability accompanies a\ncopy of the Program in return for a fee.\n\n END OF TERMS AND CONDITIONS\n\n How to Apply These Terms to Your New Programs\n\nIf you develop a new program, and you want it to be of the greatest\npossible use to the public, the best way to achieve this is to make it\nfree software which everyone can redistribute and change under these terms.\n\nTo do so, attach the following notices to the program. It is safest\nto attach them to the start of each source file to most effectively\nstate the exclusion of warranty; and each file should have at least\nthe \"copyright\" line and a pointer to where the full notice is found.\n\n \n Copyright (C) \n\n This program is free software: you can redistribute it and/or modify\n it under the terms of the GNU General Public License as published by\n the Free Software Foundation, either version 3 of the License, or\n (at your option) any later version.\n\n This program is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n GNU General Public License for more details.\n\n You should have received a copy of the GNU General Public License\n along with this program. If not, see .\n\nAlso add information on how to contact you by electronic and paper mail.\n\nIf the program does terminal interaction, make it output a short\nnotice like this when it starts in an interactive mode:\n\n Copyright (C) \n This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.\n This is free software, and you are welcome to redistribute it\n under certain conditions; type `show c' for details.\n\nThe hypothetical commands `show w' and `show c' should show the appropriate\nparts of the General Public License. Of course, your program's commands\nmight be different; for a GUI interface, you would use an \"about box\".\n\nYou should also get your employer (if you work as a programmer) or school,\nif any, to sign a \"copyright disclaimer\" for the program, if necessary.\nFor more information on this, and how to apply and follow the GNU GPL, see\n.\n\nThe GNU General Public License does not permit incorporating your program\ninto proprietary programs. If your program is a subroutine library, you\nmay consider it more useful to permit linking proprietary applications with\nthe library. If this is what you want to do, use the GNU Lesser General\nPublic License instead of this License. But first, please read\n.\n" }, { "path": "README.md", "content": "# Screenity\n\n> _✨ Screenity's open source work is sponsored by_\n> ### Recall.ai - API for desktop recording [](https://www.recall.ai/product/desktop-recording-sdk?utm_source=github&utm_medium=sponsorship&utm_campaign=alyssaxuu-screenity)\n>\n> If you’re looking for a hosted desktop recording API, consider checking out [Recall.ai](https://www.recall.ai/product/desktop-recording-sdk?utm_source=github&utm_medium=sponsorship&utm_campaign=alyssaxuu-screenity), an API that records Zoom, Google Meet, Microsoft Teams, in-person meetings, and more.\n\n[![jiewjjc232](https://github.com/alyssaxuu/screenity/assets/7581348/ed55e52e-4adf-442b-b774-6856abacdffb)](https://screenity.io)\n\nThe free and privacy-friendly screen recorder with no limits 🎥\n\n[Get it now - it's free!](https://chrome.google.com/webstore/detail/screenity-screen-recorder/kbbdabhdfibnancpjfhlkhafgdilcnji)\n\nScreenity is a powerful privacy-friendly screen recorder and annotation tool to make better videos for work, education, and more. You can create stunning product demos, tutorials, presentations, or share feedback with your team - all for free.\n\n\"Screenity\n\"Featured\n\n> Want to support the project (and the solo developer behind it)? \n>\n> Check out [**Screenity Pro**](https://screenity.io/pro): a privacy-friendly, EU-hosted platform with link sharing, multi-scene editing, zoom keyframes, captions, and more ❤️ \n\nMade by [Alyssa X](https://alyssax.com)\n\n## Table of contents\n- [Screenity](#screenity)\n\t- [Table of contents](#table-of-contents)\n\t- [Features](#features)\n\t- [Self-hosting Screenity](#self-hosting-screenity)\n\t- [Creating a development version](#creating-a-development-version)\n\t\t- [Enabling Save to Google Drive](#enabling-save-to-google-drive)\n\t- [Acknowledgements](#acknowledgements)\n\n## Features\n\n🎥 Make unlimited recordings of your tab, a specific area, desktop, any application, or camera
\n🎙️ Record your microphone or internal audio, and use features like push to talk
\n✏️ Annotate by drawing anywhere on the screen, adding text, arrows, shapes, and more
\n✨ Use AI-powered camera backgrounds or blur to enhance your recordings
\n🔎 Zoom in smoothly in your recordings to focus on specific areas
\n🪄 Blur out any sensitive content of any page to keep it private
\n✂️ Remove or add audio, cut, trim, or crop your recordings with a comprehensive editor
\n👀 Highlight your clicks and cursor, and go in spotlight mode
\n⏱️ Set up alarms to automatically stop your recording
\n💾 Export as mp4, gif, and webm, or save the video directly to Google Drive to share a link
\n⚙️ Set a countdown, hide parts of the UI, or move it anywhere
\n🔒 Only you can see your videos, we don’t collect any of your data. You can even go offline!
\n💙 No limits, make as many videos as you want, for as long as you want
…and much more - all for free & no sign in needed!\n\n## Self-hosting Screenity\n> 🛠️ Note: When self-hosted, the extension runs entirely in local-only mode. \n> No API calls, sign-in flows, or platform features are enabled, nothing is sent anywhere. \n> Some internal code paths connect to [Screenity Pro](https://screenity.io/pro), but these are only active in the official Chrome Store version.\n\nYou can run Screenity locally without having to install it from the Chrome Store. Here's how:\n\n1. Download the latest Build.zip from the [releases page](https://github.com/alyssaxuu/screenity/releases)\n2. Load the extension by pasting `chrome://extensions/` in the address bar, and [enabling developer mode](https://developer.chrome.com/docs/extensions/mv2/faq/#:~:text=You%20can%20start%20by%20turning,a%20packaged%20extension%2C%20and%20more.).\n3. Drag the folder that contains the code (make sure it's a folder and not a ZIP file, so unzip first), or click on the \"Load unpacked\" button and locate the folder.\n4. That's it, you should now be able to use Screenity locally. [Follow these instructions](#enabling-save-to-google-drive) to set up the Google Drive integration.\n\nSelf-hosting is totally fine for personal, educational, or internal use.\nIf you’re thinking of building a commercial product from this, feel free to [reach out](mailto:alyssa@screenity.io), I’m open to chatting 💜\n\n## Creating a development version\n\n> ❗️ Note that the license has changed to [GPLv3](https://github.com/alyssaxuu/screenity/blob/master/LICENSE) for the current MV3 version (Screenity version 3.0.0 and higher). Make sure to read the license and the [Terms of Service](https://screenity.io/en/terms/) regarding intellectual property.\n\n1. Check if your [Node.js](https://nodejs.org/) version is >= **14**.\n2. Clone this repository.\n3. Run `npm install` to install dependencies.\n4. Run `npm start` to start the local development server.\n5. Open `chrome://extensions/` in your browser and [enable developer mode](https://developer.chrome.com/docs/extensions/mv2/faq/#:~:text=You%20can%20start%20by%20turning,a%20packaged%20extension%2C%20and%20more.).\n6. Click **Load unpacked** and select the `build` folder.\n7. The extension should now be available locally. \n To rebuild after code changes, run `npm run build`.\n\n### Enabling Save to Google Drive\n\nTo enable the Google Drive Upload (authorization consent screen) you must change the client_id in the manifest.json file with your linked extension key.\n\nYou can create it accessing [Google Cloud Console](https://console.cloud.google.com/apis/credentials) and selecting Create Credential > OAuth Client ID > Chrome App. To create a persistent extension key, you can follow the steps detailed [here](https://developer.chrome.com/docs/extensions/reference/manifest/key).\n\n## Acknowledgements\n\n- Thanks to [HelpKit](https://www.helpkit.so/) for sponsoring this project by hosting the [Screenity Help Center](https://help.screenity.io/).\n- Thanks to [Mei Xuan](https://www.behance.net/meixuanloo) for helping with the Chinese translation of the extension.\n\nIf you need any help, or want to become a Screenity expert, you can browse articles and guides in the [help center](https://help.screenity.io). You can also submit any feedback or ideas in this [form](https://tally.so/r/3ElpXq), or contact through [this page](https://help.screenity.io/contact)\n" }, { "path": "custom.config.js", "content": "module.exports = {\n notHMR: [\"background\", \"contentScript\", \"devtools\", \"sandbox\"],\n enableBackgroundAutoReload: true,\n enableContentScriptsAutoReload: true,\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"screenity\",\n \"version\": \"4.3.0\",\n \"description\": \"The free and privacy-friendly screen recorder with no sign in needed.\",\n \"scripts\": {\n \"build\": \"cross-env NODE_ENV=production node utils/build.js\",\n \"start\": \"cross-env NODE_ENV=development node utils/server.js\",\n \"dev\": \"npm run hot-reload\",\n \"watch\": \"cross-env NODE_ENV=development webpack --watch\",\n \"hot-reload\": \"cross-env NODE_ENV=development webpack serve --hot\",\n \"prettier\": \"prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'\",\n \"postinstall\": \"patch-package && node scripts/patch-radix.js\",\n \"package\": \"npm run build && cd build && zip -r ../extension.zip . && cd ..\",\n \"clean\": \"rm -rf build && mkdir build\",\n \"lint\": \"eslint src/**/*.js --fix\"\n },\n \"dependencies\": {\n \"@babel/plugin-transform-react-jsx\": \"^7.27.1\",\n \"@mediapipe/tasks-vision\": \"0.10.32\",\n \"@radix-ui/react-alert-dialog\": \"^1.0.4\",\n \"@radix-ui/react-collapsible\": \"^1.0.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.0.6\",\n \"@radix-ui/react-popover\": \"^1.0.5\",\n \"@radix-ui/react-select\": \"^1.2.1\",\n \"@radix-ui/react-slider\": \"^1.1.2\",\n \"@radix-ui/react-switch\": \"^1.0.2\",\n \"@radix-ui/react-tabs\": \"^1.0.3\",\n \"@radix-ui/react-toast\": \"^1.2.13\",\n \"@radix-ui/react-toggle\": \"^1.1.8\",\n \"@radix-ui/react-toggle-group\": \"^1.1.9\",\n \"@radix-ui/react-toolbar\": \"^1.1.9\",\n \"@radix-ui/react-tooltip\": \"^1.2.6\",\n \"@sentry/browser\": \"^7.94.1\",\n \"@uiw/color-convert\": \"^1.2.2\",\n \"@uiw/react-color-wheel\": \"^1.2.2\",\n \"axios\": \"^1.6.2\",\n \"concurrently\": \"^8.2.0\",\n \"dotenv\": \"^17.0.1\",\n \"driver.js\": \"^1.3.6\",\n \"fabric\": \"^5.3.0\",\n \"fix-webm-duration\": \"^1.0.5\",\n \"gif.js\": \"^0.2.0\",\n \"jszip\": \"^3.10.1\",\n \"localforage\": \"^1.10.0\",\n \"mediabunny\": \"^1.24.4\",\n \"patch-package\": \"^8.0.0\",\n \"plyr\": \"3.7.8\",\n \"plyr-react\": \"^5.3.0\",\n \"querystring\": \"^0.2.1\",\n \"raw-loader\": \"^4.0.2\",\n \"react\": \"^18.2.0\",\n \"react-advanced-cropper\": \"^0.19.4\",\n \"react-dom\": \"^18.2.0\",\n \"react-hotkeys-hook\": \"^4.4.1\",\n \"react-rnd\": \"^10.4.1\",\n \"react-shadow\": \"^20.0.0\",\n \"react-svg\": \"^16.1.18\",\n \"ssestream\": \"^1.1.0\",\n \"tar\": \"7.5.9\",\n \"wavesurfer.js\": \"^7.4.2\",\n \"webm-duration-fix\": \"^1.0.4\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.20.2\",\n \"@babel/plugin-transform-runtime\": \"^7.27.1\",\n \"@babel/preset-env\": \"^7.20.2\",\n \"@babel/preset-react\": \"^7.27.1\",\n \"@types/react\": \"^18.3.21\",\n \"@types/react-dom\": \"^18.3.7\",\n \"babel-loader\": \"^9.1.3\",\n \"copy-webpack-plugin\": \"^7.0.0\",\n \"cross-env\": \"^7.0.3\",\n \"css-loader\": \"^6.7.2\",\n \"fs-extra\": \"^10.1.0\",\n \"html-loader\": \"^3.1.0\",\n \"html-webpack-plugin\": \"^5.5.0\",\n \"prettier\": \"^2.7.1\",\n \"sass\": \"^1.97.3\",\n \"sass-loader\": \"^16.0.7\",\n \"source-map-loader\": \"^3.0.1\",\n \"style-loader\": \"^3.3.1\",\n \"terser-webpack-plugin\": \"^5.3.6\",\n \"ts-loader\": \"^9.4.1\",\n \"typescript\": \"^4.9.3\",\n \"webpack-cli\": \"^5.1.4\",\n \"webpack-dev-server\": \"^4.11.1\"\n },\n \"overrides\": {\n \"tar\": \"7.5.9\",\n \"minimatch\": \"10.2.2\"\n }\n}\n" }, { "path": "patches/fabric+5.3.0.patch", "content": "diff --git a/node_modules/fabric/dist/fabric.js b/node_modules/fabric/dist/fabric.js\nindex faee7fc..02e5ae3 100644\n--- a/node_modules/fabric/dist/fabric.js\n+++ b/node_modules/fabric/dist/fabric.js\n@@ -12591,7 +12591,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab\n this.cacheCanvasEl = this._createCanvasElement();\n this.cacheCanvasEl.setAttribute('width', this.width);\n this.cacheCanvasEl.setAttribute('height', this.height);\n- this.contextCache = this.cacheCanvasEl.getContext('2d');\n+ this.contextCache = this.cacheCanvasEl.getContext('2d', {willReadFrequently: true});\n },\n \n /**\n@@ -15103,7 +15103,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati\n _createCacheCanvas: function() {\n this._cacheProperties = {};\n this._cacheCanvas = fabric.util.createCanvasElement();\n- this._cacheContext = this._cacheCanvas.getContext('2d');\n+ this._cacheContext = this._cacheCanvas.getContext('2d', {willReadFrequently: true});\n this._updateCacheCanvas();\n // if canvas gets created, is empty, so dirty.\n this.dirty = true;\n" }, { "path": "patches/fabric+5.5.2.patch", "content": "diff --git a/node_modules/fabric/dist/fabric.js b/node_modules/fabric/dist/fabric.js\nindex a7ad0f5..d8e7670 100644\n--- a/node_modules/fabric/dist/fabric.js\n+++ b/node_modules/fabric/dist/fabric.js\n@@ -12596,7 +12596,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab\n this.cacheCanvasEl = this._createCanvasElement();\n this.cacheCanvasEl.setAttribute('width', this.width);\n this.cacheCanvasEl.setAttribute('height', this.height);\n- this.contextCache = this.cacheCanvasEl.getContext('2d');\n+ this.contextCache = this.cacheCanvasEl.getContext('2d', {willReadFrequently: true});\n },\n \n /**\n@@ -15108,7 +15108,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati\n _createCacheCanvas: function() {\n this._cacheProperties = {};\n this._cacheCanvas = fabric.util.createCanvasElement();\n- this._cacheContext = this._cacheCanvas.getContext('2d');\n+ this._cacheContext = this._cacheCanvas.getContext('2d', {willReadFrequently: true});\n this._updateCacheCanvas();\n // if canvas gets created, is empty, so dirty.\n this.dirty = true;\n" }, { "path": "patches/plyr+3.7.8.patch", "content": "diff --git a/node_modules/plyr/dist/plyr.js b/node_modules/plyr/dist/plyr.js\nindex 0a79517..e69634f 100644\n--- a/node_modules/plyr/dist/plyr.js\n+++ b/node_modules/plyr/dist/plyr.js\n@@ -3539,21 +3539,7 @@ typeof navigator === \"object\" && (function (global, factory) {\n }\n },\n // URLs\n- urls: {\n- download: null,\n- vimeo: {\n- sdk: 'https://player.vimeo.com/api/player.js',\n- iframe: 'https://player.vimeo.com/video/{0}?{1}',\n- api: 'https://vimeo.com/api/oembed.json?url={0}'\n- },\n- youtube: {\n- sdk: 'https://www.youtube.com/iframe_api',\n- api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'\n- },\n- googleIMA: {\n- sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'\n- }\n- },\n+ urls: null,\n // Custom control listeners\n listeners: {\n seek: null,\ndiff --git a/node_modules/plyr/dist/plyr.min.js b/node_modules/plyr/dist/plyr.min.js\nindex 707308e..25fc326 100644\n--- a/node_modules/plyr/dist/plyr.min.js\n+++ b/node_modules/plyr/dist/plyr.min.js\n@@ -1,2 +1,2 @@\n-\"object\"==typeof navigator&&function(e,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define(\"Plyr\",t):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).Plyr=t()}(this,(function(){\"use strict\";function e(e,t,i){return(t=function(e){var t=function(e,t){if(\"object\"!=typeof e||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var s=i.call(e,t||\"default\");if(\"object\"!=typeof s)return s;throw new TypeError(\"@@toPrimitive must return a primitive value.\")}return(\"string\"===t?String:Number)(e)}(e,\"string\");return\"symbol\"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function t(e,t){for(var i=0;it){var i=function(e){var t=\"\".concat(e).match(/(?:\\.(\\d+))?(?:[eE]([+-]?\\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0}(t);return parseFloat(e.toFixed(i))}return Math.round(e/t)*t}var g=function(){function e(t,i){(function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")})(this,e),m.element(t)?this.element=t:m.string(t)&&(this.element=document.querySelector(t)),m.element(this.element)&&m.empty(this.element.rangeTouch)&&(this.config=n({},a,{},i),this.init())}return function(e,i,s){i&&t(e.prototype,i),s&&t(e,s)}(e,[{key:\"init\",value:function(){e.enabled&&(this.config.addCSS&&(this.element.style.userSelect=\"none\",this.element.style.webKitUserSelect=\"none\",this.element.style.touchAction=\"manipulation\"),this.listeners(!0),this.element.rangeTouch=this)}},{key:\"destroy\",value:function(){e.enabled&&(this.config.addCSS&&(this.element.style.userSelect=\"\",this.element.style.webKitUserSelect=\"\",this.element.style.touchAction=\"\"),this.listeners(!1),this.element.rangeTouch=null)}},{key:\"listeners\",value:function(e){var t=this,i=e?\"addEventListener\":\"removeEventListener\";[\"touchstart\",\"touchmove\",\"touchend\"].forEach((function(e){t.element[i](e,(function(e){return t.set(e)}),!1)}))}},{key:\"get\",value:function(t){if(!e.enabled||!m.event(t))return null;var i,s=t.target,n=t.changedTouches[0],a=parseFloat(s.getAttribute(\"min\"))||0,l=parseFloat(s.getAttribute(\"max\"))||100,r=parseFloat(s.getAttribute(\"step\"))||1,o=s.getBoundingClientRect(),c=100/o.width*(this.config.thumbWidth/2)/100;return 0>(i=100/o.width*(n.clientX-o.left))?i=0:100i?i-=(100-2*i)*c:50null!=e?e.constructor:null,y=(e,t)=>Boolean(e&&t&&e instanceof t),b=e=>null==e,v=e=>f(e)===Object,w=e=>f(e)===String,T=e=>\"function\"==typeof e,k=e=>Array.isArray(e),C=e=>y(e,NodeList),A=e=>b(e)||(w(e)||k(e)||C(e))&&!e.length||v(e)&&!Object.keys(e).length;var S={nullOrUndefined:b,object:v,number:e=>f(e)===Number&&!Number.isNaN(e),string:w,boolean:e=>f(e)===Boolean,function:T,array:k,weakMap:e=>y(e,WeakMap),nodeList:C,element:e=>null!==e&&\"object\"==typeof e&&1===e.nodeType&&\"object\"==typeof e.style&&\"object\"==typeof e.ownerDocument,textNode:e=>f(e)===Text,event:e=>y(e,Event),keyboardEvent:e=>y(e,KeyboardEvent),cue:e=>y(e,window.TextTrackCue)||y(e,window.VTTCue),track:e=>y(e,TextTrack)||!b(e)&&w(e.kind),promise:e=>y(e,Promise)&&T(e.then),url:e=>{if(y(e,window.URL))return!0;if(!w(e))return!1;let t=e;e.startsWith(\"http://\")&&e.startsWith(\"https://\")||(t=`http://${e}`);try{return!A(new URL(t).hostname)}catch(e){return!1}},empty:A};const E=(()=>{const e=document.createElement(\"span\"),t={WebkitTransition:\"webkitTransitionEnd\",MozTransition:\"transitionend\",OTransition:\"oTransitionEnd otransitionend\",transition:\"transitionend\"},i=Object.keys(t).find((t=>void 0!==e.style[t]));return!!S.string(i)&&t[i]})();function P(e,t){setTimeout((()=>{try{e.hidden=!0,e.offsetHeight,e.hidden=!1}catch(e){}}),t)}var M={isIE:Boolean(window.document.documentMode),isEdge:/Edge/g.test(navigator.userAgent),isWebKit:\"WebkitAppearance\"in document.documentElement.style&&!/Edge/g.test(navigator.userAgent),isIPhone:/iPhone|iPod/gi.test(navigator.userAgent)&&navigator.maxTouchPoints>1,isIPadOS:\"MacIntel\"===navigator.platform&&navigator.maxTouchPoints>1,isIos:/iPad|iPhone|iPod/gi.test(navigator.userAgent)&&navigator.maxTouchPoints>1};function N(e,t){return t.split(\".\").reduce(((e,t)=>e&&e[t]),e)}function x(e={},...t){if(!t.length)return e;const i=t.shift();return S.object(i)?(Object.keys(i).forEach((t=>{S.object(i[t])?(Object.keys(e).includes(t)||Object.assign(e,{[t]:{}}),x(e[t],i[t])):Object.assign(e,{[t]:i[t]})})),x(e,...t)):e}function L(e,t){const i=e.length?e:[e];Array.from(i).reverse().forEach(((e,i)=>{const s=i>0?t.cloneNode(!0):t,n=e.parentNode,a=e.nextSibling;s.appendChild(e),a?n.insertBefore(s,a):n.appendChild(s)}))}function I(e,t){S.element(e)&&!S.empty(t)&&Object.entries(t).filter((([,e])=>!S.nullOrUndefined(e))).forEach((([t,i])=>e.setAttribute(t,i)))}function $(e,t,i){const s=document.createElement(e);return S.object(t)&&I(s,t),S.string(i)&&(s.innerText=i),s}function _(e,t,i,s){S.element(t)&&t.appendChild($(e,i,s))}function O(e){S.nodeList(e)||S.array(e)?Array.from(e).forEach(O):S.element(e)&&S.element(e.parentNode)&&e.parentNode.removeChild(e)}function j(e){if(!S.element(e))return;let{length:t}=e.childNodes;for(;t>0;)e.removeChild(e.lastChild),t-=1}function q(e,t){return S.element(t)&&S.element(t.parentNode)&&S.element(e)?(t.parentNode.replaceChild(e,t),e):null}function D(e,t){if(!S.string(e)||S.empty(e))return{};const i={},s=x({},t);return e.split(\",\").forEach((e=>{const t=e.trim(),n=t.replace(\".\",\"\"),a=t.replace(/[[\\]]/g,\"\").split(\"=\"),[l]=a,r=a.length>1?a[1].replace(/[\"']/g,\"\"):\"\";switch(t.charAt(0)){case\".\":S.string(s.class)?i.class=`${s.class} ${n}`:i.class=n;break;case\"#\":i.id=t.replace(\"#\",\"\");break;case\"[\":i[l]=r}})),x(s,i)}function H(e,t){if(!S.element(e))return;let i=t;S.boolean(i)||(i=!e.hidden),e.hidden=i}function R(e,t,i){if(S.nodeList(e))return Array.from(e).map((e=>R(e,t,i)));if(S.element(e)){let s=\"toggle\";return void 0!==i&&(s=i?\"add\":\"remove\"),e.classList[s](t),e.classList.contains(t)}return!1}function F(e,t){return S.element(e)&&e.classList.contains(t)}function V(e,t){const{prototype:i}=Element;return(i.matches||i.webkitMatchesSelector||i.mozMatchesSelector||i.msMatchesSelector||function(){return Array.from(document.querySelectorAll(t)).includes(this)}).call(e,t)}function U(e){return this.elements.container.querySelectorAll(e)}function B(e){return this.elements.container.querySelector(e)}function W(e=null,t=!1){S.element(e)&&e.focus({preventScroll:!0,focusVisible:t})}const z={\"audio/ogg\":\"vorbis\",\"audio/wav\":\"1\",\"video/webm\":\"vp8, vorbis\",\"video/mp4\":\"avc1.42E01E, mp4a.40.2\",\"video/ogg\":\"theora\"},K={audio:\"canPlayType\"in document.createElement(\"audio\"),video:\"canPlayType\"in document.createElement(\"video\"),check(e,t){const i=K[e]||\"html5\"!==t;return{api:i,ui:i&&K.rangeInput}},pip:!(M.isIPhone||!S.function($(\"video\").webkitSetPresentationMode)&&(!document.pictureInPictureEnabled||$(\"video\").disablePictureInPicture)),airplay:S.function(window.WebKitPlaybackTargetAvailabilityEvent),playsinline:\"playsInline\"in document.createElement(\"video\"),mime(e){if(S.empty(e))return!1;const[t]=e.split(\"/\");let i=e;if(!this.isHTML5||t!==this.type)return!1;Object.keys(z).includes(i)&&(i+=`; codecs=\"${z[e]}\"`);try{return Boolean(i&&this.media.canPlayType(i).replace(/no/,\"\"))}catch(e){return!1}},textTracks:\"textTracks\"in document.createElement(\"video\"),rangeInput:(()=>{const e=document.createElement(\"input\");return e.type=\"range\",\"range\"===e.type})(),touch:\"ontouchstart\"in document.documentElement,transitions:!1!==E,reducedMotion:\"matchMedia\"in window&&window.matchMedia(\"(prefers-reduced-motion)\").matches},Y=(()=>{let e=!1;try{const t=Object.defineProperty({},\"passive\",{get:()=>(e=!0,null)});window.addEventListener(\"test\",null,t),window.removeEventListener(\"test\",null,t)}catch(e){}return e})();function Q(e,t,i,s=!1,n=!0,a=!1){if(!e||!(\"addEventListener\"in e)||S.empty(t)||!S.function(i))return;const l=t.split(\" \");let r=a;Y&&(r={passive:n,capture:a}),l.forEach((t=>{this&&this.eventListeners&&s&&this.eventListeners.push({element:e,type:t,callback:i,options:r}),e[s?\"addEventListener\":\"removeEventListener\"](t,i,r)}))}function X(e,t=\"\",i,s=!0,n=!1){Q.call(this,e,t,i,!0,s,n)}function J(e,t=\"\",i,s=!0,n=!1){Q.call(this,e,t,i,!1,s,n)}function G(e,t=\"\",i,s=!0,n=!1){const a=(...l)=>{J(e,t,a,s,n),i.apply(this,l)};Q.call(this,e,t,a,!0,s,n)}function Z(e,t=\"\",i=!1,s={}){if(!S.element(e)||S.empty(t))return;const n=new CustomEvent(t,{bubbles:i,detail:{...s,plyr:this}});e.dispatchEvent(n)}function ee(){this&&this.eventListeners&&(this.eventListeners.forEach((e=>{const{element:t,type:i,callback:s,options:n}=e;t.removeEventListener(i,s,n)})),this.eventListeners=[])}function te(){return new Promise((e=>this.ready?setTimeout(e,0):X.call(this,this.elements.container,\"ready\",e))).then((()=>{}))}function ie(e){S.promise(e)&&e.then(null,(()=>{}))}function se(e){return S.array(e)?e.filter(((t,i)=>e.indexOf(t)===i)):e}function ne(e,t){return S.array(e)&&e.length?e.reduce(((e,i)=>Math.abs(i-t)({...e,[t/i]:[t,i]})),{});function re(e){if(!(S.array(e)||S.string(e)&&e.includes(\":\")))return!1;return(S.array(e)?e:e.split(\":\")).map(Number).every(S.number)}function oe(e){if(!S.array(e)||!e.every(S.number))return null;const[t,i]=e,s=(e,t)=>0===t?e:s(t,e%t),n=s(t,i);return[t/n,i/n]}function ce(e){const t=e=>re(e)?e.split(\":\").map(Number):null;let i=t(e);if(null===i&&(i=t(this.config.ratio)),null===i&&!S.empty(this.embed)&&S.array(this.embed.ratio)&&({ratio:i}=this.embed),null===i&&this.isHTML5){const{videoWidth:e,videoHeight:t}=this.media;i=[e,t]}return oe(i)}function ue(e){if(!this.isVideo)return{};const{wrapper:t}=this.elements,i=ce.call(this,e);if(!S.array(i))return{};const[s,n]=oe(i),a=100/s*n;if(ae(`aspect-ratio: ${s}/${n}`)?t.style.aspectRatio=`${s}/${n}`:t.style.paddingBottom=`${a}%`,this.isVimeo&&!this.config.vimeo.premium&&this.supported.ui){const e=100/this.media.offsetWidth*parseInt(window.getComputedStyle(this.media).paddingBottom,10),i=(e-a)/(e/50);this.fullscreen.active?t.style.paddingBottom=null:this.media.style.transform=`translateY(-${i}%)`}else this.isHTML5&&t.classList.add(this.config.classNames.videoFixedRatio);return{padding:a,ratio:i}}function he(e,t,i=.05){const s=e/t,n=ne(Object.keys(le),s);return Math.abs(n-s)<=i?le[n]:[e,t]}const de={getSources(){if(!this.isHTML5)return[];return Array.from(this.media.querySelectorAll(\"source\")).filter((e=>{const t=e.getAttribute(\"type\");return!!S.empty(t)||K.mime.call(this,t)}))},getQualityOptions(){return this.config.quality.forced?this.config.quality.options:de.getSources.call(this).map((e=>Number(e.getAttribute(\"size\")))).filter(Boolean)},setup(){if(!this.isHTML5)return;const e=this;e.options.speed=e.config.speed.options,S.empty(this.config.ratio)||ue.call(e),Object.defineProperty(e.media,\"quality\",{get(){const t=de.getSources.call(e).find((t=>t.getAttribute(\"src\")===e.source));return t&&Number(t.getAttribute(\"size\"))},set(t){if(e.quality!==t){if(e.config.quality.forced&&S.function(e.config.quality.onChange))e.config.quality.onChange(t);else{const i=de.getSources.call(e).find((e=>Number(e.getAttribute(\"size\"))===t));if(!i)return;const{currentTime:s,paused:n,preload:a,readyState:l,playbackRate:r}=e.media;e.media.src=i.getAttribute(\"src\"),(\"none\"!==a||l)&&(e.once(\"loadedmetadata\",(()=>{e.speed=r,e.currentTime=s,n||ie(e.play())})),e.media.load())}Z.call(e,e.media,\"qualitychange\",!1,{quality:t})}}})},cancelRequests(){this.isHTML5&&(O(de.getSources.call(this)),this.media.setAttribute(\"src\",this.config.blankVideo),this.media.load(),this.debug.log(\"Cancelled network requests\"))}};function me(e,...t){return S.empty(e)?e:e.toString().replace(/{(\\d+)}/g,((e,i)=>t[i].toString()))}const pe=(e=\"\",t=\"\",i=\"\")=>e.replace(new RegExp(t.toString().replace(/([.*+?^=!:${}()|[\\]/\\\\])/g,\"\\\\$1\"),\"g\"),i.toString()),ge=(e=\"\")=>e.toString().replace(/\\w\\S*/g,(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()));function fe(e=\"\"){let t=e.toString();return t=function(e=\"\"){let t=e.toString();return t=pe(t,\"-\",\" \"),t=pe(t,\"_\",\" \"),t=ge(t),pe(t,\" \",\"\")}(t),t.charAt(0).toLowerCase()+t.slice(1)}function ye(e){const t=document.createElement(\"div\");return t.appendChild(e),t.innerHTML}const be={pip:\"PIP\",airplay:\"AirPlay\",html5:\"HTML5\",vimeo:\"Vimeo\",youtube:\"YouTube\"},ve={get(e=\"\",t={}){if(S.empty(e)||S.empty(t))return\"\";let i=N(t.i18n,e);if(S.empty(i))return Object.keys(be).includes(e)?be[e]:\"\";const s={\"{seektime}\":t.seekTime,\"{title}\":t.title};return Object.entries(s).forEach((([e,t])=>{i=pe(i,e,t)})),i}};class we{constructor(t){e(this,\"get\",(e=>{if(!we.supported||!this.enabled)return null;const t=window.localStorage.getItem(this.key);if(S.empty(t))return null;const i=JSON.parse(t);return S.string(e)&&e.length?i[e]:i})),e(this,\"set\",(e=>{if(!we.supported||!this.enabled)return;if(!S.object(e))return;let t=this.get();S.empty(t)&&(t={}),x(t,e);try{window.localStorage.setItem(this.key,JSON.stringify(t))}catch(e){}})),this.enabled=t.config.storage.enabled,this.key=t.config.storage.key}static get supported(){try{if(!(\"localStorage\"in window))return!1;const e=\"___test\";return window.localStorage.setItem(e,e),window.localStorage.removeItem(e),!0}catch(e){return!1}}}function Te(e,t=\"text\"){return new Promise(((i,s)=>{try{const s=new XMLHttpRequest;if(!(\"withCredentials\"in s))return;s.addEventListener(\"load\",(()=>{if(\"text\"===t)try{i(JSON.parse(s.responseText))}catch(e){i(s.responseText)}else i(s.response)})),s.addEventListener(\"error\",(()=>{throw new Error(s.status)})),s.open(\"GET\",e,!0),s.responseType=t,s.send()}catch(e){s(e)}}))}function ke(e,t){if(!S.string(e))return;const i=\"cache\",s=S.string(t);let n=!1;const a=()=>null!==document.getElementById(t),l=(e,t)=>{e.innerHTML=t,s&&a()||document.body.insertAdjacentElement(\"afterbegin\",e)};if(!s||!a()){const a=we.supported,r=document.createElement(\"div\");if(r.setAttribute(\"hidden\",\"\"),s&&r.setAttribute(\"id\",t),a){const e=window.localStorage.getItem(`${i}-${t}`);if(n=null!==e,n){const t=JSON.parse(e);l(r,t.content)}}Te(e).then((e=>{if(!S.empty(e)){if(a)try{window.localStorage.setItem(`${i}-${t}`,JSON.stringify({content:e}))}catch(e){}l(r,e)}})).catch((()=>{}))}}const Ce=e=>Math.trunc(e/60/60%60,10),Ae=e=>Math.trunc(e/60%60,10),Se=e=>Math.trunc(e%60,10);function Ee(e=0,t=!1,i=!1){if(!S.number(e))return Ee(void 0,t,i);const s=e=>`0${e}`.slice(-2);let n=Ce(e);const a=Ae(e),l=Se(e);return n=t||n>0?`${n}:`:\"\",`${i&&e>0?\"-\":\"\"}${n}${s(a)}:${s(l)}`}const Pe={getIconUrl(){const e=new URL(this.config.iconUrl,window.location),t=window.location.host?window.location.host:window.top.location.host,i=e.host!==t||M.isIE&&!window.svg4everybody;return{url:this.config.iconUrl,cors:i}},findElements(){try{return this.elements.controls=B.call(this,this.config.selectors.controls.wrapper),this.elements.buttons={play:U.call(this,this.config.selectors.buttons.play),pause:B.call(this,this.config.selectors.buttons.pause),restart:B.call(this,this.config.selectors.buttons.restart),rewind:B.call(this,this.config.selectors.buttons.rewind),fastForward:B.call(this,this.config.selectors.buttons.fastForward),mute:B.call(this,this.config.selectors.buttons.mute),pip:B.call(this,this.config.selectors.buttons.pip),airplay:B.call(this,this.config.selectors.buttons.airplay),settings:B.call(this,this.config.selectors.buttons.settings),captions:B.call(this,this.config.selectors.buttons.captions),fullscreen:B.call(this,this.config.selectors.buttons.fullscreen)},this.elements.progress=B.call(this,this.config.selectors.progress),this.elements.inputs={seek:B.call(this,this.config.selectors.inputs.seek),volume:B.call(this,this.config.selectors.inputs.volume)},this.elements.display={buffer:B.call(this,this.config.selectors.display.buffer),currentTime:B.call(this,this.config.selectors.display.currentTime),duration:B.call(this,this.config.selectors.display.duration)},S.element(this.elements.progress)&&(this.elements.display.seekTooltip=this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`)),!0}catch(e){return this.debug.warn(\"It looks like there is a problem with your custom controls HTML\",e),this.toggleNativeControls(!0),!1}},createIcon(e,t){const i=\"http://www.w3.org/2000/svg\",s=Pe.getIconUrl.call(this),n=`${s.cors?\"\":s.url}#${this.config.iconPrefix}`,a=document.createElementNS(i,\"svg\");I(a,x(t,{\"aria-hidden\":\"true\",focusable:\"false\"}));const l=document.createElementNS(i,\"use\"),r=`${n}-${e}`;return\"href\"in l&&l.setAttributeNS(\"http://www.w3.org/1999/xlink\",\"href\",r),l.setAttributeNS(\"http://www.w3.org/1999/xlink\",\"xlink:href\",r),a.appendChild(l),a},createLabel(e,t={}){const i=ve.get(e,this.config);return $(\"span\",{...t,class:[t.class,this.config.classNames.hidden].filter(Boolean).join(\" \")},i)},createBadge(e){if(S.empty(e))return null;const t=$(\"span\",{class:this.config.classNames.menu.value});return t.appendChild($(\"span\",{class:this.config.classNames.menu.badge},e)),t},createButton(e,t){const i=x({},t);let s=fe(e);const n={element:\"button\",toggle:!1,label:null,icon:null,labelPressed:null,iconPressed:null};switch([\"element\",\"icon\",\"label\"].forEach((e=>{Object.keys(i).includes(e)&&(n[e]=i[e],delete i[e])})),\"button\"!==n.element||Object.keys(i).includes(\"type\")||(i.type=\"button\"),Object.keys(i).includes(\"class\")?i.class.split(\" \").some((e=>e===this.config.classNames.control))||x(i,{class:`${i.class} ${this.config.classNames.control}`}):i.class=this.config.classNames.control,e){case\"play\":n.toggle=!0,n.label=\"play\",n.labelPressed=\"pause\",n.icon=\"play\",n.iconPressed=\"pause\";break;case\"mute\":n.toggle=!0,n.label=\"mute\",n.labelPressed=\"unmute\",n.icon=\"volume\",n.iconPressed=\"muted\";break;case\"captions\":n.toggle=!0,n.label=\"enableCaptions\",n.labelPressed=\"disableCaptions\",n.icon=\"captions-off\",n.iconPressed=\"captions-on\";break;case\"fullscreen\":n.toggle=!0,n.label=\"enterFullscreen\",n.labelPressed=\"exitFullscreen\",n.icon=\"enter-fullscreen\",n.iconPressed=\"exit-fullscreen\";break;case\"play-large\":i.class+=` ${this.config.classNames.control}--overlaid`,s=\"play\",n.label=\"play\",n.icon=\"play\";break;default:S.empty(n.label)&&(n.label=s),S.empty(n.icon)&&(n.icon=e)}const a=$(n.element);return n.toggle?(a.appendChild(Pe.createIcon.call(this,n.iconPressed,{class:\"icon--pressed\"})),a.appendChild(Pe.createIcon.call(this,n.icon,{class:\"icon--not-pressed\"})),a.appendChild(Pe.createLabel.call(this,n.labelPressed,{class:\"label--pressed\"})),a.appendChild(Pe.createLabel.call(this,n.label,{class:\"label--not-pressed\"}))):(a.appendChild(Pe.createIcon.call(this,n.icon)),a.appendChild(Pe.createLabel.call(this,n.label))),x(i,D(this.config.selectors.buttons[s],i)),I(a,i),\"play\"===s?(S.array(this.elements.buttons[s])||(this.elements.buttons[s]=[]),this.elements.buttons[s].push(a)):this.elements.buttons[s]=a,a},createRange(e,t){const i=$(\"input\",x(D(this.config.selectors.inputs[e]),{type:\"range\",min:0,max:100,step:.01,value:0,autocomplete:\"off\",role:\"slider\",\"aria-label\":ve.get(e,this.config),\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-valuenow\":0},t));return this.elements.inputs[e]=i,Pe.updateRangeFill.call(this,i),g.setup(i),i},createProgress(e,t){const i=$(\"progress\",x(D(this.config.selectors.display[e]),{min:0,max:100,value:0,role:\"progressbar\",\"aria-hidden\":!0},t));if(\"volume\"!==e){i.appendChild($(\"span\",null,\"0\"));const t={played:\"played\",buffer:\"buffered\"}[e],s=t?ve.get(t,this.config):\"\";i.innerText=`% ${s.toLowerCase()}`}return this.elements.display[e]=i,i},createTime(e,t){const i=D(this.config.selectors.display[e],t),s=$(\"div\",x(i,{class:`${i.class?i.class:\"\"} ${this.config.classNames.display.time} `.trim(),\"aria-label\":ve.get(e,this.config),role:\"timer\"}),\"00:00\");return this.elements.display[e]=s,s},bindMenuItemShortcuts(e,t){X.call(this,e,\"keydown keyup\",(i=>{if(![\" \",\"ArrowUp\",\"ArrowDown\",\"ArrowRight\"].includes(i.key))return;if(i.preventDefault(),i.stopPropagation(),\"keydown\"===i.type)return;const s=V(e,'[role=\"menuitemradio\"]');if(!s&&[\" \",\"ArrowRight\"].includes(i.key))Pe.showMenuPanel.call(this,t,!0);else{let t;\" \"!==i.key&&(\"ArrowDown\"===i.key||s&&\"ArrowRight\"===i.key?(t=e.nextElementSibling,S.element(t)||(t=e.parentNode.firstElementChild)):(t=e.previousElementSibling,S.element(t)||(t=e.parentNode.lastElementChild)),W.call(this,t,!0))}}),!1),X.call(this,e,\"keyup\",(e=>{\"Return\"===e.key&&Pe.focusFirstMenuItem.call(this,null,!0)}))},createMenuItem({value:e,list:t,type:i,title:s,badge:n=null,checked:a=!1}){const l=D(this.config.selectors.inputs[i]),r=$(\"button\",x(l,{type:\"button\",role:\"menuitemradio\",class:`${this.config.classNames.control} ${l.class?l.class:\"\"}`.trim(),\"aria-checked\":a,value:e})),o=$(\"span\");o.innerHTML=s,S.element(n)&&o.appendChild(n),r.appendChild(o),Object.defineProperty(r,\"checked\",{enumerable:!0,get:()=>\"true\"===r.getAttribute(\"aria-checked\"),set(e){e&&Array.from(r.parentNode.children).filter((e=>V(e,'[role=\"menuitemradio\"]'))).forEach((e=>e.setAttribute(\"aria-checked\",\"false\"))),r.setAttribute(\"aria-checked\",e?\"true\":\"false\")}}),this.listeners.bind(r,\"click keyup\",(t=>{if(!S.keyboardEvent(t)||\" \"===t.key){switch(t.preventDefault(),t.stopPropagation(),r.checked=!0,i){case\"language\":this.currentTrack=Number(e);break;case\"quality\":this.quality=e;break;case\"speed\":this.speed=parseFloat(e)}Pe.showMenuPanel.call(this,\"home\",S.keyboardEvent(t))}}),i,!1),Pe.bindMenuItemShortcuts.call(this,r,i),t.appendChild(r)},formatTime(e=0,t=!1){if(!S.number(e))return e;return Ee(e,Ce(this.duration)>0,t)},updateTimeDisplay(e=null,t=0,i=!1){S.element(e)&&S.number(t)&&(e.innerText=Pe.formatTime(t,i))},updateVolume(){this.supported.ui&&(S.element(this.elements.inputs.volume)&&Pe.setRange.call(this,this.elements.inputs.volume,this.muted?0:this.volume),S.element(this.elements.buttons.mute)&&(this.elements.buttons.mute.pressed=this.muted||0===this.volume))},setRange(e,t=0){S.element(e)&&(e.value=t,Pe.updateRangeFill.call(this,e))},updateProgress(e){if(!this.supported.ui||!S.event(e))return;let t=0;const i=(e,t)=>{const i=S.number(t)?t:0,s=S.element(e)?e:this.elements.display.buffer;if(S.element(s)){s.value=i;const e=s.getElementsByTagName(\"span\")[0];S.element(e)&&(e.childNodes[0].nodeValue=i)}};if(e)switch(e.type){case\"timeupdate\":case\"seeking\":case\"seeked\":s=this.currentTime,n=this.duration,t=0===s||0===n||Number.isNaN(s)||Number.isNaN(n)?0:(s/n*100).toFixed(2),\"timeupdate\"===e.type&&Pe.setRange.call(this,this.elements.inputs.seek,t);break;case\"playing\":case\"progress\":i(this.elements.display.buffer,100*this.buffered)}var s,n},updateRangeFill(e){const t=S.event(e)?e.target:e;if(S.element(t)&&\"range\"===t.getAttribute(\"type\")){if(V(t,this.config.selectors.inputs.seek)){t.setAttribute(\"aria-valuenow\",this.currentTime);const e=Pe.formatTime(this.currentTime),i=Pe.formatTime(this.duration),s=ve.get(\"seekLabel\",this.config);t.setAttribute(\"aria-valuetext\",s.replace(\"{currentTime}\",e).replace(\"{duration}\",i))}else if(V(t,this.config.selectors.inputs.volume)){const e=100*t.value;t.setAttribute(\"aria-valuenow\",e),t.setAttribute(\"aria-valuetext\",`${e.toFixed(1)}%`)}else t.setAttribute(\"aria-valuenow\",t.value);(M.isWebKit||M.isIPadOS)&&t.style.setProperty(\"--value\",t.value/t.max*100+\"%\")}},updateSeekTooltip(e){var t,i;if(!this.config.tooltips.seek||!S.element(this.elements.inputs.seek)||!S.element(this.elements.display.seekTooltip)||0===this.duration)return;const s=this.elements.display.seekTooltip,n=`${this.config.classNames.tooltip}--visible`,a=e=>R(s,n,e);if(this.touch)return void a(!1);let l=0;const r=this.elements.progress.getBoundingClientRect();if(S.event(e))l=100/r.width*(e.pageX-r.left);else{if(!F(s,n))return;l=parseFloat(s.style.left,10)}l<0?l=0:l>100&&(l=100);const o=this.duration/100*l;s.innerText=Pe.formatTime(o);const c=null===(t=this.config.markers)||void 0===t||null===(i=t.points)||void 0===i?void 0:i.find((({time:e})=>e===Math.round(o)));c&&s.insertAdjacentHTML(\"afterbegin\",`${c.label}
`),s.style.left=`${l}%`,S.event(e)&&[\"mouseenter\",\"mouseleave\"].includes(e.type)&&a(\"mouseenter\"===e.type)},timeUpdate(e){const t=!S.element(this.elements.display.duration)&&this.config.invertTime;Pe.updateTimeDisplay.call(this,this.elements.display.currentTime,t?this.duration-this.currentTime:this.currentTime,t),e&&\"timeupdate\"===e.type&&this.media.seeking||Pe.updateProgress.call(this,e)},durationUpdate(){if(!this.supported.ui||!this.config.invertTime&&this.currentTime)return;if(this.duration>=2**32)return H(this.elements.display.currentTime,!0),void H(this.elements.progress,!0);S.element(this.elements.inputs.seek)&&this.elements.inputs.seek.setAttribute(\"aria-valuemax\",this.duration);const e=S.element(this.elements.display.duration);!e&&this.config.displayDuration&&this.paused&&Pe.updateTimeDisplay.call(this,this.elements.display.currentTime,this.duration),e&&Pe.updateTimeDisplay.call(this,this.elements.display.duration,this.duration),this.config.markers.enabled&&Pe.setMarkers.call(this),Pe.updateSeekTooltip.call(this)},toggleMenuButton(e,t){H(this.elements.settings.buttons[e],!t)},updateSetting(e,t,i){const s=this.elements.settings.panels[e];let n=null,a=t;if(\"captions\"===e)n=this.currentTrack;else{if(n=S.empty(i)?this[e]:i,S.empty(n)&&(n=this.config[e].default),!S.empty(this.options[e])&&!this.options[e].includes(n))return void this.debug.warn(`Unsupported value of '${n}' for ${e}`);if(!this.config[e].options.includes(n))return void this.debug.warn(`Disabled value of '${n}' for ${e}`)}if(S.element(a)||(a=s&&s.querySelector('[role=\"menu\"]')),!S.element(a))return;this.elements.settings.buttons[e].querySelector(`.${this.config.classNames.menu.value}`).innerHTML=Pe.getLabel.call(this,e,n);const l=a&&a.querySelector(`[value=\"${n}\"]`);S.element(l)&&(l.checked=!0)},getLabel(e,t){switch(e){case\"speed\":return 1===t?ve.get(\"normal\",this.config):`${t}×`;case\"quality\":if(S.number(t)){const e=ve.get(`qualityLabel.${t}`,this.config);return e.length?e:`${t}p`}return ge(t);case\"captions\":return xe.getLabel.call(this);default:return null}},setQualityMenu(e){if(!S.element(this.elements.settings.panels.quality))return;const t=\"quality\",i=this.elements.settings.panels.quality.querySelector('[role=\"menu\"]');S.array(e)&&(this.options.quality=se(e).filter((e=>this.config.quality.options.includes(e))));const s=!S.empty(this.options.quality)&&this.options.quality.length>1;if(Pe.toggleMenuButton.call(this,t,s),j(i),Pe.checkMenu.call(this),!s)return;const n=e=>{const t=ve.get(`qualityBadge.${e}`,this.config);return t.length?Pe.createBadge.call(this,t):null};this.options.quality.sort(((e,t)=>{const i=this.config.quality.options;return i.indexOf(e)>i.indexOf(t)?1:-1})).forEach((e=>{Pe.createMenuItem.call(this,{value:e,list:i,type:t,title:Pe.getLabel.call(this,\"quality\",e),badge:n(e)})})),Pe.updateSetting.call(this,t,i)},setCaptionsMenu(){if(!S.element(this.elements.settings.panels.captions))return;const e=\"captions\",t=this.elements.settings.panels.captions.querySelector('[role=\"menu\"]'),i=xe.getTracks.call(this),s=Boolean(i.length);if(Pe.toggleMenuButton.call(this,e,s),j(t),Pe.checkMenu.call(this),!s)return;const n=i.map(((e,i)=>({value:i,checked:this.captions.toggled&&this.currentTrack===i,title:xe.getLabel.call(this,e),badge:e.language&&Pe.createBadge.call(this,e.language.toUpperCase()),list:t,type:\"language\"})));n.unshift({value:-1,checked:!this.captions.toggled,title:ve.get(\"disabled\",this.config),list:t,type:\"language\"}),n.forEach(Pe.createMenuItem.bind(this)),Pe.updateSetting.call(this,e,t)},setSpeedMenu(){if(!S.element(this.elements.settings.panels.speed))return;const e=\"speed\",t=this.elements.settings.panels.speed.querySelector('[role=\"menu\"]');this.options.speed=this.options.speed.filter((e=>e>=this.minimumSpeed&&e<=this.maximumSpeed));const i=!S.empty(this.options.speed)&&this.options.speed.length>1;Pe.toggleMenuButton.call(this,e,i),j(t),Pe.checkMenu.call(this),i&&(this.options.speed.forEach((i=>{Pe.createMenuItem.call(this,{value:i,list:t,type:e,title:Pe.getLabel.call(this,\"speed\",i)})})),Pe.updateSetting.call(this,e,t))},checkMenu(){const{buttons:e}=this.elements.settings,t=!S.empty(e)&&Object.values(e).some((e=>!e.hidden));H(this.elements.settings.menu,!t)},focusFirstMenuItem(e,t=!1){if(this.elements.settings.popup.hidden)return;let i=e;S.element(i)||(i=Object.values(this.elements.settings.panels).find((e=>!e.hidden)));const s=i.querySelector('[role^=\"menuitem\"]');W.call(this,s,t)},toggleMenu(e){const{popup:t}=this.elements.settings,i=this.elements.buttons.settings;if(!S.element(t)||!S.element(i))return;const{hidden:s}=t;let n=s;if(S.boolean(e))n=e;else if(S.keyboardEvent(e)&&\"Escape\"===e.key)n=!1;else if(S.event(e)){const s=S.function(e.composedPath)?e.composedPath()[0]:e.target,a=t.contains(s);if(a||!a&&e.target!==i&&n)return}i.setAttribute(\"aria-expanded\",n),H(t,!n),R(this.elements.container,this.config.classNames.menu.open,n),n&&S.keyboardEvent(e)?Pe.focusFirstMenuItem.call(this,null,!0):n||s||W.call(this,i,S.keyboardEvent(e))},getMenuSize(e){const t=e.cloneNode(!0);t.style.position=\"absolute\",t.style.opacity=0,t.removeAttribute(\"hidden\"),e.parentNode.appendChild(t);const i=t.scrollWidth,s=t.scrollHeight;return O(t),{width:i,height:s}},showMenuPanel(e=\"\",t=!1){const i=this.elements.container.querySelector(`#plyr-settings-${this.id}-${e}`);if(!S.element(i))return;const s=i.parentNode,n=Array.from(s.children).find((e=>!e.hidden));if(K.transitions&&!K.reducedMotion){s.style.width=`${n.scrollWidth}px`,s.style.height=`${n.scrollHeight}px`;const e=Pe.getMenuSize.call(this,i),t=e=>{e.target===s&&[\"width\",\"height\"].includes(e.propertyName)&&(s.style.width=\"\",s.style.height=\"\",J.call(this,s,E,t))};X.call(this,s,E,t),s.style.width=`${e.width}px`,s.style.height=`${e.height}px`}H(n,!0),H(i,!1),Pe.focusFirstMenuItem.call(this,i,t)},setDownloadUrl(){const e=this.elements.buttons.download;S.element(e)&&e.setAttribute(\"href\",this.download)},create(e){const{bindMenuItemShortcuts:t,createButton:i,createProgress:s,createRange:n,createTime:a,setQualityMenu:l,setSpeedMenu:r,showMenuPanel:o}=Pe;this.elements.controls=null,S.array(this.config.controls)&&this.config.controls.includes(\"play-large\")&&this.elements.container.appendChild(i.call(this,\"play-large\"));const c=$(\"div\",D(this.config.selectors.controls.wrapper));this.elements.controls=c;const u={class:\"plyr__controls__item\"};return se(S.array(this.config.controls)?this.config.controls:[]).forEach((l=>{if(\"restart\"===l&&c.appendChild(i.call(this,\"restart\",u)),\"rewind\"===l&&c.appendChild(i.call(this,\"rewind\",u)),\"play\"===l&&c.appendChild(i.call(this,\"play\",u)),\"fast-forward\"===l&&c.appendChild(i.call(this,\"fast-forward\",u)),\"progress\"===l){const t=$(\"div\",{class:`${u.class} plyr__progress__container`}),i=$(\"div\",D(this.config.selectors.progress));if(i.appendChild(n.call(this,\"seek\",{id:`plyr-seek-${e.id}`})),i.appendChild(s.call(this,\"buffer\")),this.config.tooltips.seek){const e=$(\"span\",{class:this.config.classNames.tooltip},\"00:00\");i.appendChild(e),this.elements.display.seekTooltip=e}this.elements.progress=i,t.appendChild(this.elements.progress),c.appendChild(t)}if(\"current-time\"===l&&c.appendChild(a.call(this,\"currentTime\",u)),\"duration\"===l&&c.appendChild(a.call(this,\"duration\",u)),\"mute\"===l||\"volume\"===l){let{volume:t}=this.elements;if(S.element(t)&&c.contains(t)||(t=$(\"div\",x({},u,{class:`${u.class} plyr__volume`.trim()})),this.elements.volume=t,c.appendChild(t)),\"mute\"===l&&t.appendChild(i.call(this,\"mute\")),\"volume\"===l&&!M.isIos&&!M.isIPadOS){const i={max:1,step:.05,value:this.config.volume};t.appendChild(n.call(this,\"volume\",x(i,{id:`plyr-volume-${e.id}`})))}}if(\"captions\"===l&&c.appendChild(i.call(this,\"captions\",u)),\"settings\"===l&&!S.empty(this.config.settings)){const s=$(\"div\",x({},u,{class:`${u.class} plyr__menu`.trim(),hidden:\"\"}));s.appendChild(i.call(this,\"settings\",{\"aria-haspopup\":!0,\"aria-controls\":`plyr-settings-${e.id}`,\"aria-expanded\":!1}));const n=$(\"div\",{class:\"plyr__menu__container\",id:`plyr-settings-${e.id}`,hidden:\"\"}),a=$(\"div\"),l=$(\"div\",{id:`plyr-settings-${e.id}-home`}),r=$(\"div\",{role:\"menu\"});l.appendChild(r),a.appendChild(l),this.elements.settings.panels.home=l,this.config.settings.forEach((i=>{const s=$(\"button\",x(D(this.config.selectors.buttons.settings),{type:\"button\",class:`${this.config.classNames.control} ${this.config.classNames.control}--forward`,role:\"menuitem\",\"aria-haspopup\":!0,hidden:\"\"}));t.call(this,s,i),X.call(this,s,\"click\",(()=>{o.call(this,i,!1)}));const n=$(\"span\",null,ve.get(i,this.config)),l=$(\"span\",{class:this.config.classNames.menu.value});l.innerHTML=e[i],n.appendChild(l),s.appendChild(n),r.appendChild(s);const c=$(\"div\",{id:`plyr-settings-${e.id}-${i}`,hidden:\"\"}),u=$(\"button\",{type:\"button\",class:`${this.config.classNames.control} ${this.config.classNames.control}--back`});u.appendChild($(\"span\",{\"aria-hidden\":!0},ve.get(i,this.config))),u.appendChild($(\"span\",{class:this.config.classNames.hidden},ve.get(\"menuBack\",this.config))),X.call(this,c,\"keydown\",(e=>{\"ArrowLeft\"===e.key&&(e.preventDefault(),e.stopPropagation(),o.call(this,\"home\",!0))}),!1),X.call(this,u,\"click\",(()=>{o.call(this,\"home\",!1)})),c.appendChild(u),c.appendChild($(\"div\",{role:\"menu\"})),a.appendChild(c),this.elements.settings.buttons[i]=s,this.elements.settings.panels[i]=c})),n.appendChild(a),s.appendChild(n),c.appendChild(s),this.elements.settings.popup=n,this.elements.settings.menu=s}if(\"pip\"===l&&K.pip&&c.appendChild(i.call(this,\"pip\",u)),\"airplay\"===l&&K.airplay&&c.appendChild(i.call(this,\"airplay\",u)),\"download\"===l){const e=x({},u,{element:\"a\",href:this.download,target:\"_blank\"});this.isHTML5&&(e.download=\"\");const{download:t}=this.config.urls;!S.url(t)&&this.isEmbed&&x(e,{icon:`logo-${this.provider}`,label:this.provider}),c.appendChild(i.call(this,\"download\",e))}\"fullscreen\"===l&&c.appendChild(i.call(this,\"fullscreen\",u))})),this.isHTML5&&l.call(this,de.getQualityOptions.call(this)),r.call(this),c},inject(){if(this.config.loadSprite){const e=Pe.getIconUrl.call(this);e.cors&&ke(e.url,\"sprite-plyr\")}this.id=Math.floor(1e4*Math.random());let e=null;this.elements.controls=null;const t={id:this.id,seektime:this.config.seekTime,title:this.config.title};let i=!0;S.function(this.config.controls)&&(this.config.controls=this.config.controls.call(this,t)),this.config.controls||(this.config.controls=[]),S.element(this.config.controls)||S.string(this.config.controls)?e=this.config.controls:(e=Pe.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:xe.getLabel.call(this)}),i=!1);let s;i&&S.string(this.config.controls)&&(e=(e=>{let i=e;return Object.entries(t).forEach((([e,t])=>{i=pe(i,`{${e}}`,t)})),i})(e)),S.string(this.config.selectors.controls.container)&&(s=document.querySelector(this.config.selectors.controls.container)),S.element(s)||(s=this.elements.container);if(s[S.element(e)?\"insertAdjacentElement\":\"insertAdjacentHTML\"](\"afterbegin\",e),S.element(this.elements.controls)||Pe.findElements.call(this),!S.empty(this.elements.buttons)){const e=e=>{const t=this.config.classNames.controlPressed;e.setAttribute(\"aria-pressed\",\"false\"),Object.defineProperty(e,\"pressed\",{configurable:!0,enumerable:!0,get:()=>F(e,t),set(i=!1){R(e,t,i),e.setAttribute(\"aria-pressed\",i?\"true\":\"false\")}})};Object.values(this.elements.buttons).filter(Boolean).forEach((t=>{S.array(t)||S.nodeList(t)?Array.from(t).filter(Boolean).forEach(e):e(t)}))}if(M.isEdge&&P(s),this.config.tooltips.controls){const{classNames:e,selectors:t}=this.config,i=`${t.controls.wrapper} ${t.labels} .${e.hidden}`,s=U.call(this,i);Array.from(s).forEach((e=>{R(e,this.config.classNames.hidden,!1),R(e,this.config.classNames.tooltip,!0)}))}},setMediaMetadata(){try{\"mediaSession\"in navigator&&(navigator.mediaSession.metadata=new window.MediaMetadata({title:this.config.mediaMetadata.title,artist:this.config.mediaMetadata.artist,album:this.config.mediaMetadata.album,artwork:this.config.mediaMetadata.artwork}))}catch(e){}},setMarkers(){var e,t;if(!this.duration||this.elements.markers)return;const i=null===(e=this.config.markers)||void 0===e||null===(t=e.points)||void 0===t?void 0:t.filter((({time:e})=>e>0&&eR(a,l,e);i.forEach((e=>{const t=$(\"span\",{class:this.config.classNames.marker},\"\"),i=e.time/this.duration*100+\"%\";a&&(t.addEventListener(\"mouseenter\",(()=>{e.label||(a.style.left=i,a.innerHTML=e.label,r(!0))})),t.addEventListener(\"mouseleave\",(()=>{r(!1)}))),t.addEventListener(\"click\",(()=>{this.currentTime=e.time})),t.style.left=i,n.appendChild(t)})),s.appendChild(n),this.config.tooltips.seek||(a=$(\"span\",{class:this.config.classNames.tooltip},\"\"),s.appendChild(a)),this.elements.markers={points:n,tip:a},this.elements.progress.appendChild(s)}};function Me(e,t=!0){let i=e;if(t){const e=document.createElement(\"a\");e.href=i,i=e.href}try{return new URL(i)}catch(e){return null}}function Ne(e){const t=new URLSearchParams;return S.object(e)&&Object.entries(e).forEach((([e,i])=>{t.set(e,i)})),t}const xe={setup(){if(!this.supported.ui)return;if(!this.isVideo||this.isYouTube||this.isHTML5&&!K.textTracks)return void(S.array(this.config.controls)&&this.config.controls.includes(\"settings\")&&this.config.settings.includes(\"captions\")&&Pe.setCaptionsMenu.call(this));var e,t;if(S.element(this.elements.captions)||(this.elements.captions=$(\"div\",D(this.config.selectors.captions)),this.elements.captions.setAttribute(\"dir\",\"auto\"),e=this.elements.captions,t=this.elements.wrapper,S.element(e)&&S.element(t)&&t.parentNode.insertBefore(e,t.nextSibling)),M.isIE&&window.URL){const e=this.media.querySelectorAll(\"track\");Array.from(e).forEach((e=>{const t=e.getAttribute(\"src\"),i=Me(t);null!==i&&i.hostname!==window.location.href.hostname&&[\"http:\",\"https:\"].includes(i.protocol)&&Te(t,\"blob\").then((t=>{e.setAttribute(\"src\",window.URL.createObjectURL(t))})).catch((()=>{O(e)}))}))}const i=se((navigator.languages||[navigator.language||navigator.userLanguage||\"en\"]).map((e=>e.split(\"-\")[0])));let s=(this.storage.get(\"language\")||this.config.captions.language||\"auto\").toLowerCase();\"auto\"===s&&([s]=i);let n=this.storage.get(\"captions\");if(S.boolean(n)||({active:n}=this.config.captions),Object.assign(this.captions,{toggled:!1,active:n,language:s,languages:i}),this.isHTML5){const e=this.config.captions.update?\"addtrack removetrack\":\"removetrack\";X.call(this,this.media.textTracks,e,xe.update.bind(this))}setTimeout(xe.update.bind(this),0)},update(){const e=xe.getTracks.call(this,!0),{active:t,language:i,meta:s,currentTrackNode:n}=this.captions,a=Boolean(e.find((e=>e.language===i)));this.isHTML5&&this.isVideo&&e.filter((e=>!s.get(e))).forEach((e=>{this.debug.log(\"Track added\",e),s.set(e,{default:\"showing\"===e.mode}),\"showing\"===e.mode&&(e.mode=\"hidden\"),X.call(this,e,\"cuechange\",(()=>xe.updateCues.call(this)))})),(a&&this.language!==i||!e.includes(n))&&(xe.setLanguage.call(this,i),xe.toggle.call(this,t&&a)),this.elements&&R(this.elements.container,this.config.classNames.captions.enabled,!S.empty(e)),S.array(this.config.controls)&&this.config.controls.includes(\"settings\")&&this.config.settings.includes(\"captions\")&&Pe.setCaptionsMenu.call(this)},toggle(e,t=!0){if(!this.supported.ui)return;const{toggled:i}=this.captions,s=this.config.classNames.captions.active,n=S.nullOrUndefined(e)?!i:e;if(n!==i){if(t||(this.captions.active=n,this.storage.set({captions:n})),!this.language&&n&&!t){const e=xe.getTracks.call(this),t=xe.findTrack.call(this,[this.captions.language,...this.captions.languages],!0);return this.captions.language=t.language,void xe.set.call(this,e.indexOf(t))}this.elements.buttons.captions&&(this.elements.buttons.captions.pressed=n),R(this.elements.container,s,n),this.captions.toggled=n,Pe.updateSetting.call(this,\"captions\"),Z.call(this,this.media,n?\"captionsenabled\":\"captionsdisabled\")}setTimeout((()=>{n&&this.captions.toggled&&(this.captions.currentTrackNode.mode=\"hidden\")}))},set(e,t=!0){const i=xe.getTracks.call(this);if(-1!==e)if(S.number(e))if(e in i){if(this.captions.currentTrack!==e){this.captions.currentTrack=e;const s=i[e],{language:n}=s||{};this.captions.currentTrackNode=s,Pe.updateSetting.call(this,\"captions\"),t||(this.captions.language=n,this.storage.set({language:n})),this.isVimeo&&this.embed.enableTextTrack(n),Z.call(this,this.media,\"languagechange\")}xe.toggle.call(this,!0,t),this.isHTML5&&this.isVideo&&xe.updateCues.call(this)}else this.debug.warn(\"Track not found\",e);else this.debug.warn(\"Invalid caption argument\",e);else xe.toggle.call(this,!1,t)},setLanguage(e,t=!0){if(!S.string(e))return void this.debug.warn(\"Invalid language argument\",e);const i=e.toLowerCase();this.captions.language=i;const s=xe.getTracks.call(this),n=xe.findTrack.call(this,[i]);xe.set.call(this,s.indexOf(n),t)},getTracks(e=!1){return Array.from((this.media||{}).textTracks||[]).filter((t=>!this.isHTML5||e||this.captions.meta.has(t))).filter((e=>[\"captions\",\"subtitles\"].includes(e.kind)))},findTrack(e,t=!1){const i=xe.getTracks.call(this),s=e=>Number((this.captions.meta.get(e)||{}).default),n=Array.from(i).sort(((e,t)=>s(t)-s(e)));let a;return e.every((e=>(a=n.find((t=>t.language===e)),!a))),a||(t?n[0]:void 0)},getCurrentTrack(){return xe.getTracks.call(this)[this.currentTrack]},getLabel(e){let t=e;return!S.track(t)&&K.textTracks&&this.captions.toggled&&(t=xe.getCurrentTrack.call(this)),S.track(t)?S.empty(t.label)?S.empty(t.language)?ve.get(\"enabled\",this.config):e.language.toUpperCase():t.label:ve.get(\"disabled\",this.config)},updateCues(e){if(!this.supported.ui)return;if(!S.element(this.elements.captions))return void this.debug.warn(\"No captions element to render to\");if(!S.nullOrUndefined(e)&&!Array.isArray(e))return void this.debug.warn(\"updateCues: Invalid input\",e);let t=e;if(!t){const e=xe.getCurrentTrack.call(this);t=Array.from((e||{}).activeCues||[]).map((e=>e.getCueAsHTML())).map(ye)}const i=t.map((e=>e.trim())).join(\"\\n\");if(i!==this.elements.captions.innerHTML){j(this.elements.captions);const e=$(\"span\",D(this.config.selectors.caption));e.innerHTML=i,this.elements.captions.appendChild(e),Z.call(this,this.media,\"cuechange\")}}},Le={enabled:!0,title:\"\",debug:!1,autoplay:!1,autopause:!0,playsinline:!0,seekTime:10,volume:1,muted:!1,duration:null,displayDuration:!0,invertTime:!0,toggleInvert:!0,ratio:null,clickToPlay:!0,hideControls:!0,resetOnEnd:!1,disableContextMenu:!0,loadSprite:!0,iconPrefix:\"plyr\",iconUrl:\"https://cdn.plyr.io/3.7.8/plyr.svg\",blankVideo:\"https://cdn.plyr.io/static/blank.mp4\",quality:{default:576,options:[4320,2880,2160,1440,1080,720,576,480,360,240],forced:!1,onChange:null},loop:{active:!1},speed:{selected:1,options:[.5,.75,1,1.25,1.5,1.75,2,4]},keyboard:{focused:!0,global:!1},tooltips:{controls:!1,seek:!0},captions:{active:!1,language:\"auto\",update:!1},fullscreen:{enabled:!0,fallback:!0,iosNative:!1},storage:{enabled:!0,key:\"plyr\"},controls:[\"play-large\",\"play\",\"progress\",\"current-time\",\"mute\",\"volume\",\"captions\",\"settings\",\"pip\",\"airplay\",\"fullscreen\"],settings:[\"captions\",\"quality\",\"speed\"],i18n:{restart:\"Restart\",rewind:\"Rewind {seektime}s\",play:\"Play\",pause:\"Pause\",fastForward:\"Forward {seektime}s\",seek:\"Seek\",seekLabel:\"{currentTime} of {duration}\",played:\"Played\",buffered:\"Buffered\",currentTime:\"Current time\",duration:\"Duration\",volume:\"Volume\",mute:\"Mute\",unmute:\"Unmute\",enableCaptions:\"Enable captions\",disableCaptions:\"Disable captions\",download:\"Download\",enterFullscreen:\"Enter fullscreen\",exitFullscreen:\"Exit fullscreen\",frameTitle:\"Player for {title}\",captions:\"Captions\",settings:\"Settings\",pip:\"PIP\",menuBack:\"Go back to previous menu\",speed:\"Speed\",normal:\"Normal\",quality:\"Quality\",loop:\"Loop\",start:\"Start\",end:\"End\",all:\"All\",reset:\"Reset\",disabled:\"Disabled\",enabled:\"Enabled\",advertisement:\"Ad\",qualityBadge:{2160:\"4K\",1440:\"HD\",1080:\"HD\",720:\"HD\",576:\"SD\",480:\"SD\"}},urls:{download:null,vimeo:{sdk:\"https://player.vimeo.com/api/player.js\",iframe:\"https://player.vimeo.com/video/{0}?{1}\",api:\"https://vimeo.com/api/oembed.json?url={0}\"},youtube:{sdk:\"https://www.youtube.com/iframe_api\",api:\"https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}\"},googleIMA:{sdk:\"https://imasdk.googleapis.com/js/sdkloader/ima3.js\"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,fastForward:null,mute:null,volume:null,captions:null,download:null,fullscreen:null,pip:null,airplay:null,speed:null,quality:null,loop:null,language:null},events:[\"ended\",\"progress\",\"stalled\",\"playing\",\"waiting\",\"canplay\",\"canplaythrough\",\"loadstart\",\"loadeddata\",\"loadedmetadata\",\"timeupdate\",\"volumechange\",\"play\",\"pause\",\"error\",\"seeking\",\"seeked\",\"emptied\",\"ratechange\",\"cuechange\",\"download\",\"enterfullscreen\",\"exitfullscreen\",\"captionsenabled\",\"captionsdisabled\",\"languagechange\",\"controlshidden\",\"controlsshown\",\"ready\",\"statechange\",\"qualitychange\",\"adsloaded\",\"adscontentpause\",\"adscontentresume\",\"adstarted\",\"adsmidpoint\",\"adscomplete\",\"adsallcomplete\",\"adsimpression\",\"adsclick\"],selectors:{editable:\"input, textarea, select, [contenteditable]\",container:\".plyr\",controls:{container:null,wrapper:\".plyr__controls\"},labels:\"[data-plyr]\",buttons:{play:'[data-plyr=\"play\"]',pause:'[data-plyr=\"pause\"]',restart:'[data-plyr=\"restart\"]',rewind:'[data-plyr=\"rewind\"]',fastForward:'[data-plyr=\"fast-forward\"]',mute:'[data-plyr=\"mute\"]',captions:'[data-plyr=\"captions\"]',download:'[data-plyr=\"download\"]',fullscreen:'[data-plyr=\"fullscreen\"]',pip:'[data-plyr=\"pip\"]',airplay:'[data-plyr=\"airplay\"]',settings:'[data-plyr=\"settings\"]',loop:'[data-plyr=\"loop\"]'},inputs:{seek:'[data-plyr=\"seek\"]',volume:'[data-plyr=\"volume\"]',speed:'[data-plyr=\"speed\"]',language:'[data-plyr=\"language\"]',quality:'[data-plyr=\"quality\"]'},display:{currentTime:\".plyr__time--current\",duration:\".plyr__time--duration\",buffer:\".plyr__progress__buffer\",loop:\".plyr__progress__loop\",volume:\".plyr__volume--display\"},progress:\".plyr__progress\",captions:\".plyr__captions\",caption:\".plyr__caption\"},classNames:{type:\"plyr--{0}\",provider:\"plyr--{0}\",video:\"plyr__video-wrapper\",embed:\"plyr__video-embed\",videoFixedRatio:\"plyr__video-wrapper--fixed-ratio\",embedContainer:\"plyr__video-embed__container\",poster:\"plyr__poster\",posterEnabled:\"plyr__poster-enabled\",ads:\"plyr__ads\",control:\"plyr__control\",controlPressed:\"plyr__control--pressed\",playing:\"plyr--playing\",paused:\"plyr--paused\",stopped:\"plyr--stopped\",loading:\"plyr--loading\",hover:\"plyr--hover\",tooltip:\"plyr__tooltip\",cues:\"plyr__cues\",marker:\"plyr__progress__marker\",hidden:\"plyr__sr-only\",hideControls:\"plyr--hide-controls\",isTouch:\"plyr--is-touch\",uiSupported:\"plyr--full-ui\",noTransition:\"plyr--no-transition\",display:{time:\"plyr__time\"},menu:{value:\"plyr__menu__value\",badge:\"plyr__badge\",open:\"plyr--menu-open\"},captions:{enabled:\"plyr--captions-enabled\",active:\"plyr--captions-active\"},fullscreen:{enabled:\"plyr--fullscreen-enabled\",fallback:\"plyr--fullscreen-fallback\"},pip:{supported:\"plyr--pip-supported\",active:\"plyr--pip-active\"},airplay:{supported:\"plyr--airplay-supported\",active:\"plyr--airplay-active\"},previewThumbnails:{thumbContainer:\"plyr__preview-thumb\",thumbContainerShown:\"plyr__preview-thumb--is-shown\",imageContainer:\"plyr__preview-thumb__image-container\",timeContainer:\"plyr__preview-thumb__time-container\",scrubbingContainer:\"plyr__preview-scrubbing\",scrubbingContainerShown:\"plyr__preview-scrubbing--is-shown\"}},attributes:{embed:{provider:\"data-plyr-provider\",id:\"data-plyr-embed-id\",hash:\"data-plyr-embed-hash\"}},ads:{enabled:!1,publisherId:\"\",tagUrl:\"\"},previewThumbnails:{enabled:!1,src:\"\"},vimeo:{byline:!1,portrait:!1,title:!1,speed:!0,transparent:!1,customControls:!0,referrerPolicy:null,premium:!1},youtube:{rel:0,showinfo:0,iv_load_policy:3,modestbranding:1,customControls:!0,noCookie:!1},mediaMetadata:{title:\"\",artist:\"\",album:\"\",artwork:[]},markers:{enabled:!1,points:[]}},Ie=\"picture-in-picture\",$e=\"inline\",_e={html5:\"html5\",youtube:\"youtube\",vimeo:\"vimeo\"},Oe=\"audio\",je=\"video\";const qe=()=>{};class De{constructor(e=!1){this.enabled=window.console&&e,this.enabled&&this.log(\"Debugging enabled\")}get log(){return this.enabled?Function.prototype.bind.call(console.log,console):qe}get warn(){return this.enabled?Function.prototype.bind.call(console.warn,console):qe}get error(){return this.enabled?Function.prototype.bind.call(console.error,console):qe}}class He{constructor(t){e(this,\"onChange\",(()=>{if(!this.supported)return;const e=this.player.elements.buttons.fullscreen;S.element(e)&&(e.pressed=this.active);const t=this.target===this.player.media?this.target:this.player.elements.container;Z.call(this.player,t,this.active?\"enterfullscreen\":\"exitfullscreen\",!0)})),e(this,\"toggleFallback\",((e=!1)=>{if(e?this.scrollPosition={x:window.scrollX??0,y:window.scrollY??0}:window.scrollTo(this.scrollPosition.x,this.scrollPosition.y),document.body.style.overflow=e?\"hidden\":\"\",R(this.target,this.player.config.classNames.fullscreen.fallback,e),M.isIos){let t=document.head.querySelector('meta[name=\"viewport\"]');const i=\"viewport-fit=cover\";t||(t=document.createElement(\"meta\"),t.setAttribute(\"name\",\"viewport\"));const s=S.string(t.content)&&t.content.includes(i);e?(this.cleanupViewport=!s,s||(t.content+=`,${i}`)):this.cleanupViewport&&(t.content=t.content.split(\",\").filter((e=>e.trim()!==i)).join(\",\"))}this.onChange()})),e(this,\"trapFocus\",(e=>{if(M.isIos||M.isIPadOS||!this.active||\"Tab\"!==e.key)return;const t=document.activeElement,i=U.call(this.player,\"a[href], button:not(:disabled), input:not(:disabled), [tabindex]\"),[s]=i,n=i[i.length-1];t!==n||e.shiftKey?t===s&&e.shiftKey&&(n.focus(),e.preventDefault()):(s.focus(),e.preventDefault())})),e(this,\"update\",(()=>{if(this.supported){let e;e=this.forceFallback?\"Fallback (forced)\":He.nativeSupported?\"Native\":\"Fallback\",this.player.debug.log(`${e} fullscreen enabled`)}else this.player.debug.log(\"Fullscreen not supported and fallback disabled\");R(this.player.elements.container,this.player.config.classNames.fullscreen.enabled,this.supported)})),e(this,\"enter\",(()=>{this.supported&&(M.isIos&&this.player.config.fullscreen.iosNative?this.player.isVimeo?this.player.embed.requestFullscreen():this.target.webkitEnterFullscreen():!He.nativeSupported||this.forceFallback?this.toggleFallback(!0):this.prefix?S.empty(this.prefix)||this.target[`${this.prefix}Request${this.property}`]():this.target.requestFullscreen({navigationUI:\"hide\"}))})),e(this,\"exit\",(()=>{if(this.supported)if(M.isIos&&this.player.config.fullscreen.iosNative)this.player.isVimeo?this.player.embed.exitFullscreen():this.target.webkitEnterFullscreen(),ie(this.player.play());else if(!He.nativeSupported||this.forceFallback)this.toggleFallback(!1);else if(this.prefix){if(!S.empty(this.prefix)){const e=\"moz\"===this.prefix?\"Cancel\":\"Exit\";document[`${this.prefix}${e}${this.property}`]()}}else(document.cancelFullScreen||document.exitFullscreen).call(document)})),e(this,\"toggle\",(()=>{this.active?this.exit():this.enter()})),this.player=t,this.prefix=He.prefix,this.property=He.property,this.scrollPosition={x:0,y:0},this.forceFallback=\"force\"===t.config.fullscreen.fallback,this.player.elements.fullscreen=t.config.fullscreen.container&&function(e,t){const{prototype:i}=Element;return(i.closest||function(){let e=this;do{if(V.matches(e,t))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType);return null}).call(e,t)}(this.player.elements.container,t.config.fullscreen.container),X.call(this.player,document,\"ms\"===this.prefix?\"MSFullscreenChange\":`${this.prefix}fullscreenchange`,(()=>{this.onChange()})),X.call(this.player,this.player.elements.container,\"dblclick\",(e=>{S.element(this.player.elements.controls)&&this.player.elements.controls.contains(e.target)||this.player.listeners.proxy(e,this.toggle,\"fullscreen\")})),X.call(this,this.player.elements.container,\"keydown\",(e=>this.trapFocus(e))),this.update()}static get nativeSupported(){return!!(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled)}get useNative(){return He.nativeSupported&&!this.forceFallback}static get prefix(){if(S.function(document.exitFullscreen))return\"\";let e=\"\";return[\"webkit\",\"moz\",\"ms\"].some((t=>!(!S.function(document[`${t}ExitFullscreen`])&&!S.function(document[`${t}CancelFullScreen`]))&&(e=t,!0))),e}static get property(){return\"moz\"===this.prefix?\"FullScreen\":\"Fullscreen\"}get supported(){return[this.player.config.fullscreen.enabled,this.player.isVideo,He.nativeSupported||this.player.config.fullscreen.fallback,!this.player.isYouTube||He.nativeSupported||!M.isIos||this.player.config.playsinline&&!this.player.config.fullscreen.iosNative].every(Boolean)}get active(){if(!this.supported)return!1;if(!He.nativeSupported||this.forceFallback)return F(this.target,this.player.config.classNames.fullscreen.fallback);const e=this.prefix?this.target.getRootNode()[`${this.prefix}${this.property}Element`]:this.target.getRootNode().fullscreenElement;return e&&e.shadowRoot?e===this.target.getRootNode().host:e===this.target}get target(){return M.isIos&&this.player.config.fullscreen.iosNative?this.player.media:this.player.elements.fullscreen??this.player.elements.container}}function Re(e,t=1){return new Promise(((i,s)=>{const n=new Image,a=()=>{delete n.onload,delete n.onerror,(n.naturalWidth>=t?i:s)(n)};Object.assign(n,{onload:a,onerror:a,src:e})}))}const Fe={addStyleHook(){R(this.elements.container,this.config.selectors.container.replace(\".\",\"\"),!0),R(this.elements.container,this.config.classNames.uiSupported,this.supported.ui)},toggleNativeControls(e=!1){e&&this.isHTML5?this.media.setAttribute(\"controls\",\"\"):this.media.removeAttribute(\"controls\")},build(){if(this.listeners.media(),!this.supported.ui)return this.debug.warn(`Basic support only for ${this.provider} ${this.type}`),void Fe.toggleNativeControls.call(this,!0);S.element(this.elements.controls)||(Pe.inject.call(this),this.listeners.controls()),Fe.toggleNativeControls.call(this),this.isHTML5&&xe.setup.call(this),this.volume=null,this.muted=null,this.loop=null,this.quality=null,this.speed=null,Pe.updateVolume.call(this),Pe.timeUpdate.call(this),Pe.durationUpdate.call(this),Fe.checkPlaying.call(this),R(this.elements.container,this.config.classNames.pip.supported,K.pip&&this.isHTML5&&this.isVideo),R(this.elements.container,this.config.classNames.airplay.supported,K.airplay&&this.isHTML5),R(this.elements.container,this.config.classNames.isTouch,this.touch),this.ready=!0,setTimeout((()=>{Z.call(this,this.media,\"ready\")}),0),Fe.setTitle.call(this),this.poster&&Fe.setPoster.call(this,this.poster,!1).catch((()=>{})),this.config.duration&&Pe.durationUpdate.call(this),this.config.mediaMetadata&&Pe.setMediaMetadata.call(this)},setTitle(){let e=ve.get(\"play\",this.config);if(S.string(this.config.title)&&!S.empty(this.config.title)&&(e+=`, ${this.config.title}`),Array.from(this.elements.buttons.play||[]).forEach((t=>{t.setAttribute(\"aria-label\",e)})),this.isEmbed){const e=B.call(this,\"iframe\");if(!S.element(e))return;const t=S.empty(this.config.title)?\"video\":this.config.title,i=ve.get(\"frameTitle\",this.config);e.setAttribute(\"title\",i.replace(\"{title}\",t))}},togglePoster(e){R(this.elements.container,this.config.classNames.posterEnabled,e)},setPoster(e,t=!0){return t&&this.poster?Promise.reject(new Error(\"Poster already set\")):(this.media.setAttribute(\"data-poster\",e),this.elements.poster.removeAttribute(\"hidden\"),te.call(this).then((()=>Re(e))).catch((t=>{throw e===this.poster&&Fe.togglePoster.call(this,!1),t})).then((()=>{if(e!==this.poster)throw new Error(\"setPoster cancelled by later call to setPoster\")})).then((()=>(Object.assign(this.elements.poster.style,{backgroundImage:`url('${e}')`,backgroundSize:\"\"}),Fe.togglePoster.call(this,!0),e))))},checkPlaying(e){R(this.elements.container,this.config.classNames.playing,this.playing),R(this.elements.container,this.config.classNames.paused,this.paused),R(this.elements.container,this.config.classNames.stopped,this.stopped),Array.from(this.elements.buttons.play||[]).forEach((e=>{Object.assign(e,{pressed:this.playing}),e.setAttribute(\"aria-label\",ve.get(this.playing?\"pause\":\"play\",this.config))})),S.event(e)&&\"timeupdate\"===e.type||Fe.toggleControls.call(this)},checkLoading(e){this.loading=[\"stalled\",\"waiting\"].includes(e.type),clearTimeout(this.timers.loading),this.timers.loading=setTimeout((()=>{R(this.elements.container,this.config.classNames.loading,this.loading),Fe.toggleControls.call(this)}),this.loading?250:0)},toggleControls(e){const{controls:t}=this.elements;if(t&&this.config.hideControls){const i=this.touch&&this.lastSeekTime+2e3>Date.now();this.toggleControls(Boolean(e||this.loading||this.paused||t.pressed||t.hover||i))}},migrateStyles(){Object.values({...this.media.style}).filter((e=>!S.empty(e)&&S.string(e)&&e.startsWith(\"--plyr\"))).forEach((e=>{this.elements.container.style.setProperty(e,this.media.style.getPropertyValue(e)),this.media.style.removeProperty(e)})),S.empty(this.media.style)&&this.media.removeAttribute(\"style\")}};class Ve{constructor(t){e(this,\"firstTouch\",(()=>{const{player:e}=this,{elements:t}=e;e.touch=!0,R(t.container,e.config.classNames.isTouch,!0)})),e(this,\"global\",((e=!0)=>{const{player:t}=this;t.config.keyboard.global&&Q.call(t,window,\"keydown keyup\",this.handleKey,e,!1),Q.call(t,document.body,\"click\",this.toggleMenu,e),G.call(t,document.body,\"touchstart\",this.firstTouch)})),e(this,\"container\",(()=>{const{player:e}=this,{config:t,elements:i,timers:s}=e;!t.keyboard.global&&t.keyboard.focused&&X.call(e,i.container,\"keydown keyup\",this.handleKey,!1),X.call(e,i.container,\"mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen\",(t=>{const{controls:n}=i;n&&\"enterfullscreen\"===t.type&&(n.pressed=!1,n.hover=!1);let a=0;[\"touchstart\",\"touchmove\",\"mousemove\"].includes(t.type)&&(Fe.toggleControls.call(e,!0),a=e.touch?3e3:2e3),clearTimeout(s.controls),s.controls=setTimeout((()=>Fe.toggleControls.call(e,!1)),a)}));const n=()=>{if(!e.isVimeo||e.config.vimeo.premium)return;const t=i.wrapper,{active:s}=e.fullscreen,[n,a]=ce.call(e),l=ae(`aspect-ratio: ${n} / ${a}`);if(!s)return void(l?(t.style.width=null,t.style.height=null):(t.style.maxWidth=null,t.style.margin=null));const[r,o]=[Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),Math.max(document.documentElement.clientHeight||0,window.innerHeight||0)],c=r/o>n/a;l?(t.style.width=c?\"auto\":\"100%\",t.style.height=c?\"100%\":\"auto\"):(t.style.maxWidth=c?o/a*n+\"px\":null,t.style.margin=c?\"0 auto\":null)},a=()=>{clearTimeout(s.resized),s.resized=setTimeout(n,50)};X.call(e,i.container,\"enterfullscreen exitfullscreen\",(t=>{const{target:s}=e.fullscreen;if(s!==i.container)return;if(!e.isEmbed&&S.empty(e.config.ratio))return;n();(\"enterfullscreen\"===t.type?X:J).call(e,window,\"resize\",a)}))})),e(this,\"media\",(()=>{const{player:e}=this,{elements:t}=e;if(X.call(e,e.media,\"timeupdate seeking seeked\",(t=>Pe.timeUpdate.call(e,t))),X.call(e,e.media,\"durationchange loadeddata loadedmetadata\",(t=>Pe.durationUpdate.call(e,t))),X.call(e,e.media,\"ended\",(()=>{e.isHTML5&&e.isVideo&&e.config.resetOnEnd&&(e.restart(),e.pause())})),X.call(e,e.media,\"progress playing seeking seeked\",(t=>Pe.updateProgress.call(e,t))),X.call(e,e.media,\"volumechange\",(t=>Pe.updateVolume.call(e,t))),X.call(e,e.media,\"playing play pause ended emptied timeupdate\",(t=>Fe.checkPlaying.call(e,t))),X.call(e,e.media,\"waiting canplay seeked playing\",(t=>Fe.checkLoading.call(e,t))),e.supported.ui&&e.config.clickToPlay&&!e.isAudio){const i=B.call(e,`.${e.config.classNames.video}`);if(!S.element(i))return;X.call(e,t.container,\"click\",(s=>{([t.container,i].includes(s.target)||i.contains(s.target))&&(e.touch&&e.config.hideControls||(e.ended?(this.proxy(s,e.restart,\"restart\"),this.proxy(s,(()=>{ie(e.play())}),\"play\")):this.proxy(s,(()=>{ie(e.togglePlay())}),\"play\")))}))}e.supported.ui&&e.config.disableContextMenu&&X.call(e,t.wrapper,\"contextmenu\",(e=>{e.preventDefault()}),!1),X.call(e,e.media,\"volumechange\",(()=>{e.storage.set({volume:e.volume,muted:e.muted})})),X.call(e,e.media,\"ratechange\",(()=>{Pe.updateSetting.call(e,\"speed\"),e.storage.set({speed:e.speed})})),X.call(e,e.media,\"qualitychange\",(t=>{Pe.updateSetting.call(e,\"quality\",null,t.detail.quality)})),X.call(e,e.media,\"ready qualitychange\",(()=>{Pe.setDownloadUrl.call(e)}));const i=e.config.events.concat([\"keyup\",\"keydown\"]).join(\" \");X.call(e,e.media,i,(i=>{let{detail:s={}}=i;\"error\"===i.type&&(s=e.media.error),Z.call(e,t.container,i.type,!0,s)}))})),e(this,\"proxy\",((e,t,i)=>{const{player:s}=this,n=s.config.listeners[i];let a=!0;S.function(n)&&(a=n.call(s,e)),!1!==a&&S.function(t)&&t.call(s,e)})),e(this,\"bind\",((e,t,i,s,n=!0)=>{const{player:a}=this,l=a.config.listeners[s],r=S.function(l);X.call(a,e,t,(e=>this.proxy(e,i,s)),n&&!r)})),e(this,\"controls\",(()=>{const{player:e}=this,{elements:t}=e,i=M.isIE?\"change\":\"input\";if(t.buttons.play&&Array.from(t.buttons.play).forEach((t=>{this.bind(t,\"click\",(()=>{ie(e.togglePlay())}),\"play\")})),this.bind(t.buttons.restart,\"click\",e.restart,\"restart\"),this.bind(t.buttons.rewind,\"click\",(()=>{e.lastSeekTime=Date.now(),e.rewind()}),\"rewind\"),this.bind(t.buttons.fastForward,\"click\",(()=>{e.lastSeekTime=Date.now(),e.forward()}),\"fastForward\"),this.bind(t.buttons.mute,\"click\",(()=>{e.muted=!e.muted}),\"mute\"),this.bind(t.buttons.captions,\"click\",(()=>e.toggleCaptions())),this.bind(t.buttons.download,\"click\",(()=>{Z.call(e,e.media,\"download\")}),\"download\"),this.bind(t.buttons.fullscreen,\"click\",(()=>{e.fullscreen.toggle()}),\"fullscreen\"),this.bind(t.buttons.pip,\"click\",(()=>{e.pip=\"toggle\"}),\"pip\"),this.bind(t.buttons.airplay,\"click\",e.airplay,\"airplay\"),this.bind(t.buttons.settings,\"click\",(t=>{t.stopPropagation(),t.preventDefault(),Pe.toggleMenu.call(e,t)}),null,!1),this.bind(t.buttons.settings,\"keyup\",(t=>{[\" \",\"Enter\"].includes(t.key)&&(\"Enter\"!==t.key?(t.preventDefault(),t.stopPropagation(),Pe.toggleMenu.call(e,t)):Pe.focusFirstMenuItem.call(e,null,!0))}),null,!1),this.bind(t.settings.menu,\"keydown\",(t=>{\"Escape\"===t.key&&Pe.toggleMenu.call(e,t)})),this.bind(t.inputs.seek,\"mousedown mousemove\",(e=>{const i=t.progress.getBoundingClientRect(),s=100/i.width*(e.pageX-i.left);e.currentTarget.setAttribute(\"seek-value\",s)})),this.bind(t.inputs.seek,\"mousedown mouseup keydown keyup touchstart touchend\",(t=>{const i=t.currentTarget,s=\"play-on-seeked\";if(S.keyboardEvent(t)&&![\"ArrowLeft\",\"ArrowRight\"].includes(t.key))return;e.lastSeekTime=Date.now();const n=i.hasAttribute(s),a=[\"mouseup\",\"touchend\",\"keyup\"].includes(t.type);n&&a?(i.removeAttribute(s),ie(e.play())):!a&&e.playing&&(i.setAttribute(s,\"\"),e.pause())})),M.isIos){const t=U.call(e,'input[type=\"range\"]');Array.from(t).forEach((e=>this.bind(e,i,(e=>P(e.target)))))}this.bind(t.inputs.seek,i,(t=>{const i=t.currentTarget;let s=i.getAttribute(\"seek-value\");S.empty(s)&&(s=i.value),i.removeAttribute(\"seek-value\"),e.currentTime=s/i.max*e.duration}),\"seek\"),this.bind(t.progress,\"mouseenter mouseleave mousemove\",(t=>Pe.updateSeekTooltip.call(e,t))),this.bind(t.progress,\"mousemove touchmove\",(t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.startMove(t)})),this.bind(t.progress,\"mouseleave touchend click\",(()=>{const{previewThumbnails:t}=e;t&&t.loaded&&t.endMove(!1,!0)})),this.bind(t.progress,\"mousedown touchstart\",(t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.startScrubbing(t)})),this.bind(t.progress,\"mouseup touchend\",(t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.endScrubbing(t)})),M.isWebKit&&Array.from(U.call(e,'input[type=\"range\"]')).forEach((t=>{this.bind(t,\"input\",(t=>Pe.updateRangeFill.call(e,t.target)))})),e.config.toggleInvert&&!S.element(t.display.duration)&&this.bind(t.display.currentTime,\"click\",(()=>{0!==e.currentTime&&(e.config.invertTime=!e.config.invertTime,Pe.timeUpdate.call(e))})),this.bind(t.inputs.volume,i,(t=>{e.volume=t.target.value}),\"volume\"),this.bind(t.controls,\"mouseenter mouseleave\",(i=>{t.controls.hover=!e.touch&&\"mouseenter\"===i.type})),t.fullscreen&&Array.from(t.fullscreen.children).filter((e=>!e.contains(t.container))).forEach((i=>{this.bind(i,\"mouseenter mouseleave\",(i=>{t.controls&&(t.controls.hover=!e.touch&&\"mouseenter\"===i.type)}))})),this.bind(t.controls,\"mousedown mouseup touchstart touchend touchcancel\",(e=>{t.controls.pressed=[\"mousedown\",\"touchstart\"].includes(e.type)})),this.bind(t.controls,\"focusin\",(()=>{const{config:i,timers:s}=e;R(t.controls,i.classNames.noTransition,!0),Fe.toggleControls.call(e,!0),setTimeout((()=>{R(t.controls,i.classNames.noTransition,!1)}),0);const n=this.touch?3e3:4e3;clearTimeout(s.controls),s.controls=setTimeout((()=>Fe.toggleControls.call(e,!1)),n)})),this.bind(t.inputs.volume,\"wheel\",(t=>{const i=t.webkitDirectionInvertedFromDevice,[s,n]=[t.deltaX,-t.deltaY].map((e=>i?-e:e)),a=Math.sign(Math.abs(s)>Math.abs(n)?s:n);e.increaseVolume(a/50);const{volume:l}=e.media;(1===a&&l<1||-1===a&&l>0)&&t.preventDefault()}),\"volume\",!1)})),this.player=t,this.lastKey=null,this.focusTimer=null,this.lastKeyDown=null,this.handleKey=this.handleKey.bind(this),this.toggleMenu=this.toggleMenu.bind(this),this.firstTouch=this.firstTouch.bind(this)}handleKey(e){const{player:t}=this,{elements:i}=t,{key:s,type:n,altKey:a,ctrlKey:l,metaKey:r,shiftKey:o}=e,c=\"keydown\"===n,u=c&&s===this.lastKey;if(a||l||r||o)return;if(!s)return;if(c){const n=document.activeElement;if(S.element(n)){const{editable:s}=t.config.selectors,{seek:a}=i.inputs;if(n!==a&&V(n,s))return;if(\" \"===e.key&&V(n,'button, [role^=\"menuitem\"]'))return}switch([\" \",\"ArrowLeft\",\"ArrowUp\",\"ArrowRight\",\"ArrowDown\",\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"c\",\"f\",\"k\",\"l\",\"m\"].includes(s)&&(e.preventDefault(),e.stopPropagation()),s){case\"0\":case\"1\":case\"2\":case\"3\":case\"4\":case\"5\":case\"6\":case\"7\":case\"8\":case\"9\":u||(h=parseInt(s,10),t.currentTime=t.duration/10*h);break;case\" \":case\"k\":u||ie(t.togglePlay());break;case\"ArrowUp\":t.increaseVolume(.1);break;case\"ArrowDown\":t.decreaseVolume(.1);break;case\"m\":u||(t.muted=!t.muted);break;case\"ArrowRight\":t.forward();break;case\"ArrowLeft\":t.rewind();break;case\"f\":t.fullscreen.toggle();break;case\"c\":u||t.toggleCaptions();break;case\"l\":t.loop=!t.loop}\"Escape\"===s&&!t.fullscreen.usingNative&&t.fullscreen.active&&t.fullscreen.toggle(),this.lastKey=s}else this.lastKey=null;var h}toggleMenu(e){Pe.toggleMenu.call(this.player,e)}}\"undefined\"!=typeof globalThis?globalThis:\"undefined\"!=typeof window?window:\"undefined\"!=typeof global?global:\"undefined\"!=typeof self&&self;var Ue=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e,t){e.exports=function(){var e=function(){},t={},i={},s={};function n(e,t){e=e.push?e:[e];var n,a,l,r=[],o=e.length,c=o;for(n=function(e,i){i.length&&r.push(e),--c||t(r)};o--;)a=e[o],(l=i[a])?n(a,l):(s[a]=s[a]||[]).push(n)}function a(e,t){if(e){var n=s[e];if(i[e]=t,n)for(;n.length;)n[0](e,t),n.splice(0,1)}}function l(t,i){t.call&&(t={success:t}),i.length?(t.error||e)(i):(t.success||e)(t)}function r(t,i,s,n){var a,l,o=document,c=s.async,u=(s.numRetries||0)+1,h=s.before||e,d=t.replace(/[\\?|#].*$/,\"\"),m=t.replace(/^(css|img)!/,\"\");n=n||0,/(^css!|\\.css$)/.test(d)?((l=o.createElement(\"link\")).rel=\"stylesheet\",l.href=m,(a=\"hideFocus\"in l)&&l.relList&&(a=0,l.rel=\"preload\",l.as=\"style\")):/(^img!|\\.(png|gif|jpg|svg|webp)$)/.test(d)?(l=o.createElement(\"img\")).src=m:((l=o.createElement(\"script\")).src=t,l.async=void 0===c||c),l.onload=l.onerror=l.onbeforeload=function(e){var o=e.type[0];if(a)try{l.sheet.cssText.length||(o=\"e\")}catch(e){18!=e.code&&(o=\"e\")}if(\"e\"==o){if((n+=1){Ue(e,{success:t,error:i})}))}function We(e){e&&!this.embed.hasPlayed&&(this.embed.hasPlayed=!0),this.media.paused===e&&(this.media.paused=!e,Z.call(this,this.media,e?\"play\":\"pause\"))}const ze={setup(){const e=this;R(e.elements.wrapper,e.config.classNames.embed,!0),e.options.speed=e.config.speed.options,ue.call(e),S.object(window.Vimeo)?ze.ready.call(e):Be(e.config.urls.vimeo.sdk).then((()=>{ze.ready.call(e)})).catch((t=>{e.debug.warn(\"Vimeo SDK (player.js) failed to load\",t)}))},ready(){const e=this,t=e.config.vimeo,{premium:i,referrerPolicy:s,...n}=t;let a=e.media.getAttribute(\"src\"),l=\"\";S.empty(a)?(a=e.media.getAttribute(e.config.attributes.embed.id),l=e.media.getAttribute(e.config.attributes.embed.hash)):l=function(e){const t=e.match(/^.*(vimeo.com\\/|video\\/)(\\d+)(\\?.*&*h=|\\/)+([\\d,a-f]+)/);return t&&5===t.length?t[4]:null}(a);const r=l?{h:l}:{};i&&Object.assign(n,{controls:!1,sidedock:!1});const o=Ne({loop:e.config.loop.active,autoplay:e.autoplay,muted:e.muted,gesture:\"media\",playsinline:e.config.playsinline,...r,...n}),c=(u=a,S.empty(u)?null:S.number(Number(u))?u:u.match(/^.*(vimeo.com\\/|video\\/)(\\d+).*/)?RegExp.$2:u);var u;const h=$(\"iframe\"),d=me(e.config.urls.vimeo.iframe,c,o);if(h.setAttribute(\"src\",d),h.setAttribute(\"allowfullscreen\",\"\"),h.setAttribute(\"allow\",[\"autoplay\",\"fullscreen\",\"picture-in-picture\",\"encrypted-media\",\"accelerometer\",\"gyroscope\"].join(\"; \")),S.empty(s)||h.setAttribute(\"referrerPolicy\",s),i||!t.customControls)h.setAttribute(\"data-poster\",e.poster),e.media=q(h,e.media);else{const t=$(\"div\",{class:e.config.classNames.embedContainer,\"data-poster\":e.poster});t.appendChild(h),e.media=q(t,e.media)}t.customControls||Te(me(e.config.urls.vimeo.api,d)).then((t=>{!S.empty(t)&&t.thumbnail_url&&Fe.setPoster.call(e,t.thumbnail_url).catch((()=>{}))})),e.embed=new window.Vimeo.Player(h,{autopause:e.config.autopause,muted:e.muted}),e.media.paused=!0,e.media.currentTime=0,e.supported.ui&&e.embed.disableTextTrack(),e.media.play=()=>(We.call(e,!0),e.embed.play()),e.media.pause=()=>(We.call(e,!1),e.embed.pause()),e.media.stop=()=>{e.pause(),e.currentTime=0};let{currentTime:m}=e.media;Object.defineProperty(e.media,\"currentTime\",{get:()=>m,set(t){const{embed:i,media:s,paused:n,volume:a}=e,l=n&&!i.hasPlayed;s.seeking=!0,Z.call(e,s,\"seeking\"),Promise.resolve(l&&i.setVolume(0)).then((()=>i.setCurrentTime(t))).then((()=>l&&i.pause())).then((()=>l&&i.setVolume(a))).catch((()=>{}))}});let p=e.config.speed.selected;Object.defineProperty(e.media,\"playbackRate\",{get:()=>p,set(t){e.embed.setPlaybackRate(t).then((()=>{p=t,Z.call(e,e.media,\"ratechange\")})).catch((()=>{e.options.speed=[1]}))}});let{volume:g}=e.config;Object.defineProperty(e.media,\"volume\",{get:()=>g,set(t){e.embed.setVolume(t).then((()=>{g=t,Z.call(e,e.media,\"volumechange\")}))}});let{muted:f}=e.config;Object.defineProperty(e.media,\"muted\",{get:()=>f,set(t){const i=!!S.boolean(t)&&t;e.embed.setMuted(!!i||e.config.muted).then((()=>{f=i,Z.call(e,e.media,\"volumechange\")}))}});let y,{loop:b}=e.config;Object.defineProperty(e.media,\"loop\",{get:()=>b,set(t){const i=S.boolean(t)?t:e.config.loop.active;e.embed.setLoop(i).then((()=>{b=i}))}}),e.embed.getVideoUrl().then((t=>{y=t,Pe.setDownloadUrl.call(e)})).catch((e=>{this.debug.warn(e)})),Object.defineProperty(e.media,\"currentSrc\",{get:()=>y}),Object.defineProperty(e.media,\"ended\",{get:()=>e.currentTime===e.duration}),Promise.all([e.embed.getVideoWidth(),e.embed.getVideoHeight()]).then((t=>{const[i,s]=t;e.embed.ratio=he(i,s),ue.call(this)})),e.embed.setAutopause(e.config.autopause).then((t=>{e.config.autopause=t})),e.embed.getVideoTitle().then((t=>{e.config.title=t,Fe.setTitle.call(this)})),e.embed.getCurrentTime().then((t=>{m=t,Z.call(e,e.media,\"timeupdate\")})),e.embed.getDuration().then((t=>{e.media.duration=t,Z.call(e,e.media,\"durationchange\")})),e.embed.getTextTracks().then((t=>{e.media.textTracks=t,xe.setup.call(e)})),e.embed.on(\"cuechange\",(({cues:t=[]})=>{const i=t.map((e=>function(e){const t=document.createDocumentFragment(),i=document.createElement(\"div\");return t.appendChild(i),i.innerHTML=e,t.firstChild.innerText}(e.text)));xe.updateCues.call(e,i)})),e.embed.on(\"loaded\",(()=>{if(e.embed.getPaused().then((t=>{We.call(e,!t),t||Z.call(e,e.media,\"playing\")})),S.element(e.embed.element)&&e.supported.ui){e.embed.element.setAttribute(\"tabindex\",-1)}})),e.embed.on(\"bufferstart\",(()=>{Z.call(e,e.media,\"waiting\")})),e.embed.on(\"bufferend\",(()=>{Z.call(e,e.media,\"playing\")})),e.embed.on(\"play\",(()=>{We.call(e,!0),Z.call(e,e.media,\"playing\")})),e.embed.on(\"pause\",(()=>{We.call(e,!1)})),e.embed.on(\"timeupdate\",(t=>{e.media.seeking=!1,m=t.seconds,Z.call(e,e.media,\"timeupdate\")})),e.embed.on(\"progress\",(t=>{e.media.buffered=t.percent,Z.call(e,e.media,\"progress\"),1===parseInt(t.percent,10)&&Z.call(e,e.media,\"canplaythrough\"),e.embed.getDuration().then((t=>{t!==e.media.duration&&(e.media.duration=t,Z.call(e,e.media,\"durationchange\"))}))})),e.embed.on(\"seeked\",(()=>{e.media.seeking=!1,Z.call(e,e.media,\"seeked\")})),e.embed.on(\"ended\",(()=>{e.media.paused=!0,Z.call(e,e.media,\"ended\")})),e.embed.on(\"error\",(t=>{e.media.error=t,Z.call(e,e.media,\"error\")})),t.customControls&&setTimeout((()=>Fe.build.call(e)),0)}};function Ke(e){e&&!this.embed.hasPlayed&&(this.embed.hasPlayed=!0),this.media.paused===e&&(this.media.paused=!e,Z.call(this,this.media,e?\"play\":\"pause\"))}function Ye(e){return e.noCookie?\"https://www.youtube-nocookie.com\":\"http:\"===window.location.protocol?\"http://www.youtube.com\":void 0}const Qe={setup(){if(R(this.elements.wrapper,this.config.classNames.embed,!0),S.object(window.YT)&&S.function(window.YT.Player))Qe.ready.call(this);else{const e=window.onYouTubeIframeAPIReady;window.onYouTubeIframeAPIReady=()=>{S.function(e)&&e(),Qe.ready.call(this)},Be(this.config.urls.youtube.sdk).catch((e=>{this.debug.warn(\"YouTube API failed to load\",e)}))}},getTitle(e){Te(me(this.config.urls.youtube.api,e)).then((e=>{if(S.object(e)){const{title:t,height:i,width:s}=e;this.config.title=t,Fe.setTitle.call(this),this.embed.ratio=he(s,i)}ue.call(this)})).catch((()=>{ue.call(this)}))},ready(){const e=this,t=e.config.youtube,i=e.media&&e.media.getAttribute(\"id\");if(!S.empty(i)&&i.startsWith(\"youtube-\"))return;let s=e.media.getAttribute(\"src\");S.empty(s)&&(s=e.media.getAttribute(this.config.attributes.embed.id));const n=(a=s,S.empty(a)?null:a.match(/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|&v=)([^#&?]*).*/)?RegExp.$2:a);var a;const l=$(\"div\",{id:`${e.provider}-${Math.floor(1e4*Math.random())}`,\"data-poster\":t.customControls?e.poster:void 0});if(e.media=q(l,e.media),t.customControls){const t=e=>`https://i.ytimg.com/vi/${n}/${e}default.jpg`;Re(t(\"maxres\"),121).catch((()=>Re(t(\"sd\"),121))).catch((()=>Re(t(\"hq\")))).then((t=>Fe.setPoster.call(e,t.src))).then((t=>{t.includes(\"maxres\")||(e.elements.poster.style.backgroundSize=\"cover\")})).catch((()=>{}))}e.embed=new window.YT.Player(e.media,{videoId:n,host:Ye(t),playerVars:x({},{autoplay:e.config.autoplay?1:0,hl:e.config.hl,controls:e.supported.ui&&t.customControls?0:1,disablekb:1,playsinline:e.config.playsinline&&!e.config.fullscreen.iosNative?1:0,cc_load_policy:e.captions.active?1:0,cc_lang_pref:e.config.captions.language,widget_referrer:window?window.location.href:null},t),events:{onError(t){if(!e.media.error){const i=t.data,s={2:\"The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.\",5:\"The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.\",100:\"The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.\",101:\"The owner of the requested video does not allow it to be played in embedded players.\",150:\"The owner of the requested video does not allow it to be played in embedded players.\"}[i]||\"An unknown error occurred\";e.media.error={code:i,message:s},Z.call(e,e.media,\"error\")}},onPlaybackRateChange(t){const i=t.target;e.media.playbackRate=i.getPlaybackRate(),Z.call(e,e.media,\"ratechange\")},onReady(i){if(S.function(e.media.play))return;const s=i.target;Qe.getTitle.call(e,n),e.media.play=()=>{Ke.call(e,!0),s.playVideo()},e.media.pause=()=>{Ke.call(e,!1),s.pauseVideo()},e.media.stop=()=>{s.stopVideo()},e.media.duration=s.getDuration(),e.media.paused=!0,e.media.currentTime=0,Object.defineProperty(e.media,\"currentTime\",{get:()=>Number(s.getCurrentTime()),set(t){e.paused&&!e.embed.hasPlayed&&e.embed.mute(),e.media.seeking=!0,Z.call(e,e.media,\"seeking\"),s.seekTo(t)}}),Object.defineProperty(e.media,\"playbackRate\",{get:()=>s.getPlaybackRate(),set(e){s.setPlaybackRate(e)}});let{volume:a}=e.config;Object.defineProperty(e.media,\"volume\",{get:()=>a,set(t){a=t,s.setVolume(100*a),Z.call(e,e.media,\"volumechange\")}});let{muted:l}=e.config;Object.defineProperty(e.media,\"muted\",{get:()=>l,set(t){const i=S.boolean(t)?t:l;l=i,s[i?\"mute\":\"unMute\"](),s.setVolume(100*a),Z.call(e,e.media,\"volumechange\")}}),Object.defineProperty(e.media,\"currentSrc\",{get:()=>s.getVideoUrl()}),Object.defineProperty(e.media,\"ended\",{get:()=>e.currentTime===e.duration});const r=s.getAvailablePlaybackRates();e.options.speed=r.filter((t=>e.config.speed.options.includes(t))),e.supported.ui&&t.customControls&&e.media.setAttribute(\"tabindex\",-1),Z.call(e,e.media,\"timeupdate\"),Z.call(e,e.media,\"durationchange\"),clearInterval(e.timers.buffering),e.timers.buffering=setInterval((()=>{e.media.buffered=s.getVideoLoadedFraction(),(null===e.media.lastBuffered||e.media.lastBufferedFe.build.call(e)),50)},onStateChange(i){const s=i.target;clearInterval(e.timers.playing);switch(e.media.seeking&&[1,2].includes(i.data)&&(e.media.seeking=!1,Z.call(e,e.media,\"seeked\")),i.data){case-1:Z.call(e,e.media,\"timeupdate\"),e.media.buffered=s.getVideoLoadedFraction(),Z.call(e,e.media,\"progress\");break;case 0:Ke.call(e,!1),e.media.loop?(s.stopVideo(),s.playVideo()):Z.call(e,e.media,\"ended\");break;case 1:t.customControls&&!e.config.autoplay&&e.media.paused&&!e.embed.hasPlayed?e.media.pause():(Ke.call(e,!0),Z.call(e,e.media,\"playing\"),e.timers.playing=setInterval((()=>{Z.call(e,e.media,\"timeupdate\")}),50),e.media.duration!==s.getDuration()&&(e.media.duration=s.getDuration(),Z.call(e,e.media,\"durationchange\")));break;case 2:e.muted||e.embed.unMute(),Ke.call(e,!1);break;case 3:Z.call(e,e.media,\"waiting\")}Z.call(e,e.elements.container,\"statechange\",!1,{code:i.data})}}})}},Xe={setup(){this.media?(R(this.elements.container,this.config.classNames.type.replace(\"{0}\",this.type),!0),R(this.elements.container,this.config.classNames.provider.replace(\"{0}\",this.provider),!0),this.isEmbed&&R(this.elements.container,this.config.classNames.type.replace(\"{0}\",\"video\"),!0),this.isVideo&&(this.elements.wrapper=$(\"div\",{class:this.config.classNames.video}),L(this.media,this.elements.wrapper),this.elements.poster=$(\"div\",{class:this.config.classNames.poster}),this.elements.wrapper.appendChild(this.elements.poster)),this.isHTML5?de.setup.call(this):this.isYouTube?Qe.setup.call(this):this.isVimeo&&ze.setup.call(this)):this.debug.warn(\"No media element found!\")}};class Je{constructor(t){e(this,\"load\",(()=>{this.enabled&&(S.object(window.google)&&S.object(window.google.ima)?this.ready():Be(this.player.config.urls.googleIMA.sdk).then((()=>{this.ready()})).catch((()=>{this.trigger(\"error\",new Error(\"Google IMA SDK failed to load\"))})))})),e(this,\"ready\",(()=>{var e;this.enabled||((e=this).manager&&e.manager.destroy(),e.elements.displayContainer&&e.elements.displayContainer.destroy(),e.elements.container.remove()),this.startSafetyTimer(12e3,\"ready()\"),this.managerPromise.then((()=>{this.clearSafetyTimer(\"onAdsManagerLoaded()\")})),this.listeners(),this.setupIMA()})),e(this,\"setupIMA\",(()=>{this.elements.container=$(\"div\",{class:this.player.config.classNames.ads}),this.player.elements.container.appendChild(this.elements.container),google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED),google.ima.settings.setLocale(this.player.config.ads.language),google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline),this.elements.displayContainer=new google.ima.AdDisplayContainer(this.elements.container,this.player.media),this.loader=new google.ima.AdsLoader(this.elements.displayContainer),this.loader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,(e=>this.onAdsManagerLoaded(e)),!1),this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR,(e=>this.onAdError(e)),!1),this.requestAds()})),e(this,\"requestAds\",(()=>{const{container:e}=this.player.elements;try{const t=new google.ima.AdsRequest;t.adTagUrl=this.tagUrl,t.linearAdSlotWidth=e.offsetWidth,t.linearAdSlotHeight=e.offsetHeight,t.nonLinearAdSlotWidth=e.offsetWidth,t.nonLinearAdSlotHeight=e.offsetHeight,t.forceNonLinearFullSlot=!1,t.setAdWillPlayMuted(!this.player.muted),this.loader.requestAds(t)}catch(e){this.onAdError(e)}})),e(this,\"pollCountdown\",((e=!1)=>{if(!e)return clearInterval(this.countdownTimer),void this.elements.container.removeAttribute(\"data-badge-text\");this.countdownTimer=setInterval((()=>{const e=Ee(Math.max(this.manager.getRemainingTime(),0)),t=`${ve.get(\"advertisement\",this.player.config)} - ${e}`;this.elements.container.setAttribute(\"data-badge-text\",t)}),100)})),e(this,\"onAdsManagerLoaded\",(e=>{if(!this.enabled)return;const t=new google.ima.AdsRenderingSettings;t.restoreCustomPlaybackStateOnAdBreakComplete=!0,t.enablePreloading=!0,this.manager=e.getAdsManager(this.player,t),this.cuePoints=this.manager.getCuePoints(),this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR,(e=>this.onAdError(e))),Object.keys(google.ima.AdEvent.Type).forEach((e=>{this.manager.addEventListener(google.ima.AdEvent.Type[e],(e=>this.onAdEvent(e)))})),this.trigger(\"loaded\")})),e(this,\"addCuePoints\",(()=>{S.empty(this.cuePoints)||this.cuePoints.forEach((e=>{if(0!==e&&-1!==e&&e{const{container:t}=this.player.elements,i=e.getAd(),s=e.getAdData();switch((e=>{Z.call(this.player,this.player.media,`ads${e.replace(/_/g,\"\").toLowerCase()}`)})(e.type),e.type){case google.ima.AdEvent.Type.LOADED:this.trigger(\"loaded\"),this.pollCountdown(!0),i.isLinear()||(i.width=t.offsetWidth,i.height=t.offsetHeight);break;case google.ima.AdEvent.Type.STARTED:this.manager.setVolume(this.player.volume);break;case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:this.player.ended?this.loadAds():this.loader.contentComplete();break;case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:this.pauseContent();break;case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:this.pollCountdown(),this.resumeContent();break;case google.ima.AdEvent.Type.LOG:s.adError&&this.player.debug.warn(`Non-fatal ad error: ${s.adError.getMessage()}`)}})),e(this,\"onAdError\",(e=>{this.cancel(),this.player.debug.warn(\"Ads error\",e)})),e(this,\"listeners\",(()=>{const{container:e}=this.player.elements;let t;this.player.on(\"canplay\",(()=>{this.addCuePoints()})),this.player.on(\"ended\",(()=>{this.loader.contentComplete()})),this.player.on(\"timeupdate\",(()=>{t=this.player.currentTime})),this.player.on(\"seeked\",(()=>{const e=this.player.currentTime;S.empty(this.cuePoints)||this.cuePoints.forEach(((i,s)=>{t{this.manager&&this.manager.resize(e.offsetWidth,e.offsetHeight,google.ima.ViewMode.NORMAL)}))})),e(this,\"play\",(()=>{const{container:e}=this.player.elements;this.managerPromise||this.resumeContent(),this.managerPromise.then((()=>{this.manager.setVolume(this.player.volume),this.elements.displayContainer.initialize();try{this.initialized||(this.manager.init(e.offsetWidth,e.offsetHeight,google.ima.ViewMode.NORMAL),this.manager.start()),this.initialized=!0}catch(e){this.onAdError(e)}})).catch((()=>{}))})),e(this,\"resumeContent\",(()=>{this.elements.container.style.zIndex=\"\",this.playing=!1,ie(this.player.media.play())})),e(this,\"pauseContent\",(()=>{this.elements.container.style.zIndex=3,this.playing=!0,this.player.media.pause()})),e(this,\"cancel\",(()=>{this.initialized&&this.resumeContent(),this.trigger(\"error\"),this.loadAds()})),e(this,\"loadAds\",(()=>{this.managerPromise.then((()=>{this.manager&&this.manager.destroy(),this.managerPromise=new Promise((e=>{this.on(\"loaded\",e),this.player.debug.log(this.manager)})),this.initialized=!1,this.requestAds()})).catch((()=>{}))})),e(this,\"trigger\",((e,...t)=>{const i=this.events[e];S.array(i)&&i.forEach((e=>{S.function(e)&&e.apply(this,t)}))})),e(this,\"on\",((e,t)=>(S.array(this.events[e])||(this.events[e]=[]),this.events[e].push(t),this))),e(this,\"startSafetyTimer\",((e,t)=>{this.player.debug.log(`Safety timer invoked from: ${t}`),this.safetyTimer=setTimeout((()=>{this.cancel(),this.clearSafetyTimer(\"startSafetyTimer()\")}),e)})),e(this,\"clearSafetyTimer\",(e=>{S.nullOrUndefined(this.safetyTimer)||(this.player.debug.log(`Safety timer cleared from: ${e}`),clearTimeout(this.safetyTimer),this.safetyTimer=null)})),this.player=t,this.config=t.config.ads,this.playing=!1,this.initialized=!1,this.elements={container:null,displayContainer:null},this.manager=null,this.loader=null,this.cuePoints=null,this.events={},this.safetyTimer=null,this.countdownTimer=null,this.managerPromise=new Promise(((e,t)=>{this.on(\"loaded\",e),this.on(\"error\",t)})),this.load()}get enabled(){const{config:e}=this;return this.player.isHTML5&&this.player.isVideo&&e.enabled&&(!S.empty(e.publisherId)||S.url(e.tagUrl))}get tagUrl(){const{config:e}=this;if(S.url(e.tagUrl))return e.tagUrl;return`https://go.aniview.com/api/adserver6/vast/?${Ne({AV_PUBLISHERID:\"58c25bb0073ef448b1087ad6\",AV_CHANNELID:\"5a0458dc28a06145e4519d21\",AV_URL:window.location.hostname,cb:Date.now(),AV_WIDTH:640,AV_HEIGHT:480,AV_CDIM2:e.publisherId})}`}}function Ge(e=0,t=0,i=255){return Math.min(Math.max(e,t),i)}const Ze=e=>{const t=[];return e.split(/\\r\\n\\r\\n|\\n\\n|\\r\\r/).forEach((e=>{const i={};e.split(/\\r\\n|\\n|\\r/).forEach((e=>{if(S.number(i.startTime)){if(!S.empty(e.trim())&&S.empty(i.text)){const t=e.trim().split(\"#xywh=\");[i.text]=t,t[1]&&([i.x,i.y,i.w,i.h]=t[1].split(\",\"))}}else{const t=e.match(/([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})/);t&&(i.startTime=60*Number(t[1]||0)*60+60*Number(t[2])+Number(t[3])+Number(`0.${t[4]}`),i.endTime=60*Number(t[6]||0)*60+60*Number(t[7])+Number(t[8])+Number(`0.${t[9]}`))}})),i.text&&t.push(i)})),t},et=(e,t)=>{const i={};return e>t.width/t.height?(i.width=t.width,i.height=1/e*t.width):(i.height=t.height,i.width=e*t.height),i};class tt{constructor(t){e(this,\"load\",(()=>{this.player.elements.display.seekTooltip&&(this.player.elements.display.seekTooltip.hidden=this.enabled),this.enabled&&this.getThumbnails().then((()=>{this.enabled&&(this.render(),this.determineContainerAutoSizing(),this.listeners(),this.loaded=!0)}))})),e(this,\"getThumbnails\",(()=>new Promise((e=>{const{src:t}=this.player.config.previewThumbnails;if(S.empty(t))throw new Error(\"Missing previewThumbnails.src config attribute\");const i=()=>{this.thumbnails.sort(((e,t)=>e.height-t.height)),this.player.debug.log(\"Preview thumbnails\",this.thumbnails),e()};if(S.function(t))t((e=>{this.thumbnails=e,i()}));else{const e=(S.string(t)?[t]:t).map((e=>this.getThumbnail(e)));Promise.all(e).then(i)}})))),e(this,\"getThumbnail\",(e=>new Promise((t=>{Te(e).then((i=>{const s={frames:Ze(i),height:null,urlPrefix:\"\"};s.frames[0].text.startsWith(\"/\")||s.frames[0].text.startsWith(\"http://\")||s.frames[0].text.startsWith(\"https://\")||(s.urlPrefix=e.substring(0,e.lastIndexOf(\"/\")+1));const n=new Image;n.onload=()=>{s.height=n.naturalHeight,s.width=n.naturalWidth,this.thumbnails.push(s),t()},n.src=s.urlPrefix+s.frames[0].text}))})))),e(this,\"startMove\",(e=>{if(this.loaded&&S.event(e)&&[\"touchmove\",\"mousemove\"].includes(e.type)&&this.player.media.duration){if(\"touchmove\"===e.type)this.seekTime=this.player.media.duration*(this.player.elements.inputs.seek.value/100);else{var t,i;const s=this.player.elements.progress.getBoundingClientRect(),n=100/s.width*(e.pageX-s.left);this.seekTime=this.player.media.duration*(n/100),this.seekTime<0&&(this.seekTime=0),this.seekTime>this.player.media.duration-1&&(this.seekTime=this.player.media.duration-1),this.mousePosX=e.pageX,this.elements.thumb.time.innerText=Ee(this.seekTime);const a=null===(t=this.player.config.markers)||void 0===t||null===(i=t.points)||void 0===i?void 0:i.find((({time:e})=>e===Math.round(this.seekTime)));a&&this.elements.thumb.time.insertAdjacentHTML(\"afterbegin\",`${a.label}
`)}this.showImageAtCurrentTime()}})),e(this,\"endMove\",(()=>{this.toggleThumbContainer(!1,!0)})),e(this,\"startScrubbing\",(e=>{(S.nullOrUndefined(e.button)||!1===e.button||0===e.button)&&(this.mouseDown=!0,this.player.media.duration&&(this.toggleScrubbingContainer(!0),this.toggleThumbContainer(!1,!0),this.showImageAtCurrentTime()))})),e(this,\"endScrubbing\",(()=>{this.mouseDown=!1,Math.ceil(this.lastTime)===Math.ceil(this.player.media.currentTime)?this.toggleScrubbingContainer(!1):G.call(this.player,this.player.media,\"timeupdate\",(()=>{this.mouseDown||this.toggleScrubbingContainer(!1)}))})),e(this,\"listeners\",(()=>{this.player.on(\"play\",(()=>{this.toggleThumbContainer(!1,!0)})),this.player.on(\"seeked\",(()=>{this.toggleThumbContainer(!1)})),this.player.on(\"timeupdate\",(()=>{this.lastTime=this.player.media.currentTime}))})),e(this,\"render\",(()=>{this.elements.thumb.container=$(\"div\",{class:this.player.config.classNames.previewThumbnails.thumbContainer}),this.elements.thumb.imageContainer=$(\"div\",{class:this.player.config.classNames.previewThumbnails.imageContainer}),this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer);const e=$(\"div\",{class:this.player.config.classNames.previewThumbnails.timeContainer});this.elements.thumb.time=$(\"span\",{},\"00:00\"),e.appendChild(this.elements.thumb.time),this.elements.thumb.imageContainer.appendChild(e),S.element(this.player.elements.progress)&&this.player.elements.progress.appendChild(this.elements.thumb.container),this.elements.scrubbing.container=$(\"div\",{class:this.player.config.classNames.previewThumbnails.scrubbingContainer}),this.player.elements.wrapper.appendChild(this.elements.scrubbing.container)})),e(this,\"destroy\",(()=>{this.elements.thumb.container&&this.elements.thumb.container.remove(),this.elements.scrubbing.container&&this.elements.scrubbing.container.remove()})),e(this,\"showImageAtCurrentTime\",(()=>{this.mouseDown?this.setScrubbingContainerSize():this.setThumbContainerSizeAndPos();const e=this.thumbnails[0].frames.findIndex((e=>this.seekTime>=e.startTime&&this.seekTime<=e.endTime)),t=e>=0;let i=0;this.mouseDown||this.toggleThumbContainer(t),t&&(this.thumbnails.forEach(((t,s)=>{this.loadedImages.includes(t.frames[e].text)&&(i=s)})),e!==this.showingThumb&&(this.showingThumb=e,this.loadImage(i)))})),e(this,\"loadImage\",((e=0)=>{const t=this.showingThumb,i=this.thumbnails[e],{urlPrefix:s}=i,n=i.frames[t],a=i.frames[t].text,l=s+a;if(this.currentImageElement&&this.currentImageElement.dataset.filename===a)this.showImage(this.currentImageElement,n,e,t,a,!1),this.currentImageElement.dataset.index=t,this.removeOldImages(this.currentImageElement);else{this.loadingImage&&this.usingSprites&&(this.loadingImage.onload=null);const i=new Image;i.src=l,i.dataset.index=t,i.dataset.filename=a,this.showingThumbFilename=a,this.player.debug.log(`Loading image: ${l}`),i.onload=()=>this.showImage(i,n,e,t,a,!0),this.loadingImage=i,this.removeOldImages(i)}})),e(this,\"showImage\",((e,t,i,s,n,a=!0)=>{this.player.debug.log(`Showing thumb: ${n}. num: ${s}. qual: ${i}. newimg: ${a}`),this.setImageSizeAndOffset(e,t),a&&(this.currentImageContainer.appendChild(e),this.currentImageElement=e,this.loadedImages.includes(n)||this.loadedImages.push(n)),this.preloadNearby(s,!0).then(this.preloadNearby(s,!1)).then(this.getHigherQuality(i,e,t,n))})),e(this,\"removeOldImages\",(e=>{Array.from(this.currentImageContainer.children).forEach((t=>{if(\"img\"!==t.tagName.toLowerCase())return;const i=this.usingSprites?500:1e3;if(t.dataset.index!==e.dataset.index&&!t.dataset.deleting){t.dataset.deleting=!0;const{currentImageContainer:e}=this;setTimeout((()=>{e.removeChild(t),this.player.debug.log(`Removing thumb: ${t.dataset.filename}`)}),i)}}))})),e(this,\"preloadNearby\",((e,t=!0)=>new Promise((i=>{setTimeout((()=>{const s=this.thumbnails[0].frames[e].text;if(this.showingThumbFilename===s){let n;n=t?this.thumbnails[0].frames.slice(e):this.thumbnails[0].frames.slice(0,e).reverse();let a=!1;n.forEach((e=>{const t=e.text;if(t!==s&&!this.loadedImages.includes(t)){a=!0,this.player.debug.log(`Preloading thumb filename: ${t}`);const{urlPrefix:e}=this.thumbnails[0],s=e+t,n=new Image;n.src=s,n.onload=()=>{this.player.debug.log(`Preloaded thumb filename: ${t}`),this.loadedImages.includes(t)||this.loadedImages.push(t),i()}}})),a||i()}}),300)})))),e(this,\"getHigherQuality\",((e,t,i,s)=>{if(e{this.showingThumbFilename===s&&(this.player.debug.log(`Showing higher quality thumb for: ${s}`),this.loadImage(e+1))}),300)}})),e(this,\"toggleThumbContainer\",((e=!1,t=!1)=>{const i=this.player.config.classNames.previewThumbnails.thumbContainerShown;this.elements.thumb.container.classList.toggle(i,e),!e&&t&&(this.showingThumb=null,this.showingThumbFilename=null)})),e(this,\"toggleScrubbingContainer\",((e=!1)=>{const t=this.player.config.classNames.previewThumbnails.scrubbingContainerShown;this.elements.scrubbing.container.classList.toggle(t,e),e||(this.showingThumb=null,this.showingThumbFilename=null)})),e(this,\"determineContainerAutoSizing\",(()=>{(this.elements.thumb.imageContainer.clientHeight>20||this.elements.thumb.imageContainer.clientWidth>20)&&(this.sizeSpecifiedInCSS=!0)})),e(this,\"setThumbContainerSizeAndPos\",(()=>{const{imageContainer:e}=this.elements.thumb;if(this.sizeSpecifiedInCSS){if(e.clientHeight>20&&e.clientWidth<20){const t=Math.floor(e.clientHeight*this.thumbAspectRatio);e.style.width=`${t}px`}else if(e.clientHeight<20&&e.clientWidth>20){const t=Math.floor(e.clientWidth/this.thumbAspectRatio);e.style.height=`${t}px`}}else{const t=Math.floor(this.thumbContainerHeight*this.thumbAspectRatio);e.style.height=`${this.thumbContainerHeight}px`,e.style.width=`${t}px`}this.setThumbContainerPos()})),e(this,\"setThumbContainerPos\",(()=>{const e=this.player.elements.progress.getBoundingClientRect(),t=this.player.elements.container.getBoundingClientRect(),{container:i}=this.elements.thumb,s=t.left-e.left+10,n=t.right-e.left-i.clientWidth-10,a=this.mousePosX-e.left-i.clientWidth/2,l=Ge(a,s,n);i.style.left=`${l}px`,i.style.setProperty(\"--preview-arrow-offset\",a-l+\"px\")})),e(this,\"setScrubbingContainerSize\",(()=>{const{width:e,height:t}=et(this.thumbAspectRatio,{width:this.player.media.clientWidth,height:this.player.media.clientHeight});this.elements.scrubbing.container.style.width=`${e}px`,this.elements.scrubbing.container.style.height=`${t}px`})),e(this,\"setImageSizeAndOffset\",((e,t)=>{if(!this.usingSprites)return;const i=this.thumbContainerHeight/t.h;e.style.height=e.naturalHeight*i+\"px\",e.style.width=e.naturalWidth*i+\"px\",e.style.left=`-${t.x*i}px`,e.style.top=`-${t.y*i}px`})),this.player=t,this.thumbnails=[],this.loaded=!1,this.lastMouseMoveTime=Date.now(),this.mouseDown=!1,this.loadedImages=[],this.elements={thumb:{},scrubbing:{}},this.load()}get enabled(){return this.player.isHTML5&&this.player.isVideo&&this.player.config.previewThumbnails.enabled}get currentImageContainer(){return this.mouseDown?this.elements.scrubbing.container:this.elements.thumb.imageContainer}get usingSprites(){return Object.keys(this.thumbnails[0].frames[0]).includes(\"w\")}get thumbAspectRatio(){return this.usingSprites?this.thumbnails[0].frames[0].w/this.thumbnails[0].frames[0].h:this.thumbnails[0].width/this.thumbnails[0].height}get thumbContainerHeight(){if(this.mouseDown){const{height:e}=et(this.thumbAspectRatio,{width:this.player.media.clientWidth,height:this.player.media.clientHeight});return e}return this.sizeSpecifiedInCSS?this.elements.thumb.imageContainer.clientHeight:Math.floor(this.player.media.clientWidth/this.thumbAspectRatio/4)}get currentImageElement(){return this.mouseDown?this.currentScrubbingImageElement:this.currentThumbnailImageElement}set currentImageElement(e){this.mouseDown?this.currentScrubbingImageElement=e:this.currentThumbnailImageElement=e}}const it={insertElements(e,t){S.string(t)?_(e,this.media,{src:t}):S.array(t)&&t.forEach((t=>{_(e,this.media,t)}))},change(e){N(e,\"sources.length\")?(de.cancelRequests.call(this),this.destroy.call(this,(()=>{this.options.quality=[],O(this.media),this.media=null,S.element(this.elements.container)&&this.elements.container.removeAttribute(\"class\");const{sources:t,type:i}=e,[{provider:s=_e.html5,src:n}]=t,a=\"html5\"===s?i:\"div\",l=\"html5\"===s?{}:{src:n};Object.assign(this,{provider:s,type:i,supported:K.check(i,s,this.config.playsinline),media:$(a,l)}),this.elements.container.appendChild(this.media),S.boolean(e.autoplay)&&(this.config.autoplay=e.autoplay),this.isHTML5&&(this.config.crossorigin&&this.media.setAttribute(\"crossorigin\",\"\"),this.config.autoplay&&this.media.setAttribute(\"autoplay\",\"\"),S.empty(e.poster)||(this.poster=e.poster),this.config.loop.active&&this.media.setAttribute(\"loop\",\"\"),this.config.muted&&this.media.setAttribute(\"muted\",\"\"),this.config.playsinline&&this.media.setAttribute(\"playsinline\",\"\")),Fe.addStyleHook.call(this),this.isHTML5&&it.insertElements.call(this,\"source\",t),this.config.title=e.title,Xe.setup.call(this),this.isHTML5&&Object.keys(e).includes(\"tracks\")&&it.insertElements.call(this,\"track\",e.tracks),(this.isHTML5||this.isEmbed&&!this.supported.ui)&&Fe.build.call(this),this.isHTML5&&this.media.load(),S.empty(e.previewThumbnails)||(Object.assign(this.config.previewThumbnails,e.previewThumbnails),this.previewThumbnails&&this.previewThumbnails.loaded&&(this.previewThumbnails.destroy(),this.previewThumbnails=null),this.config.previewThumbnails.enabled&&(this.previewThumbnails=new tt(this))),this.fullscreen.update()}),!0)):this.debug.warn(\"Invalid source format\")}};class st{constructor(t,i){if(e(this,\"play\",(()=>S.function(this.media.play)?(this.ads&&this.ads.enabled&&this.ads.managerPromise.then((()=>this.ads.play())).catch((()=>ie(this.media.play()))),this.media.play()):null)),e(this,\"pause\",(()=>this.playing&&S.function(this.media.pause)?this.media.pause():null)),e(this,\"togglePlay\",(e=>(S.boolean(e)?e:!this.playing)?this.play():this.pause())),e(this,\"stop\",(()=>{this.isHTML5?(this.pause(),this.restart()):S.function(this.media.stop)&&this.media.stop()})),e(this,\"restart\",(()=>{this.currentTime=0})),e(this,\"rewind\",(e=>{this.currentTime-=S.number(e)?e:this.config.seekTime})),e(this,\"forward\",(e=>{this.currentTime+=S.number(e)?e:this.config.seekTime})),e(this,\"increaseVolume\",(e=>{const t=this.media.muted?0:this.volume;this.volume=t+(S.number(e)?e:0)})),e(this,\"decreaseVolume\",(e=>{this.increaseVolume(-e)})),e(this,\"airplay\",(()=>{K.airplay&&this.media.webkitShowPlaybackTargetPicker()})),e(this,\"toggleControls\",(e=>{if(this.supported.ui&&!this.isAudio){const t=F(this.elements.container,this.config.classNames.hideControls),i=void 0===e?void 0:!e,s=R(this.elements.container,this.config.classNames.hideControls,i);if(s&&S.array(this.config.controls)&&this.config.controls.includes(\"settings\")&&!S.empty(this.config.settings)&&Pe.toggleMenu.call(this,!1),s!==t){const e=s?\"controlshidden\":\"controlsshown\";Z.call(this,this.media,e)}return!s}return!1})),e(this,\"on\",((e,t)=>{X.call(this,this.elements.container,e,t)})),e(this,\"once\",((e,t)=>{G.call(this,this.elements.container,e,t)})),e(this,\"off\",((e,t)=>{J(this.elements.container,e,t)})),e(this,\"destroy\",((e,t=!1)=>{if(!this.ready)return;const i=()=>{document.body.style.overflow=\"\",this.embed=null,t?(Object.keys(this.elements).length&&(O(this.elements.buttons.play),O(this.elements.captions),O(this.elements.controls),O(this.elements.wrapper),this.elements.buttons.play=null,this.elements.captions=null,this.elements.controls=null,this.elements.wrapper=null),S.function(e)&&e()):(ee.call(this),de.cancelRequests.call(this),q(this.elements.original,this.elements.container),Z.call(this,this.elements.original,\"destroyed\",!0),S.function(e)&&e.call(this.elements.original),this.ready=!1,setTimeout((()=>{this.elements=null,this.media=null}),200))};this.stop(),clearTimeout(this.timers.loading),clearTimeout(this.timers.controls),clearTimeout(this.timers.resized),this.isHTML5?(Fe.toggleNativeControls.call(this,!0),i()):this.isYouTube?(clearInterval(this.timers.buffering),clearInterval(this.timers.playing),null!==this.embed&&S.function(this.embed.destroy)&&this.embed.destroy(),i()):this.isVimeo&&(null!==this.embed&&this.embed.unload().then(i),setTimeout(i,200))})),e(this,\"supports\",(e=>K.mime.call(this,e))),this.timers={},this.ready=!1,this.loading=!1,this.failed=!1,this.touch=K.touch,this.media=t,S.string(this.media)&&(this.media=document.querySelectorAll(this.media)),(window.jQuery&&this.media instanceof jQuery||S.nodeList(this.media)||S.array(this.media))&&(this.media=this.media[0]),this.config=x({},Le,st.defaults,i||{},(()=>{try{return JSON.parse(this.media.getAttribute(\"data-plyr-config\"))}catch(e){return{}}})()),this.elements={container:null,fullscreen:null,captions:null,buttons:{},display:{},progress:{},inputs:{},settings:{popup:null,menu:null,panels:{},buttons:{}}},this.captions={active:null,currentTrack:-1,meta:new WeakMap},this.fullscreen={active:!1},this.options={speed:[],quality:[]},this.debug=new De(this.config.debug),this.debug.log(\"Config\",this.config),this.debug.log(\"Support\",K),S.nullOrUndefined(this.media)||!S.element(this.media))return void this.debug.error(\"Setup failed: no suitable element passed\");if(this.media.plyr)return void this.debug.warn(\"Target already setup\");if(!this.config.enabled)return void this.debug.error(\"Setup failed: disabled by config\");if(!K.check().api)return void this.debug.error(\"Setup failed: no support\");const s=this.media.cloneNode(!0);s.autoplay=!1,this.elements.original=s;const n=this.media.tagName.toLowerCase();let a=null,l=null;switch(n){case\"div\":if(a=this.media.querySelector(\"iframe\"),S.element(a)){if(l=Me(a.getAttribute(\"src\")),this.provider=function(e){return/^(https?:\\/\\/)?(www\\.)?(youtube\\.com|youtube-nocookie\\.com|youtu\\.?be)\\/.+$/.test(e)?_e.youtube:/^https?:\\/\\/player.vimeo.com\\/video\\/\\d{0,9}(?=\\b|\\/)/.test(e)?_e.vimeo:null}(l.toString()),this.elements.container=this.media,this.media=a,this.elements.container.className=\"\",l.search.length){const e=[\"1\",\"true\"];e.includes(l.searchParams.get(\"autoplay\"))&&(this.config.autoplay=!0),e.includes(l.searchParams.get(\"loop\"))&&(this.config.loop.active=!0),this.isYouTube?(this.config.playsinline=e.includes(l.searchParams.get(\"playsinline\")),this.config.youtube.hl=l.searchParams.get(\"hl\")):this.config.playsinline=!0}}else this.provider=this.media.getAttribute(this.config.attributes.embed.provider),this.media.removeAttribute(this.config.attributes.embed.provider);if(S.empty(this.provider)||!Object.values(_e).includes(this.provider))return void this.debug.error(\"Setup failed: Invalid provider\");this.type=je;break;case\"video\":case\"audio\":this.type=n,this.provider=_e.html5,this.media.hasAttribute(\"crossorigin\")&&(this.config.crossorigin=!0),this.media.hasAttribute(\"autoplay\")&&(this.config.autoplay=!0),(this.media.hasAttribute(\"playsinline\")||this.media.hasAttribute(\"webkit-playsinline\"))&&(this.config.playsinline=!0),this.media.hasAttribute(\"muted\")&&(this.config.muted=!0),this.media.hasAttribute(\"loop\")&&(this.config.loop.active=!0);break;default:return void this.debug.error(\"Setup failed: unsupported type\")}this.supported=K.check(this.type,this.provider),this.supported.api?(this.eventListeners=[],this.listeners=new Ve(this),this.storage=new we(this),this.media.plyr=this,S.element(this.elements.container)||(this.elements.container=$(\"div\"),L(this.media,this.elements.container)),Fe.migrateStyles.call(this),Fe.addStyleHook.call(this),Xe.setup.call(this),this.config.debug&&X.call(this,this.elements.container,this.config.events.join(\" \"),(e=>{this.debug.log(`event: ${e.type}`)})),this.fullscreen=new He(this),(this.isHTML5||this.isEmbed&&!this.supported.ui)&&Fe.build.call(this),this.listeners.container(),this.listeners.global(),this.config.ads.enabled&&(this.ads=new Je(this)),this.isHTML5&&this.config.autoplay&&this.once(\"canplay\",(()=>ie(this.play()))),this.lastSeekTime=0,this.config.previewThumbnails.enabled&&(this.previewThumbnails=new tt(this))):this.debug.error(\"Setup failed: no support\")}get isHTML5(){return this.provider===_e.html5}get isEmbed(){return this.isYouTube||this.isVimeo}get isYouTube(){return this.provider===_e.youtube}get isVimeo(){return this.provider===_e.vimeo}get isVideo(){return this.type===je}get isAudio(){return this.type===Oe}get playing(){return Boolean(this.ready&&!this.paused&&!this.ended)}get paused(){return Boolean(this.media.paused)}get stopped(){return Boolean(this.paused&&0===this.currentTime)}get ended(){return Boolean(this.media.ended)}set currentTime(e){if(!this.duration)return;const t=S.number(e)&&e>0;this.media.currentTime=t?Math.min(e,this.duration):0,this.debug.log(`Seeking to ${this.currentTime} seconds`)}get currentTime(){return Number(this.media.currentTime)}get buffered(){const{buffered:e}=this.media;return S.number(e)?e:e&&e.length&&this.duration>0?e.end(0)/this.duration:0}get seeking(){return Boolean(this.media.seeking)}get duration(){const e=parseFloat(this.config.duration),t=(this.media||{}).duration,i=S.number(t)&&t!==1/0?t:0;return e||i}set volume(e){let t=e;S.string(t)&&(t=Number(t)),S.number(t)||(t=this.storage.get(\"volume\")),S.number(t)||({volume:t}=this.config),t>1&&(t=1),t<0&&(t=0),this.config.volume=t,this.media.volume=t,!S.empty(e)&&this.muted&&t>0&&(this.muted=!1)}get volume(){return Number(this.media.volume)}set muted(e){let t=e;S.boolean(t)||(t=this.storage.get(\"muted\")),S.boolean(t)||(t=this.config.muted),this.config.muted=t,this.media.muted=t}get muted(){return Boolean(this.media.muted)}get hasAudio(){return!this.isHTML5||(!!this.isAudio||(Boolean(this.media.mozHasAudio)||Boolean(this.media.webkitAudioDecodedByteCount)||Boolean(this.media.audioTracks&&this.media.audioTracks.length)))}set speed(e){let t=null;S.number(e)&&(t=e),S.number(t)||(t=this.storage.get(\"speed\")),S.number(t)||(t=this.config.speed.selected);const{minimumSpeed:i,maximumSpeed:s}=this;t=Ge(t,i,s),this.config.speed.selected=t,setTimeout((()=>{this.media&&(this.media.playbackRate=t)}),0)}get speed(){return Number(this.media.playbackRate)}get minimumSpeed(){return this.isYouTube?Math.min(...this.options.speed):this.isVimeo?.5:.0625}get maximumSpeed(){return this.isYouTube?Math.max(...this.options.speed):this.isVimeo?2:16}set quality(e){const t=this.config.quality,i=this.options.quality;if(!i.length)return;let s=[!S.empty(e)&&Number(e),this.storage.get(\"quality\"),t.selected,t.default].find(S.number),n=!0;if(!i.includes(s)){const e=ne(i,s);this.debug.warn(`Unsupported quality option: ${s}, using ${e} instead`),s=e,n=!1}t.selected=s,this.media.quality=s,n&&this.storage.set({quality:s})}get quality(){return this.media.quality}set loop(e){const t=S.boolean(e)?e:this.config.loop.active;this.config.loop.active=t,this.media.loop=t}get loop(){return Boolean(this.media.loop)}set source(e){it.change.call(this,e)}get source(){return this.media.currentSrc}get download(){const{download:e}=this.config.urls;return S.url(e)?e:this.source}set download(e){S.url(e)&&(this.config.urls.download=e,Pe.setDownloadUrl.call(this))}set poster(e){this.isVideo?Fe.setPoster.call(this,e,!1).catch((()=>{})):this.debug.warn(\"Poster can only be set for video\")}get poster(){return this.isVideo?this.media.getAttribute(\"poster\")||this.media.getAttribute(\"data-poster\"):null}get ratio(){if(!this.isVideo)return null;const e=oe(ce.call(this));return S.array(e)?e.join(\":\"):e}set ratio(e){this.isVideo?S.string(e)&&re(e)?(this.config.ratio=oe(e),ue.call(this)):this.debug.error(`Invalid aspect ratio specified (${e})`):this.debug.warn(\"Aspect ratio can only be set for video\")}set autoplay(e){this.config.autoplay=S.boolean(e)?e:this.config.autoplay}get autoplay(){return Boolean(this.config.autoplay)}toggleCaptions(e){xe.toggle.call(this,e,!1)}set currentTrack(e){xe.set.call(this,e,!1),xe.setup.call(this)}get currentTrack(){const{toggled:e,currentTrack:t}=this.captions;return e?t:-1}set language(e){xe.setLanguage.call(this,e,!1)}get language(){return(xe.getCurrentTrack.call(this)||{}).language}set pip(e){if(!K.pip)return;const t=S.boolean(e)?e:!this.pip;S.function(this.media.webkitSetPresentationMode)&&this.media.webkitSetPresentationMode(t?Ie:$e),S.function(this.media.requestPictureInPicture)&&(!this.pip&&t?this.media.requestPictureInPicture():this.pip&&!t&&document.exitPictureInPicture())}get pip(){return K.pip?S.empty(this.media.webkitPresentationMode)?this.media===document.pictureInPictureElement:this.media.webkitPresentationMode===Ie:null}setPreviewThumbnails(e){this.previewThumbnails&&this.previewThumbnails.loaded&&(this.previewThumbnails.destroy(),this.previewThumbnails=null),Object.assign(this.config.previewThumbnails,e),this.config.previewThumbnails.enabled&&(this.previewThumbnails=new tt(this))}static supported(e,t){return K.check(e,t)}static loadSprite(e,t){return ke(e,t)}static setup(e,t={}){let i=null;return S.string(e)?i=Array.from(document.querySelectorAll(e)):S.nodeList(e)?i=Array.from(e):S.array(e)&&(i=e.filter(S.element)),S.empty(i)?null:i.map((e=>new st(e,t)))}}var nt;return st.defaults=(nt=Le,JSON.parse(JSON.stringify(nt))),st}));\n+\"object\"==typeof navigator&&function(e,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define(\"Plyr\",t):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).Plyr=t()}(this,(function(){\"use strict\";function e(e,t,i){return(t=function(e){var t=function(e,t){if(\"object\"!=typeof e||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var s=i.call(e,t||\"default\");if(\"object\"!=typeof s)return s;throw new TypeError(\"@@toPrimitive must return a primitive value.\")}return(\"string\"===t?String:Number)(e)}(e,\"string\");return\"symbol\"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function t(e,t){for(var i=0;it){var i=function(e){var t=\"\".concat(e).match(/(?:\\.(\\d+))?(?:[eE]([+-]?\\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0}(t);return parseFloat(e.toFixed(i))}return Math.round(e/t)*t}var g=function(){function e(t,i){(function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")})(this,e),m.element(t)?this.element=t:m.string(t)&&(this.element=document.querySelector(t)),m.element(this.element)&&m.empty(this.element.rangeTouch)&&(this.config=n({},a,{},i),this.init())}return function(e,i,s){i&&t(e.prototype,i),s&&t(e,s)}(e,[{key:\"init\",value:function(){e.enabled&&(this.config.addCSS&&(this.element.style.userSelect=\"none\",this.element.style.webKitUserSelect=\"none\",this.element.style.touchAction=\"manipulation\"),this.listeners(!0),this.element.rangeTouch=this)}},{key:\"destroy\",value:function(){e.enabled&&(this.config.addCSS&&(this.element.style.userSelect=\"\",this.element.style.webKitUserSelect=\"\",this.element.style.touchAction=\"\"),this.listeners(!1),this.element.rangeTouch=null)}},{key:\"listeners\",value:function(e){var t=this,i=e?\"addEventListener\":\"removeEventListener\";[\"touchstart\",\"touchmove\",\"touchend\"].forEach((function(e){t.element[i](e,(function(e){return t.set(e)}),!1)}))}},{key:\"get\",value:function(t){if(!e.enabled||!m.event(t))return null;var i,s=t.target,n=t.changedTouches[0],a=parseFloat(s.getAttribute(\"min\"))||0,l=parseFloat(s.getAttribute(\"max\"))||100,r=parseFloat(s.getAttribute(\"step\"))||1,o=s.getBoundingClientRect(),c=100/o.width*(this.config.thumbWidth/2)/100;return 0>(i=100/o.width*(n.clientX-o.left))?i=0:100i?i-=(100-2*i)*c:50null!=e?e.constructor:null,y=(e,t)=>Boolean(e&&t&&e instanceof t),b=e=>null==e,v=e=>f(e)===Object,w=e=>f(e)===String,T=e=>\"function\"==typeof e,k=e=>Array.isArray(e),C=e=>y(e,NodeList),A=e=>b(e)||(w(e)||k(e)||C(e))&&!e.length||v(e)&&!Object.keys(e).length;var S={nullOrUndefined:b,object:v,number:e=>f(e)===Number&&!Number.isNaN(e),string:w,boolean:e=>f(e)===Boolean,function:T,array:k,weakMap:e=>y(e,WeakMap),nodeList:C,element:e=>null!==e&&\"object\"==typeof e&&1===e.nodeType&&\"object\"==typeof e.style&&\"object\"==typeof e.ownerDocument,textNode:e=>f(e)===Text,event:e=>y(e,Event),keyboardEvent:e=>y(e,KeyboardEvent),cue:e=>y(e,window.TextTrackCue)||y(e,window.VTTCue),track:e=>y(e,TextTrack)||!b(e)&&w(e.kind),promise:e=>y(e,Promise)&&T(e.then),url:e=>{if(y(e,window.URL))return!0;if(!w(e))return!1;let t=e;e.startsWith(\"http://\")&&e.startsWith(\"https://\")||(t=`http://${e}`);try{return!A(new URL(t).hostname)}catch(e){return!1}},empty:A};const E=(()=>{const e=document.createElement(\"span\"),t={WebkitTransition:\"webkitTransitionEnd\",MozTransition:\"transitionend\",OTransition:\"oTransitionEnd otransitionend\",transition:\"transitionend\"},i=Object.keys(t).find((t=>void 0!==e.style[t]));return!!S.string(i)&&t[i]})();function P(e,t){setTimeout((()=>{try{e.hidden=!0,e.offsetHeight,e.hidden=!1}catch(e){}}),t)}var M={isIE:Boolean(window.document.documentMode),isEdge:/Edge/g.test(navigator.userAgent),isWebKit:\"WebkitAppearance\"in document.documentElement.style&&!/Edge/g.test(navigator.userAgent),isIPhone:/iPhone|iPod/gi.test(navigator.userAgent)&&navigator.maxTouchPoints>1,isIPadOS:\"MacIntel\"===navigator.platform&&navigator.maxTouchPoints>1,isIos:/iPad|iPhone|iPod/gi.test(navigator.userAgent)&&navigator.maxTouchPoints>1};function N(e,t){return t.split(\".\").reduce(((e,t)=>e&&e[t]),e)}function x(e={},...t){if(!t.length)return e;const i=t.shift();return S.object(i)?(Object.keys(i).forEach((t=>{S.object(i[t])?(Object.keys(e).includes(t)||Object.assign(e,{[t]:{}}),x(e[t],i[t])):Object.assign(e,{[t]:i[t]})})),x(e,...t)):e}function L(e,t){const i=e.length?e:[e];Array.from(i).reverse().forEach(((e,i)=>{const s=i>0?t.cloneNode(!0):t,n=e.parentNode,a=e.nextSibling;s.appendChild(e),a?n.insertBefore(s,a):n.appendChild(s)}))}function I(e,t){S.element(e)&&!S.empty(t)&&Object.entries(t).filter((([,e])=>!S.nullOrUndefined(e))).forEach((([t,i])=>e.setAttribute(t,i)))}function $(e,t,i){const s=document.createElement(e);return S.object(t)&&I(s,t),S.string(i)&&(s.innerText=i),s}function _(e,t,i,s){S.element(t)&&t.appendChild($(e,i,s))}function O(e){S.nodeList(e)||S.array(e)?Array.from(e).forEach(O):S.element(e)&&S.element(e.parentNode)&&e.parentNode.removeChild(e)}function j(e){if(!S.element(e))return;let{length:t}=e.childNodes;for(;t>0;)e.removeChild(e.lastChild),t-=1}function q(e,t){return S.element(t)&&S.element(t.parentNode)&&S.element(e)?(t.parentNode.replaceChild(e,t),e):null}function D(e,t){if(!S.string(e)||S.empty(e))return{};const i={},s=x({},t);return e.split(\",\").forEach((e=>{const t=e.trim(),n=t.replace(\".\",\"\"),a=t.replace(/[[\\]]/g,\"\").split(\"=\"),[l]=a,r=a.length>1?a[1].replace(/[\"']/g,\"\"):\"\";switch(t.charAt(0)){case\".\":S.string(s.class)?i.class=`${s.class} ${n}`:i.class=n;break;case\"#\":i.id=t.replace(\"#\",\"\");break;case\"[\":i[l]=r}})),x(s,i)}function H(e,t){if(!S.element(e))return;let i=t;S.boolean(i)||(i=!e.hidden),e.hidden=i}function R(e,t,i){if(S.nodeList(e))return Array.from(e).map((e=>R(e,t,i)));if(S.element(e)){let s=\"toggle\";return void 0!==i&&(s=i?\"add\":\"remove\"),e.classList[s](t),e.classList.contains(t)}return!1}function F(e,t){return S.element(e)&&e.classList.contains(t)}function V(e,t){const{prototype:i}=Element;return(i.matches||i.webkitMatchesSelector||i.mozMatchesSelector||i.msMatchesSelector||function(){return Array.from(document.querySelectorAll(t)).includes(this)}).call(e,t)}function U(e){return this.elements.container.querySelectorAll(e)}function B(e){return this.elements.container.querySelector(e)}function W(e=null,t=!1){S.element(e)&&e.focus({preventScroll:!0,focusVisible:t})}const z={\"audio/ogg\":\"vorbis\",\"audio/wav\":\"1\",\"video/webm\":\"vp8, vorbis\",\"video/mp4\":\"avc1.42E01E, mp4a.40.2\",\"video/ogg\":\"theora\"},K={audio:\"canPlayType\"in document.createElement(\"audio\"),video:\"canPlayType\"in document.createElement(\"video\"),check(e,t){const i=K[e]||\"html5\"!==t;return{api:i,ui:i&&K.rangeInput}},pip:!(M.isIPhone||!S.function($(\"video\").webkitSetPresentationMode)&&(!document.pictureInPictureEnabled||$(\"video\").disablePictureInPicture)),airplay:S.function(window.WebKitPlaybackTargetAvailabilityEvent),playsinline:\"playsInline\"in document.createElement(\"video\"),mime(e){if(S.empty(e))return!1;const[t]=e.split(\"/\");let i=e;if(!this.isHTML5||t!==this.type)return!1;Object.keys(z).includes(i)&&(i+=`; codecs=\"${z[e]}\"`);try{return Boolean(i&&this.media.canPlayType(i).replace(/no/,\"\"))}catch(e){return!1}},textTracks:\"textTracks\"in document.createElement(\"video\"),rangeInput:(()=>{const e=document.createElement(\"input\");return e.type=\"range\",\"range\"===e.type})(),touch:\"ontouchstart\"in document.documentElement,transitions:!1!==E,reducedMotion:\"matchMedia\"in window&&window.matchMedia(\"(prefers-reduced-motion)\").matches},Y=(()=>{let e=!1;try{const t=Object.defineProperty({},\"passive\",{get:()=>(e=!0,null)});window.addEventListener(\"test\",null,t),window.removeEventListener(\"test\",null,t)}catch(e){}return e})();function Q(e,t,i,s=!1,n=!0,a=!1){if(!e||!(\"addEventListener\"in e)||S.empty(t)||!S.function(i))return;const l=t.split(\" \");let r=a;Y&&(r={passive:n,capture:a}),l.forEach((t=>{this&&this.eventListeners&&s&&this.eventListeners.push({element:e,type:t,callback:i,options:r}),e[s?\"addEventListener\":\"removeEventListener\"](t,i,r)}))}function X(e,t=\"\",i,s=!0,n=!1){Q.call(this,e,t,i,!0,s,n)}function J(e,t=\"\",i,s=!0,n=!1){Q.call(this,e,t,i,!1,s,n)}function G(e,t=\"\",i,s=!0,n=!1){const a=(...l)=>{J(e,t,a,s,n),i.apply(this,l)};Q.call(this,e,t,a,!0,s,n)}function Z(e,t=\"\",i=!1,s={}){if(!S.element(e)||S.empty(t))return;const n=new CustomEvent(t,{bubbles:i,detail:{...s,plyr:this}});e.dispatchEvent(n)}function ee(){this&&this.eventListeners&&(this.eventListeners.forEach((e=>{const{element:t,type:i,callback:s,options:n}=e;t.removeEventListener(i,s,n)})),this.eventListeners=[])}function te(){return new Promise((e=>this.ready?setTimeout(e,0):X.call(this,this.elements.container,\"ready\",e))).then((()=>{}))}function ie(e){S.promise(e)&&e.then(null,(()=>{}))}function se(e){return S.array(e)?e.filter(((t,i)=>e.indexOf(t)===i)):e}function ne(e,t){return S.array(e)&&e.length?e.reduce(((e,i)=>Math.abs(i-t)({...e,[t/i]:[t,i]})),{});function re(e){if(!(S.array(e)||S.string(e)&&e.includes(\":\")))return!1;return(S.array(e)?e:e.split(\":\")).map(Number).every(S.number)}function oe(e){if(!S.array(e)||!e.every(S.number))return null;const[t,i]=e,s=(e,t)=>0===t?e:s(t,e%t),n=s(t,i);return[t/n,i/n]}function ce(e){const t=e=>re(e)?e.split(\":\").map(Number):null;let i=t(e);if(null===i&&(i=t(this.config.ratio)),null===i&&!S.empty(this.embed)&&S.array(this.embed.ratio)&&({ratio:i}=this.embed),null===i&&this.isHTML5){const{videoWidth:e,videoHeight:t}=this.media;i=[e,t]}return oe(i)}function ue(e){if(!this.isVideo)return{};const{wrapper:t}=this.elements,i=ce.call(this,e);if(!S.array(i))return{};const[s,n]=oe(i),a=100/s*n;if(ae(`aspect-ratio: ${s}/${n}`)?t.style.aspectRatio=`${s}/${n}`:t.style.paddingBottom=`${a}%`,this.isVimeo&&!this.config.vimeo.premium&&this.supported.ui){const e=100/this.media.offsetWidth*parseInt(window.getComputedStyle(this.media).paddingBottom,10),i=(e-a)/(e/50);this.fullscreen.active?t.style.paddingBottom=null:this.media.style.transform=`translateY(-${i}%)`}else this.isHTML5&&t.classList.add(this.config.classNames.videoFixedRatio);return{padding:a,ratio:i}}function he(e,t,i=.05){const s=e/t,n=ne(Object.keys(le),s);return Math.abs(n-s)<=i?le[n]:[e,t]}const de={getSources(){if(!this.isHTML5)return[];return Array.from(this.media.querySelectorAll(\"source\")).filter((e=>{const t=e.getAttribute(\"type\");return!!S.empty(t)||K.mime.call(this,t)}))},getQualityOptions(){return this.config.quality.forced?this.config.quality.options:de.getSources.call(this).map((e=>Number(e.getAttribute(\"size\")))).filter(Boolean)},setup(){if(!this.isHTML5)return;const e=this;e.options.speed=e.config.speed.options,S.empty(this.config.ratio)||ue.call(e),Object.defineProperty(e.media,\"quality\",{get(){const t=de.getSources.call(e).find((t=>t.getAttribute(\"src\")===e.source));return t&&Number(t.getAttribute(\"size\"))},set(t){if(e.quality!==t){if(e.config.quality.forced&&S.function(e.config.quality.onChange))e.config.quality.onChange(t);else{const i=de.getSources.call(e).find((e=>Number(e.getAttribute(\"size\"))===t));if(!i)return;const{currentTime:s,paused:n,preload:a,readyState:l,playbackRate:r}=e.media;e.media.src=i.getAttribute(\"src\"),(\"none\"!==a||l)&&(e.once(\"loadedmetadata\",(()=>{e.speed=r,e.currentTime=s,n||ie(e.play())})),e.media.load())}Z.call(e,e.media,\"qualitychange\",!1,{quality:t})}}})},cancelRequests(){this.isHTML5&&(O(de.getSources.call(this)),this.media.setAttribute(\"src\",this.config.blankVideo),this.media.load(),this.debug.log(\"Cancelled network requests\"))}};function me(e,...t){return S.empty(e)?e:e.toString().replace(/{(\\d+)}/g,((e,i)=>t[i].toString()))}const pe=(e=\"\",t=\"\",i=\"\")=>e.replace(new RegExp(t.toString().replace(/([.*+?^=!:${}()|[\\]/\\\\])/g,\"\\\\$1\"),\"g\"),i.toString()),ge=(e=\"\")=>e.toString().replace(/\\w\\S*/g,(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()));function fe(e=\"\"){let t=e.toString();return t=function(e=\"\"){let t=e.toString();return t=pe(t,\"-\",\" \"),t=pe(t,\"_\",\" \"),t=ge(t),pe(t,\" \",\"\")}(t),t.charAt(0).toLowerCase()+t.slice(1)}function ye(e){const t=document.createElement(\"div\");return t.appendChild(e),t.innerHTML}const be={pip:\"PIP\",airplay:\"AirPlay\",html5:\"HTML5\",vimeo:\"Vimeo\",youtube:\"YouTube\"},ve={get(e=\"\",t={}){if(S.empty(e)||S.empty(t))return\"\";let i=N(t.i18n,e);if(S.empty(i))return Object.keys(be).includes(e)?be[e]:\"\";const s={\"{seektime}\":t.seekTime,\"{title}\":t.title};return Object.entries(s).forEach((([e,t])=>{i=pe(i,e,t)})),i}};class we{constructor(t){e(this,\"get\",(e=>{if(!we.supported||!this.enabled)return null;const t=window.localStorage.getItem(this.key);if(S.empty(t))return null;const i=JSON.parse(t);return S.string(e)&&e.length?i[e]:i})),e(this,\"set\",(e=>{if(!we.supported||!this.enabled)return;if(!S.object(e))return;let t=this.get();S.empty(t)&&(t={}),x(t,e);try{window.localStorage.setItem(this.key,JSON.stringify(t))}catch(e){}})),this.enabled=t.config.storage.enabled,this.key=t.config.storage.key}static get supported(){try{if(!(\"localStorage\"in window))return!1;const e=\"___test\";return window.localStorage.setItem(e,e),window.localStorage.removeItem(e),!0}catch(e){return!1}}}function Te(e,t=\"text\"){return new Promise(((i,s)=>{try{const s=new XMLHttpRequest;if(!(\"withCredentials\"in s))return;s.addEventListener(\"load\",(()=>{if(\"text\"===t)try{i(JSON.parse(s.responseText))}catch(e){i(s.responseText)}else i(s.response)})),s.addEventListener(\"error\",(()=>{throw new Error(s.status)})),s.open(\"GET\",e,!0),s.responseType=t,s.send()}catch(e){s(e)}}))}function ke(e,t){if(!S.string(e))return;const i=\"cache\",s=S.string(t);let n=!1;const a=()=>null!==document.getElementById(t),l=(e,t)=>{e.innerHTML=t,s&&a()||document.body.insertAdjacentElement(\"afterbegin\",e)};if(!s||!a()){const a=we.supported,r=document.createElement(\"div\");if(r.setAttribute(\"hidden\",\"\"),s&&r.setAttribute(\"id\",t),a){const e=window.localStorage.getItem(`${i}-${t}`);if(n=null!==e,n){const t=JSON.parse(e);l(r,t.content)}}Te(e).then((e=>{if(!S.empty(e)){if(a)try{window.localStorage.setItem(`${i}-${t}`,JSON.stringify({content:e}))}catch(e){}l(r,e)}})).catch((()=>{}))}}const Ce=e=>Math.trunc(e/60/60%60,10),Ae=e=>Math.trunc(e/60%60,10),Se=e=>Math.trunc(e%60,10);function Ee(e=0,t=!1,i=!1){if(!S.number(e))return Ee(void 0,t,i);const s=e=>`0${e}`.slice(-2);let n=Ce(e);const a=Ae(e),l=Se(e);return n=t||n>0?`${n}:`:\"\",`${i&&e>0?\"-\":\"\"}${n}${s(a)}:${s(l)}`}const Pe={getIconUrl(){const e=new URL(this.config.iconUrl,window.location),t=window.location.host?window.location.host:window.top.location.host,i=e.host!==t||M.isIE&&!window.svg4everybody;return{url:this.config.iconUrl,cors:i}},findElements(){try{return this.elements.controls=B.call(this,this.config.selectors.controls.wrapper),this.elements.buttons={play:U.call(this,this.config.selectors.buttons.play),pause:B.call(this,this.config.selectors.buttons.pause),restart:B.call(this,this.config.selectors.buttons.restart),rewind:B.call(this,this.config.selectors.buttons.rewind),fastForward:B.call(this,this.config.selectors.buttons.fastForward),mute:B.call(this,this.config.selectors.buttons.mute),pip:B.call(this,this.config.selectors.buttons.pip),airplay:B.call(this,this.config.selectors.buttons.airplay),settings:B.call(this,this.config.selectors.buttons.settings),captions:B.call(this,this.config.selectors.buttons.captions),fullscreen:B.call(this,this.config.selectors.buttons.fullscreen)},this.elements.progress=B.call(this,this.config.selectors.progress),this.elements.inputs={seek:B.call(this,this.config.selectors.inputs.seek),volume:B.call(this,this.config.selectors.inputs.volume)},this.elements.display={buffer:B.call(this,this.config.selectors.display.buffer),currentTime:B.call(this,this.config.selectors.display.currentTime),duration:B.call(this,this.config.selectors.display.duration)},S.element(this.elements.progress)&&(this.elements.display.seekTooltip=this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`)),!0}catch(e){return this.debug.warn(\"It looks like there is a problem with your custom controls HTML\",e),this.toggleNativeControls(!0),!1}},createIcon(e,t){const i=\"http://www.w3.org/2000/svg\",s=Pe.getIconUrl.call(this),n=`${s.cors?\"\":s.url}#${this.config.iconPrefix}`,a=document.createElementNS(i,\"svg\");I(a,x(t,{\"aria-hidden\":\"true\",focusable:\"false\"}));const l=document.createElementNS(i,\"use\"),r=`${n}-${e}`;return\"href\"in l&&l.setAttributeNS(\"http://www.w3.org/1999/xlink\",\"href\",r),l.setAttributeNS(\"http://www.w3.org/1999/xlink\",\"xlink:href\",r),a.appendChild(l),a},createLabel(e,t={}){const i=ve.get(e,this.config);return $(\"span\",{...t,class:[t.class,this.config.classNames.hidden].filter(Boolean).join(\" \")},i)},createBadge(e){if(S.empty(e))return null;const t=$(\"span\",{class:this.config.classNames.menu.value});return t.appendChild($(\"span\",{class:this.config.classNames.menu.badge},e)),t},createButton(e,t){const i=x({},t);let s=fe(e);const n={element:\"button\",toggle:!1,label:null,icon:null,labelPressed:null,iconPressed:null};switch([\"element\",\"icon\",\"label\"].forEach((e=>{Object.keys(i).includes(e)&&(n[e]=i[e],delete i[e])})),\"button\"!==n.element||Object.keys(i).includes(\"type\")||(i.type=\"button\"),Object.keys(i).includes(\"class\")?i.class.split(\" \").some((e=>e===this.config.classNames.control))||x(i,{class:`${i.class} ${this.config.classNames.control}`}):i.class=this.config.classNames.control,e){case\"play\":n.toggle=!0,n.label=\"play\",n.labelPressed=\"pause\",n.icon=\"play\",n.iconPressed=\"pause\";break;case\"mute\":n.toggle=!0,n.label=\"mute\",n.labelPressed=\"unmute\",n.icon=\"volume\",n.iconPressed=\"muted\";break;case\"captions\":n.toggle=!0,n.label=\"enableCaptions\",n.labelPressed=\"disableCaptions\",n.icon=\"captions-off\",n.iconPressed=\"captions-on\";break;case\"fullscreen\":n.toggle=!0,n.label=\"enterFullscreen\",n.labelPressed=\"exitFullscreen\",n.icon=\"enter-fullscreen\",n.iconPressed=\"exit-fullscreen\";break;case\"play-large\":i.class+=` ${this.config.classNames.control}--overlaid`,s=\"play\",n.label=\"play\",n.icon=\"play\";break;default:S.empty(n.label)&&(n.label=s),S.empty(n.icon)&&(n.icon=e)}const a=$(n.element);return n.toggle?(a.appendChild(Pe.createIcon.call(this,n.iconPressed,{class:\"icon--pressed\"})),a.appendChild(Pe.createIcon.call(this,n.icon,{class:\"icon--not-pressed\"})),a.appendChild(Pe.createLabel.call(this,n.labelPressed,{class:\"label--pressed\"})),a.appendChild(Pe.createLabel.call(this,n.label,{class:\"label--not-pressed\"}))):(a.appendChild(Pe.createIcon.call(this,n.icon)),a.appendChild(Pe.createLabel.call(this,n.label))),x(i,D(this.config.selectors.buttons[s],i)),I(a,i),\"play\"===s?(S.array(this.elements.buttons[s])||(this.elements.buttons[s]=[]),this.elements.buttons[s].push(a)):this.elements.buttons[s]=a,a},createRange(e,t){const i=$(\"input\",x(D(this.config.selectors.inputs[e]),{type:\"range\",min:0,max:100,step:.01,value:0,autocomplete:\"off\",role:\"slider\",\"aria-label\":ve.get(e,this.config),\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-valuenow\":0},t));return this.elements.inputs[e]=i,Pe.updateRangeFill.call(this,i),g.setup(i),i},createProgress(e,t){const i=$(\"progress\",x(D(this.config.selectors.display[e]),{min:0,max:100,value:0,role:\"progressbar\",\"aria-hidden\":!0},t));if(\"volume\"!==e){i.appendChild($(\"span\",null,\"0\"));const t={played:\"played\",buffer:\"buffered\"}[e],s=t?ve.get(t,this.config):\"\";i.innerText=`% ${s.toLowerCase()}`}return this.elements.display[e]=i,i},createTime(e,t){const i=D(this.config.selectors.display[e],t),s=$(\"div\",x(i,{class:`${i.class?i.class:\"\"} ${this.config.classNames.display.time} `.trim(),\"aria-label\":ve.get(e,this.config),role:\"timer\"}),\"00:00\");return this.elements.display[e]=s,s},bindMenuItemShortcuts(e,t){X.call(this,e,\"keydown keyup\",(i=>{if(![\" \",\"ArrowUp\",\"ArrowDown\",\"ArrowRight\"].includes(i.key))return;if(i.preventDefault(),i.stopPropagation(),\"keydown\"===i.type)return;const s=V(e,'[role=\"menuitemradio\"]');if(!s&&[\" \",\"ArrowRight\"].includes(i.key))Pe.showMenuPanel.call(this,t,!0);else{let t;\" \"!==i.key&&(\"ArrowDown\"===i.key||s&&\"ArrowRight\"===i.key?(t=e.nextElementSibling,S.element(t)||(t=e.parentNode.firstElementChild)):(t=e.previousElementSibling,S.element(t)||(t=e.parentNode.lastElementChild)),W.call(this,t,!0))}}),!1),X.call(this,e,\"keyup\",(e=>{\"Return\"===e.key&&Pe.focusFirstMenuItem.call(this,null,!0)}))},createMenuItem({value:e,list:t,type:i,title:s,badge:n=null,checked:a=!1}){const l=D(this.config.selectors.inputs[i]),r=$(\"button\",x(l,{type:\"button\",role:\"menuitemradio\",class:`${this.config.classNames.control} ${l.class?l.class:\"\"}`.trim(),\"aria-checked\":a,value:e})),o=$(\"span\");o.innerHTML=s,S.element(n)&&o.appendChild(n),r.appendChild(o),Object.defineProperty(r,\"checked\",{enumerable:!0,get:()=>\"true\"===r.getAttribute(\"aria-checked\"),set(e){e&&Array.from(r.parentNode.children).filter((e=>V(e,'[role=\"menuitemradio\"]'))).forEach((e=>e.setAttribute(\"aria-checked\",\"false\"))),r.setAttribute(\"aria-checked\",e?\"true\":\"false\")}}),this.listeners.bind(r,\"click keyup\",(t=>{if(!S.keyboardEvent(t)||\" \"===t.key){switch(t.preventDefault(),t.stopPropagation(),r.checked=!0,i){case\"language\":this.currentTrack=Number(e);break;case\"quality\":this.quality=e;break;case\"speed\":this.speed=parseFloat(e)}Pe.showMenuPanel.call(this,\"home\",S.keyboardEvent(t))}}),i,!1),Pe.bindMenuItemShortcuts.call(this,r,i),t.appendChild(r)},formatTime(e=0,t=!1){if(!S.number(e))return e;return Ee(e,Ce(this.duration)>0,t)},updateTimeDisplay(e=null,t=0,i=!1){S.element(e)&&S.number(t)&&(e.innerText=Pe.formatTime(t,i))},updateVolume(){this.supported.ui&&(S.element(this.elements.inputs.volume)&&Pe.setRange.call(this,this.elements.inputs.volume,this.muted?0:this.volume),S.element(this.elements.buttons.mute)&&(this.elements.buttons.mute.pressed=this.muted||0===this.volume))},setRange(e,t=0){S.element(e)&&(e.value=t,Pe.updateRangeFill.call(this,e))},updateProgress(e){if(!this.supported.ui||!S.event(e))return;let t=0;const i=(e,t)=>{const i=S.number(t)?t:0,s=S.element(e)?e:this.elements.display.buffer;if(S.element(s)){s.value=i;const e=s.getElementsByTagName(\"span\")[0];S.element(e)&&(e.childNodes[0].nodeValue=i)}};if(e)switch(e.type){case\"timeupdate\":case\"seeking\":case\"seeked\":s=this.currentTime,n=this.duration,t=0===s||0===n||Number.isNaN(s)||Number.isNaN(n)?0:(s/n*100).toFixed(2),\"timeupdate\"===e.type&&Pe.setRange.call(this,this.elements.inputs.seek,t);break;case\"playing\":case\"progress\":i(this.elements.display.buffer,100*this.buffered)}var s,n},updateRangeFill(e){const t=S.event(e)?e.target:e;if(S.element(t)&&\"range\"===t.getAttribute(\"type\")){if(V(t,this.config.selectors.inputs.seek)){t.setAttribute(\"aria-valuenow\",this.currentTime);const e=Pe.formatTime(this.currentTime),i=Pe.formatTime(this.duration),s=ve.get(\"seekLabel\",this.config);t.setAttribute(\"aria-valuetext\",s.replace(\"{currentTime}\",e).replace(\"{duration}\",i))}else if(V(t,this.config.selectors.inputs.volume)){const e=100*t.value;t.setAttribute(\"aria-valuenow\",e),t.setAttribute(\"aria-valuetext\",`${e.toFixed(1)}%`)}else t.setAttribute(\"aria-valuenow\",t.value);(M.isWebKit||M.isIPadOS)&&t.style.setProperty(\"--value\",t.value/t.max*100+\"%\")}},updateSeekTooltip(e){var t,i;if(!this.config.tooltips.seek||!S.element(this.elements.inputs.seek)||!S.element(this.elements.display.seekTooltip)||0===this.duration)return;const s=this.elements.display.seekTooltip,n=`${this.config.classNames.tooltip}--visible`,a=e=>R(s,n,e);if(this.touch)return void a(!1);let l=0;const r=this.elements.progress.getBoundingClientRect();if(S.event(e))l=100/r.width*(e.pageX-r.left);else{if(!F(s,n))return;l=parseFloat(s.style.left,10)}l<0?l=0:l>100&&(l=100);const o=this.duration/100*l;s.innerText=Pe.formatTime(o);const c=null===(t=this.config.markers)||void 0===t||null===(i=t.points)||void 0===i?void 0:i.find((({time:e})=>e===Math.round(o)));c&&s.insertAdjacentHTML(\"afterbegin\",`${c.label}
`),s.style.left=`${l}%`,S.event(e)&&[\"mouseenter\",\"mouseleave\"].includes(e.type)&&a(\"mouseenter\"===e.type)},timeUpdate(e){const t=!S.element(this.elements.display.duration)&&this.config.invertTime;Pe.updateTimeDisplay.call(this,this.elements.display.currentTime,t?this.duration-this.currentTime:this.currentTime,t),e&&\"timeupdate\"===e.type&&this.media.seeking||Pe.updateProgress.call(this,e)},durationUpdate(){if(!this.supported.ui||!this.config.invertTime&&this.currentTime)return;if(this.duration>=2**32)return H(this.elements.display.currentTime,!0),void H(this.elements.progress,!0);S.element(this.elements.inputs.seek)&&this.elements.inputs.seek.setAttribute(\"aria-valuemax\",this.duration);const e=S.element(this.elements.display.duration);!e&&this.config.displayDuration&&this.paused&&Pe.updateTimeDisplay.call(this,this.elements.display.currentTime,this.duration),e&&Pe.updateTimeDisplay.call(this,this.elements.display.duration,this.duration),this.config.markers.enabled&&Pe.setMarkers.call(this),Pe.updateSeekTooltip.call(this)},toggleMenuButton(e,t){H(this.elements.settings.buttons[e],!t)},updateSetting(e,t,i){const s=this.elements.settings.panels[e];let n=null,a=t;if(\"captions\"===e)n=this.currentTrack;else{if(n=S.empty(i)?this[e]:i,S.empty(n)&&(n=this.config[e].default),!S.empty(this.options[e])&&!this.options[e].includes(n))return void this.debug.warn(`Unsupported value of '${n}' for ${e}`);if(!this.config[e].options.includes(n))return void this.debug.warn(`Disabled value of '${n}' for ${e}`)}if(S.element(a)||(a=s&&s.querySelector('[role=\"menu\"]')),!S.element(a))return;this.elements.settings.buttons[e].querySelector(`.${this.config.classNames.menu.value}`).innerHTML=Pe.getLabel.call(this,e,n);const l=a&&a.querySelector(`[value=\"${n}\"]`);S.element(l)&&(l.checked=!0)},getLabel(e,t){switch(e){case\"speed\":return 1===t?ve.get(\"normal\",this.config):`${t}×`;case\"quality\":if(S.number(t)){const e=ve.get(`qualityLabel.${t}`,this.config);return e.length?e:`${t}p`}return ge(t);case\"captions\":return xe.getLabel.call(this);default:return null}},setQualityMenu(e){if(!S.element(this.elements.settings.panels.quality))return;const t=\"quality\",i=this.elements.settings.panels.quality.querySelector('[role=\"menu\"]');S.array(e)&&(this.options.quality=se(e).filter((e=>this.config.quality.options.includes(e))));const s=!S.empty(this.options.quality)&&this.options.quality.length>1;if(Pe.toggleMenuButton.call(this,t,s),j(i),Pe.checkMenu.call(this),!s)return;const n=e=>{const t=ve.get(`qualityBadge.${e}`,this.config);return t.length?Pe.createBadge.call(this,t):null};this.options.quality.sort(((e,t)=>{const i=this.config.quality.options;return i.indexOf(e)>i.indexOf(t)?1:-1})).forEach((e=>{Pe.createMenuItem.call(this,{value:e,list:i,type:t,title:Pe.getLabel.call(this,\"quality\",e),badge:n(e)})})),Pe.updateSetting.call(this,t,i)},setCaptionsMenu(){if(!S.element(this.elements.settings.panels.captions))return;const e=\"captions\",t=this.elements.settings.panels.captions.querySelector('[role=\"menu\"]'),i=xe.getTracks.call(this),s=Boolean(i.length);if(Pe.toggleMenuButton.call(this,e,s),j(t),Pe.checkMenu.call(this),!s)return;const n=i.map(((e,i)=>({value:i,checked:this.captions.toggled&&this.currentTrack===i,title:xe.getLabel.call(this,e),badge:e.language&&Pe.createBadge.call(this,e.language.toUpperCase()),list:t,type:\"language\"})));n.unshift({value:-1,checked:!this.captions.toggled,title:ve.get(\"disabled\",this.config),list:t,type:\"language\"}),n.forEach(Pe.createMenuItem.bind(this)),Pe.updateSetting.call(this,e,t)},setSpeedMenu(){if(!S.element(this.elements.settings.panels.speed))return;const e=\"speed\",t=this.elements.settings.panels.speed.querySelector('[role=\"menu\"]');this.options.speed=this.options.speed.filter((e=>e>=this.minimumSpeed&&e<=this.maximumSpeed));const i=!S.empty(this.options.speed)&&this.options.speed.length>1;Pe.toggleMenuButton.call(this,e,i),j(t),Pe.checkMenu.call(this),i&&(this.options.speed.forEach((i=>{Pe.createMenuItem.call(this,{value:i,list:t,type:e,title:Pe.getLabel.call(this,\"speed\",i)})})),Pe.updateSetting.call(this,e,t))},checkMenu(){const{buttons:e}=this.elements.settings,t=!S.empty(e)&&Object.values(e).some((e=>!e.hidden));H(this.elements.settings.menu,!t)},focusFirstMenuItem(e,t=!1){if(this.elements.settings.popup.hidden)return;let i=e;S.element(i)||(i=Object.values(this.elements.settings.panels).find((e=>!e.hidden)));const s=i.querySelector('[role^=\"menuitem\"]');W.call(this,s,t)},toggleMenu(e){const{popup:t}=this.elements.settings,i=this.elements.buttons.settings;if(!S.element(t)||!S.element(i))return;const{hidden:s}=t;let n=s;if(S.boolean(e))n=e;else if(S.keyboardEvent(e)&&\"Escape\"===e.key)n=!1;else if(S.event(e)){const s=S.function(e.composedPath)?e.composedPath()[0]:e.target,a=t.contains(s);if(a||!a&&e.target!==i&&n)return}i.setAttribute(\"aria-expanded\",n),H(t,!n),R(this.elements.container,this.config.classNames.menu.open,n),n&&S.keyboardEvent(e)?Pe.focusFirstMenuItem.call(this,null,!0):n||s||W.call(this,i,S.keyboardEvent(e))},getMenuSize(e){const t=e.cloneNode(!0);t.style.position=\"absolute\",t.style.opacity=0,t.removeAttribute(\"hidden\"),e.parentNode.appendChild(t);const i=t.scrollWidth,s=t.scrollHeight;return O(t),{width:i,height:s}},showMenuPanel(e=\"\",t=!1){const i=this.elements.container.querySelector(`#plyr-settings-${this.id}-${e}`);if(!S.element(i))return;const s=i.parentNode,n=Array.from(s.children).find((e=>!e.hidden));if(K.transitions&&!K.reducedMotion){s.style.width=`${n.scrollWidth}px`,s.style.height=`${n.scrollHeight}px`;const e=Pe.getMenuSize.call(this,i),t=e=>{e.target===s&&[\"width\",\"height\"].includes(e.propertyName)&&(s.style.width=\"\",s.style.height=\"\",J.call(this,s,E,t))};X.call(this,s,E,t),s.style.width=`${e.width}px`,s.style.height=`${e.height}px`}H(n,!0),H(i,!1),Pe.focusFirstMenuItem.call(this,i,t)},setDownloadUrl(){const e=this.elements.buttons.download;S.element(e)&&e.setAttribute(\"href\",this.download)},create(e){const{bindMenuItemShortcuts:t,createButton:i,createProgress:s,createRange:n,createTime:a,setQualityMenu:l,setSpeedMenu:r,showMenuPanel:o}=Pe;this.elements.controls=null,S.array(this.config.controls)&&this.config.controls.includes(\"play-large\")&&this.elements.container.appendChild(i.call(this,\"play-large\"));const c=$(\"div\",D(this.config.selectors.controls.wrapper));this.elements.controls=c;const u={class:\"plyr__controls__item\"};return se(S.array(this.config.controls)?this.config.controls:[]).forEach((l=>{if(\"restart\"===l&&c.appendChild(i.call(this,\"restart\",u)),\"rewind\"===l&&c.appendChild(i.call(this,\"rewind\",u)),\"play\"===l&&c.appendChild(i.call(this,\"play\",u)),\"fast-forward\"===l&&c.appendChild(i.call(this,\"fast-forward\",u)),\"progress\"===l){const t=$(\"div\",{class:`${u.class} plyr__progress__container`}),i=$(\"div\",D(this.config.selectors.progress));if(i.appendChild(n.call(this,\"seek\",{id:`plyr-seek-${e.id}`})),i.appendChild(s.call(this,\"buffer\")),this.config.tooltips.seek){const e=$(\"span\",{class:this.config.classNames.tooltip},\"00:00\");i.appendChild(e),this.elements.display.seekTooltip=e}this.elements.progress=i,t.appendChild(this.elements.progress),c.appendChild(t)}if(\"current-time\"===l&&c.appendChild(a.call(this,\"currentTime\",u)),\"duration\"===l&&c.appendChild(a.call(this,\"duration\",u)),\"mute\"===l||\"volume\"===l){let{volume:t}=this.elements;if(S.element(t)&&c.contains(t)||(t=$(\"div\",x({},u,{class:`${u.class} plyr__volume`.trim()})),this.elements.volume=t,c.appendChild(t)),\"mute\"===l&&t.appendChild(i.call(this,\"mute\")),\"volume\"===l&&!M.isIos&&!M.isIPadOS){const i={max:1,step:.05,value:this.config.volume};t.appendChild(n.call(this,\"volume\",x(i,{id:`plyr-volume-${e.id}`})))}}if(\"captions\"===l&&c.appendChild(i.call(this,\"captions\",u)),\"settings\"===l&&!S.empty(this.config.settings)){const s=$(\"div\",x({},u,{class:`${u.class} plyr__menu`.trim(),hidden:\"\"}));s.appendChild(i.call(this,\"settings\",{\"aria-haspopup\":!0,\"aria-controls\":`plyr-settings-${e.id}`,\"aria-expanded\":!1}));const n=$(\"div\",{class:\"plyr__menu__container\",id:`plyr-settings-${e.id}`,hidden:\"\"}),a=$(\"div\"),l=$(\"div\",{id:`plyr-settings-${e.id}-home`}),r=$(\"div\",{role:\"menu\"});l.appendChild(r),a.appendChild(l),this.elements.settings.panels.home=l,this.config.settings.forEach((i=>{const s=$(\"button\",x(D(this.config.selectors.buttons.settings),{type:\"button\",class:`${this.config.classNames.control} ${this.config.classNames.control}--forward`,role:\"menuitem\",\"aria-haspopup\":!0,hidden:\"\"}));t.call(this,s,i),X.call(this,s,\"click\",(()=>{o.call(this,i,!1)}));const n=$(\"span\",null,ve.get(i,this.config)),l=$(\"span\",{class:this.config.classNames.menu.value});l.innerHTML=e[i],n.appendChild(l),s.appendChild(n),r.appendChild(s);const c=$(\"div\",{id:`plyr-settings-${e.id}-${i}`,hidden:\"\"}),u=$(\"button\",{type:\"button\",class:`${this.config.classNames.control} ${this.config.classNames.control}--back`});u.appendChild($(\"span\",{\"aria-hidden\":!0},ve.get(i,this.config))),u.appendChild($(\"span\",{class:this.config.classNames.hidden},ve.get(\"menuBack\",this.config))),X.call(this,c,\"keydown\",(e=>{\"ArrowLeft\"===e.key&&(e.preventDefault(),e.stopPropagation(),o.call(this,\"home\",!0))}),!1),X.call(this,u,\"click\",(()=>{o.call(this,\"home\",!1)})),c.appendChild(u),c.appendChild($(\"div\",{role:\"menu\"})),a.appendChild(c),this.elements.settings.buttons[i]=s,this.elements.settings.panels[i]=c})),n.appendChild(a),s.appendChild(n),c.appendChild(s),this.elements.settings.popup=n,this.elements.settings.menu=s}if(\"pip\"===l&&K.pip&&c.appendChild(i.call(this,\"pip\",u)),\"airplay\"===l&&K.airplay&&c.appendChild(i.call(this,\"airplay\",u)),\"download\"===l){const e=x({},u,{element:\"a\",href:this.download,target:\"_blank\"});this.isHTML5&&(e.download=\"\");const{download:t}=this.config.urls;!S.url(t)&&this.isEmbed&&x(e,{icon:`logo-${this.provider}`,label:this.provider}),c.appendChild(i.call(this,\"download\",e))}\"fullscreen\"===l&&c.appendChild(i.call(this,\"fullscreen\",u))})),this.isHTML5&&l.call(this,de.getQualityOptions.call(this)),r.call(this),c},inject(){if(this.config.loadSprite){const e=Pe.getIconUrl.call(this);e.cors&&ke(e.url,\"sprite-plyr\")}this.id=Math.floor(1e4*Math.random());let e=null;this.elements.controls=null;const t={id:this.id,seektime:this.config.seekTime,title:this.config.title};let i=!0;S.function(this.config.controls)&&(this.config.controls=this.config.controls.call(this,t)),this.config.controls||(this.config.controls=[]),S.element(this.config.controls)||S.string(this.config.controls)?e=this.config.controls:(e=Pe.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:xe.getLabel.call(this)}),i=!1);let s;i&&S.string(this.config.controls)&&(e=(e=>{let i=e;return Object.entries(t).forEach((([e,t])=>{i=pe(i,`{${e}}`,t)})),i})(e)),S.string(this.config.selectors.controls.container)&&(s=document.querySelector(this.config.selectors.controls.container)),S.element(s)||(s=this.elements.container);if(s[S.element(e)?\"insertAdjacentElement\":\"insertAdjacentHTML\"](\"afterbegin\",e),S.element(this.elements.controls)||Pe.findElements.call(this),!S.empty(this.elements.buttons)){const e=e=>{const t=this.config.classNames.controlPressed;e.setAttribute(\"aria-pressed\",\"false\"),Object.defineProperty(e,\"pressed\",{configurable:!0,enumerable:!0,get:()=>F(e,t),set(i=!1){R(e,t,i),e.setAttribute(\"aria-pressed\",i?\"true\":\"false\")}})};Object.values(this.elements.buttons).filter(Boolean).forEach((t=>{S.array(t)||S.nodeList(t)?Array.from(t).filter(Boolean).forEach(e):e(t)}))}if(M.isEdge&&P(s),this.config.tooltips.controls){const{classNames:e,selectors:t}=this.config,i=`${t.controls.wrapper} ${t.labels} .${e.hidden}`,s=U.call(this,i);Array.from(s).forEach((e=>{R(e,this.config.classNames.hidden,!1),R(e,this.config.classNames.tooltip,!0)}))}},setMediaMetadata(){try{\"mediaSession\"in navigator&&(navigator.mediaSession.metadata=new window.MediaMetadata({title:this.config.mediaMetadata.title,artist:this.config.mediaMetadata.artist,album:this.config.mediaMetadata.album,artwork:this.config.mediaMetadata.artwork}))}catch(e){}},setMarkers(){var e,t;if(!this.duration||this.elements.markers)return;const i=null===(e=this.config.markers)||void 0===e||null===(t=e.points)||void 0===t?void 0:t.filter((({time:e})=>e>0&&eR(a,l,e);i.forEach((e=>{const t=$(\"span\",{class:this.config.classNames.marker},\"\"),i=e.time/this.duration*100+\"%\";a&&(t.addEventListener(\"mouseenter\",(()=>{e.label||(a.style.left=i,a.innerHTML=e.label,r(!0))})),t.addEventListener(\"mouseleave\",(()=>{r(!1)}))),t.addEventListener(\"click\",(()=>{this.currentTime=e.time})),t.style.left=i,n.appendChild(t)})),s.appendChild(n),this.config.tooltips.seek||(a=$(\"span\",{class:this.config.classNames.tooltip},\"\"),s.appendChild(a)),this.elements.markers={points:n,tip:a},this.elements.progress.appendChild(s)}};function Me(e,t=!0){let i=e;if(t){const e=document.createElement(\"a\");e.href=i,i=e.href}try{return new URL(i)}catch(e){return null}}function Ne(e){const t=new URLSearchParams;return S.object(e)&&Object.entries(e).forEach((([e,i])=>{t.set(e,i)})),t}const xe={setup(){if(!this.supported.ui)return;if(!this.isVideo||this.isYouTube||this.isHTML5&&!K.textTracks)return void(S.array(this.config.controls)&&this.config.controls.includes(\"settings\")&&this.config.settings.includes(\"captions\")&&Pe.setCaptionsMenu.call(this));var e,t;if(S.element(this.elements.captions)||(this.elements.captions=$(\"div\",D(this.config.selectors.captions)),this.elements.captions.setAttribute(\"dir\",\"auto\"),e=this.elements.captions,t=this.elements.wrapper,S.element(e)&&S.element(t)&&t.parentNode.insertBefore(e,t.nextSibling)),M.isIE&&window.URL){const e=this.media.querySelectorAll(\"track\");Array.from(e).forEach((e=>{const t=e.getAttribute(\"src\"),i=Me(t);null!==i&&i.hostname!==window.location.href.hostname&&[\"http:\",\"https:\"].includes(i.protocol)&&Te(t,\"blob\").then((t=>{e.setAttribute(\"src\",window.URL.createObjectURL(t))})).catch((()=>{O(e)}))}))}const i=se((navigator.languages||[navigator.language||navigator.userLanguage||\"en\"]).map((e=>e.split(\"-\")[0])));let s=(this.storage.get(\"language\")||this.config.captions.language||\"auto\").toLowerCase();\"auto\"===s&&([s]=i);let n=this.storage.get(\"captions\");if(S.boolean(n)||({active:n}=this.config.captions),Object.assign(this.captions,{toggled:!1,active:n,language:s,languages:i}),this.isHTML5){const e=this.config.captions.update?\"addtrack removetrack\":\"removetrack\";X.call(this,this.media.textTracks,e,xe.update.bind(this))}setTimeout(xe.update.bind(this),0)},update(){const e=xe.getTracks.call(this,!0),{active:t,language:i,meta:s,currentTrackNode:n}=this.captions,a=Boolean(e.find((e=>e.language===i)));this.isHTML5&&this.isVideo&&e.filter((e=>!s.get(e))).forEach((e=>{this.debug.log(\"Track added\",e),s.set(e,{default:\"showing\"===e.mode}),\"showing\"===e.mode&&(e.mode=\"hidden\"),X.call(this,e,\"cuechange\",(()=>xe.updateCues.call(this)))})),(a&&this.language!==i||!e.includes(n))&&(xe.setLanguage.call(this,i),xe.toggle.call(this,t&&a)),this.elements&&R(this.elements.container,this.config.classNames.captions.enabled,!S.empty(e)),S.array(this.config.controls)&&this.config.controls.includes(\"settings\")&&this.config.settings.includes(\"captions\")&&Pe.setCaptionsMenu.call(this)},toggle(e,t=!0){if(!this.supported.ui)return;const{toggled:i}=this.captions,s=this.config.classNames.captions.active,n=S.nullOrUndefined(e)?!i:e;if(n!==i){if(t||(this.captions.active=n,this.storage.set({captions:n})),!this.language&&n&&!t){const e=xe.getTracks.call(this),t=xe.findTrack.call(this,[this.captions.language,...this.captions.languages],!0);return this.captions.language=t.language,void xe.set.call(this,e.indexOf(t))}this.elements.buttons.captions&&(this.elements.buttons.captions.pressed=n),R(this.elements.container,s,n),this.captions.toggled=n,Pe.updateSetting.call(this,\"captions\"),Z.call(this,this.media,n?\"captionsenabled\":\"captionsdisabled\")}setTimeout((()=>{n&&this.captions.toggled&&(this.captions.currentTrackNode.mode=\"hidden\")}))},set(e,t=!0){const i=xe.getTracks.call(this);if(-1!==e)if(S.number(e))if(e in i){if(this.captions.currentTrack!==e){this.captions.currentTrack=e;const s=i[e],{language:n}=s||{};this.captions.currentTrackNode=s,Pe.updateSetting.call(this,\"captions\"),t||(this.captions.language=n,this.storage.set({language:n})),this.isVimeo&&this.embed.enableTextTrack(n),Z.call(this,this.media,\"languagechange\")}xe.toggle.call(this,!0,t),this.isHTML5&&this.isVideo&&xe.updateCues.call(this)}else this.debug.warn(\"Track not found\",e);else this.debug.warn(\"Invalid caption argument\",e);else xe.toggle.call(this,!1,t)},setLanguage(e,t=!0){if(!S.string(e))return void this.debug.warn(\"Invalid language argument\",e);const i=e.toLowerCase();this.captions.language=i;const s=xe.getTracks.call(this),n=xe.findTrack.call(this,[i]);xe.set.call(this,s.indexOf(n),t)},getTracks(e=!1){return Array.from((this.media||{}).textTracks||[]).filter((t=>!this.isHTML5||e||this.captions.meta.has(t))).filter((e=>[\"captions\",\"subtitles\"].includes(e.kind)))},findTrack(e,t=!1){const i=xe.getTracks.call(this),s=e=>Number((this.captions.meta.get(e)||{}).default),n=Array.from(i).sort(((e,t)=>s(t)-s(e)));let a;return e.every((e=>(a=n.find((t=>t.language===e)),!a))),a||(t?n[0]:void 0)},getCurrentTrack(){return xe.getTracks.call(this)[this.currentTrack]},getLabel(e){let t=e;return!S.track(t)&&K.textTracks&&this.captions.toggled&&(t=xe.getCurrentTrack.call(this)),S.track(t)?S.empty(t.label)?S.empty(t.language)?ve.get(\"enabled\",this.config):e.language.toUpperCase():t.label:ve.get(\"disabled\",this.config)},updateCues(e){if(!this.supported.ui)return;if(!S.element(this.elements.captions))return void this.debug.warn(\"No captions element to render to\");if(!S.nullOrUndefined(e)&&!Array.isArray(e))return void this.debug.warn(\"updateCues: Invalid input\",e);let t=e;if(!t){const e=xe.getCurrentTrack.call(this);t=Array.from((e||{}).activeCues||[]).map((e=>e.getCueAsHTML())).map(ye)}const i=t.map((e=>e.trim())).join(\"\\n\");if(i!==this.elements.captions.innerHTML){j(this.elements.captions);const e=$(\"span\",D(this.config.selectors.caption));e.innerHTML=i,this.elements.captions.appendChild(e),Z.call(this,this.media,\"cuechange\")}}},Le={enabled:!0,title:\"\",debug:!1,autoplay:!1,autopause:!0,playsinline:!0,seekTime:10,volume:1,muted:!1,duration:null,displayDuration:!0,invertTime:!0,toggleInvert:!0,ratio:null,clickToPlay:!0,hideControls:!0,resetOnEnd:!1,disableContextMenu:!0,loadSprite:!0,iconPrefix:\"plyr\",iconUrl:\"https://cdn.plyr.io/3.7.8/plyr.svg\",blankVideo:\"https://cdn.plyr.io/static/blank.mp4\",quality:{default:576,options:[4320,2880,2160,1440,1080,720,576,480,360,240],forced:!1,onChange:null},loop:{active:!1},speed:{selected:1,options:[.5,.75,1,1.25,1.5,1.75,2,4]},keyboard:{focused:!0,global:!1},tooltips:{controls:!1,seek:!0},captions:{active:!1,language:\"auto\",update:!1},fullscreen:{enabled:!0,fallback:!0,iosNative:!1},storage:{enabled:!0,key:\"plyr\"},controls:[\"play-large\",\"play\",\"progress\",\"current-time\",\"mute\",\"volume\",\"captions\",\"settings\",\"pip\",\"airplay\",\"fullscreen\"],settings:[\"captions\",\"quality\",\"speed\"],i18n:{restart:\"Restart\",rewind:\"Rewind {seektime}s\",play:\"Play\",pause:\"Pause\",fastForward:\"Forward {seektime}s\",seek:\"Seek\",seekLabel:\"{currentTime} of {duration}\",played:\"Played\",buffered:\"Buffered\",currentTime:\"Current time\",duration:\"Duration\",volume:\"Volume\",mute:\"Mute\",unmute:\"Unmute\",enableCaptions:\"Enable captions\",disableCaptions:\"Disable captions\",download:\"Download\",enterFullscreen:\"Enter fullscreen\",exitFullscreen:\"Exit fullscreen\",frameTitle:\"Player for {title}\",captions:\"Captions\",settings:\"Settings\",pip:\"PIP\",menuBack:\"Go back to previous menu\",speed:\"Speed\",normal:\"Normal\",quality:\"Quality\",loop:\"Loop\",start:\"Start\",end:\"End\",all:\"All\",reset:\"Reset\",disabled:\"Disabled\",enabled:\"Enabled\",advertisement:\"Ad\",qualityBadge:{2160:\"4K\",1440:\"HD\",1080:\"HD\",720:\"HD\",576:\"SD\",480:\"SD\"}},urls:null,listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,fastForward:null,mute:null,volume:null,captions:null,download:null,fullscreen:null,pip:null,airplay:null,speed:null,quality:null,loop:null,language:null},events:[\"ended\",\"progress\",\"stalled\",\"playing\",\"waiting\",\"canplay\",\"canplaythrough\",\"loadstart\",\"loadeddata\",\"loadedmetadata\",\"timeupdate\",\"volumechange\",\"play\",\"pause\",\"error\",\"seeking\",\"seeked\",\"emptied\",\"ratechange\",\"cuechange\",\"download\",\"enterfullscreen\",\"exitfullscreen\",\"captionsenabled\",\"captionsdisabled\",\"languagechange\",\"controlshidden\",\"controlsshown\",\"ready\",\"statechange\",\"qualitychange\",\"adsloaded\",\"adscontentpause\",\"adscontentresume\",\"adstarted\",\"adsmidpoint\",\"adscomplete\",\"adsallcomplete\",\"adsimpression\",\"adsclick\"],selectors:{editable:\"input, textarea, select, [contenteditable]\",container:\".plyr\",controls:{container:null,wrapper:\".plyr__controls\"},labels:\"[data-plyr]\",buttons:{play:'[data-plyr=\"play\"]',pause:'[data-plyr=\"pause\"]',restart:'[data-plyr=\"restart\"]',rewind:'[data-plyr=\"rewind\"]',fastForward:'[data-plyr=\"fast-forward\"]',mute:'[data-plyr=\"mute\"]',captions:'[data-plyr=\"captions\"]',download:'[data-plyr=\"download\"]',fullscreen:'[data-plyr=\"fullscreen\"]',pip:'[data-plyr=\"pip\"]',airplay:'[data-plyr=\"airplay\"]',settings:'[data-plyr=\"settings\"]',loop:'[data-plyr=\"loop\"]'},inputs:{seek:'[data-plyr=\"seek\"]',volume:'[data-plyr=\"volume\"]',speed:'[data-plyr=\"speed\"]',language:'[data-plyr=\"language\"]',quality:'[data-plyr=\"quality\"]'},display:{currentTime:\".plyr__time--current\",duration:\".plyr__time--duration\",buffer:\".plyr__progress__buffer\",loop:\".plyr__progress__loop\",volume:\".plyr__volume--display\"},progress:\".plyr__progress\",captions:\".plyr__captions\",caption:\".plyr__caption\"},classNames:{type:\"plyr--{0}\",provider:\"plyr--{0}\",video:\"plyr__video-wrapper\",embed:\"plyr__video-embed\",videoFixedRatio:\"plyr__video-wrapper--fixed-ratio\",embedContainer:\"plyr__video-embed__container\",poster:\"plyr__poster\",posterEnabled:\"plyr__poster-enabled\",ads:\"plyr__ads\",control:\"plyr__control\",controlPressed:\"plyr__control--pressed\",playing:\"plyr--playing\",paused:\"plyr--paused\",stopped:\"plyr--stopped\",loading:\"plyr--loading\",hover:\"plyr--hover\",tooltip:\"plyr__tooltip\",cues:\"plyr__cues\",marker:\"plyr__progress__marker\",hidden:\"plyr__sr-only\",hideControls:\"plyr--hide-controls\",isTouch:\"plyr--is-touch\",uiSupported:\"plyr--full-ui\",noTransition:\"plyr--no-transition\",display:{time:\"plyr__time\"},menu:{value:\"plyr__menu__value\",badge:\"plyr__badge\",open:\"plyr--menu-open\"},captions:{enabled:\"plyr--captions-enabled\",active:\"plyr--captions-active\"},fullscreen:{enabled:\"plyr--fullscreen-enabled\",fallback:\"plyr--fullscreen-fallback\"},pip:{supported:\"plyr--pip-supported\",active:\"plyr--pip-active\"},airplay:{supported:\"plyr--airplay-supported\",active:\"plyr--airplay-active\"},previewThumbnails:{thumbContainer:\"plyr__preview-thumb\",thumbContainerShown:\"plyr__preview-thumb--is-shown\",imageContainer:\"plyr__preview-thumb__image-container\",timeContainer:\"plyr__preview-thumb__time-container\",scrubbingContainer:\"plyr__preview-scrubbing\",scrubbingContainerShown:\"plyr__preview-scrubbing--is-shown\"}},attributes:{embed:{provider:\"data-plyr-provider\",id:\"data-plyr-embed-id\",hash:\"data-plyr-embed-hash\"}},ads:{enabled:!1,publisherId:\"\",tagUrl:\"\"},previewThumbnails:{enabled:!1,src:\"\"},vimeo:{byline:!1,portrait:!1,title:!1,speed:!0,transparent:!1,customControls:!0,referrerPolicy:null,premium:!1},youtube:{rel:0,showinfo:0,iv_load_policy:3,modestbranding:1,customControls:!0,noCookie:!1},mediaMetadata:{title:\"\",artist:\"\",album:\"\",artwork:[]},markers:{enabled:!1,points:[]}},Ie=\"picture-in-picture\",$e=\"inline\",_e={html5:\"html5\",youtube:\"youtube\",vimeo:\"vimeo\"},Oe=\"audio\",je=\"video\";const qe=()=>{};class De{constructor(e=!1){this.enabled=window.console&&e,this.enabled&&this.log(\"Debugging enabled\")}get log(){return this.enabled?Function.prototype.bind.call(console.log,console):qe}get warn(){return this.enabled?Function.prototype.bind.call(console.warn,console):qe}get error(){return this.enabled?Function.prototype.bind.call(console.error,console):qe}}class He{constructor(t){e(this,\"onChange\",(()=>{if(!this.supported)return;const e=this.player.elements.buttons.fullscreen;S.element(e)&&(e.pressed=this.active);const t=this.target===this.player.media?this.target:this.player.elements.container;Z.call(this.player,t,this.active?\"enterfullscreen\":\"exitfullscreen\",!0)})),e(this,\"toggleFallback\",((e=!1)=>{if(e?this.scrollPosition={x:window.scrollX??0,y:window.scrollY??0}:window.scrollTo(this.scrollPosition.x,this.scrollPosition.y),document.body.style.overflow=e?\"hidden\":\"\",R(this.target,this.player.config.classNames.fullscreen.fallback,e),M.isIos){let t=document.head.querySelector('meta[name=\"viewport\"]');const i=\"viewport-fit=cover\";t||(t=document.createElement(\"meta\"),t.setAttribute(\"name\",\"viewport\"));const s=S.string(t.content)&&t.content.includes(i);e?(this.cleanupViewport=!s,s||(t.content+=`,${i}`)):this.cleanupViewport&&(t.content=t.content.split(\",\").filter((e=>e.trim()!==i)).join(\",\"))}this.onChange()})),e(this,\"trapFocus\",(e=>{if(M.isIos||M.isIPadOS||!this.active||\"Tab\"!==e.key)return;const t=document.activeElement,i=U.call(this.player,\"a[href], button:not(:disabled), input:not(:disabled), [tabindex]\"),[s]=i,n=i[i.length-1];t!==n||e.shiftKey?t===s&&e.shiftKey&&(n.focus(),e.preventDefault()):(s.focus(),e.preventDefault())})),e(this,\"update\",(()=>{if(this.supported){let e;e=this.forceFallback?\"Fallback (forced)\":He.nativeSupported?\"Native\":\"Fallback\",this.player.debug.log(`${e} fullscreen enabled`)}else this.player.debug.log(\"Fullscreen not supported and fallback disabled\");R(this.player.elements.container,this.player.config.classNames.fullscreen.enabled,this.supported)})),e(this,\"enter\",(()=>{this.supported&&(M.isIos&&this.player.config.fullscreen.iosNative?this.player.isVimeo?this.player.embed.requestFullscreen():this.target.webkitEnterFullscreen():!He.nativeSupported||this.forceFallback?this.toggleFallback(!0):this.prefix?S.empty(this.prefix)||this.target[`${this.prefix}Request${this.property}`]():this.target.requestFullscreen({navigationUI:\"hide\"}))})),e(this,\"exit\",(()=>{if(this.supported)if(M.isIos&&this.player.config.fullscreen.iosNative)this.player.isVimeo?this.player.embed.exitFullscreen():this.target.webkitEnterFullscreen(),ie(this.player.play());else if(!He.nativeSupported||this.forceFallback)this.toggleFallback(!1);else if(this.prefix){if(!S.empty(this.prefix)){const e=\"moz\"===this.prefix?\"Cancel\":\"Exit\";document[`${this.prefix}${e}${this.property}`]()}}else(document.cancelFullScreen||document.exitFullscreen).call(document)})),e(this,\"toggle\",(()=>{this.active?this.exit():this.enter()})),this.player=t,this.prefix=He.prefix,this.property=He.property,this.scrollPosition={x:0,y:0},this.forceFallback=\"force\"===t.config.fullscreen.fallback,this.player.elements.fullscreen=t.config.fullscreen.container&&function(e,t){const{prototype:i}=Element;return(i.closest||function(){let e=this;do{if(V.matches(e,t))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType);return null}).call(e,t)}(this.player.elements.container,t.config.fullscreen.container),X.call(this.player,document,\"ms\"===this.prefix?\"MSFullscreenChange\":`${this.prefix}fullscreenchange`,(()=>{this.onChange()})),X.call(this.player,this.player.elements.container,\"dblclick\",(e=>{S.element(this.player.elements.controls)&&this.player.elements.controls.contains(e.target)||this.player.listeners.proxy(e,this.toggle,\"fullscreen\")})),X.call(this,this.player.elements.container,\"keydown\",(e=>this.trapFocus(e))),this.update()}static get nativeSupported(){return!!(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled)}get useNative(){return He.nativeSupported&&!this.forceFallback}static get prefix(){if(S.function(document.exitFullscreen))return\"\";let e=\"\";return[\"webkit\",\"moz\",\"ms\"].some((t=>!(!S.function(document[`${t}ExitFullscreen`])&&!S.function(document[`${t}CancelFullScreen`]))&&(e=t,!0))),e}static get property(){return\"moz\"===this.prefix?\"FullScreen\":\"Fullscreen\"}get supported(){return[this.player.config.fullscreen.enabled,this.player.isVideo,He.nativeSupported||this.player.config.fullscreen.fallback,!this.player.isYouTube||He.nativeSupported||!M.isIos||this.player.config.playsinline&&!this.player.config.fullscreen.iosNative].every(Boolean)}get active(){if(!this.supported)return!1;if(!He.nativeSupported||this.forceFallback)return F(this.target,this.player.config.classNames.fullscreen.fallback);const e=this.prefix?this.target.getRootNode()[`${this.prefix}${this.property}Element`]:this.target.getRootNode().fullscreenElement;return e&&e.shadowRoot?e===this.target.getRootNode().host:e===this.target}get target(){return M.isIos&&this.player.config.fullscreen.iosNative?this.player.media:this.player.elements.fullscreen??this.player.elements.container}}function Re(e,t=1){return new Promise(((i,s)=>{const n=new Image,a=()=>{delete n.onload,delete n.onerror,(n.naturalWidth>=t?i:s)(n)};Object.assign(n,{onload:a,onerror:a,src:e})}))}const Fe={addStyleHook(){R(this.elements.container,this.config.selectors.container.replace(\".\",\"\"),!0),R(this.elements.container,this.config.classNames.uiSupported,this.supported.ui)},toggleNativeControls(e=!1){e&&this.isHTML5?this.media.setAttribute(\"controls\",\"\"):this.media.removeAttribute(\"controls\")},build(){if(this.listeners.media(),!this.supported.ui)return this.debug.warn(`Basic support only for ${this.provider} ${this.type}`),void Fe.toggleNativeControls.call(this,!0);S.element(this.elements.controls)||(Pe.inject.call(this),this.listeners.controls()),Fe.toggleNativeControls.call(this),this.isHTML5&&xe.setup.call(this),this.volume=null,this.muted=null,this.loop=null,this.quality=null,this.speed=null,Pe.updateVolume.call(this),Pe.timeUpdate.call(this),Pe.durationUpdate.call(this),Fe.checkPlaying.call(this),R(this.elements.container,this.config.classNames.pip.supported,K.pip&&this.isHTML5&&this.isVideo),R(this.elements.container,this.config.classNames.airplay.supported,K.airplay&&this.isHTML5),R(this.elements.container,this.config.classNames.isTouch,this.touch),this.ready=!0,setTimeout((()=>{Z.call(this,this.media,\"ready\")}),0),Fe.setTitle.call(this),this.poster&&Fe.setPoster.call(this,this.poster,!1).catch((()=>{})),this.config.duration&&Pe.durationUpdate.call(this),this.config.mediaMetadata&&Pe.setMediaMetadata.call(this)},setTitle(){let e=ve.get(\"play\",this.config);if(S.string(this.config.title)&&!S.empty(this.config.title)&&(e+=`, ${this.config.title}`),Array.from(this.elements.buttons.play||[]).forEach((t=>{t.setAttribute(\"aria-label\",e)})),this.isEmbed){const e=B.call(this,\"iframe\");if(!S.element(e))return;const t=S.empty(this.config.title)?\"video\":this.config.title,i=ve.get(\"frameTitle\",this.config);e.setAttribute(\"title\",i.replace(\"{title}\",t))}},togglePoster(e){R(this.elements.container,this.config.classNames.posterEnabled,e)},setPoster(e,t=!0){return t&&this.poster?Promise.reject(new Error(\"Poster already set\")):(this.media.setAttribute(\"data-poster\",e),this.elements.poster.removeAttribute(\"hidden\"),te.call(this).then((()=>Re(e))).catch((t=>{throw e===this.poster&&Fe.togglePoster.call(this,!1),t})).then((()=>{if(e!==this.poster)throw new Error(\"setPoster cancelled by later call to setPoster\")})).then((()=>(Object.assign(this.elements.poster.style,{backgroundImage:`url('${e}')`,backgroundSize:\"\"}),Fe.togglePoster.call(this,!0),e))))},checkPlaying(e){R(this.elements.container,this.config.classNames.playing,this.playing),R(this.elements.container,this.config.classNames.paused,this.paused),R(this.elements.container,this.config.classNames.stopped,this.stopped),Array.from(this.elements.buttons.play||[]).forEach((e=>{Object.assign(e,{pressed:this.playing}),e.setAttribute(\"aria-label\",ve.get(this.playing?\"pause\":\"play\",this.config))})),S.event(e)&&\"timeupdate\"===e.type||Fe.toggleControls.call(this)},checkLoading(e){this.loading=[\"stalled\",\"waiting\"].includes(e.type),clearTimeout(this.timers.loading),this.timers.loading=setTimeout((()=>{R(this.elements.container,this.config.classNames.loading,this.loading),Fe.toggleControls.call(this)}),this.loading?250:0)},toggleControls(e){const{controls:t}=this.elements;if(t&&this.config.hideControls){const i=this.touch&&this.lastSeekTime+2e3>Date.now();this.toggleControls(Boolean(e||this.loading||this.paused||t.pressed||t.hover||i))}},migrateStyles(){Object.values({...this.media.style}).filter((e=>!S.empty(e)&&S.string(e)&&e.startsWith(\"--plyr\"))).forEach((e=>{this.elements.container.style.setProperty(e,this.media.style.getPropertyValue(e)),this.media.style.removeProperty(e)})),S.empty(this.media.style)&&this.media.removeAttribute(\"style\")}};class Ve{constructor(t){e(this,\"firstTouch\",(()=>{const{player:e}=this,{elements:t}=e;e.touch=!0,R(t.container,e.config.classNames.isTouch,!0)})),e(this,\"global\",((e=!0)=>{const{player:t}=this;t.config.keyboard.global&&Q.call(t,window,\"keydown keyup\",this.handleKey,e,!1),Q.call(t,document.body,\"click\",this.toggleMenu,e),G.call(t,document.body,\"touchstart\",this.firstTouch)})),e(this,\"container\",(()=>{const{player:e}=this,{config:t,elements:i,timers:s}=e;!t.keyboard.global&&t.keyboard.focused&&X.call(e,i.container,\"keydown keyup\",this.handleKey,!1),X.call(e,i.container,\"mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen\",(t=>{const{controls:n}=i;n&&\"enterfullscreen\"===t.type&&(n.pressed=!1,n.hover=!1);let a=0;[\"touchstart\",\"touchmove\",\"mousemove\"].includes(t.type)&&(Fe.toggleControls.call(e,!0),a=e.touch?3e3:2e3),clearTimeout(s.controls),s.controls=setTimeout((()=>Fe.toggleControls.call(e,!1)),a)}));const n=()=>{if(!e.isVimeo||e.config.vimeo.premium)return;const t=i.wrapper,{active:s}=e.fullscreen,[n,a]=ce.call(e),l=ae(`aspect-ratio: ${n} / ${a}`);if(!s)return void(l?(t.style.width=null,t.style.height=null):(t.style.maxWidth=null,t.style.margin=null));const[r,o]=[Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),Math.max(document.documentElement.clientHeight||0,window.innerHeight||0)],c=r/o>n/a;l?(t.style.width=c?\"auto\":\"100%\",t.style.height=c?\"100%\":\"auto\"):(t.style.maxWidth=c?o/a*n+\"px\":null,t.style.margin=c?\"0 auto\":null)},a=()=>{clearTimeout(s.resized),s.resized=setTimeout(n,50)};X.call(e,i.container,\"enterfullscreen exitfullscreen\",(t=>{const{target:s}=e.fullscreen;if(s!==i.container)return;if(!e.isEmbed&&S.empty(e.config.ratio))return;n();(\"enterfullscreen\"===t.type?X:J).call(e,window,\"resize\",a)}))})),e(this,\"media\",(()=>{const{player:e}=this,{elements:t}=e;if(X.call(e,e.media,\"timeupdate seeking seeked\",(t=>Pe.timeUpdate.call(e,t))),X.call(e,e.media,\"durationchange loadeddata loadedmetadata\",(t=>Pe.durationUpdate.call(e,t))),X.call(e,e.media,\"ended\",(()=>{e.isHTML5&&e.isVideo&&e.config.resetOnEnd&&(e.restart(),e.pause())})),X.call(e,e.media,\"progress playing seeking seeked\",(t=>Pe.updateProgress.call(e,t))),X.call(e,e.media,\"volumechange\",(t=>Pe.updateVolume.call(e,t))),X.call(e,e.media,\"playing play pause ended emptied timeupdate\",(t=>Fe.checkPlaying.call(e,t))),X.call(e,e.media,\"waiting canplay seeked playing\",(t=>Fe.checkLoading.call(e,t))),e.supported.ui&&e.config.clickToPlay&&!e.isAudio){const i=B.call(e,`.${e.config.classNames.video}`);if(!S.element(i))return;X.call(e,t.container,\"click\",(s=>{([t.container,i].includes(s.target)||i.contains(s.target))&&(e.touch&&e.config.hideControls||(e.ended?(this.proxy(s,e.restart,\"restart\"),this.proxy(s,(()=>{ie(e.play())}),\"play\")):this.proxy(s,(()=>{ie(e.togglePlay())}),\"play\")))}))}e.supported.ui&&e.config.disableContextMenu&&X.call(e,t.wrapper,\"contextmenu\",(e=>{e.preventDefault()}),!1),X.call(e,e.media,\"volumechange\",(()=>{e.storage.set({volume:e.volume,muted:e.muted})})),X.call(e,e.media,\"ratechange\",(()=>{Pe.updateSetting.call(e,\"speed\"),e.storage.set({speed:e.speed})})),X.call(e,e.media,\"qualitychange\",(t=>{Pe.updateSetting.call(e,\"quality\",null,t.detail.quality)})),X.call(e,e.media,\"ready qualitychange\",(()=>{Pe.setDownloadUrl.call(e)}));const i=e.config.events.concat([\"keyup\",\"keydown\"]).join(\" \");X.call(e,e.media,i,(i=>{let{detail:s={}}=i;\"error\"===i.type&&(s=e.media.error),Z.call(e,t.container,i.type,!0,s)}))})),e(this,\"proxy\",((e,t,i)=>{const{player:s}=this,n=s.config.listeners[i];let a=!0;S.function(n)&&(a=n.call(s,e)),!1!==a&&S.function(t)&&t.call(s,e)})),e(this,\"bind\",((e,t,i,s,n=!0)=>{const{player:a}=this,l=a.config.listeners[s],r=S.function(l);X.call(a,e,t,(e=>this.proxy(e,i,s)),n&&!r)})),e(this,\"controls\",(()=>{const{player:e}=this,{elements:t}=e,i=M.isIE?\"change\":\"input\";if(t.buttons.play&&Array.from(t.buttons.play).forEach((t=>{this.bind(t,\"click\",(()=>{ie(e.togglePlay())}),\"play\")})),this.bind(t.buttons.restart,\"click\",e.restart,\"restart\"),this.bind(t.buttons.rewind,\"click\",(()=>{e.lastSeekTime=Date.now(),e.rewind()}),\"rewind\"),this.bind(t.buttons.fastForward,\"click\",(()=>{e.lastSeekTime=Date.now(),e.forward()}),\"fastForward\"),this.bind(t.buttons.mute,\"click\",(()=>{e.muted=!e.muted}),\"mute\"),this.bind(t.buttons.captions,\"click\",(()=>e.toggleCaptions())),this.bind(t.buttons.download,\"click\",(()=>{Z.call(e,e.media,\"download\")}),\"download\"),this.bind(t.buttons.fullscreen,\"click\",(()=>{e.fullscreen.toggle()}),\"fullscreen\"),this.bind(t.buttons.pip,\"click\",(()=>{e.pip=\"toggle\"}),\"pip\"),this.bind(t.buttons.airplay,\"click\",e.airplay,\"airplay\"),this.bind(t.buttons.settings,\"click\",(t=>{t.stopPropagation(),t.preventDefault(),Pe.toggleMenu.call(e,t)}),null,!1),this.bind(t.buttons.settings,\"keyup\",(t=>{[\" \",\"Enter\"].includes(t.key)&&(\"Enter\"!==t.key?(t.preventDefault(),t.stopPropagation(),Pe.toggleMenu.call(e,t)):Pe.focusFirstMenuItem.call(e,null,!0))}),null,!1),this.bind(t.settings.menu,\"keydown\",(t=>{\"Escape\"===t.key&&Pe.toggleMenu.call(e,t)})),this.bind(t.inputs.seek,\"mousedown mousemove\",(e=>{const i=t.progress.getBoundingClientRect(),s=100/i.width*(e.pageX-i.left);e.currentTarget.setAttribute(\"seek-value\",s)})),this.bind(t.inputs.seek,\"mousedown mouseup keydown keyup touchstart touchend\",(t=>{const i=t.currentTarget,s=\"play-on-seeked\";if(S.keyboardEvent(t)&&![\"ArrowLeft\",\"ArrowRight\"].includes(t.key))return;e.lastSeekTime=Date.now();const n=i.hasAttribute(s),a=[\"mouseup\",\"touchend\",\"keyup\"].includes(t.type);n&&a?(i.removeAttribute(s),ie(e.play())):!a&&e.playing&&(i.setAttribute(s,\"\"),e.pause())})),M.isIos){const t=U.call(e,'input[type=\"range\"]');Array.from(t).forEach((e=>this.bind(e,i,(e=>P(e.target)))))}this.bind(t.inputs.seek,i,(t=>{const i=t.currentTarget;let s=i.getAttribute(\"seek-value\");S.empty(s)&&(s=i.value),i.removeAttribute(\"seek-value\"),e.currentTime=s/i.max*e.duration}),\"seek\"),this.bind(t.progress,\"mouseenter mouseleave mousemove\",(t=>Pe.updateSeekTooltip.call(e,t))),this.bind(t.progress,\"mousemove touchmove\",(t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.startMove(t)})),this.bind(t.progress,\"mouseleave touchend click\",(()=>{const{previewThumbnails:t}=e;t&&t.loaded&&t.endMove(!1,!0)})),this.bind(t.progress,\"mousedown touchstart\",(t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.startScrubbing(t)})),this.bind(t.progress,\"mouseup touchend\",(t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.endScrubbing(t)})),M.isWebKit&&Array.from(U.call(e,'input[type=\"range\"]')).forEach((t=>{this.bind(t,\"input\",(t=>Pe.updateRangeFill.call(e,t.target)))})),e.config.toggleInvert&&!S.element(t.display.duration)&&this.bind(t.display.currentTime,\"click\",(()=>{0!==e.currentTime&&(e.config.invertTime=!e.config.invertTime,Pe.timeUpdate.call(e))})),this.bind(t.inputs.volume,i,(t=>{e.volume=t.target.value}),\"volume\"),this.bind(t.controls,\"mouseenter mouseleave\",(i=>{t.controls.hover=!e.touch&&\"mouseenter\"===i.type})),t.fullscreen&&Array.from(t.fullscreen.children).filter((e=>!e.contains(t.container))).forEach((i=>{this.bind(i,\"mouseenter mouseleave\",(i=>{t.controls&&(t.controls.hover=!e.touch&&\"mouseenter\"===i.type)}))})),this.bind(t.controls,\"mousedown mouseup touchstart touchend touchcancel\",(e=>{t.controls.pressed=[\"mousedown\",\"touchstart\"].includes(e.type)})),this.bind(t.controls,\"focusin\",(()=>{const{config:i,timers:s}=e;R(t.controls,i.classNames.noTransition,!0),Fe.toggleControls.call(e,!0),setTimeout((()=>{R(t.controls,i.classNames.noTransition,!1)}),0);const n=this.touch?3e3:4e3;clearTimeout(s.controls),s.controls=setTimeout((()=>Fe.toggleControls.call(e,!1)),n)})),this.bind(t.inputs.volume,\"wheel\",(t=>{const i=t.webkitDirectionInvertedFromDevice,[s,n]=[t.deltaX,-t.deltaY].map((e=>i?-e:e)),a=Math.sign(Math.abs(s)>Math.abs(n)?s:n);e.increaseVolume(a/50);const{volume:l}=e.media;(1===a&&l<1||-1===a&&l>0)&&t.preventDefault()}),\"volume\",!1)})),this.player=t,this.lastKey=null,this.focusTimer=null,this.lastKeyDown=null,this.handleKey=this.handleKey.bind(this),this.toggleMenu=this.toggleMenu.bind(this),this.firstTouch=this.firstTouch.bind(this)}handleKey(e){const{player:t}=this,{elements:i}=t,{key:s,type:n,altKey:a,ctrlKey:l,metaKey:r,shiftKey:o}=e,c=\"keydown\"===n,u=c&&s===this.lastKey;if(a||l||r||o)return;if(!s)return;if(c){const n=document.activeElement;if(S.element(n)){const{editable:s}=t.config.selectors,{seek:a}=i.inputs;if(n!==a&&V(n,s))return;if(\" \"===e.key&&V(n,'button, [role^=\"menuitem\"]'))return}switch([\" \",\"ArrowLeft\",\"ArrowUp\",\"ArrowRight\",\"ArrowDown\",\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"c\",\"f\",\"k\",\"l\",\"m\"].includes(s)&&(e.preventDefault(),e.stopPropagation()),s){case\"0\":case\"1\":case\"2\":case\"3\":case\"4\":case\"5\":case\"6\":case\"7\":case\"8\":case\"9\":u||(h=parseInt(s,10),t.currentTime=t.duration/10*h);break;case\" \":case\"k\":u||ie(t.togglePlay());break;case\"ArrowUp\":t.increaseVolume(.1);break;case\"ArrowDown\":t.decreaseVolume(.1);break;case\"m\":u||(t.muted=!t.muted);break;case\"ArrowRight\":t.forward();break;case\"ArrowLeft\":t.rewind();break;case\"f\":t.fullscreen.toggle();break;case\"c\":u||t.toggleCaptions();break;case\"l\":t.loop=!t.loop}\"Escape\"===s&&!t.fullscreen.usingNative&&t.fullscreen.active&&t.fullscreen.toggle(),this.lastKey=s}else this.lastKey=null;var h}toggleMenu(e){Pe.toggleMenu.call(this.player,e)}}\"undefined\"!=typeof globalThis?globalThis:\"undefined\"!=typeof window?window:\"undefined\"!=typeof global?global:\"undefined\"!=typeof self&&self;var Ue=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e,t){e.exports=function(){var e=function(){},t={},i={},s={};function n(e,t){e=e.push?e:[e];var n,a,l,r=[],o=e.length,c=o;for(n=function(e,i){i.length&&r.push(e),--c||t(r)};o--;)a=e[o],(l=i[a])?n(a,l):(s[a]=s[a]||[]).push(n)}function a(e,t){if(e){var n=s[e];if(i[e]=t,n)for(;n.length;)n[0](e,t),n.splice(0,1)}}function l(t,i){t.call&&(t={success:t}),i.length?(t.error||e)(i):(t.success||e)(t)}function r(t,i,s,n){var a,l,o=document,c=s.async,u=(s.numRetries||0)+1,h=s.before||e,d=t.replace(/[\\?|#].*$/,\"\"),m=t.replace(/^(css|img)!/,\"\");n=n||0,/(^css!|\\.css$)/.test(d)?((l=o.createElement(\"link\")).rel=\"stylesheet\",l.href=m,(a=\"hideFocus\"in l)&&l.relList&&(a=0,l.rel=\"preload\",l.as=\"style\")):/(^img!|\\.(png|gif|jpg|svg|webp)$)/.test(d)?(l=o.createElement(\"img\")).src=m:((l=o.createElement(\"script\")).src=t,l.async=void 0===c||c),l.onload=l.onerror=l.onbeforeload=function(e){var o=e.type[0];if(a)try{l.sheet.cssText.length||(o=\"e\")}catch(e){18!=e.code&&(o=\"e\")}if(\"e\"==o){if((n+=1){Ue(e,{success:t,error:i})}))}function We(e){e&&!this.embed.hasPlayed&&(this.embed.hasPlayed=!0),this.media.paused===e&&(this.media.paused=!e,Z.call(this,this.media,e?\"play\":\"pause\"))}const ze={setup(){const e=this;R(e.elements.wrapper,e.config.classNames.embed,!0),e.options.speed=e.config.speed.options,ue.call(e),S.object(window.Vimeo)?ze.ready.call(e):Be(e.config.urls.vimeo.sdk).then((()=>{ze.ready.call(e)})).catch((t=>{e.debug.warn(\"Vimeo SDK (player.js) failed to load\",t)}))},ready(){const e=this,t=e.config.vimeo,{premium:i,referrerPolicy:s,...n}=t;let a=e.media.getAttribute(\"src\"),l=\"\";S.empty(a)?(a=e.media.getAttribute(e.config.attributes.embed.id),l=e.media.getAttribute(e.config.attributes.embed.hash)):l=function(e){const t=e.match(/^.*(vimeo.com\\/|video\\/)(\\d+)(\\?.*&*h=|\\/)+([\\d,a-f]+)/);return t&&5===t.length?t[4]:null}(a);const r=l?{h:l}:{};i&&Object.assign(n,{controls:!1,sidedock:!1});const o=Ne({loop:e.config.loop.active,autoplay:e.autoplay,muted:e.muted,gesture:\"media\",playsinline:e.config.playsinline,...r,...n}),c=(u=a,S.empty(u)?null:S.number(Number(u))?u:u.match(/^.*(vimeo.com\\/|video\\/)(\\d+).*/)?RegExp.$2:u);var u;const h=$(\"iframe\"),d=me(e.config.urls.vimeo.iframe,c,o);if(h.setAttribute(\"src\",d),h.setAttribute(\"allowfullscreen\",\"\"),h.setAttribute(\"allow\",[\"autoplay\",\"fullscreen\",\"picture-in-picture\",\"encrypted-media\",\"accelerometer\",\"gyroscope\"].join(\"; \")),S.empty(s)||h.setAttribute(\"referrerPolicy\",s),i||!t.customControls)h.setAttribute(\"data-poster\",e.poster),e.media=q(h,e.media);else{const t=$(\"div\",{class:e.config.classNames.embedContainer,\"data-poster\":e.poster});t.appendChild(h),e.media=q(t,e.media)}t.customControls||Te(me(e.config.urls.vimeo.api,d)).then((t=>{!S.empty(t)&&t.thumbnail_url&&Fe.setPoster.call(e,t.thumbnail_url).catch((()=>{}))})),e.embed=new window.Vimeo.Player(h,{autopause:e.config.autopause,muted:e.muted}),e.media.paused=!0,e.media.currentTime=0,e.supported.ui&&e.embed.disableTextTrack(),e.media.play=()=>(We.call(e,!0),e.embed.play()),e.media.pause=()=>(We.call(e,!1),e.embed.pause()),e.media.stop=()=>{e.pause(),e.currentTime=0};let{currentTime:m}=e.media;Object.defineProperty(e.media,\"currentTime\",{get:()=>m,set(t){const{embed:i,media:s,paused:n,volume:a}=e,l=n&&!i.hasPlayed;s.seeking=!0,Z.call(e,s,\"seeking\"),Promise.resolve(l&&i.setVolume(0)).then((()=>i.setCurrentTime(t))).then((()=>l&&i.pause())).then((()=>l&&i.setVolume(a))).catch((()=>{}))}});let p=e.config.speed.selected;Object.defineProperty(e.media,\"playbackRate\",{get:()=>p,set(t){e.embed.setPlaybackRate(t).then((()=>{p=t,Z.call(e,e.media,\"ratechange\")})).catch((()=>{e.options.speed=[1]}))}});let{volume:g}=e.config;Object.defineProperty(e.media,\"volume\",{get:()=>g,set(t){e.embed.setVolume(t).then((()=>{g=t,Z.call(e,e.media,\"volumechange\")}))}});let{muted:f}=e.config;Object.defineProperty(e.media,\"muted\",{get:()=>f,set(t){const i=!!S.boolean(t)&&t;e.embed.setMuted(!!i||e.config.muted).then((()=>{f=i,Z.call(e,e.media,\"volumechange\")}))}});let y,{loop:b}=e.config;Object.defineProperty(e.media,\"loop\",{get:()=>b,set(t){const i=S.boolean(t)?t:e.config.loop.active;e.embed.setLoop(i).then((()=>{b=i}))}}),e.embed.getVideoUrl().then((t=>{y=t,Pe.setDownloadUrl.call(e)})).catch((e=>{this.debug.warn(e)})),Object.defineProperty(e.media,\"currentSrc\",{get:()=>y}),Object.defineProperty(e.media,\"ended\",{get:()=>e.currentTime===e.duration}),Promise.all([e.embed.getVideoWidth(),e.embed.getVideoHeight()]).then((t=>{const[i,s]=t;e.embed.ratio=he(i,s),ue.call(this)})),e.embed.setAutopause(e.config.autopause).then((t=>{e.config.autopause=t})),e.embed.getVideoTitle().then((t=>{e.config.title=t,Fe.setTitle.call(this)})),e.embed.getCurrentTime().then((t=>{m=t,Z.call(e,e.media,\"timeupdate\")})),e.embed.getDuration().then((t=>{e.media.duration=t,Z.call(e,e.media,\"durationchange\")})),e.embed.getTextTracks().then((t=>{e.media.textTracks=t,xe.setup.call(e)})),e.embed.on(\"cuechange\",(({cues:t=[]})=>{const i=t.map((e=>function(e){const t=document.createDocumentFragment(),i=document.createElement(\"div\");return t.appendChild(i),i.innerHTML=e,t.firstChild.innerText}(e.text)));xe.updateCues.call(e,i)})),e.embed.on(\"loaded\",(()=>{if(e.embed.getPaused().then((t=>{We.call(e,!t),t||Z.call(e,e.media,\"playing\")})),S.element(e.embed.element)&&e.supported.ui){e.embed.element.setAttribute(\"tabindex\",-1)}})),e.embed.on(\"bufferstart\",(()=>{Z.call(e,e.media,\"waiting\")})),e.embed.on(\"bufferend\",(()=>{Z.call(e,e.media,\"playing\")})),e.embed.on(\"play\",(()=>{We.call(e,!0),Z.call(e,e.media,\"playing\")})),e.embed.on(\"pause\",(()=>{We.call(e,!1)})),e.embed.on(\"timeupdate\",(t=>{e.media.seeking=!1,m=t.seconds,Z.call(e,e.media,\"timeupdate\")})),e.embed.on(\"progress\",(t=>{e.media.buffered=t.percent,Z.call(e,e.media,\"progress\"),1===parseInt(t.percent,10)&&Z.call(e,e.media,\"canplaythrough\"),e.embed.getDuration().then((t=>{t!==e.media.duration&&(e.media.duration=t,Z.call(e,e.media,\"durationchange\"))}))})),e.embed.on(\"seeked\",(()=>{e.media.seeking=!1,Z.call(e,e.media,\"seeked\")})),e.embed.on(\"ended\",(()=>{e.media.paused=!0,Z.call(e,e.media,\"ended\")})),e.embed.on(\"error\",(t=>{e.media.error=t,Z.call(e,e.media,\"error\")})),t.customControls&&setTimeout((()=>Fe.build.call(e)),0)}};function Ke(e){e&&!this.embed.hasPlayed&&(this.embed.hasPlayed=!0),this.media.paused===e&&(this.media.paused=!e,Z.call(this,this.media,e?\"play\":\"pause\"))}function Ye(e){return e.noCookie?\"https://www.youtube-nocookie.com\":\"http:\"===window.location.protocol?\"http://www.youtube.com\":void 0}const Qe={setup(){if(R(this.elements.wrapper,this.config.classNames.embed,!0),S.object(window.YT)&&S.function(window.YT.Player))Qe.ready.call(this);else{const e=window.onYouTubeIframeAPIReady;window.onYouTubeIframeAPIReady=()=>{S.function(e)&&e(),Qe.ready.call(this)},Be(this.config.urls.youtube.sdk).catch((e=>{this.debug.warn(\"YouTube API failed to load\",e)}))}},getTitle(e){Te(me(this.config.urls.youtube.api,e)).then((e=>{if(S.object(e)){const{title:t,height:i,width:s}=e;this.config.title=t,Fe.setTitle.call(this),this.embed.ratio=he(s,i)}ue.call(this)})).catch((()=>{ue.call(this)}))},ready(){const e=this,t=e.config.youtube,i=e.media&&e.media.getAttribute(\"id\");if(!S.empty(i)&&i.startsWith(\"youtube-\"))return;let s=e.media.getAttribute(\"src\");S.empty(s)&&(s=e.media.getAttribute(this.config.attributes.embed.id));const n=(a=s,S.empty(a)?null:a.match(/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|&v=)([^#&?]*).*/)?RegExp.$2:a);var a;const l=$(\"div\",{id:`${e.provider}-${Math.floor(1e4*Math.random())}`,\"data-poster\":t.customControls?e.poster:void 0});if(e.media=q(l,e.media),t.customControls){const t=e=>`https://i.ytimg.com/vi/${n}/${e}default.jpg`;Re(t(\"maxres\"),121).catch((()=>Re(t(\"sd\"),121))).catch((()=>Re(t(\"hq\")))).then((t=>Fe.setPoster.call(e,t.src))).then((t=>{t.includes(\"maxres\")||(e.elements.poster.style.backgroundSize=\"cover\")})).catch((()=>{}))}e.embed=new window.YT.Player(e.media,{videoId:n,host:Ye(t),playerVars:x({},{autoplay:e.config.autoplay?1:0,hl:e.config.hl,controls:e.supported.ui&&t.customControls?0:1,disablekb:1,playsinline:e.config.playsinline&&!e.config.fullscreen.iosNative?1:0,cc_load_policy:e.captions.active?1:0,cc_lang_pref:e.config.captions.language,widget_referrer:window?window.location.href:null},t),events:{onError(t){if(!e.media.error){const i=t.data,s={2:\"The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.\",5:\"The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.\",100:\"The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.\",101:\"The owner of the requested video does not allow it to be played in embedded players.\",150:\"The owner of the requested video does not allow it to be played in embedded players.\"}[i]||\"An unknown error occurred\";e.media.error={code:i,message:s},Z.call(e,e.media,\"error\")}},onPlaybackRateChange(t){const i=t.target;e.media.playbackRate=i.getPlaybackRate(),Z.call(e,e.media,\"ratechange\")},onReady(i){if(S.function(e.media.play))return;const s=i.target;Qe.getTitle.call(e,n),e.media.play=()=>{Ke.call(e,!0),s.playVideo()},e.media.pause=()=>{Ke.call(e,!1),s.pauseVideo()},e.media.stop=()=>{s.stopVideo()},e.media.duration=s.getDuration(),e.media.paused=!0,e.media.currentTime=0,Object.defineProperty(e.media,\"currentTime\",{get:()=>Number(s.getCurrentTime()),set(t){e.paused&&!e.embed.hasPlayed&&e.embed.mute(),e.media.seeking=!0,Z.call(e,e.media,\"seeking\"),s.seekTo(t)}}),Object.defineProperty(e.media,\"playbackRate\",{get:()=>s.getPlaybackRate(),set(e){s.setPlaybackRate(e)}});let{volume:a}=e.config;Object.defineProperty(e.media,\"volume\",{get:()=>a,set(t){a=t,s.setVolume(100*a),Z.call(e,e.media,\"volumechange\")}});let{muted:l}=e.config;Object.defineProperty(e.media,\"muted\",{get:()=>l,set(t){const i=S.boolean(t)?t:l;l=i,s[i?\"mute\":\"unMute\"](),s.setVolume(100*a),Z.call(e,e.media,\"volumechange\")}}),Object.defineProperty(e.media,\"currentSrc\",{get:()=>s.getVideoUrl()}),Object.defineProperty(e.media,\"ended\",{get:()=>e.currentTime===e.duration});const r=s.getAvailablePlaybackRates();e.options.speed=r.filter((t=>e.config.speed.options.includes(t))),e.supported.ui&&t.customControls&&e.media.setAttribute(\"tabindex\",-1),Z.call(e,e.media,\"timeupdate\"),Z.call(e,e.media,\"durationchange\"),clearInterval(e.timers.buffering),e.timers.buffering=setInterval((()=>{e.media.buffered=s.getVideoLoadedFraction(),(null===e.media.lastBuffered||e.media.lastBufferedFe.build.call(e)),50)},onStateChange(i){const s=i.target;clearInterval(e.timers.playing);switch(e.media.seeking&&[1,2].includes(i.data)&&(e.media.seeking=!1,Z.call(e,e.media,\"seeked\")),i.data){case-1:Z.call(e,e.media,\"timeupdate\"),e.media.buffered=s.getVideoLoadedFraction(),Z.call(e,e.media,\"progress\");break;case 0:Ke.call(e,!1),e.media.loop?(s.stopVideo(),s.playVideo()):Z.call(e,e.media,\"ended\");break;case 1:t.customControls&&!e.config.autoplay&&e.media.paused&&!e.embed.hasPlayed?e.media.pause():(Ke.call(e,!0),Z.call(e,e.media,\"playing\"),e.timers.playing=setInterval((()=>{Z.call(e,e.media,\"timeupdate\")}),50),e.media.duration!==s.getDuration()&&(e.media.duration=s.getDuration(),Z.call(e,e.media,\"durationchange\")));break;case 2:e.muted||e.embed.unMute(),Ke.call(e,!1);break;case 3:Z.call(e,e.media,\"waiting\")}Z.call(e,e.elements.container,\"statechange\",!1,{code:i.data})}}})}},Xe={setup(){this.media?(R(this.elements.container,this.config.classNames.type.replace(\"{0}\",this.type),!0),R(this.elements.container,this.config.classNames.provider.replace(\"{0}\",this.provider),!0),this.isEmbed&&R(this.elements.container,this.config.classNames.type.replace(\"{0}\",\"video\"),!0),this.isVideo&&(this.elements.wrapper=$(\"div\",{class:this.config.classNames.video}),L(this.media,this.elements.wrapper),this.elements.poster=$(\"div\",{class:this.config.classNames.poster}),this.elements.wrapper.appendChild(this.elements.poster)),this.isHTML5?de.setup.call(this):this.isYouTube?Qe.setup.call(this):this.isVimeo&&ze.setup.call(this)):this.debug.warn(\"No media element found!\")}};class Je{constructor(t){e(this,\"load\",(()=>{this.enabled&&(S.object(window.google)&&S.object(window.google.ima)?this.ready():Be(this.player.config.urls.googleIMA.sdk).then((()=>{this.ready()})).catch((()=>{this.trigger(\"error\",new Error(\"Google IMA SDK failed to load\"))})))})),e(this,\"ready\",(()=>{var e;this.enabled||((e=this).manager&&e.manager.destroy(),e.elements.displayContainer&&e.elements.displayContainer.destroy(),e.elements.container.remove()),this.startSafetyTimer(12e3,\"ready()\"),this.managerPromise.then((()=>{this.clearSafetyTimer(\"onAdsManagerLoaded()\")})),this.listeners(),this.setupIMA()})),e(this,\"setupIMA\",(()=>{this.elements.container=$(\"div\",{class:this.player.config.classNames.ads}),this.player.elements.container.appendChild(this.elements.container),google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED),google.ima.settings.setLocale(this.player.config.ads.language),google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline),this.elements.displayContainer=new google.ima.AdDisplayContainer(this.elements.container,this.player.media),this.loader=new google.ima.AdsLoader(this.elements.displayContainer),this.loader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,(e=>this.onAdsManagerLoaded(e)),!1),this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR,(e=>this.onAdError(e)),!1),this.requestAds()})),e(this,\"requestAds\",(()=>{const{container:e}=this.player.elements;try{const t=new google.ima.AdsRequest;t.adTagUrl=this.tagUrl,t.linearAdSlotWidth=e.offsetWidth,t.linearAdSlotHeight=e.offsetHeight,t.nonLinearAdSlotWidth=e.offsetWidth,t.nonLinearAdSlotHeight=e.offsetHeight,t.forceNonLinearFullSlot=!1,t.setAdWillPlayMuted(!this.player.muted),this.loader.requestAds(t)}catch(e){this.onAdError(e)}})),e(this,\"pollCountdown\",((e=!1)=>{if(!e)return clearInterval(this.countdownTimer),void this.elements.container.removeAttribute(\"data-badge-text\");this.countdownTimer=setInterval((()=>{const e=Ee(Math.max(this.manager.getRemainingTime(),0)),t=`${ve.get(\"advertisement\",this.player.config)} - ${e}`;this.elements.container.setAttribute(\"data-badge-text\",t)}),100)})),e(this,\"onAdsManagerLoaded\",(e=>{if(!this.enabled)return;const t=new google.ima.AdsRenderingSettings;t.restoreCustomPlaybackStateOnAdBreakComplete=!0,t.enablePreloading=!0,this.manager=e.getAdsManager(this.player,t),this.cuePoints=this.manager.getCuePoints(),this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR,(e=>this.onAdError(e))),Object.keys(google.ima.AdEvent.Type).forEach((e=>{this.manager.addEventListener(google.ima.AdEvent.Type[e],(e=>this.onAdEvent(e)))})),this.trigger(\"loaded\")})),e(this,\"addCuePoints\",(()=>{S.empty(this.cuePoints)||this.cuePoints.forEach((e=>{if(0!==e&&-1!==e&&e{const{container:t}=this.player.elements,i=e.getAd(),s=e.getAdData();switch((e=>{Z.call(this.player,this.player.media,`ads${e.replace(/_/g,\"\").toLowerCase()}`)})(e.type),e.type){case google.ima.AdEvent.Type.LOADED:this.trigger(\"loaded\"),this.pollCountdown(!0),i.isLinear()||(i.width=t.offsetWidth,i.height=t.offsetHeight);break;case google.ima.AdEvent.Type.STARTED:this.manager.setVolume(this.player.volume);break;case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:this.player.ended?this.loadAds():this.loader.contentComplete();break;case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:this.pauseContent();break;case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:this.pollCountdown(),this.resumeContent();break;case google.ima.AdEvent.Type.LOG:s.adError&&this.player.debug.warn(`Non-fatal ad error: ${s.adError.getMessage()}`)}})),e(this,\"onAdError\",(e=>{this.cancel(),this.player.debug.warn(\"Ads error\",e)})),e(this,\"listeners\",(()=>{const{container:e}=this.player.elements;let t;this.player.on(\"canplay\",(()=>{this.addCuePoints()})),this.player.on(\"ended\",(()=>{this.loader.contentComplete()})),this.player.on(\"timeupdate\",(()=>{t=this.player.currentTime})),this.player.on(\"seeked\",(()=>{const e=this.player.currentTime;S.empty(this.cuePoints)||this.cuePoints.forEach(((i,s)=>{t{this.manager&&this.manager.resize(e.offsetWidth,e.offsetHeight,google.ima.ViewMode.NORMAL)}))})),e(this,\"play\",(()=>{const{container:e}=this.player.elements;this.managerPromise||this.resumeContent(),this.managerPromise.then((()=>{this.manager.setVolume(this.player.volume),this.elements.displayContainer.initialize();try{this.initialized||(this.manager.init(e.offsetWidth,e.offsetHeight,google.ima.ViewMode.NORMAL),this.manager.start()),this.initialized=!0}catch(e){this.onAdError(e)}})).catch((()=>{}))})),e(this,\"resumeContent\",(()=>{this.elements.container.style.zIndex=\"\",this.playing=!1,ie(this.player.media.play())})),e(this,\"pauseContent\",(()=>{this.elements.container.style.zIndex=3,this.playing=!0,this.player.media.pause()})),e(this,\"cancel\",(()=>{this.initialized&&this.resumeContent(),this.trigger(\"error\"),this.loadAds()})),e(this,\"loadAds\",(()=>{this.managerPromise.then((()=>{this.manager&&this.manager.destroy(),this.managerPromise=new Promise((e=>{this.on(\"loaded\",e),this.player.debug.log(this.manager)})),this.initialized=!1,this.requestAds()})).catch((()=>{}))})),e(this,\"trigger\",((e,...t)=>{const i=this.events[e];S.array(i)&&i.forEach((e=>{S.function(e)&&e.apply(this,t)}))})),e(this,\"on\",((e,t)=>(S.array(this.events[e])||(this.events[e]=[]),this.events[e].push(t),this))),e(this,\"startSafetyTimer\",((e,t)=>{this.player.debug.log(`Safety timer invoked from: ${t}`),this.safetyTimer=setTimeout((()=>{this.cancel(),this.clearSafetyTimer(\"startSafetyTimer()\")}),e)})),e(this,\"clearSafetyTimer\",(e=>{S.nullOrUndefined(this.safetyTimer)||(this.player.debug.log(`Safety timer cleared from: ${e}`),clearTimeout(this.safetyTimer),this.safetyTimer=null)})),this.player=t,this.config=t.config.ads,this.playing=!1,this.initialized=!1,this.elements={container:null,displayContainer:null},this.manager=null,this.loader=null,this.cuePoints=null,this.events={},this.safetyTimer=null,this.countdownTimer=null,this.managerPromise=new Promise(((e,t)=>{this.on(\"loaded\",e),this.on(\"error\",t)})),this.load()}get enabled(){const{config:e}=this;return this.player.isHTML5&&this.player.isVideo&&e.enabled&&(!S.empty(e.publisherId)||S.url(e.tagUrl))}get tagUrl(){const{config:e}=this;if(S.url(e.tagUrl))return e.tagUrl;return`https://go.aniview.com/api/adserver6/vast/?${Ne({AV_PUBLISHERID:\"58c25bb0073ef448b1087ad6\",AV_CHANNELID:\"5a0458dc28a06145e4519d21\",AV_URL:window.location.hostname,cb:Date.now(),AV_WIDTH:640,AV_HEIGHT:480,AV_CDIM2:e.publisherId})}`}}function Ge(e=0,t=0,i=255){return Math.min(Math.max(e,t),i)}const Ze=e=>{const t=[];return e.split(/\\r\\n\\r\\n|\\n\\n|\\r\\r/).forEach((e=>{const i={};e.split(/\\r\\n|\\n|\\r/).forEach((e=>{if(S.number(i.startTime)){if(!S.empty(e.trim())&&S.empty(i.text)){const t=e.trim().split(\"#xywh=\");[i.text]=t,t[1]&&([i.x,i.y,i.w,i.h]=t[1].split(\",\"))}}else{const t=e.match(/([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})/);t&&(i.startTime=60*Number(t[1]||0)*60+60*Number(t[2])+Number(t[3])+Number(`0.${t[4]}`),i.endTime=60*Number(t[6]||0)*60+60*Number(t[7])+Number(t[8])+Number(`0.${t[9]}`))}})),i.text&&t.push(i)})),t},et=(e,t)=>{const i={};return e>t.width/t.height?(i.width=t.width,i.height=1/e*t.width):(i.height=t.height,i.width=e*t.height),i};class tt{constructor(t){e(this,\"load\",(()=>{this.player.elements.display.seekTooltip&&(this.player.elements.display.seekTooltip.hidden=this.enabled),this.enabled&&this.getThumbnails().then((()=>{this.enabled&&(this.render(),this.determineContainerAutoSizing(),this.listeners(),this.loaded=!0)}))})),e(this,\"getThumbnails\",(()=>new Promise((e=>{const{src:t}=this.player.config.previewThumbnails;if(S.empty(t))throw new Error(\"Missing previewThumbnails.src config attribute\");const i=()=>{this.thumbnails.sort(((e,t)=>e.height-t.height)),this.player.debug.log(\"Preview thumbnails\",this.thumbnails),e()};if(S.function(t))t((e=>{this.thumbnails=e,i()}));else{const e=(S.string(t)?[t]:t).map((e=>this.getThumbnail(e)));Promise.all(e).then(i)}})))),e(this,\"getThumbnail\",(e=>new Promise((t=>{Te(e).then((i=>{const s={frames:Ze(i),height:null,urlPrefix:\"\"};s.frames[0].text.startsWith(\"/\")||s.frames[0].text.startsWith(\"http://\")||s.frames[0].text.startsWith(\"https://\")||(s.urlPrefix=e.substring(0,e.lastIndexOf(\"/\")+1));const n=new Image;n.onload=()=>{s.height=n.naturalHeight,s.width=n.naturalWidth,this.thumbnails.push(s),t()},n.src=s.urlPrefix+s.frames[0].text}))})))),e(this,\"startMove\",(e=>{if(this.loaded&&S.event(e)&&[\"touchmove\",\"mousemove\"].includes(e.type)&&this.player.media.duration){if(\"touchmove\"===e.type)this.seekTime=this.player.media.duration*(this.player.elements.inputs.seek.value/100);else{var t,i;const s=this.player.elements.progress.getBoundingClientRect(),n=100/s.width*(e.pageX-s.left);this.seekTime=this.player.media.duration*(n/100),this.seekTime<0&&(this.seekTime=0),this.seekTime>this.player.media.duration-1&&(this.seekTime=this.player.media.duration-1),this.mousePosX=e.pageX,this.elements.thumb.time.innerText=Ee(this.seekTime);const a=null===(t=this.player.config.markers)||void 0===t||null===(i=t.points)||void 0===i?void 0:i.find((({time:e})=>e===Math.round(this.seekTime)));a&&this.elements.thumb.time.insertAdjacentHTML(\"afterbegin\",`${a.label}
`)}this.showImageAtCurrentTime()}})),e(this,\"endMove\",(()=>{this.toggleThumbContainer(!1,!0)})),e(this,\"startScrubbing\",(e=>{(S.nullOrUndefined(e.button)||!1===e.button||0===e.button)&&(this.mouseDown=!0,this.player.media.duration&&(this.toggleScrubbingContainer(!0),this.toggleThumbContainer(!1,!0),this.showImageAtCurrentTime()))})),e(this,\"endScrubbing\",(()=>{this.mouseDown=!1,Math.ceil(this.lastTime)===Math.ceil(this.player.media.currentTime)?this.toggleScrubbingContainer(!1):G.call(this.player,this.player.media,\"timeupdate\",(()=>{this.mouseDown||this.toggleScrubbingContainer(!1)}))})),e(this,\"listeners\",(()=>{this.player.on(\"play\",(()=>{this.toggleThumbContainer(!1,!0)})),this.player.on(\"seeked\",(()=>{this.toggleThumbContainer(!1)})),this.player.on(\"timeupdate\",(()=>{this.lastTime=this.player.media.currentTime}))})),e(this,\"render\",(()=>{this.elements.thumb.container=$(\"div\",{class:this.player.config.classNames.previewThumbnails.thumbContainer}),this.elements.thumb.imageContainer=$(\"div\",{class:this.player.config.classNames.previewThumbnails.imageContainer}),this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer);const e=$(\"div\",{class:this.player.config.classNames.previewThumbnails.timeContainer});this.elements.thumb.time=$(\"span\",{},\"00:00\"),e.appendChild(this.elements.thumb.time),this.elements.thumb.imageContainer.appendChild(e),S.element(this.player.elements.progress)&&this.player.elements.progress.appendChild(this.elements.thumb.container),this.elements.scrubbing.container=$(\"div\",{class:this.player.config.classNames.previewThumbnails.scrubbingContainer}),this.player.elements.wrapper.appendChild(this.elements.scrubbing.container)})),e(this,\"destroy\",(()=>{this.elements.thumb.container&&this.elements.thumb.container.remove(),this.elements.scrubbing.container&&this.elements.scrubbing.container.remove()})),e(this,\"showImageAtCurrentTime\",(()=>{this.mouseDown?this.setScrubbingContainerSize():this.setThumbContainerSizeAndPos();const e=this.thumbnails[0].frames.findIndex((e=>this.seekTime>=e.startTime&&this.seekTime<=e.endTime)),t=e>=0;let i=0;this.mouseDown||this.toggleThumbContainer(t),t&&(this.thumbnails.forEach(((t,s)=>{this.loadedImages.includes(t.frames[e].text)&&(i=s)})),e!==this.showingThumb&&(this.showingThumb=e,this.loadImage(i)))})),e(this,\"loadImage\",((e=0)=>{const t=this.showingThumb,i=this.thumbnails[e],{urlPrefix:s}=i,n=i.frames[t],a=i.frames[t].text,l=s+a;if(this.currentImageElement&&this.currentImageElement.dataset.filename===a)this.showImage(this.currentImageElement,n,e,t,a,!1),this.currentImageElement.dataset.index=t,this.removeOldImages(this.currentImageElement);else{this.loadingImage&&this.usingSprites&&(this.loadingImage.onload=null);const i=new Image;i.src=l,i.dataset.index=t,i.dataset.filename=a,this.showingThumbFilename=a,this.player.debug.log(`Loading image: ${l}`),i.onload=()=>this.showImage(i,n,e,t,a,!0),this.loadingImage=i,this.removeOldImages(i)}})),e(this,\"showImage\",((e,t,i,s,n,a=!0)=>{this.player.debug.log(`Showing thumb: ${n}. num: ${s}. qual: ${i}. newimg: ${a}`),this.setImageSizeAndOffset(e,t),a&&(this.currentImageContainer.appendChild(e),this.currentImageElement=e,this.loadedImages.includes(n)||this.loadedImages.push(n)),this.preloadNearby(s,!0).then(this.preloadNearby(s,!1)).then(this.getHigherQuality(i,e,t,n))})),e(this,\"removeOldImages\",(e=>{Array.from(this.currentImageContainer.children).forEach((t=>{if(\"img\"!==t.tagName.toLowerCase())return;const i=this.usingSprites?500:1e3;if(t.dataset.index!==e.dataset.index&&!t.dataset.deleting){t.dataset.deleting=!0;const{currentImageContainer:e}=this;setTimeout((()=>{e.removeChild(t),this.player.debug.log(`Removing thumb: ${t.dataset.filename}`)}),i)}}))})),e(this,\"preloadNearby\",((e,t=!0)=>new Promise((i=>{setTimeout((()=>{const s=this.thumbnails[0].frames[e].text;if(this.showingThumbFilename===s){let n;n=t?this.thumbnails[0].frames.slice(e):this.thumbnails[0].frames.slice(0,e).reverse();let a=!1;n.forEach((e=>{const t=e.text;if(t!==s&&!this.loadedImages.includes(t)){a=!0,this.player.debug.log(`Preloading thumb filename: ${t}`);const{urlPrefix:e}=this.thumbnails[0],s=e+t,n=new Image;n.src=s,n.onload=()=>{this.player.debug.log(`Preloaded thumb filename: ${t}`),this.loadedImages.includes(t)||this.loadedImages.push(t),i()}}})),a||i()}}),300)})))),e(this,\"getHigherQuality\",((e,t,i,s)=>{if(e{this.showingThumbFilename===s&&(this.player.debug.log(`Showing higher quality thumb for: ${s}`),this.loadImage(e+1))}),300)}})),e(this,\"toggleThumbContainer\",((e=!1,t=!1)=>{const i=this.player.config.classNames.previewThumbnails.thumbContainerShown;this.elements.thumb.container.classList.toggle(i,e),!e&&t&&(this.showingThumb=null,this.showingThumbFilename=null)})),e(this,\"toggleScrubbingContainer\",((e=!1)=>{const t=this.player.config.classNames.previewThumbnails.scrubbingContainerShown;this.elements.scrubbing.container.classList.toggle(t,e),e||(this.showingThumb=null,this.showingThumbFilename=null)})),e(this,\"determineContainerAutoSizing\",(()=>{(this.elements.thumb.imageContainer.clientHeight>20||this.elements.thumb.imageContainer.clientWidth>20)&&(this.sizeSpecifiedInCSS=!0)})),e(this,\"setThumbContainerSizeAndPos\",(()=>{const{imageContainer:e}=this.elements.thumb;if(this.sizeSpecifiedInCSS){if(e.clientHeight>20&&e.clientWidth<20){const t=Math.floor(e.clientHeight*this.thumbAspectRatio);e.style.width=`${t}px`}else if(e.clientHeight<20&&e.clientWidth>20){const t=Math.floor(e.clientWidth/this.thumbAspectRatio);e.style.height=`${t}px`}}else{const t=Math.floor(this.thumbContainerHeight*this.thumbAspectRatio);e.style.height=`${this.thumbContainerHeight}px`,e.style.width=`${t}px`}this.setThumbContainerPos()})),e(this,\"setThumbContainerPos\",(()=>{const e=this.player.elements.progress.getBoundingClientRect(),t=this.player.elements.container.getBoundingClientRect(),{container:i}=this.elements.thumb,s=t.left-e.left+10,n=t.right-e.left-i.clientWidth-10,a=this.mousePosX-e.left-i.clientWidth/2,l=Ge(a,s,n);i.style.left=`${l}px`,i.style.setProperty(\"--preview-arrow-offset\",a-l+\"px\")})),e(this,\"setScrubbingContainerSize\",(()=>{const{width:e,height:t}=et(this.thumbAspectRatio,{width:this.player.media.clientWidth,height:this.player.media.clientHeight});this.elements.scrubbing.container.style.width=`${e}px`,this.elements.scrubbing.container.style.height=`${t}px`})),e(this,\"setImageSizeAndOffset\",((e,t)=>{if(!this.usingSprites)return;const i=this.thumbContainerHeight/t.h;e.style.height=e.naturalHeight*i+\"px\",e.style.width=e.naturalWidth*i+\"px\",e.style.left=`-${t.x*i}px`,e.style.top=`-${t.y*i}px`})),this.player=t,this.thumbnails=[],this.loaded=!1,this.lastMouseMoveTime=Date.now(),this.mouseDown=!1,this.loadedImages=[],this.elements={thumb:{},scrubbing:{}},this.load()}get enabled(){return this.player.isHTML5&&this.player.isVideo&&this.player.config.previewThumbnails.enabled}get currentImageContainer(){return this.mouseDown?this.elements.scrubbing.container:this.elements.thumb.imageContainer}get usingSprites(){return Object.keys(this.thumbnails[0].frames[0]).includes(\"w\")}get thumbAspectRatio(){return this.usingSprites?this.thumbnails[0].frames[0].w/this.thumbnails[0].frames[0].h:this.thumbnails[0].width/this.thumbnails[0].height}get thumbContainerHeight(){if(this.mouseDown){const{height:e}=et(this.thumbAspectRatio,{width:this.player.media.clientWidth,height:this.player.media.clientHeight});return e}return this.sizeSpecifiedInCSS?this.elements.thumb.imageContainer.clientHeight:Math.floor(this.player.media.clientWidth/this.thumbAspectRatio/4)}get currentImageElement(){return this.mouseDown?this.currentScrubbingImageElement:this.currentThumbnailImageElement}set currentImageElement(e){this.mouseDown?this.currentScrubbingImageElement=e:this.currentThumbnailImageElement=e}}const it={insertElements(e,t){S.string(t)?_(e,this.media,{src:t}):S.array(t)&&t.forEach((t=>{_(e,this.media,t)}))},change(e){N(e,\"sources.length\")?(de.cancelRequests.call(this),this.destroy.call(this,(()=>{this.options.quality=[],O(this.media),this.media=null,S.element(this.elements.container)&&this.elements.container.removeAttribute(\"class\");const{sources:t,type:i}=e,[{provider:s=_e.html5,src:n}]=t,a=\"html5\"===s?i:\"div\",l=\"html5\"===s?{}:{src:n};Object.assign(this,{provider:s,type:i,supported:K.check(i,s,this.config.playsinline),media:$(a,l)}),this.elements.container.appendChild(this.media),S.boolean(e.autoplay)&&(this.config.autoplay=e.autoplay),this.isHTML5&&(this.config.crossorigin&&this.media.setAttribute(\"crossorigin\",\"\"),this.config.autoplay&&this.media.setAttribute(\"autoplay\",\"\"),S.empty(e.poster)||(this.poster=e.poster),this.config.loop.active&&this.media.setAttribute(\"loop\",\"\"),this.config.muted&&this.media.setAttribute(\"muted\",\"\"),this.config.playsinline&&this.media.setAttribute(\"playsinline\",\"\")),Fe.addStyleHook.call(this),this.isHTML5&&it.insertElements.call(this,\"source\",t),this.config.title=e.title,Xe.setup.call(this),this.isHTML5&&Object.keys(e).includes(\"tracks\")&&it.insertElements.call(this,\"track\",e.tracks),(this.isHTML5||this.isEmbed&&!this.supported.ui)&&Fe.build.call(this),this.isHTML5&&this.media.load(),S.empty(e.previewThumbnails)||(Object.assign(this.config.previewThumbnails,e.previewThumbnails),this.previewThumbnails&&this.previewThumbnails.loaded&&(this.previewThumbnails.destroy(),this.previewThumbnails=null),this.config.previewThumbnails.enabled&&(this.previewThumbnails=new tt(this))),this.fullscreen.update()}),!0)):this.debug.warn(\"Invalid source format\")}};class st{constructor(t,i){if(e(this,\"play\",(()=>S.function(this.media.play)?(this.ads&&this.ads.enabled&&this.ads.managerPromise.then((()=>this.ads.play())).catch((()=>ie(this.media.play()))),this.media.play()):null)),e(this,\"pause\",(()=>this.playing&&S.function(this.media.pause)?this.media.pause():null)),e(this,\"togglePlay\",(e=>(S.boolean(e)?e:!this.playing)?this.play():this.pause())),e(this,\"stop\",(()=>{this.isHTML5?(this.pause(),this.restart()):S.function(this.media.stop)&&this.media.stop()})),e(this,\"restart\",(()=>{this.currentTime=0})),e(this,\"rewind\",(e=>{this.currentTime-=S.number(e)?e:this.config.seekTime})),e(this,\"forward\",(e=>{this.currentTime+=S.number(e)?e:this.config.seekTime})),e(this,\"increaseVolume\",(e=>{const t=this.media.muted?0:this.volume;this.volume=t+(S.number(e)?e:0)})),e(this,\"decreaseVolume\",(e=>{this.increaseVolume(-e)})),e(this,\"airplay\",(()=>{K.airplay&&this.media.webkitShowPlaybackTargetPicker()})),e(this,\"toggleControls\",(e=>{if(this.supported.ui&&!this.isAudio){const t=F(this.elements.container,this.config.classNames.hideControls),i=void 0===e?void 0:!e,s=R(this.elements.container,this.config.classNames.hideControls,i);if(s&&S.array(this.config.controls)&&this.config.controls.includes(\"settings\")&&!S.empty(this.config.settings)&&Pe.toggleMenu.call(this,!1),s!==t){const e=s?\"controlshidden\":\"controlsshown\";Z.call(this,this.media,e)}return!s}return!1})),e(this,\"on\",((e,t)=>{X.call(this,this.elements.container,e,t)})),e(this,\"once\",((e,t)=>{G.call(this,this.elements.container,e,t)})),e(this,\"off\",((e,t)=>{J(this.elements.container,e,t)})),e(this,\"destroy\",((e,t=!1)=>{if(!this.ready)return;const i=()=>{document.body.style.overflow=\"\",this.embed=null,t?(Object.keys(this.elements).length&&(O(this.elements.buttons.play),O(this.elements.captions),O(this.elements.controls),O(this.elements.wrapper),this.elements.buttons.play=null,this.elements.captions=null,this.elements.controls=null,this.elements.wrapper=null),S.function(e)&&e()):(ee.call(this),de.cancelRequests.call(this),q(this.elements.original,this.elements.container),Z.call(this,this.elements.original,\"destroyed\",!0),S.function(e)&&e.call(this.elements.original),this.ready=!1,setTimeout((()=>{this.elements=null,this.media=null}),200))};this.stop(),clearTimeout(this.timers.loading),clearTimeout(this.timers.controls),clearTimeout(this.timers.resized),this.isHTML5?(Fe.toggleNativeControls.call(this,!0),i()):this.isYouTube?(clearInterval(this.timers.buffering),clearInterval(this.timers.playing),null!==this.embed&&S.function(this.embed.destroy)&&this.embed.destroy(),i()):this.isVimeo&&(null!==this.embed&&this.embed.unload().then(i),setTimeout(i,200))})),e(this,\"supports\",(e=>K.mime.call(this,e))),this.timers={},this.ready=!1,this.loading=!1,this.failed=!1,this.touch=K.touch,this.media=t,S.string(this.media)&&(this.media=document.querySelectorAll(this.media)),(window.jQuery&&this.media instanceof jQuery||S.nodeList(this.media)||S.array(this.media))&&(this.media=this.media[0]),this.config=x({},Le,st.defaults,i||{},(()=>{try{return JSON.parse(this.media.getAttribute(\"data-plyr-config\"))}catch(e){return{}}})()),this.elements={container:null,fullscreen:null,captions:null,buttons:{},display:{},progress:{},inputs:{},settings:{popup:null,menu:null,panels:{},buttons:{}}},this.captions={active:null,currentTrack:-1,meta:new WeakMap},this.fullscreen={active:!1},this.options={speed:[],quality:[]},this.debug=new De(this.config.debug),this.debug.log(\"Config\",this.config),this.debug.log(\"Support\",K),S.nullOrUndefined(this.media)||!S.element(this.media))return void this.debug.error(\"Setup failed: no suitable element passed\");if(this.media.plyr)return void this.debug.warn(\"Target already setup\");if(!this.config.enabled)return void this.debug.error(\"Setup failed: disabled by config\");if(!K.check().api)return void this.debug.error(\"Setup failed: no support\");const s=this.media.cloneNode(!0);s.autoplay=!1,this.elements.original=s;const n=this.media.tagName.toLowerCase();let a=null,l=null;switch(n){case\"div\":if(a=this.media.querySelector(\"iframe\"),S.element(a)){if(l=Me(a.getAttribute(\"src\")),this.provider=function(e){return/^(https?:\\/\\/)?(www\\.)?(youtube\\.com|youtube-nocookie\\.com|youtu\\.?be)\\/.+$/.test(e)?_e.youtube:/^https?:\\/\\/player.vimeo.com\\/video\\/\\d{0,9}(?=\\b|\\/)/.test(e)?_e.vimeo:null}(l.toString()),this.elements.container=this.media,this.media=a,this.elements.container.className=\"\",l.search.length){const e=[\"1\",\"true\"];e.includes(l.searchParams.get(\"autoplay\"))&&(this.config.autoplay=!0),e.includes(l.searchParams.get(\"loop\"))&&(this.config.loop.active=!0),this.isYouTube?(this.config.playsinline=e.includes(l.searchParams.get(\"playsinline\")),this.config.youtube.hl=l.searchParams.get(\"hl\")):this.config.playsinline=!0}}else this.provider=this.media.getAttribute(this.config.attributes.embed.provider),this.media.removeAttribute(this.config.attributes.embed.provider);if(S.empty(this.provider)||!Object.values(_e).includes(this.provider))return void this.debug.error(\"Setup failed: Invalid provider\");this.type=je;break;case\"video\":case\"audio\":this.type=n,this.provider=_e.html5,this.media.hasAttribute(\"crossorigin\")&&(this.config.crossorigin=!0),this.media.hasAttribute(\"autoplay\")&&(this.config.autoplay=!0),(this.media.hasAttribute(\"playsinline\")||this.media.hasAttribute(\"webkit-playsinline\"))&&(this.config.playsinline=!0),this.media.hasAttribute(\"muted\")&&(this.config.muted=!0),this.media.hasAttribute(\"loop\")&&(this.config.loop.active=!0);break;default:return void this.debug.error(\"Setup failed: unsupported type\")}this.supported=K.check(this.type,this.provider),this.supported.api?(this.eventListeners=[],this.listeners=new Ve(this),this.storage=new we(this),this.media.plyr=this,S.element(this.elements.container)||(this.elements.container=$(\"div\"),L(this.media,this.elements.container)),Fe.migrateStyles.call(this),Fe.addStyleHook.call(this),Xe.setup.call(this),this.config.debug&&X.call(this,this.elements.container,this.config.events.join(\" \"),(e=>{this.debug.log(`event: ${e.type}`)})),this.fullscreen=new He(this),(this.isHTML5||this.isEmbed&&!this.supported.ui)&&Fe.build.call(this),this.listeners.container(),this.listeners.global(),this.config.ads.enabled&&(this.ads=new Je(this)),this.isHTML5&&this.config.autoplay&&this.once(\"canplay\",(()=>ie(this.play()))),this.lastSeekTime=0,this.config.previewThumbnails.enabled&&(this.previewThumbnails=new tt(this))):this.debug.error(\"Setup failed: no support\")}get isHTML5(){return this.provider===_e.html5}get isEmbed(){return this.isYouTube||this.isVimeo}get isYouTube(){return this.provider===_e.youtube}get isVimeo(){return this.provider===_e.vimeo}get isVideo(){return this.type===je}get isAudio(){return this.type===Oe}get playing(){return Boolean(this.ready&&!this.paused&&!this.ended)}get paused(){return Boolean(this.media.paused)}get stopped(){return Boolean(this.paused&&0===this.currentTime)}get ended(){return Boolean(this.media.ended)}set currentTime(e){if(!this.duration)return;const t=S.number(e)&&e>0;this.media.currentTime=t?Math.min(e,this.duration):0,this.debug.log(`Seeking to ${this.currentTime} seconds`)}get currentTime(){return Number(this.media.currentTime)}get buffered(){const{buffered:e}=this.media;return S.number(e)?e:e&&e.length&&this.duration>0?e.end(0)/this.duration:0}get seeking(){return Boolean(this.media.seeking)}get duration(){const e=parseFloat(this.config.duration),t=(this.media||{}).duration,i=S.number(t)&&t!==1/0?t:0;return e||i}set volume(e){let t=e;S.string(t)&&(t=Number(t)),S.number(t)||(t=this.storage.get(\"volume\")),S.number(t)||({volume:t}=this.config),t>1&&(t=1),t<0&&(t=0),this.config.volume=t,this.media.volume=t,!S.empty(e)&&this.muted&&t>0&&(this.muted=!1)}get volume(){return Number(this.media.volume)}set muted(e){let t=e;S.boolean(t)||(t=this.storage.get(\"muted\")),S.boolean(t)||(t=this.config.muted),this.config.muted=t,this.media.muted=t}get muted(){return Boolean(this.media.muted)}get hasAudio(){return!this.isHTML5||(!!this.isAudio||(Boolean(this.media.mozHasAudio)||Boolean(this.media.webkitAudioDecodedByteCount)||Boolean(this.media.audioTracks&&this.media.audioTracks.length)))}set speed(e){let t=null;S.number(e)&&(t=e),S.number(t)||(t=this.storage.get(\"speed\")),S.number(t)||(t=this.config.speed.selected);const{minimumSpeed:i,maximumSpeed:s}=this;t=Ge(t,i,s),this.config.speed.selected=t,setTimeout((()=>{this.media&&(this.media.playbackRate=t)}),0)}get speed(){return Number(this.media.playbackRate)}get minimumSpeed(){return this.isYouTube?Math.min(...this.options.speed):this.isVimeo?.5:.0625}get maximumSpeed(){return this.isYouTube?Math.max(...this.options.speed):this.isVimeo?2:16}set quality(e){const t=this.config.quality,i=this.options.quality;if(!i.length)return;let s=[!S.empty(e)&&Number(e),this.storage.get(\"quality\"),t.selected,t.default].find(S.number),n=!0;if(!i.includes(s)){const e=ne(i,s);this.debug.warn(`Unsupported quality option: ${s}, using ${e} instead`),s=e,n=!1}t.selected=s,this.media.quality=s,n&&this.storage.set({quality:s})}get quality(){return this.media.quality}set loop(e){const t=S.boolean(e)?e:this.config.loop.active;this.config.loop.active=t,this.media.loop=t}get loop(){return Boolean(this.media.loop)}set source(e){it.change.call(this,e)}get source(){return this.media.currentSrc}get download(){const{download:e}=this.config.urls;return S.url(e)?e:this.source}set download(e){S.url(e)&&(this.config.urls.download=e,Pe.setDownloadUrl.call(this))}set poster(e){this.isVideo?Fe.setPoster.call(this,e,!1).catch((()=>{})):this.debug.warn(\"Poster can only be set for video\")}get poster(){return this.isVideo?this.media.getAttribute(\"poster\")||this.media.getAttribute(\"data-poster\"):null}get ratio(){if(!this.isVideo)return null;const e=oe(ce.call(this));return S.array(e)?e.join(\":\"):e}set ratio(e){this.isVideo?S.string(e)&&re(e)?(this.config.ratio=oe(e),ue.call(this)):this.debug.error(`Invalid aspect ratio specified (${e})`):this.debug.warn(\"Aspect ratio can only be set for video\")}set autoplay(e){this.config.autoplay=S.boolean(e)?e:this.config.autoplay}get autoplay(){return Boolean(this.config.autoplay)}toggleCaptions(e){xe.toggle.call(this,e,!1)}set currentTrack(e){xe.set.call(this,e,!1),xe.setup.call(this)}get currentTrack(){const{toggled:e,currentTrack:t}=this.captions;return e?t:-1}set language(e){xe.setLanguage.call(this,e,!1)}get language(){return(xe.getCurrentTrack.call(this)||{}).language}set pip(e){if(!K.pip)return;const t=S.boolean(e)?e:!this.pip;S.function(this.media.webkitSetPresentationMode)&&this.media.webkitSetPresentationMode(t?Ie:$e),S.function(this.media.requestPictureInPicture)&&(!this.pip&&t?this.media.requestPictureInPicture():this.pip&&!t&&document.exitPictureInPicture())}get pip(){return K.pip?S.empty(this.media.webkitPresentationMode)?this.media===document.pictureInPictureElement:this.media.webkitPresentationMode===Ie:null}setPreviewThumbnails(e){this.previewThumbnails&&this.previewThumbnails.loaded&&(this.previewThumbnails.destroy(),this.previewThumbnails=null),Object.assign(this.config.previewThumbnails,e),this.config.previewThumbnails.enabled&&(this.previewThumbnails=new tt(this))}static supported(e,t){return K.check(e,t)}static loadSprite(e,t){return ke(e,t)}static setup(e,t={}){let i=null;return S.string(e)?i=Array.from(document.querySelectorAll(e)):S.nodeList(e)?i=Array.from(e):S.array(e)&&(i=e.filter(S.element)),S.empty(i)?null:i.map((e=>new st(e,t)))}}var nt;return st.defaults=(nt=Le,JSON.parse(JSON.stringify(nt))),st}));\n //# sourceMappingURL=plyr.min.js.map\ndiff --git a/node_modules/plyr/dist/plyr.min.js.map b/node_modules/plyr/dist/plyr.min.js.map\nindex 4bf012a..7336008 100644\n--- a/node_modules/plyr/dist/plyr.min.js.map\n+++ b/node_modules/plyr/dist/plyr.min.js.map\n@@ -1 +1 @@\n-{\"version\":3,\"sources\":[\"plyr.js\",\"node_modules/.pnpm/rangetouch@2.0.1/node_modules/rangetouch/dist/rangetouch.mjs\",\"src/js/utils/is.js\",\"src/js/utils/animation.js\",\"src/js/utils/browser.js\",\"src/js/utils/objects.js\",\"src/js/utils/elements.js\",\"src/js/support.js\",\"src/js/utils/events.js\",\"src/js/utils/promise.js\",\"src/js/utils/arrays.js\",\"src/js/utils/style.js\",\"src/js/html5.js\",\"src/js/utils/strings.js\",\"src/js/utils/i18n.js\",\"src/js/storage.js\",\"src/js/utils/fetch.js\",\"src/js/utils/load-sprite.js\",\"src/js/utils/time.js\",\"src/js/controls.js\",\"src/js/utils/urls.js\",\"src/js/captions.js\",\"src/js/config/defaults.js\",\"src/js/config/states.js\",\"src/js/config/types.js\",\"src/js/console.js\",\"src/js/fullscreen.js\",\"src/js/utils/load-image.js\",\"src/js/ui.js\",\"src/js/listeners.js\",\"node_modules/.pnpm/loadjs@4.2.0/node_modules/loadjs/dist/loadjs.umd.js\",\"src/js/utils/load-script.js\",\"src/js/plugins/vimeo.js\",\"src/js/plugins/youtube.js\",\"src/js/media.js\",\"src/js/plugins/ads.js\",\"src/js/utils/numbers.js\",\"src/js/plugins/preview-thumbnails.js\",\"src/js/source.js\",\"src/js/plyr.js\"],\"names\":[\"navigator\",\"global\",\"factory\",\"exports\",\"module\",\"define\",\"amd\",\"globalThis\",\"self\",\"Plyr\",\"this\",\"_defineProperty$1\",\"obj\",\"key\",\"value\",\"arg\",\"input\",\"hint\",\"prim\",\"Symbol\",\"toPrimitive\",\"undefined\",\"res\",\"call\",\"TypeError\",\"String\",\"Number\",\"_toPrimitive\",\"_toPropertyKey\",\"Object\",\"defineProperty\",\"enumerable\",\"configurable\",\"writable\",\"_defineProperties\",\"e\",\"t\",\"n\",\"length\",\"r\",\"_defineProperty\",\"ownKeys\",\"keys\",\"getOwnPropertySymbols\",\"filter\",\"getOwnPropertyDescriptor\",\"push\",\"apply\",\"_objectSpread2\",\"arguments\",\"forEach\",\"getOwnPropertyDescriptors\",\"defineProperties\",\"defaults\",\"addCSS\",\"thumbWidth\",\"watch\",\"getConstructor\",\"constructor\",\"instanceOf\",\"isNullOrUndefined\",\"isObject\",\"isString\",\"isArray\",\"Array\",\"isNodeList\",\"NodeList\",\"is\",\"nullOrUndefined\",\"object\",\"number\",\"isNaN\",\"string\",\"boolean\",\"Boolean\",\"function\",\"Function\",\"array\",\"nodeList\",\"element\",\"Element\",\"event\",\"Event\",\"empty\",\"round\",\"concat\",\"match\",\"Math\",\"max\",\"getDecimalPlaces\",\"parseFloat\",\"toFixed\",\"RangeTouch\",\"_classCallCheck\",\"document\",\"querySelector\",\"rangeTouch\",\"config\",\"init\",\"prototype\",\"_createClass\",\"enabled\",\"style\",\"userSelect\",\"webKitUserSelect\",\"touchAction\",\"listeners\",\"set\",\"target\",\"i\",\"changedTouches\",\"o\",\"getAttribute\",\"s\",\"u\",\"c\",\"getBoundingClientRect\",\"a\",\"width\",\"clientX\",\"left\",\"disabled\",\"preventDefault\",\"get\",\"bubbles\",\"dispatchEvent\",\"trigger\",\"type\",\"from\",\"querySelectorAll\",\"MutationObserver\",\"addedNodes\",\"includes\",\"matches\",\"observe\",\"body\",\"childList\",\"subtree\",\"map\",\"documentElement\",\"isFunction\",\"isEmpty\",\"weakMap\",\"WeakMap\",\"nodeType\",\"ownerDocument\",\"textNode\",\"Text\",\"keyboardEvent\",\"KeyboardEvent\",\"cue\",\"window\",\"TextTrackCue\",\"VTTCue\",\"track\",\"TextTrack\",\"kind\",\"promise\",\"Promise\",\"then\",\"url\",\"URL\",\"startsWith\",\"hostname\",\"_\",\"transitionEndEvent\",\"createElement\",\"events\",\"WebkitTransition\",\"MozTransition\",\"OTransition\",\"transition\",\"find\",\"repaint\",\"delay\",\"setTimeout\",\"hidden\",\"offsetHeight\",\"browser\",\"isIE\",\"documentMode\",\"isEdge\",\"test\",\"userAgent\",\"isWebKit\",\"isIPhone\",\"maxTouchPoints\",\"isIPadOS\",\"platform\",\"isIos\",\"getDeep\",\"path\",\"split\",\"reduce\",\"extend\",\"sources\",\"source\",\"shift\",\"assign\",\"wrap\",\"elements\",\"wrapper\",\"targets\",\"reverse\",\"index\",\"child\",\"cloneNode\",\"parent\",\"parentNode\",\"sibling\",\"nextSibling\",\"appendChild\",\"insertBefore\",\"setAttributes\",\"attributes\",\"entries\",\"setAttribute\",\"text\",\"innerText\",\"insertElement\",\"removeElement\",\"removeChild\",\"emptyElement\",\"childNodes\",\"lastChild\",\"replaceElement\",\"newChild\",\"oldChild\",\"replaceChild\",\"getAttributesFromSelector\",\"sel\",\"existingAttributes\",\"existing\",\"selector\",\"trim\",\"className\",\"replace\",\"parts\",\"charAt\",\"class\",\"id\",\"toggleHidden\",\"hide\",\"toggleClass\",\"force\",\"method\",\"classList\",\"contains\",\"hasClass\",\"webkitMatchesSelector\",\"mozMatchesSelector\",\"msMatchesSelector\",\"getElements\",\"container\",\"getElement\",\"setFocus\",\"focusVisible\",\"focus\",\"preventScroll\",\"defaultCodecs\",\"support\",\"audio\",\"video\",\"check\",\"provider\",\"api\",\"ui\",\"rangeInput\",\"pip\",\"webkitSetPresentationMode\",\"pictureInPictureEnabled\",\"disablePictureInPicture\",\"airplay\",\"WebKitPlaybackTargetAvailabilityEvent\",\"playsinline\",\"mime\",\"mediaType\",\"isHTML5\",\"media\",\"canPlayType\",\"textTracks\",\"range\",\"touch\",\"transitions\",\"reducedMotion\",\"matchMedia\",\"supportsPassiveListeners\",\"supported\",\"options\",\"addEventListener\",\"removeEventListener\",\"toggleListener\",\"callback\",\"toggle\",\"passive\",\"capture\",\"eventListeners\",\"on\",\"off\",\"once\",\"onceCallback\",\"args\",\"triggerEvent\",\"detail\",\"CustomEvent\",\"plyr\",\"unbindListeners\",\"item\",\"ready\",\"resolve\",\"silencePromise\",\"dedupe\",\"indexOf\",\"closest\",\"prev\",\"curr\",\"abs\",\"supportsCSS\",\"declaration\",\"CSS\",\"supports\",\"standardRatios\",\"out\",\"x\",\"y\",\"validateAspectRatio\",\"every\",\"reduceAspectRatio\",\"ratio\",\"height\",\"getDivider\",\"w\",\"h\",\"divider\",\"getAspectRatio\",\"parse\",\"embed\",\"videoWidth\",\"videoHeight\",\"setAspectRatio\",\"isVideo\",\"padding\",\"aspectRatio\",\"paddingBottom\",\"isVimeo\",\"vimeo\",\"premium\",\"offsetWidth\",\"parseInt\",\"getComputedStyle\",\"offset\",\"fullscreen\",\"active\",\"transform\",\"add\",\"classNames\",\"videoFixedRatio\",\"roundAspectRatio\",\"tolerance\",\"closestRatio\",\"html5\",\"getSources\",\"getQualityOptions\",\"quality\",\"forced\",\"setup\",\"player\",\"speed\",\"onChange\",\"currentTime\",\"paused\",\"preload\",\"readyState\",\"playbackRate\",\"src\",\"play\",\"load\",\"cancelRequests\",\"blankVideo\",\"debug\",\"log\",\"format\",\"toString\",\"replaceAll\",\"RegExp\",\"toTitleCase\",\"toUpperCase\",\"slice\",\"toLowerCase\",\"toCamelCase\",\"toPascalCase\",\"getHTML\",\"innerHTML\",\"resources\",\"youtube\",\"i18n\",\"seekTime\",\"title\",\"k\",\"v\",\"Storage\",\"store\",\"localStorage\",\"getItem\",\"json\",\"JSON\",\"storage\",\"setItem\",\"stringify\",\"removeItem\",\"fetch\",\"responseType\",\"reject\",\"request\",\"XMLHttpRequest\",\"responseText\",\"response\",\"Error\",\"status\",\"open\",\"send\",\"error\",\"loadSprite\",\"prefix\",\"hasId\",\"isCached\",\"exists\",\"getElementById\",\"update\",\"data\",\"insertAdjacentElement\",\"useStorage\",\"cached\",\"content\",\"result\",\"catch\",\"getHours\",\"trunc\",\"getMinutes\",\"getSeconds\",\"formatTime\",\"time\",\"displayHours\",\"inverted\",\"hours\",\"mins\",\"secs\",\"controls\",\"getIconUrl\",\"iconUrl\",\"location\",\"host\",\"top\",\"cors\",\"svg4everybody\",\"findElements\",\"selectors\",\"buttons\",\"pause\",\"restart\",\"rewind\",\"fastForward\",\"mute\",\"settings\",\"captions\",\"progress\",\"inputs\",\"seek\",\"volume\",\"display\",\"buffer\",\"duration\",\"seekTooltip\",\"tooltip\",\"warn\",\"toggleNativeControls\",\"createIcon\",\"namespace\",\"iconPath\",\"iconPrefix\",\"icon\",\"createElementNS\",\"focusable\",\"use\",\"setAttributeNS\",\"createLabel\",\"attr\",\"join\",\"createBadge\",\"badge\",\"menu\",\"createButton\",\"buttonType\",\"props\",\"label\",\"labelPressed\",\"iconPressed\",\"some\",\"control\",\"button\",\"createRange\",\"min\",\"step\",\"autocomplete\",\"role\",\"updateRangeFill\",\"createProgress\",\"suffixKey\",\"played\",\"suffix\",\"createTime\",\"attrs\",\"bindMenuItemShortcuts\",\"menuItem\",\"stopPropagation\",\"isRadioButton\",\"showMenuPanel\",\"nextElementSibling\",\"firstElementChild\",\"previousElementSibling\",\"lastElementChild\",\"focusFirstMenuItem\",\"createMenuItem\",\"list\",\"checked\",\"flex\",\"children\",\"node\",\"bind\",\"currentTrack\",\"updateTimeDisplay\",\"updateVolume\",\"setRange\",\"muted\",\"pressed\",\"updateProgress\",\"setProgress\",\"val\",\"getElementsByTagName\",\"nodeValue\",\"current\",\"buffered\",\"percent\",\"setProperty\",\"updateSeekTooltip\",\"_this$config$markers\",\"_this$config$markers$\",\"tooltips\",\"tipElement\",\"visible\",\"show\",\"clientRect\",\"pageX\",\"point\",\"markers\",\"points\",\"insertAdjacentHTML\",\"timeUpdate\",\"invert\",\"invertTime\",\"seeking\",\"durationUpdate\",\"hasDuration\",\"displayDuration\",\"setMarkers\",\"toggleMenuButton\",\"setting\",\"updateSetting\",\"pane\",\"panels\",\"default\",\"getLabel\",\"setQualityMenu\",\"checkMenu\",\"getBadge\",\"sort\",\"b\",\"sorting\",\"setCaptionsMenu\",\"tracks\",\"getTracks\",\"toggled\",\"language\",\"unshift\",\"setSpeedMenu\",\"minimumSpeed\",\"maximumSpeed\",\"values\",\"popup\",\"p\",\"firstItem\",\"toggleMenu\",\"composedPath\",\"isMenuItem\",\"getMenuSize\",\"tab\",\"clone\",\"position\",\"opacity\",\"removeAttribute\",\"scrollWidth\",\"scrollHeight\",\"size\",\"restore\",\"propertyName\",\"setDownloadUrl\",\"download\",\"create\",\"defaultAttributes\",\"progressContainer\",\"inner\",\"home\",\"backButton\",\"href\",\"urls\",\"isEmbed\",\"inject\",\"floor\",\"random\",\"seektime\",\"addProperty\",\"controlPressed\",\"labels\",\"setMediaMetadata\",\"mediaSession\",\"metadata\",\"MediaMetadata\",\"mediaMetadata\",\"artist\",\"album\",\"artwork\",\"_this$config$markers2\",\"_this$config$markers3\",\"containerFragment\",\"createDocumentFragment\",\"pointsFragment\",\"tipVisible\",\"toggleTip\",\"markerElement\",\"marker\",\"tip\",\"parseUrl\",\"safe\",\"parser\",\"buildUrlParams\",\"params\",\"URLSearchParams\",\"isYouTube\",\"protocol\",\"blob\",\"createObjectURL\",\"languages\",\"userLanguage\",\"trackEvents\",\"meta\",\"currentTrackNode\",\"languageExists\",\"mode\",\"updateCues\",\"setLanguage\",\"activeClass\",\"findTrack\",\"enableTextTrack\",\"has\",\"sortIsDefault\",\"sorted\",\"getCurrentTrack\",\"cues\",\"activeCues\",\"getCueAsHTML\",\"cueText\",\"caption\",\"autoplay\",\"autopause\",\"toggleInvert\",\"clickToPlay\",\"hideControls\",\"resetOnEnd\",\"disableContextMenu\",\"loop\",\"selected\",\"keyboard\",\"focused\",\"fallback\",\"iosNative\",\"seekLabel\",\"unmute\",\"enableCaptions\",\"disableCaptions\",\"enterFullscreen\",\"exitFullscreen\",\"frameTitle\",\"menuBack\",\"normal\",\"start\",\"end\",\"all\",\"reset\",\"advertisement\",\"qualityBadge\",\"sdk\",\"iframe\",\"googleIMA\",\"editable\",\"embedContainer\",\"poster\",\"posterEnabled\",\"ads\",\"playing\",\"stopped\",\"loading\",\"hover\",\"isTouch\",\"uiSupported\",\"noTransition\",\"previewThumbnails\",\"thumbContainer\",\"thumbContainerShown\",\"imageContainer\",\"timeContainer\",\"scrubbingContainer\",\"scrubbingContainerShown\",\"hash\",\"publisherId\",\"tagUrl\",\"byline\",\"portrait\",\"transparent\",\"customControls\",\"referrerPolicy\",\"rel\",\"showinfo\",\"iv_load_policy\",\"modestbranding\",\"noCookie\",\"providers\",\"types\",\"noop\",\"Console\",\"console\",\"Fullscreen\",\"scrollPosition\",\"scrollX\",\"scrollY\",\"scrollTo\",\"overflow\",\"viewport\",\"head\",\"property\",\"hasProperty\",\"cleanupViewport\",\"part\",\"activeElement\",\"first\",\"last\",\"shiftKey\",\"forceFallback\",\"nativeSupported\",\"requestFullscreen\",\"webkitEnterFullscreen\",\"toggleFallback\",\"navigationUI\",\"action\",\"cancelFullScreen\",\"exit\",\"enter\",\"el\",\"parentElement\",\"proxy\",\"trapFocus\",\"fullscreenEnabled\",\"webkitFullscreenEnabled\",\"mozFullScreenEnabled\",\"msFullscreenEnabled\",\"useNative\",\"pre\",\"getRootNode\",\"fullscreenElement\",\"shadowRoot\",\"loadImage\",\"minWidth\",\"image\",\"Image\",\"handler\",\"onload\",\"onerror\",\"naturalWidth\",\"addStyleHook\",\"build\",\"checkPlaying\",\"setTitle\",\"setPoster\",\"togglePoster\",\"enable\",\"backgroundImage\",\"backgroundSize\",\"toggleControls\",\"checkLoading\",\"clearTimeout\",\"timers\",\"controlsElement\",\"recentTouchSeek\",\"lastSeekTime\",\"Date\",\"now\",\"migrateStyles\",\"getPropertyValue\",\"removeProperty\",\"Listeners\",\"handleKey\",\"firstTouch\",\"setGutter\",\"useNativeAspectRatio\",\"maxWidth\",\"margin\",\"viewportWidth\",\"viewportHeight\",\"clientWidth\",\"innerWidth\",\"clientHeight\",\"innerHeight\",\"resized\",\"isAudio\",\"ended\",\"togglePlay\",\"proxyEvents\",\"defaultHandler\",\"customHandlerKey\",\"customHandler\",\"returned\",\"hasCustomHandler\",\"inputEvent\",\"forward\",\"toggleCaptions\",\"rect\",\"currentTarget\",\"attribute\",\"hasAttribute\",\"done\",\"seekTo\",\"loaded\",\"startMove\",\"endMove\",\"startScrubbing\",\"endScrubbing\",\"webkitDirectionInvertedFromDevice\",\"deltaX\",\"deltaY\",\"direction\",\"sign\",\"increaseVolume\",\"lastKey\",\"focusTimer\",\"lastKeyDown\",\"altKey\",\"ctrlKey\",\"metaKey\",\"repeat\",\"increment\",\"decreaseVolume\",\"usingNative\",\"loadjs_umd\",\"fn\",\"createCommonjsModule\",\"devnull\",\"bundleIdCache\",\"bundleResultCache\",\"bundleCallbackQueue\",\"subscribe\",\"bundleIds\",\"callbackFn\",\"bundleId\",\"depsNotFound\",\"numWaiting\",\"pathsNotFound\",\"publish\",\"q\",\"splice\",\"executeCallbacks\",\"success\",\"loadFile\",\"numTries\",\"isLegacyIECss\",\"doc\",\"async\",\"maxTries\",\"numRetries\",\"beforeCallbackFn\",\"before\",\"pathname\",\"pathStripped\",\"relList\",\"as\",\"onbeforeload\",\"ev\",\"sheet\",\"cssText\",\"code\",\"defaultPrevented\",\"loadFiles\",\"paths\",\"loadjs\",\"arg1\",\"arg2\",\"loadFn\",\"returnPromise\",\"deps\",\"isDefined\",\"loadScript\",\"assurePlaybackState\",\"hasPlayed\",\"Vimeo\",\"frameParams\",\"found\",\"parseHash\",\"hashParam\",\"sidedock\",\"gesture\",\"$2\",\"thumbnail_url\",\"Player\",\"disableTextTrack\",\"stop\",\"restorePause\",\"setVolume\",\"setCurrentTime\",\"setPlaybackRate\",\"setMuted\",\"currentSrc\",\"setLoop\",\"getVideoUrl\",\"getVideoWidth\",\"getVideoHeight\",\"dimensions\",\"setAutopause\",\"state\",\"getVideoTitle\",\"getCurrentTime\",\"getDuration\",\"getTextTracks\",\"strippedCues\",\"fragment\",\"firstChild\",\"stripHTML\",\"getPaused\",\"seconds\",\"getHost\",\"YT\",\"onYouTubeIframeAPIReady\",\"getTitle\",\"videoId\",\"currentId\",\"posterSrc\",\"playerVars\",\"hl\",\"disablekb\",\"cc_load_policy\",\"cc_lang_pref\",\"widget_referrer\",\"onError\",\"message\",\"onPlaybackRateChange\",\"instance\",\"getPlaybackRate\",\"onReady\",\"playVideo\",\"pauseVideo\",\"stopVideo\",\"speeds\",\"getAvailablePlaybackRates\",\"clearInterval\",\"buffering\",\"setInterval\",\"getVideoLoadedFraction\",\"lastBuffered\",\"onStateChange\",\"unMute\",\"Ads\",\"google\",\"ima\",\"manager\",\"destroy\",\"displayContainer\",\"remove\",\"startSafetyTimer\",\"managerPromise\",\"clearSafetyTimer\",\"setupIMA\",\"setVpaidMode\",\"ImaSdkSettings\",\"VpaidMode\",\"ENABLED\",\"setLocale\",\"setDisableCustomPlaybackForIOS10Plus\",\"AdDisplayContainer\",\"loader\",\"AdsLoader\",\"AdsManagerLoadedEvent\",\"Type\",\"ADS_MANAGER_LOADED\",\"onAdsManagerLoaded\",\"AdErrorEvent\",\"AD_ERROR\",\"onAdError\",\"requestAds\",\"AdsRequest\",\"adTagUrl\",\"linearAdSlotWidth\",\"linearAdSlotHeight\",\"nonLinearAdSlotWidth\",\"nonLinearAdSlotHeight\",\"forceNonLinearFullSlot\",\"setAdWillPlayMuted\",\"countdownTimer\",\"getRemainingTime\",\"AdsRenderingSettings\",\"restoreCustomPlaybackStateOnAdBreakComplete\",\"enablePreloading\",\"getAdsManager\",\"cuePoints\",\"getCuePoints\",\"AdEvent\",\"onAdEvent\",\"cuePoint\",\"seekElement\",\"cuePercentage\",\"ad\",\"getAd\",\"adData\",\"getAdData\",\"LOADED\",\"pollCountdown\",\"isLinear\",\"STARTED\",\"ALL_ADS_COMPLETED\",\"loadAds\",\"contentComplete\",\"CONTENT_PAUSE_REQUESTED\",\"pauseContent\",\"CONTENT_RESUME_REQUESTED\",\"resumeContent\",\"LOG\",\"adError\",\"getMessage\",\"cancel\",\"addCuePoints\",\"seekedTime\",\"discardAdBreak\",\"resize\",\"ViewMode\",\"NORMAL\",\"initialize\",\"initialized\",\"zIndex\",\"handlers\",\"safetyTimer\",\"AV_PUBLISHERID\",\"AV_CHANNELID\",\"AV_URL\",\"cb\",\"AV_WIDTH\",\"AV_HEIGHT\",\"AV_CDIM2\",\"clamp\",\"parseVtt\",\"vttDataString\",\"processedList\",\"frame\",\"line\",\"startTime\",\"lineSplit\",\"matchTimes\",\"endTime\",\"fitRatio\",\"outer\",\"PreviewThumbnails\",\"getThumbnails\",\"render\",\"determineContainerAutoSizing\",\"sortAndResolve\",\"thumbnails\",\"promises\",\"getThumbnail\",\"thumbnail\",\"frames\",\"urlPrefix\",\"substring\",\"lastIndexOf\",\"tempImage\",\"naturalHeight\",\"_this$player$config$m\",\"_this$player$config$m2\",\"percentage\",\"mousePosX\",\"thumb\",\"showImageAtCurrentTime\",\"toggleThumbContainer\",\"mouseDown\",\"toggleScrubbingContainer\",\"ceil\",\"lastTime\",\"scrubbing\",\"setScrubbingContainerSize\",\"setThumbContainerSizeAndPos\",\"thumbNum\",\"findIndex\",\"hasThumb\",\"qualityIndex\",\"loadedImages\",\"showingThumb\",\"thumbFilename\",\"thumbUrl\",\"currentImageElement\",\"dataset\",\"filename\",\"showImage\",\"removeOldImages\",\"loadingImage\",\"usingSprites\",\"previewImage\",\"showingThumbFilename\",\"newImage\",\"setImageSizeAndOffset\",\"currentImageContainer\",\"preloadNearby\",\"getHigherQuality\",\"currentImage\",\"tagName\",\"removeDelay\",\"deleting\",\"oldThumbFilename\",\"thumbnailsClone\",\"foundOne\",\"newThumbFilename\",\"thumbURL\",\"currentQualityIndex\",\"previewImageHeight\",\"thumbContainerHeight\",\"clearShowing\",\"sizeSpecifiedInCSS\",\"thumbAspectRatio\",\"thumbHeight\",\"setThumbContainerPos\",\"scrubberRect\",\"containerRect\",\"right\",\"clamped\",\"multiplier\",\"lastMouseMoveTime\",\"currentScrubbingImageElement\",\"currentThumbnailImageElement\",\"insertElements\",\"change\",\"crossorigin\",\"webkitShowPlaybackTargetPicker\",\"isHidden\",\"hiding\",\"eventName\",\"soft\",\"original\",\"unload\",\"failed\",\"jQuery\",\"getProviderByUrl\",\"search\",\"truthy\",\"searchParams\",\"inputIsValid\",\"fauxDuration\",\"realDuration\",\"Infinity\",\"hasAudio\",\"mozHasAudio\",\"webkitAudioDecodedByteCount\",\"audioTracks\",\"updateStorage\",\"requestPictureInPicture\",\"exitPictureInPicture\",\"webkitPresentationMode\",\"pictureInPictureElement\",\"setPreviewThumbnails\",\"thumbnailSource\",\"static\"],\"mappings\":\"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\",\"file\":\"plyr.min.js\",\"sourcesContent\":[\"typeof navigator === \\\"object\\\" && (function (global, factory) {\\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\\n typeof define === 'function' && define.amd ? define('Plyr', factory) :\\n (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Plyr = factory());\\n})(this, (function () { 'use strict';\\n\\n function _defineProperty$1(obj, key, value) {\\n key = _toPropertyKey(key);\\n if (key in obj) {\\n Object.defineProperty(obj, key, {\\n value: value,\\n enumerable: true,\\n configurable: true,\\n writable: true\\n });\\n } else {\\n obj[key] = value;\\n }\\n return obj;\\n }\\n function _toPrimitive(input, hint) {\\n if (typeof input !== \\\"object\\\" || input === null) return input;\\n var prim = input[Symbol.toPrimitive];\\n if (prim !== undefined) {\\n var res = prim.call(input, hint || \\\"default\\\");\\n if (typeof res !== \\\"object\\\") return res;\\n throw new TypeError(\\\"@@toPrimitive must return a primitive value.\\\");\\n }\\n return (hint === \\\"string\\\" ? String : Number)(input);\\n }\\n function _toPropertyKey(arg) {\\n var key = _toPrimitive(arg, \\\"string\\\");\\n return typeof key === \\\"symbol\\\" ? key : String(key);\\n }\\n\\n function _classCallCheck(e, t) {\\n if (!(e instanceof t)) throw new TypeError(\\\"Cannot call a class as a function\\\");\\n }\\n function _defineProperties(e, t) {\\n for (var n = 0; n < t.length; n++) {\\n var r = t[n];\\n r.enumerable = r.enumerable || !1, r.configurable = !0, \\\"value\\\" in r && (r.writable = !0), Object.defineProperty(e, r.key, r);\\n }\\n }\\n function _createClass(e, t, n) {\\n return t && _defineProperties(e.prototype, t), n && _defineProperties(e, n), e;\\n }\\n function _defineProperty(e, t, n) {\\n return t in e ? Object.defineProperty(e, t, {\\n value: n,\\n enumerable: !0,\\n configurable: !0,\\n writable: !0\\n }) : e[t] = n, e;\\n }\\n function ownKeys(e, t) {\\n var n = Object.keys(e);\\n if (Object.getOwnPropertySymbols) {\\n var r = Object.getOwnPropertySymbols(e);\\n t && (r = r.filter(function (t) {\\n return Object.getOwnPropertyDescriptor(e, t).enumerable;\\n })), n.push.apply(n, r);\\n }\\n return n;\\n }\\n function _objectSpread2(e) {\\n for (var t = 1; t < arguments.length; t++) {\\n var n = null != arguments[t] ? arguments[t] : {};\\n t % 2 ? ownKeys(Object(n), !0).forEach(function (t) {\\n _defineProperty(e, t, n[t]);\\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : ownKeys(Object(n)).forEach(function (t) {\\n Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));\\n });\\n }\\n return e;\\n }\\n var defaults$1 = {\\n addCSS: !0,\\n thumbWidth: 15,\\n watch: !0\\n };\\n function matches$1(e, t) {\\n return function () {\\n return Array.from(document.querySelectorAll(t)).includes(this);\\n }.call(e, t);\\n }\\n function trigger(e, t) {\\n if (e && t) {\\n var n = new Event(t, {\\n bubbles: !0\\n });\\n e.dispatchEvent(n);\\n }\\n }\\n var getConstructor$1 = function (e) {\\n return null != e ? e.constructor : null;\\n },\\n instanceOf$1 = function (e, t) {\\n return !!(e && t && e instanceof t);\\n },\\n isNullOrUndefined$1 = function (e) {\\n return null == e;\\n },\\n isObject$1 = function (e) {\\n return getConstructor$1(e) === Object;\\n },\\n isNumber$1 = function (e) {\\n return getConstructor$1(e) === Number && !Number.isNaN(e);\\n },\\n isString$1 = function (e) {\\n return getConstructor$1(e) === String;\\n },\\n isBoolean$1 = function (e) {\\n return getConstructor$1(e) === Boolean;\\n },\\n isFunction$1 = function (e) {\\n return getConstructor$1(e) === Function;\\n },\\n isArray$1 = function (e) {\\n return Array.isArray(e);\\n },\\n isNodeList$1 = function (e) {\\n return instanceOf$1(e, NodeList);\\n },\\n isElement$1 = function (e) {\\n return instanceOf$1(e, Element);\\n },\\n isEvent$1 = function (e) {\\n return instanceOf$1(e, Event);\\n },\\n isEmpty$1 = function (e) {\\n return isNullOrUndefined$1(e) || (isString$1(e) || isArray$1(e) || isNodeList$1(e)) && !e.length || isObject$1(e) && !Object.keys(e).length;\\n },\\n is$1 = {\\n nullOrUndefined: isNullOrUndefined$1,\\n object: isObject$1,\\n number: isNumber$1,\\n string: isString$1,\\n boolean: isBoolean$1,\\n function: isFunction$1,\\n array: isArray$1,\\n nodeList: isNodeList$1,\\n element: isElement$1,\\n event: isEvent$1,\\n empty: isEmpty$1\\n };\\n function getDecimalPlaces(e) {\\n var t = \\\"\\\".concat(e).match(/(?:\\\\.(\\\\d+))?(?:[eE]([+-]?\\\\d+))?$/);\\n return t ? Math.max(0, (t[1] ? t[1].length : 0) - (t[2] ? +t[2] : 0)) : 0;\\n }\\n function round(e, t) {\\n if (1 > t) {\\n var n = getDecimalPlaces(t);\\n return parseFloat(e.toFixed(n));\\n }\\n return Math.round(e / t) * t;\\n }\\n var RangeTouch = function () {\\n function e(t, n) {\\n _classCallCheck(this, e), is$1.element(t) ? this.element = t : is$1.string(t) && (this.element = document.querySelector(t)), is$1.element(this.element) && is$1.empty(this.element.rangeTouch) && (this.config = _objectSpread2({}, defaults$1, {}, n), this.init());\\n }\\n return _createClass(e, [{\\n key: \\\"init\\\",\\n value: function () {\\n e.enabled && (this.config.addCSS && (this.element.style.userSelect = \\\"none\\\", this.element.style.webKitUserSelect = \\\"none\\\", this.element.style.touchAction = \\\"manipulation\\\"), this.listeners(!0), this.element.rangeTouch = this);\\n }\\n }, {\\n key: \\\"destroy\\\",\\n value: function () {\\n e.enabled && (this.config.addCSS && (this.element.style.userSelect = \\\"\\\", this.element.style.webKitUserSelect = \\\"\\\", this.element.style.touchAction = \\\"\\\"), this.listeners(!1), this.element.rangeTouch = null);\\n }\\n }, {\\n key: \\\"listeners\\\",\\n value: function (e) {\\n var t = this,\\n n = e ? \\\"addEventListener\\\" : \\\"removeEventListener\\\";\\n [\\\"touchstart\\\", \\\"touchmove\\\", \\\"touchend\\\"].forEach(function (e) {\\n t.element[n](e, function (e) {\\n return t.set(e);\\n }, !1);\\n });\\n }\\n }, {\\n key: \\\"get\\\",\\n value: function (t) {\\n if (!e.enabled || !is$1.event(t)) return null;\\n var n,\\n r = t.target,\\n i = t.changedTouches[0],\\n o = parseFloat(r.getAttribute(\\\"min\\\")) || 0,\\n s = parseFloat(r.getAttribute(\\\"max\\\")) || 100,\\n u = parseFloat(r.getAttribute(\\\"step\\\")) || 1,\\n c = r.getBoundingClientRect(),\\n a = 100 / c.width * (this.config.thumbWidth / 2) / 100;\\n return 0 > (n = 100 / c.width * (i.clientX - c.left)) ? n = 0 : 100 < n && (n = 100), 50 > n ? n -= (100 - 2 * n) * a : 50 < n && (n += 2 * (n - 50) * a), o + round(n / 100 * (s - o), u);\\n }\\n }, {\\n key: \\\"set\\\",\\n value: function (t) {\\n e.enabled && is$1.event(t) && !t.target.disabled && (t.preventDefault(), t.target.value = this.get(t), trigger(t.target, \\\"touchend\\\" === t.type ? \\\"change\\\" : \\\"input\\\"));\\n }\\n }], [{\\n key: \\\"setup\\\",\\n value: function (t) {\\n var n = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : {},\\n r = null;\\n if (is$1.empty(t) || is$1.string(t) ? r = Array.from(document.querySelectorAll(is$1.string(t) ? t : 'input[type=\\\"range\\\"]')) : is$1.element(t) ? r = [t] : is$1.nodeList(t) ? r = Array.from(t) : is$1.array(t) && (r = t.filter(is$1.element)), is$1.empty(r)) return null;\\n var i = _objectSpread2({}, defaults$1, {}, n);\\n if (is$1.string(t) && i.watch) {\\n var o = new MutationObserver(function (n) {\\n Array.from(n).forEach(function (n) {\\n Array.from(n.addedNodes).forEach(function (n) {\\n is$1.element(n) && matches$1(n, t) && new e(n, i);\\n });\\n });\\n });\\n o.observe(document.body, {\\n childList: !0,\\n subtree: !0\\n });\\n }\\n return r.map(function (t) {\\n return new e(t, n);\\n });\\n }\\n }, {\\n key: \\\"enabled\\\",\\n get: function () {\\n return \\\"ontouchstart\\\" in document.documentElement;\\n }\\n }]), e;\\n }();\\n\\n // ==========================================================================\\n // Type checking utils\\n // ==========================================================================\\n\\n const getConstructor = input => input !== null && typeof input !== 'undefined' ? input.constructor : null;\\n const instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor);\\n const isNullOrUndefined = input => input === null || typeof input === 'undefined';\\n const isObject = input => getConstructor(input) === Object;\\n const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);\\n const isString = input => getConstructor(input) === String;\\n const isBoolean = input => getConstructor(input) === Boolean;\\n const isFunction = input => typeof input === 'function';\\n const isArray = input => Array.isArray(input);\\n const isWeakMap = input => instanceOf(input, WeakMap);\\n const isNodeList = input => instanceOf(input, NodeList);\\n const isTextNode = input => getConstructor(input) === Text;\\n const isEvent = input => instanceOf(input, Event);\\n const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);\\n const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);\\n const isTrack = input => instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind);\\n const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);\\n const isElement = input => input !== null && typeof input === 'object' && input.nodeType === 1 && typeof input.style === 'object' && typeof input.ownerDocument === 'object';\\n const isEmpty = input => isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length;\\n const isUrl = input => {\\n // Accept a URL object\\n if (instanceOf(input, window.URL)) {\\n return true;\\n }\\n\\n // Must be string from here\\n if (!isString(input)) {\\n return false;\\n }\\n\\n // Add the protocol if required\\n let string = input;\\n if (!input.startsWith('http://') || !input.startsWith('https://')) {\\n string = `http://${input}`;\\n }\\n try {\\n return !isEmpty(new URL(string).hostname);\\n } catch (_) {\\n return false;\\n }\\n };\\n var is = {\\n nullOrUndefined: isNullOrUndefined,\\n object: isObject,\\n number: isNumber,\\n string: isString,\\n boolean: isBoolean,\\n function: isFunction,\\n array: isArray,\\n weakMap: isWeakMap,\\n nodeList: isNodeList,\\n element: isElement,\\n textNode: isTextNode,\\n event: isEvent,\\n keyboardEvent: isKeyboardEvent,\\n cue: isCue,\\n track: isTrack,\\n promise: isPromise,\\n url: isUrl,\\n empty: isEmpty\\n };\\n\\n // ==========================================================================\\n const transitionEndEvent = (() => {\\n const element = document.createElement('span');\\n const events = {\\n WebkitTransition: 'webkitTransitionEnd',\\n MozTransition: 'transitionend',\\n OTransition: 'oTransitionEnd otransitionend',\\n transition: 'transitionend'\\n };\\n const type = Object.keys(events).find(event => element.style[event] !== undefined);\\n return is.string(type) ? events[type] : false;\\n })();\\n\\n // Force repaint of element\\n function repaint(element, delay) {\\n setTimeout(() => {\\n try {\\n // eslint-disable-next-line no-param-reassign\\n element.hidden = true;\\n\\n // eslint-disable-next-line no-unused-expressions\\n element.offsetHeight;\\n\\n // eslint-disable-next-line no-param-reassign\\n element.hidden = false;\\n } catch (_) {\\n // Do nothing\\n }\\n }, delay);\\n }\\n\\n // ==========================================================================\\n // Browser sniffing\\n // Unfortunately, due to mixed support, UA sniffing is required\\n // ==========================================================================\\n\\n const isIE = Boolean(window.document.documentMode);\\n const isEdge = /Edge/g.test(navigator.userAgent);\\n const isWebKit = 'WebkitAppearance' in document.documentElement.style && !/Edge/g.test(navigator.userAgent);\\n const isIPhone = /iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1;\\n // navigator.platform may be deprecated but this check is still required\\n const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;\\n const isIos = /iPad|iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1;\\n var browser = {\\n isIE,\\n isEdge,\\n isWebKit,\\n isIPhone,\\n isIPadOS,\\n isIos\\n };\\n\\n // ==========================================================================\\n\\n // Clone nested objects\\n function cloneDeep(object) {\\n return JSON.parse(JSON.stringify(object));\\n }\\n\\n // Get a nested value in an object\\n function getDeep(object, path) {\\n return path.split('.').reduce((obj, key) => obj && obj[key], object);\\n }\\n\\n // Deep extend destination object with N more objects\\n function extend(target = {}, ...sources) {\\n if (!sources.length) {\\n return target;\\n }\\n const source = sources.shift();\\n if (!is.object(source)) {\\n return target;\\n }\\n Object.keys(source).forEach(key => {\\n if (is.object(source[key])) {\\n if (!Object.keys(target).includes(key)) {\\n Object.assign(target, {\\n [key]: {}\\n });\\n }\\n extend(target[key], source[key]);\\n } else {\\n Object.assign(target, {\\n [key]: source[key]\\n });\\n }\\n });\\n return extend(target, ...sources);\\n }\\n\\n // ==========================================================================\\n\\n // Wrap an element\\n function wrap(elements, wrapper) {\\n // Convert `elements` to an array, if necessary.\\n const targets = elements.length ? elements : [elements];\\n\\n // Loops backwards to prevent having to clone the wrapper on the\\n // first element (see `child` below).\\n Array.from(targets).reverse().forEach((element, index) => {\\n const child = index > 0 ? wrapper.cloneNode(true) : wrapper;\\n // Cache the current parent and sibling.\\n const parent = element.parentNode;\\n const sibling = element.nextSibling;\\n\\n // Wrap the element (is automatically removed from its current\\n // parent).\\n child.appendChild(element);\\n\\n // If the element had a sibling, insert the wrapper before\\n // the sibling to maintain the HTML structure; otherwise, just\\n // append it to the parent.\\n if (sibling) {\\n parent.insertBefore(child, sibling);\\n } else {\\n parent.appendChild(child);\\n }\\n });\\n }\\n\\n // Set attributes\\n function setAttributes(element, attributes) {\\n if (!is.element(element) || is.empty(attributes)) return;\\n\\n // Assume null and undefined attributes should be left out,\\n // Setting them would otherwise convert them to \\\"null\\\" and \\\"undefined\\\"\\n Object.entries(attributes).filter(([, value]) => !is.nullOrUndefined(value)).forEach(([key, value]) => element.setAttribute(key, value));\\n }\\n\\n // Create a DocumentFragment\\n function createElement(type, attributes, text) {\\n // Create a new \\n const element = document.createElement(type);\\n\\n // Set all passed attributes\\n if (is.object(attributes)) {\\n setAttributes(element, attributes);\\n }\\n\\n // Add text node\\n if (is.string(text)) {\\n element.innerText = text;\\n }\\n\\n // Return built element\\n return element;\\n }\\n\\n // Insert an element after another\\n function insertAfter(element, target) {\\n if (!is.element(element) || !is.element(target)) return;\\n target.parentNode.insertBefore(element, target.nextSibling);\\n }\\n\\n // Insert a DocumentFragment\\n function insertElement(type, parent, attributes, text) {\\n if (!is.element(parent)) return;\\n parent.appendChild(createElement(type, attributes, text));\\n }\\n\\n // Remove element(s)\\n function removeElement(element) {\\n if (is.nodeList(element) || is.array(element)) {\\n Array.from(element).forEach(removeElement);\\n return;\\n }\\n if (!is.element(element) || !is.element(element.parentNode)) {\\n return;\\n }\\n element.parentNode.removeChild(element);\\n }\\n\\n // Remove all child elements\\n function emptyElement(element) {\\n if (!is.element(element)) return;\\n let {\\n length\\n } = element.childNodes;\\n while (length > 0) {\\n element.removeChild(element.lastChild);\\n length -= 1;\\n }\\n }\\n\\n // Replace element\\n function replaceElement(newChild, oldChild) {\\n if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) return null;\\n oldChild.parentNode.replaceChild(newChild, oldChild);\\n return newChild;\\n }\\n\\n // Get an attribute object from a string selector\\n function getAttributesFromSelector(sel, existingAttributes) {\\n // For example:\\n // '.test' to { class: 'test' }\\n // '#test' to { id: 'test' }\\n // '[data-test=\\\"test\\\"]' to { 'data-test': 'test' }\\n\\n if (!is.string(sel) || is.empty(sel)) return {};\\n const attributes = {};\\n const existing = extend({}, existingAttributes);\\n sel.split(',').forEach(s => {\\n // Remove whitespace\\n const selector = s.trim();\\n const className = selector.replace('.', '');\\n const stripped = selector.replace(/[[\\\\]]/g, '');\\n // Get the parts and value\\n const parts = stripped.split('=');\\n const [key] = parts;\\n const value = parts.length > 1 ? parts[1].replace(/[\\\"']/g, '') : '';\\n // Get the first character\\n const start = selector.charAt(0);\\n switch (start) {\\n case '.':\\n // Add to existing classname\\n if (is.string(existing.class)) {\\n attributes.class = `${existing.class} ${className}`;\\n } else {\\n attributes.class = className;\\n }\\n break;\\n case '#':\\n // ID selector\\n attributes.id = selector.replace('#', '');\\n break;\\n case '[':\\n // Attribute selector\\n attributes[key] = value;\\n break;\\n }\\n });\\n return extend(existing, attributes);\\n }\\n\\n // Toggle hidden\\n function toggleHidden(element, hidden) {\\n if (!is.element(element)) return;\\n let hide = hidden;\\n if (!is.boolean(hide)) {\\n hide = !element.hidden;\\n }\\n\\n // eslint-disable-next-line no-param-reassign\\n element.hidden = hide;\\n }\\n\\n // Mirror Element.classList.toggle, with IE compatibility for \\\"force\\\" argument\\n function toggleClass(element, className, force) {\\n if (is.nodeList(element)) {\\n return Array.from(element).map(e => toggleClass(e, className, force));\\n }\\n if (is.element(element)) {\\n let method = 'toggle';\\n if (typeof force !== 'undefined') {\\n method = force ? 'add' : 'remove';\\n }\\n element.classList[method](className);\\n return element.classList.contains(className);\\n }\\n return false;\\n }\\n\\n // Has class name\\n function hasClass(element, className) {\\n return is.element(element) && element.classList.contains(className);\\n }\\n\\n // Element matches selector\\n function matches(element, selector) {\\n const {\\n prototype\\n } = Element;\\n function match() {\\n return Array.from(document.querySelectorAll(selector)).includes(this);\\n }\\n const method = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;\\n return method.call(element, selector);\\n }\\n\\n // Closest ancestor element matching selector (also tests element itself)\\n function closest$1(element, selector) {\\n const {\\n prototype\\n } = Element;\\n\\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill\\n function closestElement() {\\n let el = this;\\n do {\\n if (matches.matches(el, selector)) return el;\\n el = el.parentElement || el.parentNode;\\n } while (el !== null && el.nodeType === 1);\\n return null;\\n }\\n const method = prototype.closest || closestElement;\\n return method.call(element, selector);\\n }\\n\\n // Find all elements\\n function getElements(selector) {\\n return this.elements.container.querySelectorAll(selector);\\n }\\n\\n // Find a single element\\n function getElement(selector) {\\n return this.elements.container.querySelector(selector);\\n }\\n\\n // Set focus and tab focus class\\n function setFocus(element = null, focusVisible = false) {\\n if (!is.element(element)) return;\\n\\n // Set regular focus\\n element.focus({\\n preventScroll: true,\\n focusVisible\\n });\\n }\\n\\n // ==========================================================================\\n\\n // Default codecs for checking mimetype support\\n const defaultCodecs = {\\n 'audio/ogg': 'vorbis',\\n 'audio/wav': '1',\\n 'video/webm': 'vp8, vorbis',\\n 'video/mp4': 'avc1.42E01E, mp4a.40.2',\\n 'video/ogg': 'theora'\\n };\\n\\n // Check for feature support\\n const support = {\\n // Basic support\\n audio: 'canPlayType' in document.createElement('audio'),\\n video: 'canPlayType' in document.createElement('video'),\\n // Check for support\\n // Basic functionality vs full UI\\n check(type, provider) {\\n const api = support[type] || provider !== 'html5';\\n const ui = api && support.rangeInput;\\n return {\\n api,\\n ui\\n };\\n },\\n // Picture-in-picture support\\n // Safari & Chrome only currently\\n pip: (() => {\\n // While iPhone's support picture-in-picture for some apps, seemingly Safari isn't one of them\\n // It will throw the following error when trying to enter picture-in-picture\\n // `NotSupportedError: The Picture-in-Picture mode is not supported.`\\n if (browser.isIPhone) {\\n return false;\\n }\\n\\n // Safari\\n // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls\\n if (is.function(createElement('video').webkitSetPresentationMode)) {\\n return true;\\n }\\n\\n // Chrome\\n // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture\\n if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {\\n return true;\\n }\\n return false;\\n })(),\\n // Airplay support\\n // Safari only currently\\n airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),\\n // Inline playback support\\n // https://webkit.org/blog/6784/new-video-policies-for-ios/\\n playsinline: 'playsInline' in document.createElement('video'),\\n // Check for mime type support against a player instance\\n // Credits: http://diveintohtml5.info/everything.html\\n // Related: http://www.leanbackplayer.com/test/h5mt.html\\n mime(input) {\\n if (is.empty(input)) {\\n return false;\\n }\\n const [mediaType] = input.split('/');\\n let type = input;\\n\\n // Verify we're using HTML5 and there's no media type mismatch\\n if (!this.isHTML5 || mediaType !== this.type) {\\n return false;\\n }\\n\\n // Add codec if required\\n if (Object.keys(defaultCodecs).includes(type)) {\\n type += `; codecs=\\\"${defaultCodecs[input]}\\\"`;\\n }\\n try {\\n return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));\\n } catch (_) {\\n return false;\\n }\\n },\\n // Check for textTracks support\\n textTracks: 'textTracks' in document.createElement('video'),\\n // Sliders\\n rangeInput: (() => {\\n const range = document.createElement('input');\\n range.type = 'range';\\n return range.type === 'range';\\n })(),\\n // Touch\\n // NOTE: Remember a device can be mouse + touch enabled so we check on first touch event\\n touch: 'ontouchstart' in document.documentElement,\\n // Detect transitions support\\n transitions: transitionEndEvent !== false,\\n // Reduced motion iOS & MacOS setting\\n // https://webkit.org/blog/7551/responsive-design-for-motion/\\n reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches\\n };\\n\\n // ==========================================================================\\n\\n // Check for passive event listener support\\n // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\\n // https://www.youtube.com/watch?v=NPM6172J22g\\n const supportsPassiveListeners = (() => {\\n // Test via a getter in the options object to see if the passive property is accessed\\n let supported = false;\\n try {\\n const options = Object.defineProperty({}, 'passive', {\\n get() {\\n supported = true;\\n return null;\\n }\\n });\\n window.addEventListener('test', null, options);\\n window.removeEventListener('test', null, options);\\n } catch (_) {\\n // Do nothing\\n }\\n return supported;\\n })();\\n\\n // Toggle event listener\\n function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) {\\n // Bail if no element, event, or callback\\n if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) {\\n return;\\n }\\n\\n // Allow multiple events\\n const events = event.split(' ');\\n // Build options\\n // Default to just the capture boolean for browsers with no passive listener support\\n let options = capture;\\n\\n // If passive events listeners are supported\\n if (supportsPassiveListeners) {\\n options = {\\n // Whether the listener can be passive (i.e. default never prevented)\\n passive,\\n // Whether the listener is a capturing listener or not\\n capture\\n };\\n }\\n\\n // If a single node is passed, bind the event listener\\n events.forEach(type => {\\n if (this && this.eventListeners && toggle) {\\n // Cache event listener\\n this.eventListeners.push({\\n element,\\n type,\\n callback,\\n options\\n });\\n }\\n element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);\\n });\\n }\\n\\n // Bind event handler\\n function on(element, events = '', callback, passive = true, capture = false) {\\n toggleListener.call(this, element, events, callback, true, passive, capture);\\n }\\n\\n // Unbind event handler\\n function off(element, events = '', callback, passive = true, capture = false) {\\n toggleListener.call(this, element, events, callback, false, passive, capture);\\n }\\n\\n // Bind once-only event handler\\n function once(element, events = '', callback, passive = true, capture = false) {\\n const onceCallback = (...args) => {\\n off(element, events, onceCallback, passive, capture);\\n callback.apply(this, args);\\n };\\n toggleListener.call(this, element, events, onceCallback, true, passive, capture);\\n }\\n\\n // Trigger event\\n function triggerEvent(element, type = '', bubbles = false, detail = {}) {\\n // Bail if no element\\n if (!is.element(element) || is.empty(type)) {\\n return;\\n }\\n\\n // Create and dispatch the event\\n const event = new CustomEvent(type, {\\n bubbles,\\n detail: {\\n ...detail,\\n plyr: this\\n }\\n });\\n\\n // Dispatch the event\\n element.dispatchEvent(event);\\n }\\n\\n // Unbind all cached event listeners\\n function unbindListeners() {\\n if (this && this.eventListeners) {\\n this.eventListeners.forEach(item => {\\n const {\\n element,\\n type,\\n callback,\\n options\\n } = item;\\n element.removeEventListener(type, callback, options);\\n });\\n this.eventListeners = [];\\n }\\n }\\n\\n // Run method when / if player is ready\\n function ready() {\\n return new Promise(resolve => this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)).then(() => {});\\n }\\n\\n /**\\n * Silence a Promise-like object.\\n * This is useful for avoiding non-harmful, but potentially confusing \\\"uncaught\\n * play promise\\\" rejection error messages.\\n * @param {Object} value An object that may or may not be `Promise`-like.\\n */\\n function silencePromise(value) {\\n if (is.promise(value)) {\\n value.then(null, () => {});\\n }\\n }\\n\\n // ==========================================================================\\n\\n // Remove duplicates in an array\\n function dedupe(array) {\\n if (!is.array(array)) {\\n return array;\\n }\\n return array.filter((item, index) => array.indexOf(item) === index);\\n }\\n\\n // Get the closest value in an array\\n function closest(array, value) {\\n if (!is.array(array) || !array.length) {\\n return null;\\n }\\n return array.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);\\n }\\n\\n // ==========================================================================\\n\\n // Check support for a CSS declaration\\n function supportsCSS(declaration) {\\n if (!window || !window.CSS) {\\n return false;\\n }\\n return window.CSS.supports(declaration);\\n }\\n\\n // Standard/common aspect ratios\\n const standardRatios = [[1, 1], [4, 3], [3, 4], [5, 4], [4, 5], [3, 2], [2, 3], [16, 10], [10, 16], [16, 9], [9, 16], [21, 9], [9, 21], [32, 9], [9, 32]].reduce((out, [x, y]) => ({\\n ...out,\\n [x / y]: [x, y]\\n }), {});\\n\\n // Validate an aspect ratio\\n function validateAspectRatio(input) {\\n if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {\\n return false;\\n }\\n const ratio = is.array(input) ? input : input.split(':');\\n return ratio.map(Number).every(is.number);\\n }\\n\\n // Reduce an aspect ratio to it's lowest form\\n function reduceAspectRatio(ratio) {\\n if (!is.array(ratio) || !ratio.every(is.number)) {\\n return null;\\n }\\n const [width, height] = ratio;\\n const getDivider = (w, h) => h === 0 ? w : getDivider(h, w % h);\\n const divider = getDivider(width, height);\\n return [width / divider, height / divider];\\n }\\n\\n // Calculate an aspect ratio\\n function getAspectRatio(input) {\\n const parse = ratio => validateAspectRatio(ratio) ? ratio.split(':').map(Number) : null;\\n // Try provided ratio\\n let ratio = parse(input);\\n\\n // Get from config\\n if (ratio === null) {\\n ratio = parse(this.config.ratio);\\n }\\n\\n // Get from embed\\n if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {\\n ({\\n ratio\\n } = this.embed);\\n }\\n\\n // Get from HTML5 video\\n if (ratio === null && this.isHTML5) {\\n const {\\n videoWidth,\\n videoHeight\\n } = this.media;\\n ratio = [videoWidth, videoHeight];\\n }\\n return reduceAspectRatio(ratio);\\n }\\n\\n // Set aspect ratio for responsive container\\n function setAspectRatio(input) {\\n if (!this.isVideo) {\\n return {};\\n }\\n const {\\n wrapper\\n } = this.elements;\\n const ratio = getAspectRatio.call(this, input);\\n if (!is.array(ratio)) {\\n return {};\\n }\\n const [x, y] = reduceAspectRatio(ratio);\\n const useNative = supportsCSS(`aspect-ratio: ${x}/${y}`);\\n const padding = 100 / x * y;\\n if (useNative) {\\n wrapper.style.aspectRatio = `${x}/${y}`;\\n } else {\\n wrapper.style.paddingBottom = `${padding}%`;\\n }\\n\\n // For Vimeo we have an extra
to hide the standard controls and UI\\n if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {\\n const height = 100 / this.media.offsetWidth * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);\\n const offset = (height - padding) / (height / 50);\\n if (this.fullscreen.active) {\\n wrapper.style.paddingBottom = null;\\n } else {\\n this.media.style.transform = `translateY(-${offset}%)`;\\n }\\n } else if (this.isHTML5) {\\n wrapper.classList.add(this.config.classNames.videoFixedRatio);\\n }\\n return {\\n padding,\\n ratio\\n };\\n }\\n\\n // Round an aspect ratio to closest standard ratio\\n function roundAspectRatio(x, y, tolerance = 0.05) {\\n const ratio = x / y;\\n const closestRatio = closest(Object.keys(standardRatios), ratio);\\n\\n // Check match is within tolerance\\n if (Math.abs(closestRatio - ratio) <= tolerance) {\\n return standardRatios[closestRatio];\\n }\\n\\n // No match\\n return [x, y];\\n }\\n\\n // Get the size of the viewport\\n // https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions\\n function getViewportSize() {\\n const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);\\n const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);\\n return [width, height];\\n }\\n\\n // ==========================================================================\\n const html5 = {\\n getSources() {\\n if (!this.isHTML5) {\\n return [];\\n }\\n const sources = Array.from(this.media.querySelectorAll('source'));\\n\\n // Filter out unsupported sources (if type is specified)\\n return sources.filter(source => {\\n const type = source.getAttribute('type');\\n if (is.empty(type)) {\\n return true;\\n }\\n return support.mime.call(this, type);\\n });\\n },\\n // Get quality levels\\n getQualityOptions() {\\n // Whether we're forcing all options (e.g. for streaming)\\n if (this.config.quality.forced) {\\n return this.config.quality.options;\\n }\\n\\n // Get sizes from elements\\n return html5.getSources.call(this).map(source => Number(source.getAttribute('size'))).filter(Boolean);\\n },\\n setup() {\\n if (!this.isHTML5) {\\n return;\\n }\\n const player = this;\\n\\n // Set speed options from config\\n player.options.speed = player.config.speed.options;\\n\\n // Set aspect ratio if fixed\\n if (!is.empty(this.config.ratio)) {\\n setAspectRatio.call(player);\\n }\\n\\n // Quality\\n Object.defineProperty(player.media, 'quality', {\\n get() {\\n // Get sources\\n const sources = html5.getSources.call(player);\\n const source = sources.find(s => s.getAttribute('src') === player.source);\\n\\n // Return size, if match is found\\n return source && Number(source.getAttribute('size'));\\n },\\n set(input) {\\n if (player.quality === input) {\\n return;\\n }\\n\\n // If we're using an external handler...\\n if (player.config.quality.forced && is.function(player.config.quality.onChange)) {\\n player.config.quality.onChange(input);\\n } else {\\n // Get sources\\n const sources = html5.getSources.call(player);\\n // Get first match for requested size\\n const source = sources.find(s => Number(s.getAttribute('size')) === input);\\n\\n // No matching source found\\n if (!source) {\\n return;\\n }\\n\\n // Get current state\\n const {\\n currentTime,\\n paused,\\n preload,\\n readyState,\\n playbackRate\\n } = player.media;\\n\\n // Set new source\\n player.media.src = source.getAttribute('src');\\n\\n // Prevent loading if preload=\\\"none\\\" and the current source isn't loaded (#1044)\\n if (preload !== 'none' || readyState) {\\n // Restore time\\n player.once('loadedmetadata', () => {\\n player.speed = playbackRate;\\n player.currentTime = currentTime;\\n\\n // Resume playing\\n if (!paused) {\\n silencePromise(player.play());\\n }\\n });\\n\\n // Load new source\\n player.media.load();\\n }\\n }\\n\\n // Trigger change event\\n triggerEvent.call(player, player.media, 'qualitychange', false, {\\n quality: input\\n });\\n }\\n });\\n },\\n // Cancel current network requests\\n // See https://github.com/sampotts/plyr/issues/174\\n cancelRequests() {\\n if (!this.isHTML5) {\\n return;\\n }\\n\\n // Remove child sources\\n removeElement(html5.getSources.call(this));\\n\\n // Set blank video src attribute\\n // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error\\n // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection\\n this.media.setAttribute('src', this.config.blankVideo);\\n\\n // Load the new empty source\\n // This will cancel existing requests\\n // See https://github.com/sampotts/plyr/issues/174\\n this.media.load();\\n\\n // Debugging\\n this.debug.log('Cancelled network requests');\\n }\\n };\\n\\n // ==========================================================================\\n\\n // Generate a random ID\\n function generateId(prefix) {\\n return `${prefix}-${Math.floor(Math.random() * 10000)}`;\\n }\\n\\n // Format string\\n function format(input, ...args) {\\n if (is.empty(input)) return input;\\n return input.toString().replace(/{(\\\\d+)}/g, (_, i) => args[i].toString());\\n }\\n\\n // Get percentage\\n function getPercentage(current, max) {\\n if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {\\n return 0;\\n }\\n return (current / max * 100).toFixed(2);\\n }\\n\\n // Replace all occurrences of a string in a string\\n const replaceAll = (input = '', find = '', replace = '') => input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\\\\]/\\\\\\\\])/g, '\\\\\\\\$1'), 'g'), replace.toString());\\n\\n // Convert to title case\\n const toTitleCase = (input = '') => input.toString().replace(/\\\\w\\\\S*/g, text => text.charAt(0).toUpperCase() + text.slice(1).toLowerCase());\\n\\n // Convert string to pascalCase\\n function toPascalCase(input = '') {\\n let string = input.toString();\\n\\n // Convert kebab case\\n string = replaceAll(string, '-', ' ');\\n\\n // Convert snake case\\n string = replaceAll(string, '_', ' ');\\n\\n // Convert to title case\\n string = toTitleCase(string);\\n\\n // Convert to pascal case\\n return replaceAll(string, ' ', '');\\n }\\n\\n // Convert string to pascalCase\\n function toCamelCase(input = '') {\\n let string = input.toString();\\n\\n // Convert to pascal case\\n string = toPascalCase(string);\\n\\n // Convert first character to lowercase\\n return string.charAt(0).toLowerCase() + string.slice(1);\\n }\\n\\n // Remove HTML from a string\\n function stripHTML(source) {\\n const fragment = document.createDocumentFragment();\\n const element = document.createElement('div');\\n fragment.appendChild(element);\\n element.innerHTML = source;\\n return fragment.firstChild.innerText;\\n }\\n\\n // Like outerHTML, but also works for DocumentFragment\\n function getHTML(element) {\\n const wrapper = document.createElement('div');\\n wrapper.appendChild(element);\\n return wrapper.innerHTML;\\n }\\n\\n // ==========================================================================\\n\\n // Skip i18n for abbreviations and brand names\\n const resources = {\\n pip: 'PIP',\\n airplay: 'AirPlay',\\n html5: 'HTML5',\\n vimeo: 'Vimeo',\\n youtube: 'YouTube'\\n };\\n const i18n = {\\n get(key = '', config = {}) {\\n if (is.empty(key) || is.empty(config)) {\\n return '';\\n }\\n let string = getDeep(config.i18n, key);\\n if (is.empty(string)) {\\n if (Object.keys(resources).includes(key)) {\\n return resources[key];\\n }\\n return '';\\n }\\n const replace = {\\n '{seektime}': config.seekTime,\\n '{title}': config.title\\n };\\n Object.entries(replace).forEach(([k, v]) => {\\n string = replaceAll(string, k, v);\\n });\\n return string;\\n }\\n };\\n\\n class Storage {\\n constructor(player) {\\n _defineProperty$1(this, \\\"get\\\", key => {\\n if (!Storage.supported || !this.enabled) {\\n return null;\\n }\\n const store = window.localStorage.getItem(this.key);\\n if (is.empty(store)) {\\n return null;\\n }\\n const json = JSON.parse(store);\\n return is.string(key) && key.length ? json[key] : json;\\n });\\n _defineProperty$1(this, \\\"set\\\", object => {\\n // Bail if we don't have localStorage support or it's disabled\\n if (!Storage.supported || !this.enabled) {\\n return;\\n }\\n\\n // Can only store objectst\\n if (!is.object(object)) {\\n return;\\n }\\n\\n // Get current storage\\n let storage = this.get();\\n\\n // Default to empty object\\n if (is.empty(storage)) {\\n storage = {};\\n }\\n\\n // Update the working copy of the values\\n extend(storage, object);\\n\\n // Update storage\\n try {\\n window.localStorage.setItem(this.key, JSON.stringify(storage));\\n } catch (_) {\\n // Do nothing\\n }\\n });\\n this.enabled = player.config.storage.enabled;\\n this.key = player.config.storage.key;\\n }\\n\\n // Check for actual support (see if we can use it)\\n static get supported() {\\n try {\\n if (!('localStorage' in window)) {\\n return false;\\n }\\n const test = '___test';\\n\\n // Try to use it (it might be disabled, e.g. user is in private mode)\\n // see: https://github.com/sampotts/plyr/issues/131\\n window.localStorage.setItem(test, test);\\n window.localStorage.removeItem(test);\\n return true;\\n } catch (_) {\\n return false;\\n }\\n }\\n }\\n\\n // ==========================================================================\\n // Fetch wrapper\\n // Using XHR to avoid issues with older browsers\\n // ==========================================================================\\n\\n function fetch(url, responseType = 'text') {\\n return new Promise((resolve, reject) => {\\n try {\\n const request = new XMLHttpRequest();\\n\\n // Check for CORS support\\n if (!('withCredentials' in request)) {\\n return;\\n }\\n request.addEventListener('load', () => {\\n if (responseType === 'text') {\\n try {\\n resolve(JSON.parse(request.responseText));\\n } catch (_) {\\n resolve(request.responseText);\\n }\\n } else {\\n resolve(request.response);\\n }\\n });\\n request.addEventListener('error', () => {\\n throw new Error(request.status);\\n });\\n request.open('GET', url, true);\\n\\n // Set the required response type\\n request.responseType = responseType;\\n request.send();\\n } catch (error) {\\n reject(error);\\n }\\n });\\n }\\n\\n // ==========================================================================\\n\\n // Load an external SVG sprite\\n function loadSprite(url, id) {\\n if (!is.string(url)) {\\n return;\\n }\\n const prefix = 'cache';\\n const hasId = is.string(id);\\n let isCached = false;\\n const exists = () => document.getElementById(id) !== null;\\n const update = (container, data) => {\\n // eslint-disable-next-line no-param-reassign\\n container.innerHTML = data;\\n\\n // Check again incase of race condition\\n if (hasId && exists()) {\\n return;\\n }\\n\\n // Inject the SVG to the body\\n document.body.insertAdjacentElement('afterbegin', container);\\n };\\n\\n // Only load once if ID set\\n if (!hasId || !exists()) {\\n const useStorage = Storage.supported;\\n // Create container\\n const container = document.createElement('div');\\n container.setAttribute('hidden', '');\\n if (hasId) {\\n container.setAttribute('id', id);\\n }\\n\\n // Check in cache\\n if (useStorage) {\\n const cached = window.localStorage.getItem(`${prefix}-${id}`);\\n isCached = cached !== null;\\n if (isCached) {\\n const data = JSON.parse(cached);\\n update(container, data.content);\\n }\\n }\\n\\n // Get the sprite\\n fetch(url).then(result => {\\n if (is.empty(result)) {\\n return;\\n }\\n if (useStorage) {\\n try {\\n window.localStorage.setItem(`${prefix}-${id}`, JSON.stringify({\\n content: result\\n }));\\n } catch (_) {\\n // Do nothing\\n }\\n }\\n update(container, result);\\n }).catch(() => {});\\n }\\n }\\n\\n // ==========================================================================\\n\\n // Time helpers\\n const getHours = value => Math.trunc(value / 60 / 60 % 60, 10);\\n const getMinutes = value => Math.trunc(value / 60 % 60, 10);\\n const getSeconds = value => Math.trunc(value % 60, 10);\\n\\n // Format time to UI friendly string\\n function formatTime(time = 0, displayHours = false, inverted = false) {\\n // Bail if the value isn't a number\\n if (!is.number(time)) {\\n return formatTime(undefined, displayHours, inverted);\\n }\\n\\n // Format time component to add leading zero\\n const format = value => `0${value}`.slice(-2);\\n // Breakdown to hours, mins, secs\\n let hours = getHours(time);\\n const mins = getMinutes(time);\\n const secs = getSeconds(time);\\n\\n // Do we need to display hours?\\n if (displayHours || hours > 0) {\\n hours = `${hours}:`;\\n } else {\\n hours = '';\\n }\\n\\n // Render\\n return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;\\n }\\n\\n // ==========================================================================\\n\\n // TODO: Don't export a massive object - break down and create class\\n const controls = {\\n // Get icon URL\\n getIconUrl() {\\n const url = new URL(this.config.iconUrl, window.location);\\n const host = window.location.host ? window.location.host : window.top.location.host;\\n const cors = url.host !== host || browser.isIE && !window.svg4everybody;\\n return {\\n url: this.config.iconUrl,\\n cors\\n };\\n },\\n // Find the UI controls\\n findElements() {\\n try {\\n this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper);\\n\\n // Buttons\\n this.elements.buttons = {\\n play: getElements.call(this, this.config.selectors.buttons.play),\\n pause: getElement.call(this, this.config.selectors.buttons.pause),\\n restart: getElement.call(this, this.config.selectors.buttons.restart),\\n rewind: getElement.call(this, this.config.selectors.buttons.rewind),\\n fastForward: getElement.call(this, this.config.selectors.buttons.fastForward),\\n mute: getElement.call(this, this.config.selectors.buttons.mute),\\n pip: getElement.call(this, this.config.selectors.buttons.pip),\\n airplay: getElement.call(this, this.config.selectors.buttons.airplay),\\n settings: getElement.call(this, this.config.selectors.buttons.settings),\\n captions: getElement.call(this, this.config.selectors.buttons.captions),\\n fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen)\\n };\\n\\n // Progress\\n this.elements.progress = getElement.call(this, this.config.selectors.progress);\\n\\n // Inputs\\n this.elements.inputs = {\\n seek: getElement.call(this, this.config.selectors.inputs.seek),\\n volume: getElement.call(this, this.config.selectors.inputs.volume)\\n };\\n\\n // Display\\n this.elements.display = {\\n buffer: getElement.call(this, this.config.selectors.display.buffer),\\n currentTime: getElement.call(this, this.config.selectors.display.currentTime),\\n duration: getElement.call(this, this.config.selectors.display.duration)\\n };\\n\\n // Seek tooltip\\n if (is.element(this.elements.progress)) {\\n this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);\\n }\\n return true;\\n } catch (error) {\\n // Log it\\n this.debug.warn('It looks like there is a problem with your custom controls HTML', error);\\n\\n // Restore native video controls\\n this.toggleNativeControls(true);\\n return false;\\n }\\n },\\n // Create icon\\n createIcon(type, attributes) {\\n const namespace = 'http://www.w3.org/2000/svg';\\n const iconUrl = controls.getIconUrl.call(this);\\n const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;\\n // Create \\n const icon = document.createElementNS(namespace, 'svg');\\n setAttributes(icon, extend(attributes, {\\n 'aria-hidden': 'true',\\n focusable: 'false'\\n }));\\n\\n // Create the to reference sprite\\n const use = document.createElementNS(namespace, 'use');\\n const path = `${iconPath}-${type}`;\\n\\n // Set `href` attributes\\n // https://github.com/sampotts/plyr/issues/460\\n // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href\\n if ('href' in use) {\\n use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);\\n }\\n\\n // Always set the older attribute even though it's \\\"deprecated\\\" (it'll be around for ages)\\n use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);\\n\\n // Add to \\n icon.appendChild(use);\\n return icon;\\n },\\n // Create hidden text label\\n createLabel(key, attr = {}) {\\n const text = i18n.get(key, this.config);\\n const attributes = {\\n ...attr,\\n class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ')\\n };\\n return createElement('span', attributes, text);\\n },\\n // Create a badge\\n createBadge(text) {\\n if (is.empty(text)) {\\n return null;\\n }\\n const badge = createElement('span', {\\n class: this.config.classNames.menu.value\\n });\\n badge.appendChild(createElement('span', {\\n class: this.config.classNames.menu.badge\\n }, text));\\n return badge;\\n },\\n // Create a
`);\\n }\\n\\n // Set position\\n tipElement.style.left = `${percent}%`;\\n\\n // Show/hide the tooltip\\n // If the event is a moues in/out and percentage is inside bounds\\n if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {\\n toggle(event.type === 'mouseenter');\\n }\\n },\\n // Handle time change event\\n timeUpdate(event) {\\n // Only invert if only one time element is displayed and used for both duration and currentTime\\n const invert = !is.element(this.elements.display.duration) && this.config.invertTime;\\n\\n // Duration\\n controls.updateTimeDisplay.call(this, this.elements.display.currentTime, invert ? this.duration - this.currentTime : this.currentTime, invert);\\n\\n // Ignore updates while seeking\\n if (event && event.type === 'timeupdate' && this.media.seeking) {\\n return;\\n }\\n\\n // Playing progress\\n controls.updateProgress.call(this, event);\\n },\\n // Show the duration on metadataloaded or durationchange events\\n durationUpdate() {\\n // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false\\n if (!this.supported.ui || !this.config.invertTime && this.currentTime) {\\n return;\\n }\\n\\n // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar.\\n // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415\\n // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062\\n // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338\\n if (this.duration >= 2 ** 32) {\\n toggleHidden(this.elements.display.currentTime, true);\\n toggleHidden(this.elements.progress, true);\\n return;\\n }\\n\\n // Update ARIA values\\n if (is.element(this.elements.inputs.seek)) {\\n this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);\\n }\\n\\n // If there's a spot to display duration\\n const hasDuration = is.element(this.elements.display.duration);\\n\\n // If there's only one time display, display duration there\\n if (!hasDuration && this.config.displayDuration && this.paused) {\\n controls.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration);\\n }\\n\\n // If there's a duration element, update content\\n if (hasDuration) {\\n controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);\\n }\\n if (this.config.markers.enabled) {\\n controls.setMarkers.call(this);\\n }\\n\\n // Update the tooltip (if visible)\\n controls.updateSeekTooltip.call(this);\\n },\\n // Hide/show a tab\\n toggleMenuButton(setting, toggle) {\\n toggleHidden(this.elements.settings.buttons[setting], !toggle);\\n },\\n // Update the selected setting\\n updateSetting(setting, container, input) {\\n const pane = this.elements.settings.panels[setting];\\n let value = null;\\n let list = container;\\n if (setting === 'captions') {\\n value = this.currentTrack;\\n } else {\\n value = !is.empty(input) ? input : this[setting];\\n\\n // Get default\\n if (is.empty(value)) {\\n value = this.config[setting].default;\\n }\\n\\n // Unsupported value\\n if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) {\\n this.debug.warn(`Unsupported value of '${value}' for ${setting}`);\\n return;\\n }\\n\\n // Disabled value\\n if (!this.config[setting].options.includes(value)) {\\n this.debug.warn(`Disabled value of '${value}' for ${setting}`);\\n return;\\n }\\n }\\n\\n // Get the list if we need to\\n if (!is.element(list)) {\\n list = pane && pane.querySelector('[role=\\\"menu\\\"]');\\n }\\n\\n // If there's no list it means it's not been rendered...\\n if (!is.element(list)) {\\n return;\\n }\\n\\n // Update the label\\n const label = this.elements.settings.buttons[setting].querySelector(`.${this.config.classNames.menu.value}`);\\n label.innerHTML = controls.getLabel.call(this, setting, value);\\n\\n // Find the radio option and check it\\n const target = list && list.querySelector(`[value=\\\"${value}\\\"]`);\\n if (is.element(target)) {\\n target.checked = true;\\n }\\n },\\n // Translate a value into a nice label\\n getLabel(setting, value) {\\n switch (setting) {\\n case 'speed':\\n return value === 1 ? i18n.get('normal', this.config) : `${value}×`;\\n case 'quality':\\n if (is.number(value)) {\\n const label = i18n.get(`qualityLabel.${value}`, this.config);\\n if (!label.length) {\\n return `${value}p`;\\n }\\n return label;\\n }\\n return toTitleCase(value);\\n case 'captions':\\n return captions.getLabel.call(this);\\n default:\\n return null;\\n }\\n },\\n // Set the quality menu\\n setQualityMenu(options) {\\n // Menu required\\n if (!is.element(this.elements.settings.panels.quality)) {\\n return;\\n }\\n const type = 'quality';\\n const list = this.elements.settings.panels.quality.querySelector('[role=\\\"menu\\\"]');\\n\\n // Set options if passed and filter based on uniqueness and config\\n if (is.array(options)) {\\n this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality));\\n }\\n\\n // Toggle the pane and tab\\n const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1;\\n controls.toggleMenuButton.call(this, type, toggle);\\n\\n // Empty the menu\\n emptyElement(list);\\n\\n // Check if we need to toggle the parent\\n controls.checkMenu.call(this);\\n\\n // If we're hiding, nothing more to do\\n if (!toggle) {\\n return;\\n }\\n\\n // Get the badge HTML for HD, 4K etc\\n const getBadge = quality => {\\n const label = i18n.get(`qualityBadge.${quality}`, this.config);\\n if (!label.length) {\\n return null;\\n }\\n return controls.createBadge.call(this, label);\\n };\\n\\n // Sort options by the config and then render options\\n this.options.quality.sort((a, b) => {\\n const sorting = this.config.quality.options;\\n return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;\\n }).forEach(quality => {\\n controls.createMenuItem.call(this, {\\n value: quality,\\n list,\\n type,\\n title: controls.getLabel.call(this, 'quality', quality),\\n badge: getBadge(quality)\\n });\\n });\\n controls.updateSetting.call(this, type, list);\\n },\\n // Set the looping options\\n /* setLoopMenu() {\\n // Menu required\\n if (!is.element(this.elements.settings.panels.loop)) {\\n return;\\n }\\n const options = ['start', 'end', 'all', 'reset'];\\n const list = this.elements.settings.panels.loop.querySelector('[role=\\\"menu\\\"]');\\n // Show the pane and tab\\n toggleHidden(this.elements.settings.buttons.loop, false);\\n toggleHidden(this.elements.settings.panels.loop, false);\\n // Toggle the pane and tab\\n const toggle = !is.empty(this.loop.options);\\n controls.toggleMenuButton.call(this, 'loop', toggle);\\n // Empty the menu\\n emptyElement(list);\\n options.forEach(option => {\\n const item = createElement('li');\\n const button = createElement(\\n 'button',\\n extend(getAttributesFromSelector(this.config.selectors.buttons.loop), {\\n type: 'button',\\n class: this.config.classNames.control,\\n 'data-plyr-loop-action': option,\\n }),\\n i18n.get(option, this.config)\\n );\\n if (['start', 'end'].includes(option)) {\\n const badge = controls.createBadge.call(this, '00:00');\\n button.appendChild(badge);\\n }\\n item.appendChild(button);\\n list.appendChild(item);\\n });\\n }, */\\n\\n // Get current selected caption language\\n // TODO: rework this to user the getter in the API?\\n\\n // Set a list of available captions languages\\n setCaptionsMenu() {\\n // Menu required\\n if (!is.element(this.elements.settings.panels.captions)) {\\n return;\\n }\\n\\n // TODO: Captions or language? Currently it's mixed\\n const type = 'captions';\\n const list = this.elements.settings.panels.captions.querySelector('[role=\\\"menu\\\"]');\\n const tracks = captions.getTracks.call(this);\\n const toggle = Boolean(tracks.length);\\n\\n // Toggle the pane and tab\\n controls.toggleMenuButton.call(this, type, toggle);\\n\\n // Empty the menu\\n emptyElement(list);\\n\\n // Check if we need to toggle the parent\\n controls.checkMenu.call(this);\\n\\n // If there's no captions, bail\\n if (!toggle) {\\n return;\\n }\\n\\n // Generate options data\\n const options = tracks.map((track, value) => ({\\n value,\\n checked: this.captions.toggled && this.currentTrack === value,\\n title: captions.getLabel.call(this, track),\\n badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),\\n list,\\n type: 'language'\\n }));\\n\\n // Add the \\\"Disabled\\\" option to turn off captions\\n options.unshift({\\n value: -1,\\n checked: !this.captions.toggled,\\n title: i18n.get('disabled', this.config),\\n list,\\n type: 'language'\\n });\\n\\n // Generate options\\n options.forEach(controls.createMenuItem.bind(this));\\n controls.updateSetting.call(this, type, list);\\n },\\n // Set a list of available captions languages\\n setSpeedMenu() {\\n // Menu required\\n if (!is.element(this.elements.settings.panels.speed)) {\\n return;\\n }\\n const type = 'speed';\\n const list = this.elements.settings.panels.speed.querySelector('[role=\\\"menu\\\"]');\\n\\n // Filter out invalid speeds\\n this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);\\n\\n // Toggle the pane and tab\\n const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;\\n controls.toggleMenuButton.call(this, type, toggle);\\n\\n // Empty the menu\\n emptyElement(list);\\n\\n // Check if we need to toggle the parent\\n controls.checkMenu.call(this);\\n\\n // If we're hiding, nothing more to do\\n if (!toggle) {\\n return;\\n }\\n\\n // Create items\\n this.options.speed.forEach(speed => {\\n controls.createMenuItem.call(this, {\\n value: speed,\\n list,\\n type,\\n title: controls.getLabel.call(this, 'speed', speed)\\n });\\n });\\n controls.updateSetting.call(this, type, list);\\n },\\n // Check if we need to hide/show the settings menu\\n checkMenu() {\\n const {\\n buttons\\n } = this.elements.settings;\\n const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden);\\n toggleHidden(this.elements.settings.menu, !visible);\\n },\\n // Focus the first menu item in a given (or visible) menu\\n focusFirstMenuItem(pane, focusVisible = false) {\\n if (this.elements.settings.popup.hidden) {\\n return;\\n }\\n let target = pane;\\n if (!is.element(target)) {\\n target = Object.values(this.elements.settings.panels).find(p => !p.hidden);\\n }\\n const firstItem = target.querySelector('[role^=\\\"menuitem\\\"]');\\n setFocus.call(this, firstItem, focusVisible);\\n },\\n // Show/hide menu\\n toggleMenu(input) {\\n const {\\n popup\\n } = this.elements.settings;\\n const button = this.elements.buttons.settings;\\n\\n // Menu and button are required\\n if (!is.element(popup) || !is.element(button)) {\\n return;\\n }\\n\\n // True toggle by default\\n const {\\n hidden\\n } = popup;\\n let show = hidden;\\n if (is.boolean(input)) {\\n show = input;\\n } else if (is.keyboardEvent(input) && input.key === 'Escape') {\\n show = false;\\n } else if (is.event(input)) {\\n // If Plyr is in a shadowDOM, the event target is set to the component, instead of the\\n // Element in the shadowDOM. The path, if available, is complete.\\n const target = is.function(input.composedPath) ? input.composedPath()[0] : input.target;\\n const isMenuItem = popup.contains(target);\\n\\n // If the click was inside the menu or if the click\\n // wasn't the button or menu item and we're trying to\\n // show the menu (a doc click shouldn't show the menu)\\n if (isMenuItem || !isMenuItem && input.target !== button && show) {\\n return;\\n }\\n }\\n\\n // Set button attributes\\n button.setAttribute('aria-expanded', show);\\n\\n // Show the actual popup\\n toggleHidden(popup, !show);\\n\\n // Add class hook\\n toggleClass(this.elements.container, this.config.classNames.menu.open, show);\\n\\n // Focus the first item if key interaction\\n if (show && is.keyboardEvent(input)) {\\n controls.focusFirstMenuItem.call(this, null, true);\\n } else if (!show && !hidden) {\\n // If closing, re-focus the button\\n setFocus.call(this, button, is.keyboardEvent(input));\\n }\\n },\\n // Get the natural size of a menu panel\\n getMenuSize(tab) {\\n const clone = tab.cloneNode(true);\\n clone.style.position = 'absolute';\\n clone.style.opacity = 0;\\n clone.removeAttribute('hidden');\\n\\n // Append to parent so we get the \\\"real\\\" size\\n tab.parentNode.appendChild(clone);\\n\\n // Get the sizes before we remove\\n const width = clone.scrollWidth;\\n const height = clone.scrollHeight;\\n\\n // Remove from the DOM\\n removeElement(clone);\\n return {\\n width,\\n height\\n };\\n },\\n // Show a panel in the menu\\n showMenuPanel(type = '', focusVisible = false) {\\n const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);\\n\\n // Nothing to show, bail\\n if (!is.element(target)) {\\n return;\\n }\\n\\n // Hide all other panels\\n const container = target.parentNode;\\n const current = Array.from(container.children).find(node => !node.hidden);\\n\\n // If we can do fancy animations, we'll animate the height/width\\n if (support.transitions && !support.reducedMotion) {\\n // Set the current width as a base\\n container.style.width = `${current.scrollWidth}px`;\\n container.style.height = `${current.scrollHeight}px`;\\n\\n // Get potential sizes\\n const size = controls.getMenuSize.call(this, target);\\n\\n // Restore auto height/width\\n const restore = event => {\\n // We're only bothered about height and width on the container\\n if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {\\n return;\\n }\\n\\n // Revert back to auto\\n container.style.width = '';\\n container.style.height = '';\\n\\n // Only listen once\\n off.call(this, container, transitionEndEvent, restore);\\n };\\n\\n // Listen for the transition finishing and restore auto height/width\\n on.call(this, container, transitionEndEvent, restore);\\n\\n // Set dimensions to target\\n container.style.width = `${size.width}px`;\\n container.style.height = `${size.height}px`;\\n }\\n\\n // Set attributes on current tab\\n toggleHidden(current, true);\\n\\n // Set attributes on target\\n toggleHidden(target, false);\\n\\n // Focus the first item\\n controls.focusFirstMenuItem.call(this, target, focusVisible);\\n },\\n // Set the download URL\\n setDownloadUrl() {\\n const button = this.elements.buttons.download;\\n\\n // Bail if no button\\n if (!is.element(button)) {\\n return;\\n }\\n\\n // Set attribute\\n button.setAttribute('href', this.download);\\n },\\n // Build the default HTML\\n create(data) {\\n const {\\n bindMenuItemShortcuts,\\n createButton,\\n createProgress,\\n createRange,\\n createTime,\\n setQualityMenu,\\n setSpeedMenu,\\n showMenuPanel\\n } = controls;\\n this.elements.controls = null;\\n\\n // Larger overlaid play button\\n if (is.array(this.config.controls) && this.config.controls.includes('play-large')) {\\n this.elements.container.appendChild(createButton.call(this, 'play-large'));\\n }\\n\\n // Create the container\\n const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));\\n this.elements.controls = container;\\n\\n // Default item attributes\\n const defaultAttributes = {\\n class: 'plyr__controls__item'\\n };\\n\\n // Loop through controls in order\\n dedupe(is.array(this.config.controls) ? this.config.controls : []).forEach(control => {\\n // Restart button\\n if (control === 'restart') {\\n container.appendChild(createButton.call(this, 'restart', defaultAttributes));\\n }\\n\\n // Rewind button\\n if (control === 'rewind') {\\n container.appendChild(createButton.call(this, 'rewind', defaultAttributes));\\n }\\n\\n // Play/Pause button\\n if (control === 'play') {\\n container.appendChild(createButton.call(this, 'play', defaultAttributes));\\n }\\n\\n // Fast forward button\\n if (control === 'fast-forward') {\\n container.appendChild(createButton.call(this, 'fast-forward', defaultAttributes));\\n }\\n\\n // Progress\\n if (control === 'progress') {\\n const progressContainer = createElement('div', {\\n class: `${defaultAttributes.class} plyr__progress__container`\\n });\\n const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));\\n\\n // Seek range slider\\n progress.appendChild(createRange.call(this, 'seek', {\\n id: `plyr-seek-${data.id}`\\n }));\\n\\n // Buffer progress\\n progress.appendChild(createProgress.call(this, 'buffer'));\\n\\n // TODO: Add loop display indicator\\n\\n // Seek tooltip\\n if (this.config.tooltips.seek) {\\n const tooltip = createElement('span', {\\n class: this.config.classNames.tooltip\\n }, '00:00');\\n progress.appendChild(tooltip);\\n this.elements.display.seekTooltip = tooltip;\\n }\\n this.elements.progress = progress;\\n progressContainer.appendChild(this.elements.progress);\\n container.appendChild(progressContainer);\\n }\\n\\n // Media current time display\\n if (control === 'current-time') {\\n container.appendChild(createTime.call(this, 'currentTime', defaultAttributes));\\n }\\n\\n // Media duration display\\n if (control === 'duration') {\\n container.appendChild(createTime.call(this, 'duration', defaultAttributes));\\n }\\n\\n // Volume controls\\n if (control === 'mute' || control === 'volume') {\\n let {\\n volume\\n } = this.elements;\\n\\n // Create the volume container if needed\\n if (!is.element(volume) || !container.contains(volume)) {\\n volume = createElement('div', extend({}, defaultAttributes, {\\n class: `${defaultAttributes.class} plyr__volume`.trim()\\n }));\\n this.elements.volume = volume;\\n container.appendChild(volume);\\n }\\n\\n // Toggle mute button\\n if (control === 'mute') {\\n volume.appendChild(createButton.call(this, 'mute'));\\n }\\n\\n // Volume range control\\n // Ignored on iOS as it's handled globally\\n // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html\\n if (control === 'volume' && !browser.isIos && !browser.isIPadOS) {\\n // Set the attributes\\n const attributes = {\\n max: 1,\\n step: 0.05,\\n value: this.config.volume\\n };\\n\\n // Create the volume range slider\\n volume.appendChild(createRange.call(this, 'volume', extend(attributes, {\\n id: `plyr-volume-${data.id}`\\n })));\\n }\\n }\\n\\n // Toggle captions button\\n if (control === 'captions') {\\n container.appendChild(createButton.call(this, 'captions', defaultAttributes));\\n }\\n\\n // Settings button / menu\\n if (control === 'settings' && !is.empty(this.config.settings)) {\\n const wrapper = createElement('div', extend({}, defaultAttributes, {\\n class: `${defaultAttributes.class} plyr__menu`.trim(),\\n hidden: ''\\n }));\\n wrapper.appendChild(createButton.call(this, 'settings', {\\n 'aria-haspopup': true,\\n 'aria-controls': `plyr-settings-${data.id}`,\\n 'aria-expanded': false\\n }));\\n const popup = createElement('div', {\\n class: 'plyr__menu__container',\\n id: `plyr-settings-${data.id}`,\\n hidden: ''\\n });\\n const inner = createElement('div');\\n const home = createElement('div', {\\n id: `plyr-settings-${data.id}-home`\\n });\\n\\n // Create the menu\\n const menu = createElement('div', {\\n role: 'menu'\\n });\\n home.appendChild(menu);\\n inner.appendChild(home);\\n this.elements.settings.panels.home = home;\\n\\n // Build the menu items\\n this.config.settings.forEach(type => {\\n // TODO: bundle this with the createMenuItem helper and bindings\\n const menuItem = createElement('button', extend(getAttributesFromSelector(this.config.selectors.buttons.settings), {\\n type: 'button',\\n class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`,\\n role: 'menuitem',\\n 'aria-haspopup': true,\\n hidden: ''\\n }));\\n\\n // Bind menu shortcuts for keyboard users\\n bindMenuItemShortcuts.call(this, menuItem, type);\\n\\n // Show menu on click\\n on.call(this, menuItem, 'click', () => {\\n showMenuPanel.call(this, type, false);\\n });\\n const flex = createElement('span', null, i18n.get(type, this.config));\\n const value = createElement('span', {\\n class: this.config.classNames.menu.value\\n });\\n\\n // Speed contains HTML entities\\n value.innerHTML = data[type];\\n flex.appendChild(value);\\n menuItem.appendChild(flex);\\n menu.appendChild(menuItem);\\n\\n // Build the panes\\n const pane = createElement('div', {\\n id: `plyr-settings-${data.id}-${type}`,\\n hidden: ''\\n });\\n\\n // Back button\\n const backButton = createElement('button', {\\n type: 'button',\\n class: `${this.config.classNames.control} ${this.config.classNames.control}--back`\\n });\\n\\n // Visible label\\n backButton.appendChild(createElement('span', {\\n 'aria-hidden': true\\n }, i18n.get(type, this.config)));\\n\\n // Screen reader label\\n backButton.appendChild(createElement('span', {\\n class: this.config.classNames.hidden\\n }, i18n.get('menuBack', this.config)));\\n\\n // Go back via keyboard\\n on.call(this, pane, 'keydown', event => {\\n if (event.key !== 'ArrowLeft') return;\\n\\n // Prevent seek\\n event.preventDefault();\\n event.stopPropagation();\\n\\n // Show the respective menu\\n showMenuPanel.call(this, 'home', true);\\n }, false);\\n\\n // Go back via button click\\n on.call(this, backButton, 'click', () => {\\n showMenuPanel.call(this, 'home', false);\\n });\\n\\n // Add to pane\\n pane.appendChild(backButton);\\n\\n // Menu\\n pane.appendChild(createElement('div', {\\n role: 'menu'\\n }));\\n inner.appendChild(pane);\\n this.elements.settings.buttons[type] = menuItem;\\n this.elements.settings.panels[type] = pane;\\n });\\n popup.appendChild(inner);\\n wrapper.appendChild(popup);\\n container.appendChild(wrapper);\\n this.elements.settings.popup = popup;\\n this.elements.settings.menu = wrapper;\\n }\\n\\n // Picture in picture button\\n if (control === 'pip' && support.pip) {\\n container.appendChild(createButton.call(this, 'pip', defaultAttributes));\\n }\\n\\n // Airplay button\\n if (control === 'airplay' && support.airplay) {\\n container.appendChild(createButton.call(this, 'airplay', defaultAttributes));\\n }\\n\\n // Download button\\n if (control === 'download') {\\n const attributes = extend({}, defaultAttributes, {\\n element: 'a',\\n href: this.download,\\n target: '_blank'\\n });\\n\\n // Set download attribute for HTML5 only\\n if (this.isHTML5) {\\n attributes.download = '';\\n }\\n const {\\n download\\n } = this.config.urls;\\n if (!is.url(download) && this.isEmbed) {\\n extend(attributes, {\\n icon: `logo-${this.provider}`,\\n label: this.provider\\n });\\n }\\n container.appendChild(createButton.call(this, 'download', attributes));\\n }\\n\\n // Toggle fullscreen button\\n if (control === 'fullscreen') {\\n container.appendChild(createButton.call(this, 'fullscreen', defaultAttributes));\\n }\\n });\\n\\n // Set available quality levels\\n if (this.isHTML5) {\\n setQualityMenu.call(this, html5.getQualityOptions.call(this));\\n }\\n setSpeedMenu.call(this);\\n return container;\\n },\\n // Insert controls\\n inject() {\\n // Sprite\\n if (this.config.loadSprite) {\\n const icon = controls.getIconUrl.call(this);\\n\\n // Only load external sprite using AJAX\\n if (icon.cors) {\\n loadSprite(icon.url, 'sprite-plyr');\\n }\\n }\\n\\n // Create a unique ID\\n this.id = Math.floor(Math.random() * 10000);\\n\\n // Null by default\\n let container = null;\\n this.elements.controls = null;\\n\\n // Set template properties\\n const props = {\\n id: this.id,\\n seektime: this.config.seekTime,\\n title: this.config.title\\n };\\n let update = true;\\n\\n // If function, run it and use output\\n if (is.function(this.config.controls)) {\\n this.config.controls = this.config.controls.call(this, props);\\n }\\n\\n // Convert falsy controls to empty array (primarily for empty strings)\\n if (!this.config.controls) {\\n this.config.controls = [];\\n }\\n if (is.element(this.config.controls) || is.string(this.config.controls)) {\\n // HTMLElement or Non-empty string passed as the option\\n container = this.config.controls;\\n } else {\\n // Create controls\\n container = controls.create.call(this, {\\n id: this.id,\\n seektime: this.config.seekTime,\\n speed: this.speed,\\n quality: this.quality,\\n captions: captions.getLabel.call(this)\\n // TODO: Looping\\n // loop: 'None',\\n });\\n\\n update = false;\\n }\\n\\n // Replace props with their value\\n const replace = input => {\\n let result = input;\\n Object.entries(props).forEach(([key, value]) => {\\n result = replaceAll(result, `{${key}}`, value);\\n });\\n return result;\\n };\\n\\n // Update markup\\n if (update) {\\n if (is.string(this.config.controls)) {\\n container = replace(container);\\n }\\n }\\n\\n // Controls container\\n let target;\\n\\n // Inject to custom location\\n if (is.string(this.config.selectors.controls.container)) {\\n target = document.querySelector(this.config.selectors.controls.container);\\n }\\n\\n // Inject into the container by default\\n if (!is.element(target)) {\\n target = this.elements.container;\\n }\\n\\n // Inject controls HTML (needs to be before captions, hence \\\"afterbegin\\\")\\n const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';\\n target[insertMethod]('afterbegin', container);\\n\\n // Find the elements if need be\\n if (!is.element(this.elements.controls)) {\\n controls.findElements.call(this);\\n }\\n\\n // Add pressed property to buttons\\n if (!is.empty(this.elements.buttons)) {\\n const addProperty = button => {\\n const className = this.config.classNames.controlPressed;\\n button.setAttribute('aria-pressed', 'false');\\n Object.defineProperty(button, 'pressed', {\\n configurable: true,\\n enumerable: true,\\n get() {\\n return hasClass(button, className);\\n },\\n set(pressed = false) {\\n toggleClass(button, className, pressed);\\n button.setAttribute('aria-pressed', pressed ? 'true' : 'false');\\n }\\n });\\n };\\n\\n // Toggle classname when pressed property is set\\n Object.values(this.elements.buttons).filter(Boolean).forEach(button => {\\n if (is.array(button) || is.nodeList(button)) {\\n Array.from(button).filter(Boolean).forEach(addProperty);\\n } else {\\n addProperty(button);\\n }\\n });\\n }\\n\\n // Edge sometimes doesn't finish the paint so force a repaint\\n if (browser.isEdge) {\\n repaint(target);\\n }\\n\\n // Setup tooltips\\n if (this.config.tooltips.controls) {\\n const {\\n classNames,\\n selectors\\n } = this.config;\\n const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`;\\n const labels = getElements.call(this, selector);\\n Array.from(labels).forEach(label => {\\n toggleClass(label, this.config.classNames.hidden, false);\\n toggleClass(label, this.config.classNames.tooltip, true);\\n });\\n }\\n },\\n // Set media metadata\\n setMediaMetadata() {\\n try {\\n if ('mediaSession' in navigator) {\\n navigator.mediaSession.metadata = new window.MediaMetadata({\\n title: this.config.mediaMetadata.title,\\n artist: this.config.mediaMetadata.artist,\\n album: this.config.mediaMetadata.album,\\n artwork: this.config.mediaMetadata.artwork\\n });\\n }\\n } catch (_) {\\n // Do nothing\\n }\\n },\\n // Add markers\\n setMarkers() {\\n var _this$config$markers2, _this$config$markers3;\\n if (!this.duration || this.elements.markers) return;\\n\\n // Get valid points\\n const points = (_this$config$markers2 = this.config.markers) === null || _this$config$markers2 === void 0 ? void 0 : (_this$config$markers3 = _this$config$markers2.points) === null || _this$config$markers3 === void 0 ? void 0 : _this$config$markers3.filter(({\\n time\\n }) => time > 0 && time < this.duration);\\n if (!(points !== null && points !== void 0 && points.length)) return;\\n const containerFragment = document.createDocumentFragment();\\n const pointsFragment = document.createDocumentFragment();\\n let tipElement = null;\\n const tipVisible = `${this.config.classNames.tooltip}--visible`;\\n const toggleTip = show => toggleClass(tipElement, tipVisible, show);\\n\\n // Inject markers to progress container\\n points.forEach(point => {\\n const markerElement = createElement('span', {\\n class: this.config.classNames.marker\\n }, '');\\n const left = `${point.time / this.duration * 100}%`;\\n if (tipElement) {\\n // Show on hover\\n markerElement.addEventListener('mouseenter', () => {\\n if (point.label) return;\\n tipElement.style.left = left;\\n tipElement.innerHTML = point.label;\\n toggleTip(true);\\n });\\n\\n // Hide on leave\\n markerElement.addEventListener('mouseleave', () => {\\n toggleTip(false);\\n });\\n }\\n markerElement.addEventListener('click', () => {\\n this.currentTime = point.time;\\n });\\n markerElement.style.left = left;\\n pointsFragment.appendChild(markerElement);\\n });\\n containerFragment.appendChild(pointsFragment);\\n\\n // Inject a tooltip if needed\\n if (!this.config.tooltips.seek) {\\n tipElement = createElement('span', {\\n class: this.config.classNames.tooltip\\n }, '');\\n containerFragment.appendChild(tipElement);\\n }\\n this.elements.markers = {\\n points: pointsFragment,\\n tip: tipElement\\n };\\n this.elements.progress.appendChild(containerFragment);\\n }\\n };\\n\\n // ==========================================================================\\n\\n /**\\n * Parse a string to a URL object\\n * @param {String} input - the URL to be parsed\\n * @param {Boolean} safe - failsafe parsing\\n */\\n function parseUrl(input, safe = true) {\\n let url = input;\\n if (safe) {\\n const parser = document.createElement('a');\\n parser.href = url;\\n url = parser.href;\\n }\\n try {\\n return new URL(url);\\n } catch (_) {\\n return null;\\n }\\n }\\n\\n // Convert object to URLSearchParams\\n function buildUrlParams(input) {\\n const params = new URLSearchParams();\\n if (is.object(input)) {\\n Object.entries(input).forEach(([key, value]) => {\\n params.set(key, value);\\n });\\n }\\n return params;\\n }\\n\\n // ==========================================================================\\n const captions = {\\n // Setup captions\\n setup() {\\n // Requires UI support\\n if (!this.supported.ui) {\\n return;\\n }\\n\\n // Only Vimeo and HTML5 video supported at this point\\n if (!this.isVideo || this.isYouTube || this.isHTML5 && !support.textTracks) {\\n // Clear menu and hide\\n if (is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {\\n controls.setCaptionsMenu.call(this);\\n }\\n return;\\n }\\n\\n // Inject the container\\n if (!is.element(this.elements.captions)) {\\n this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));\\n this.elements.captions.setAttribute('dir', 'auto');\\n insertAfter(this.elements.captions, this.elements.wrapper);\\n }\\n\\n // Fix IE captions if CORS is used\\n // Fetch captions and inject as blobs instead (data URIs not supported!)\\n if (browser.isIE && window.URL) {\\n const elements = this.media.querySelectorAll('track');\\n Array.from(elements).forEach(track => {\\n const src = track.getAttribute('src');\\n const url = parseUrl(src);\\n if (url !== null && url.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(url.protocol)) {\\n fetch(src, 'blob').then(blob => {\\n track.setAttribute('src', window.URL.createObjectURL(blob));\\n }).catch(() => {\\n removeElement(track);\\n });\\n }\\n });\\n }\\n\\n // Get and set initial data\\n // The \\\"preferred\\\" options are not realized unless / until the wanted language has a match\\n // * languages: Array of user's browser languages.\\n // * language: The language preferred by user settings or config\\n // * active: The state preferred by user settings or config\\n // * toggled: The real captions state\\n\\n const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];\\n const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));\\n let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();\\n\\n // Use first browser language when language is 'auto'\\n if (language === 'auto') {\\n [language] = languages;\\n }\\n let active = this.storage.get('captions');\\n if (!is.boolean(active)) {\\n ({\\n active\\n } = this.config.captions);\\n }\\n Object.assign(this.captions, {\\n toggled: false,\\n active,\\n language,\\n languages\\n });\\n\\n // Watch changes to textTracks and update captions menu\\n if (this.isHTML5) {\\n const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';\\n on.call(this, this.media.textTracks, trackEvents, captions.update.bind(this));\\n }\\n\\n // Update available languages in list next tick (the event must not be triggered before the listeners)\\n setTimeout(captions.update.bind(this), 0);\\n },\\n // Update available language options in settings based on tracks\\n update() {\\n const tracks = captions.getTracks.call(this, true);\\n // Get the wanted language\\n const {\\n active,\\n language,\\n meta,\\n currentTrackNode\\n } = this.captions;\\n const languageExists = Boolean(tracks.find(track => track.language === language));\\n\\n // Handle tracks (add event listener and \\\"pseudo\\\"-default)\\n if (this.isHTML5 && this.isVideo) {\\n tracks.filter(track => !meta.get(track)).forEach(track => {\\n this.debug.log('Track added', track);\\n\\n // Attempt to store if the original dom element was \\\"default\\\"\\n meta.set(track, {\\n default: track.mode === 'showing'\\n });\\n\\n // Turn off native caption rendering to avoid double captions\\n // Note: mode='hidden' forces a track to download. To ensure every track\\n // isn't downloaded at once, only 'showing' tracks should be reassigned\\n // eslint-disable-next-line no-param-reassign\\n if (track.mode === 'showing') {\\n // eslint-disable-next-line no-param-reassign\\n track.mode = 'hidden';\\n }\\n\\n // Add event listener for cue changes\\n on.call(this, track, 'cuechange', () => captions.updateCues.call(this));\\n });\\n }\\n\\n // Update language first time it matches, or if the previous matching track was removed\\n if (languageExists && this.language !== language || !tracks.includes(currentTrackNode)) {\\n captions.setLanguage.call(this, language);\\n captions.toggle.call(this, active && languageExists);\\n }\\n\\n // Enable or disable captions based on track length\\n if (this.elements) {\\n toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));\\n }\\n\\n // Update available languages in list\\n if (is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {\\n controls.setCaptionsMenu.call(this);\\n }\\n },\\n // Toggle captions display\\n // Used internally for the toggleCaptions method, with the passive option forced to false\\n toggle(input, passive = true) {\\n // If there's no full support\\n if (!this.supported.ui) {\\n return;\\n }\\n const {\\n toggled\\n } = this.captions; // Current state\\n const activeClass = this.config.classNames.captions.active;\\n // Get the next state\\n // If the method is called without parameter, toggle based on current value\\n const active = is.nullOrUndefined(input) ? !toggled : input;\\n\\n // Update state and trigger event\\n if (active !== toggled) {\\n // When passive, don't override user preferences\\n if (!passive) {\\n this.captions.active = active;\\n this.storage.set({\\n captions: active\\n });\\n }\\n\\n // Force language if the call isn't passive and there is no matching language to toggle to\\n if (!this.language && active && !passive) {\\n const tracks = captions.getTracks.call(this);\\n const track = captions.findTrack.call(this, [this.captions.language, ...this.captions.languages], true);\\n\\n // Override user preferences to avoid switching languages if a matching track is added\\n this.captions.language = track.language;\\n\\n // Set caption, but don't store in localStorage as user preference\\n captions.set.call(this, tracks.indexOf(track));\\n return;\\n }\\n\\n // Toggle button if it's enabled\\n if (this.elements.buttons.captions) {\\n this.elements.buttons.captions.pressed = active;\\n }\\n\\n // Add class hook\\n toggleClass(this.elements.container, activeClass, active);\\n this.captions.toggled = active;\\n\\n // Update settings menu\\n controls.updateSetting.call(this, 'captions');\\n\\n // Trigger event (not used internally)\\n triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');\\n }\\n\\n // Wait for the call stack to clear before setting mode='hidden'\\n // on the active track - forcing the browser to download it\\n setTimeout(() => {\\n if (active && this.captions.toggled) {\\n this.captions.currentTrackNode.mode = 'hidden';\\n }\\n });\\n },\\n // Set captions by track index\\n // Used internally for the currentTrack setter with the passive option forced to false\\n set(index, passive = true) {\\n const tracks = captions.getTracks.call(this);\\n\\n // Disable captions if setting to -1\\n if (index === -1) {\\n captions.toggle.call(this, false, passive);\\n return;\\n }\\n if (!is.number(index)) {\\n this.debug.warn('Invalid caption argument', index);\\n return;\\n }\\n if (!(index in tracks)) {\\n this.debug.warn('Track not found', index);\\n return;\\n }\\n if (this.captions.currentTrack !== index) {\\n this.captions.currentTrack = index;\\n const track = tracks[index];\\n const {\\n language\\n } = track || {};\\n\\n // Store reference to node for invalidation on remove\\n this.captions.currentTrackNode = track;\\n\\n // Update settings menu\\n controls.updateSetting.call(this, 'captions');\\n\\n // When passive, don't override user preferences\\n if (!passive) {\\n this.captions.language = language;\\n this.storage.set({\\n language\\n });\\n }\\n\\n // Handle Vimeo captions\\n if (this.isVimeo) {\\n this.embed.enableTextTrack(language);\\n }\\n\\n // Trigger event\\n triggerEvent.call(this, this.media, 'languagechange');\\n }\\n\\n // Show captions\\n captions.toggle.call(this, true, passive);\\n if (this.isHTML5 && this.isVideo) {\\n // If we change the active track while a cue is already displayed we need to update it\\n captions.updateCues.call(this);\\n }\\n },\\n // Set captions by language\\n // Used internally for the language setter with the passive option forced to false\\n setLanguage(input, passive = true) {\\n if (!is.string(input)) {\\n this.debug.warn('Invalid language argument', input);\\n return;\\n }\\n // Normalize\\n const language = input.toLowerCase();\\n this.captions.language = language;\\n\\n // Set currentTrack\\n const tracks = captions.getTracks.call(this);\\n const track = captions.findTrack.call(this, [language]);\\n captions.set.call(this, tracks.indexOf(track), passive);\\n },\\n // Get current valid caption tracks\\n // If update is false it will also ignore tracks without metadata\\n // This is used to \\\"freeze\\\" the language options when captions.update is false\\n getTracks(update = false) {\\n // Handle media or textTracks missing or null\\n const tracks = Array.from((this.media || {}).textTracks || []);\\n // For HTML5, use cache instead of current tracks when it exists (if captions.update is false)\\n // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)\\n return tracks.filter(track => !this.isHTML5 || update || this.captions.meta.has(track)).filter(track => ['captions', 'subtitles'].includes(track.kind));\\n },\\n // Match tracks based on languages and get the first\\n findTrack(languages, force = false) {\\n const tracks = captions.getTracks.call(this);\\n const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);\\n const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));\\n let track;\\n languages.every(language => {\\n track = sorted.find(t => t.language === language);\\n return !track; // Break iteration if there is a match\\n });\\n\\n // If no match is found but is required, get first\\n return track || (force ? sorted[0] : undefined);\\n },\\n // Get the current track\\n getCurrentTrack() {\\n return captions.getTracks.call(this)[this.currentTrack];\\n },\\n // Get UI label for track\\n getLabel(track) {\\n let currentTrack = track;\\n if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {\\n currentTrack = captions.getCurrentTrack.call(this);\\n }\\n if (is.track(currentTrack)) {\\n if (!is.empty(currentTrack.label)) {\\n return currentTrack.label;\\n }\\n if (!is.empty(currentTrack.language)) {\\n return track.language.toUpperCase();\\n }\\n return i18n.get('enabled', this.config);\\n }\\n return i18n.get('disabled', this.config);\\n },\\n // Update captions using current track's active cues\\n // Also optional array argument in case there isn't any track (ex: vimeo)\\n updateCues(input) {\\n // Requires UI\\n if (!this.supported.ui) {\\n return;\\n }\\n if (!is.element(this.elements.captions)) {\\n this.debug.warn('No captions element to render to');\\n return;\\n }\\n\\n // Only accept array or empty input\\n if (!is.nullOrUndefined(input) && !Array.isArray(input)) {\\n this.debug.warn('updateCues: Invalid input', input);\\n return;\\n }\\n let cues = input;\\n\\n // Get cues from track\\n if (!cues) {\\n const track = captions.getCurrentTrack.call(this);\\n cues = Array.from((track || {}).activeCues || []).map(cue => cue.getCueAsHTML()).map(getHTML);\\n }\\n\\n // Set new caption text\\n const content = cues.map(cueText => cueText.trim()).join('\\\\n');\\n const changed = content !== this.elements.captions.innerHTML;\\n if (changed) {\\n // Empty the container and create a new child element\\n emptyElement(this.elements.captions);\\n const caption = createElement('span', getAttributesFromSelector(this.config.selectors.caption));\\n caption.innerHTML = content;\\n this.elements.captions.appendChild(caption);\\n\\n // Trigger event\\n triggerEvent.call(this, this.media, 'cuechange');\\n }\\n }\\n };\\n\\n // ==========================================================================\\n // Plyr default config\\n // ==========================================================================\\n\\n const defaults = {\\n // Disable\\n enabled: true,\\n // Custom media title\\n title: '',\\n // Logging to console\\n debug: false,\\n // Auto play (if supported)\\n autoplay: false,\\n // Only allow one media playing at once (vimeo only)\\n autopause: true,\\n // Allow inline playback on iOS\\n playsinline: true,\\n // Default time to skip when rewind/fast forward\\n seekTime: 10,\\n // Default volume\\n volume: 1,\\n muted: false,\\n // Pass a custom duration\\n duration: null,\\n // Display the media duration on load in the current time position\\n // If you have opted to display both duration and currentTime, this is ignored\\n displayDuration: true,\\n // Invert the current time to be a countdown\\n invertTime: true,\\n // Clicking the currentTime inverts it's value to show time left rather than elapsed\\n toggleInvert: true,\\n // Force an aspect ratio\\n // The format must be `'w:h'` (e.g. `'16:9'`)\\n ratio: null,\\n // Click video container to play/pause\\n clickToPlay: true,\\n // Auto hide the controls\\n hideControls: true,\\n // Reset to start when playback ended\\n resetOnEnd: false,\\n // Disable the standard context menu\\n disableContextMenu: true,\\n // Sprite (for icons)\\n loadSprite: true,\\n iconPrefix: 'plyr',\\n iconUrl: 'https://cdn.plyr.io/3.7.8/plyr.svg',\\n // Blank video (used to prevent errors on source change)\\n blankVideo: 'https://cdn.plyr.io/static/blank.mp4',\\n // Quality default\\n quality: {\\n default: 576,\\n // The options to display in the UI, if available for the source media\\n options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],\\n forced: false,\\n onChange: null\\n },\\n // Set loops\\n loop: {\\n active: false\\n // start: null,\\n // end: null,\\n },\\n\\n // Speed default and options to display\\n speed: {\\n selected: 1,\\n // The options to display in the UI, if available for the source media (e.g. Vimeo and YouTube only support 0.5x-4x)\\n options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4]\\n },\\n // Keyboard shortcut settings\\n keyboard: {\\n focused: true,\\n global: false\\n },\\n // Display tooltips\\n tooltips: {\\n controls: false,\\n seek: true\\n },\\n // Captions settings\\n captions: {\\n active: false,\\n language: 'auto',\\n // Listen to new tracks added after Plyr is initialized.\\n // This is needed for streaming captions, but may result in unselectable options\\n update: false\\n },\\n // Fullscreen settings\\n fullscreen: {\\n enabled: true,\\n // Allow fullscreen?\\n fallback: true,\\n // Fallback using full viewport/window\\n iosNative: false // Use the native fullscreen in iOS (disables custom controls)\\n // Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode\\n // Non-ancestors of the player element will be ignored\\n // container: null, // defaults to the player element\\n },\\n\\n // Local storage\\n storage: {\\n enabled: true,\\n key: 'plyr'\\n },\\n // Default controls\\n controls: ['play-large',\\n // 'restart',\\n // 'rewind',\\n 'play',\\n // 'fast-forward',\\n 'progress', 'current-time',\\n // 'duration',\\n 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay',\\n // 'download',\\n 'fullscreen'],\\n settings: ['captions', 'quality', 'speed'],\\n // Localisation\\n i18n: {\\n restart: 'Restart',\\n rewind: 'Rewind {seektime}s',\\n play: 'Play',\\n pause: 'Pause',\\n fastForward: 'Forward {seektime}s',\\n seek: 'Seek',\\n seekLabel: '{currentTime} of {duration}',\\n played: 'Played',\\n buffered: 'Buffered',\\n currentTime: 'Current time',\\n duration: 'Duration',\\n volume: 'Volume',\\n mute: 'Mute',\\n unmute: 'Unmute',\\n enableCaptions: 'Enable captions',\\n disableCaptions: 'Disable captions',\\n download: 'Download',\\n enterFullscreen: 'Enter fullscreen',\\n exitFullscreen: 'Exit fullscreen',\\n frameTitle: 'Player for {title}',\\n captions: 'Captions',\\n settings: 'Settings',\\n pip: 'PIP',\\n menuBack: 'Go back to previous menu',\\n speed: 'Speed',\\n normal: 'Normal',\\n quality: 'Quality',\\n loop: 'Loop',\\n start: 'Start',\\n end: 'End',\\n all: 'All',\\n reset: 'Reset',\\n disabled: 'Disabled',\\n enabled: 'Enabled',\\n advertisement: 'Ad',\\n qualityBadge: {\\n 2160: '4K',\\n 1440: 'HD',\\n 1080: 'HD',\\n 720: 'HD',\\n 576: 'SD',\\n 480: 'SD'\\n }\\n },\\n // URLs\\n urls: {\\n download: null,\\n vimeo: {\\n sdk: 'https://player.vimeo.com/api/player.js',\\n iframe: 'https://player.vimeo.com/video/{0}?{1}',\\n api: 'https://vimeo.com/api/oembed.json?url={0}'\\n },\\n youtube: {\\n sdk: 'https://www.youtube.com/iframe_api',\\n api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'\\n },\\n googleIMA: {\\n sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'\\n }\\n },\\n // Custom control listeners\\n listeners: {\\n seek: null,\\n play: null,\\n pause: null,\\n restart: null,\\n rewind: null,\\n fastForward: null,\\n mute: null,\\n volume: null,\\n captions: null,\\n download: null,\\n fullscreen: null,\\n pip: null,\\n airplay: null,\\n speed: null,\\n quality: null,\\n loop: null,\\n language: null\\n },\\n // Events to watch and bubble\\n events: [\\n // Events to watch on HTML5 media elements and bubble\\n // https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events\\n 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied', 'ratechange', 'cuechange',\\n // Custom events\\n 'download', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled', 'languagechange', 'controlshidden', 'controlsshown', 'ready',\\n // YouTube\\n 'statechange',\\n // Quality\\n 'qualitychange',\\n // Ads\\n 'adsloaded', 'adscontentpause', 'adscontentresume', 'adstarted', 'adsmidpoint', 'adscomplete', 'adsallcomplete', 'adsimpression', 'adsclick'],\\n // Selectors\\n // Change these to match your template if using custom HTML\\n selectors: {\\n editable: 'input, textarea, select, [contenteditable]',\\n container: '.plyr',\\n controls: {\\n container: null,\\n wrapper: '.plyr__controls'\\n },\\n labels: '[data-plyr]',\\n buttons: {\\n play: '[data-plyr=\\\"play\\\"]',\\n pause: '[data-plyr=\\\"pause\\\"]',\\n restart: '[data-plyr=\\\"restart\\\"]',\\n rewind: '[data-plyr=\\\"rewind\\\"]',\\n fastForward: '[data-plyr=\\\"fast-forward\\\"]',\\n mute: '[data-plyr=\\\"mute\\\"]',\\n captions: '[data-plyr=\\\"captions\\\"]',\\n download: '[data-plyr=\\\"download\\\"]',\\n fullscreen: '[data-plyr=\\\"fullscreen\\\"]',\\n pip: '[data-plyr=\\\"pip\\\"]',\\n airplay: '[data-plyr=\\\"airplay\\\"]',\\n settings: '[data-plyr=\\\"settings\\\"]',\\n loop: '[data-plyr=\\\"loop\\\"]'\\n },\\n inputs: {\\n seek: '[data-plyr=\\\"seek\\\"]',\\n volume: '[data-plyr=\\\"volume\\\"]',\\n speed: '[data-plyr=\\\"speed\\\"]',\\n language: '[data-plyr=\\\"language\\\"]',\\n quality: '[data-plyr=\\\"quality\\\"]'\\n },\\n display: {\\n currentTime: '.plyr__time--current',\\n duration: '.plyr__time--duration',\\n buffer: '.plyr__progress__buffer',\\n loop: '.plyr__progress__loop',\\n // Used later\\n volume: '.plyr__volume--display'\\n },\\n progress: '.plyr__progress',\\n captions: '.plyr__captions',\\n caption: '.plyr__caption'\\n },\\n // Class hooks added to the player in different states\\n classNames: {\\n type: 'plyr--{0}',\\n provider: 'plyr--{0}',\\n video: 'plyr__video-wrapper',\\n embed: 'plyr__video-embed',\\n videoFixedRatio: 'plyr__video-wrapper--fixed-ratio',\\n embedContainer: 'plyr__video-embed__container',\\n poster: 'plyr__poster',\\n posterEnabled: 'plyr__poster-enabled',\\n ads: 'plyr__ads',\\n control: 'plyr__control',\\n controlPressed: 'plyr__control--pressed',\\n playing: 'plyr--playing',\\n paused: 'plyr--paused',\\n stopped: 'plyr--stopped',\\n loading: 'plyr--loading',\\n hover: 'plyr--hover',\\n tooltip: 'plyr__tooltip',\\n cues: 'plyr__cues',\\n marker: 'plyr__progress__marker',\\n hidden: 'plyr__sr-only',\\n hideControls: 'plyr--hide-controls',\\n isTouch: 'plyr--is-touch',\\n uiSupported: 'plyr--full-ui',\\n noTransition: 'plyr--no-transition',\\n display: {\\n time: 'plyr__time'\\n },\\n menu: {\\n value: 'plyr__menu__value',\\n badge: 'plyr__badge',\\n open: 'plyr--menu-open'\\n },\\n captions: {\\n enabled: 'plyr--captions-enabled',\\n active: 'plyr--captions-active'\\n },\\n fullscreen: {\\n enabled: 'plyr--fullscreen-enabled',\\n fallback: 'plyr--fullscreen-fallback'\\n },\\n pip: {\\n supported: 'plyr--pip-supported',\\n active: 'plyr--pip-active'\\n },\\n airplay: {\\n supported: 'plyr--airplay-supported',\\n active: 'plyr--airplay-active'\\n },\\n previewThumbnails: {\\n // Tooltip thumbs\\n thumbContainer: 'plyr__preview-thumb',\\n thumbContainerShown: 'plyr__preview-thumb--is-shown',\\n imageContainer: 'plyr__preview-thumb__image-container',\\n timeContainer: 'plyr__preview-thumb__time-container',\\n // Scrubbing\\n scrubbingContainer: 'plyr__preview-scrubbing',\\n scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown'\\n }\\n },\\n // Embed attributes\\n attributes: {\\n embed: {\\n provider: 'data-plyr-provider',\\n id: 'data-plyr-embed-id',\\n hash: 'data-plyr-embed-hash'\\n }\\n },\\n // Advertisements plugin\\n // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio\\n ads: {\\n enabled: false,\\n publisherId: '',\\n tagUrl: ''\\n },\\n // Preview Thumbnails plugin\\n previewThumbnails: {\\n enabled: false,\\n src: ''\\n },\\n // Vimeo plugin\\n vimeo: {\\n byline: false,\\n portrait: false,\\n title: false,\\n speed: true,\\n transparent: false,\\n // Custom settings from Plyr\\n customControls: true,\\n referrerPolicy: null,\\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy\\n // Whether the owner of the video has a Pro or Business account\\n // (which allows us to properly hide controls without CSS hacks, etc)\\n premium: false\\n },\\n // YouTube plugin\\n youtube: {\\n rel: 0,\\n // No related vids\\n showinfo: 0,\\n // Hide info\\n iv_load_policy: 3,\\n // Hide annotations\\n modestbranding: 1,\\n // Hide logos as much as possible (they still show one in the corner when paused)\\n // Custom settings from Plyr\\n customControls: true,\\n noCookie: false // Whether to use an alternative version of YouTube without cookies\\n },\\n\\n // Media Metadata\\n mediaMetadata: {\\n title: '',\\n artist: '',\\n album: '',\\n artwork: []\\n },\\n // Markers\\n markers: {\\n enabled: false,\\n points: []\\n }\\n };\\n\\n // ==========================================================================\\n // Plyr states\\n // ==========================================================================\\n\\n const pip = {\\n active: 'picture-in-picture',\\n inactive: 'inline'\\n };\\n\\n // ==========================================================================\\n // Plyr supported types and providers\\n // ==========================================================================\\n\\n const providers = {\\n html5: 'html5',\\n youtube: 'youtube',\\n vimeo: 'vimeo'\\n };\\n const types = {\\n audio: 'audio',\\n video: 'video'\\n };\\n\\n /**\\n * Get provider by URL\\n * @param {String} url\\n */\\n function getProviderByUrl(url) {\\n // YouTube\\n if (/^(https?:\\\\/\\\\/)?(www\\\\.)?(youtube\\\\.com|youtube-nocookie\\\\.com|youtu\\\\.?be)\\\\/.+$/.test(url)) {\\n return providers.youtube;\\n }\\n\\n // Vimeo\\n if (/^https?:\\\\/\\\\/player.vimeo.com\\\\/video\\\\/\\\\d{0,9}(?=\\\\b|\\\\/)/.test(url)) {\\n return providers.vimeo;\\n }\\n return null;\\n }\\n\\n // ==========================================================================\\n // Console wrapper\\n // ==========================================================================\\n\\n const noop = () => {};\\n class Console {\\n constructor(enabled = false) {\\n this.enabled = window.console && enabled;\\n if (this.enabled) {\\n this.log('Debugging enabled');\\n }\\n }\\n get log() {\\n // eslint-disable-next-line no-console\\n return this.enabled ? Function.prototype.bind.call(console.log, console) : noop;\\n }\\n get warn() {\\n // eslint-disable-next-line no-console\\n return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop;\\n }\\n get error() {\\n // eslint-disable-next-line no-console\\n return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;\\n }\\n }\\n\\n class Fullscreen {\\n constructor(player) {\\n _defineProperty$1(this, \\\"onChange\\\", () => {\\n if (!this.supported) return;\\n\\n // Update toggle button\\n const button = this.player.elements.buttons.fullscreen;\\n if (is.element(button)) {\\n button.pressed = this.active;\\n }\\n\\n // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up\\n const target = this.target === this.player.media ? this.target : this.player.elements.container;\\n // Trigger an event\\n triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);\\n });\\n _defineProperty$1(this, \\\"toggleFallback\\\", (toggle = false) => {\\n // Store or restore scroll position\\n if (toggle) {\\n this.scrollPosition = {\\n x: window.scrollX ?? 0,\\n y: window.scrollY ?? 0\\n };\\n } else {\\n window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);\\n }\\n\\n // Toggle scroll\\n document.body.style.overflow = toggle ? 'hidden' : '';\\n\\n // Toggle class hook\\n toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle);\\n\\n // Force full viewport on iPhone X+\\n if (browser.isIos) {\\n let viewport = document.head.querySelector('meta[name=\\\"viewport\\\"]');\\n const property = 'viewport-fit=cover';\\n\\n // Inject the viewport meta if required\\n if (!viewport) {\\n viewport = document.createElement('meta');\\n viewport.setAttribute('name', 'viewport');\\n }\\n\\n // Check if the property already exists\\n const hasProperty = is.string(viewport.content) && viewport.content.includes(property);\\n if (toggle) {\\n this.cleanupViewport = !hasProperty;\\n if (!hasProperty) viewport.content += `,${property}`;\\n } else if (this.cleanupViewport) {\\n viewport.content = viewport.content.split(',').filter(part => part.trim() !== property).join(',');\\n }\\n }\\n\\n // Toggle button and fire events\\n this.onChange();\\n });\\n // Trap focus inside container\\n _defineProperty$1(this, \\\"trapFocus\\\", event => {\\n // Bail if iOS/iPadOS, not active, not the tab key\\n if (browser.isIos || browser.isIPadOS || !this.active || event.key !== 'Tab') return;\\n\\n // Get the current focused element\\n const focused = document.activeElement;\\n const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');\\n const [first] = focusable;\\n const last = focusable[focusable.length - 1];\\n if (focused === last && !event.shiftKey) {\\n // Move focus to first element that can be tabbed if Shift isn't used\\n first.focus();\\n event.preventDefault();\\n } else if (focused === first && event.shiftKey) {\\n // Move focus to last element that can be tabbed if Shift is used\\n last.focus();\\n event.preventDefault();\\n }\\n });\\n // Update UI\\n _defineProperty$1(this, \\\"update\\\", () => {\\n if (this.supported) {\\n let mode;\\n if (this.forceFallback) mode = 'Fallback (forced)';else if (Fullscreen.nativeSupported) mode = 'Native';else mode = 'Fallback';\\n this.player.debug.log(`${mode} fullscreen enabled`);\\n } else {\\n this.player.debug.log('Fullscreen not supported and fallback disabled');\\n }\\n\\n // Add styling hook to show button\\n toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.supported);\\n });\\n // Make an element fullscreen\\n _defineProperty$1(this, \\\"enter\\\", () => {\\n if (!this.supported) return;\\n\\n // iOS native fullscreen doesn't need the request step\\n if (browser.isIos && this.player.config.fullscreen.iosNative) {\\n if (this.player.isVimeo) {\\n this.player.embed.requestFullscreen();\\n } else {\\n this.target.webkitEnterFullscreen();\\n }\\n } else if (!Fullscreen.nativeSupported || this.forceFallback) {\\n this.toggleFallback(true);\\n } else if (!this.prefix) {\\n this.target.requestFullscreen({\\n navigationUI: 'hide'\\n });\\n } else if (!is.empty(this.prefix)) {\\n this.target[`${this.prefix}Request${this.property}`]();\\n }\\n });\\n // Bail from fullscreen\\n _defineProperty$1(this, \\\"exit\\\", () => {\\n if (!this.supported) return;\\n\\n // iOS native fullscreen\\n if (browser.isIos && this.player.config.fullscreen.iosNative) {\\n if (this.player.isVimeo) {\\n this.player.embed.exitFullscreen();\\n } else {\\n this.target.webkitEnterFullscreen();\\n }\\n silencePromise(this.player.play());\\n } else if (!Fullscreen.nativeSupported || this.forceFallback) {\\n this.toggleFallback(false);\\n } else if (!this.prefix) {\\n (document.cancelFullScreen || document.exitFullscreen).call(document);\\n } else if (!is.empty(this.prefix)) {\\n const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';\\n document[`${this.prefix}${action}${this.property}`]();\\n }\\n });\\n // Toggle state\\n _defineProperty$1(this, \\\"toggle\\\", () => {\\n if (!this.active) this.enter();else this.exit();\\n });\\n // Keep reference to parent\\n this.player = player;\\n\\n // Get prefix\\n this.prefix = Fullscreen.prefix;\\n this.property = Fullscreen.property;\\n\\n // Scroll position\\n this.scrollPosition = {\\n x: 0,\\n y: 0\\n };\\n\\n // Force the use of 'full window/browser' rather than fullscreen\\n this.forceFallback = player.config.fullscreen.fallback === 'force';\\n\\n // Get the fullscreen element\\n // Checks container is an ancestor, defaults to null\\n this.player.elements.fullscreen = player.config.fullscreen.container && closest$1(this.player.elements.container, player.config.fullscreen.container);\\n\\n // Register event listeners\\n // Handle event (incase user presses escape etc)\\n on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => {\\n // TODO: Filter for target??\\n this.onChange();\\n });\\n\\n // Fullscreen toggle on double click\\n on.call(this.player, this.player.elements.container, 'dblclick', event => {\\n // Ignore double click in controls\\n if (is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) {\\n return;\\n }\\n this.player.listeners.proxy(event, this.toggle, 'fullscreen');\\n });\\n\\n // Tap focus when in fullscreen\\n on.call(this, this.player.elements.container, 'keydown', event => this.trapFocus(event));\\n\\n // Update the UI\\n this.update();\\n }\\n\\n // Determine if native supported\\n static get nativeSupported() {\\n return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);\\n }\\n\\n // If we're actually using native\\n get useNative() {\\n return Fullscreen.nativeSupported && !this.forceFallback;\\n }\\n\\n // Get the prefix for handlers\\n static get prefix() {\\n // No prefix\\n if (is.function(document.exitFullscreen)) return '';\\n\\n // Check for fullscreen support by vendor prefix\\n let value = '';\\n const prefixes = ['webkit', 'moz', 'ms'];\\n prefixes.some(pre => {\\n if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) {\\n value = pre;\\n return true;\\n }\\n return false;\\n });\\n return value;\\n }\\n static get property() {\\n return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';\\n }\\n\\n // Determine if fullscreen is supported\\n get supported() {\\n return [\\n // Fullscreen is enabled in config\\n this.player.config.fullscreen.enabled,\\n // Must be a video\\n this.player.isVideo,\\n // Either native is supported or fallback enabled\\n Fullscreen.nativeSupported || this.player.config.fullscreen.fallback,\\n // YouTube has no way to trigger fullscreen, so on devices with no native support, playsinline\\n // must be enabled and iosNative fullscreen must be disabled to offer the fullscreen fallback\\n !this.player.isYouTube || Fullscreen.nativeSupported || !browser.isIos || this.player.config.playsinline && !this.player.config.fullscreen.iosNative].every(Boolean);\\n }\\n\\n // Get active state\\n get active() {\\n if (!this.supported) return false;\\n\\n // Fallback using classname\\n if (!Fullscreen.nativeSupported || this.forceFallback) {\\n return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);\\n }\\n const element = !this.prefix ? this.target.getRootNode().fullscreenElement : this.target.getRootNode()[`${this.prefix}${this.property}Element`];\\n return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;\\n }\\n\\n // Get target element\\n get target() {\\n return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.fullscreen ?? this.player.elements.container;\\n }\\n }\\n\\n // ==========================================================================\\n // Load image avoiding xhr/fetch CORS issues\\n // Server status can't be obtained this way unfortunately, so this uses \\\"naturalWidth\\\" to determine if the image has loaded\\n // By default it checks if it is at least 1px, but you can add a second argument to change this\\n // ==========================================================================\\n\\n function loadImage(src, minWidth = 1) {\\n return new Promise((resolve, reject) => {\\n const image = new Image();\\n const handler = () => {\\n delete image.onload;\\n delete image.onerror;\\n (image.naturalWidth >= minWidth ? resolve : reject)(image);\\n };\\n Object.assign(image, {\\n onload: handler,\\n onerror: handler,\\n src\\n });\\n });\\n }\\n\\n // ==========================================================================\\n const ui = {\\n addStyleHook() {\\n toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);\\n toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);\\n },\\n // Toggle native HTML5 media controls\\n toggleNativeControls(toggle = false) {\\n if (toggle && this.isHTML5) {\\n this.media.setAttribute('controls', '');\\n } else {\\n this.media.removeAttribute('controls');\\n }\\n },\\n // Setup the UI\\n build() {\\n // Re-attach media element listeners\\n // TODO: Use event bubbling?\\n this.listeners.media();\\n\\n // Don't setup interface if no support\\n if (!this.supported.ui) {\\n this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);\\n\\n // Restore native controls\\n ui.toggleNativeControls.call(this, true);\\n\\n // Bail\\n return;\\n }\\n\\n // Inject custom controls if not present\\n if (!is.element(this.elements.controls)) {\\n // Inject custom controls\\n controls.inject.call(this);\\n\\n // Re-attach control listeners\\n this.listeners.controls();\\n }\\n\\n // Remove native controls\\n ui.toggleNativeControls.call(this);\\n\\n // Setup captions for HTML5\\n if (this.isHTML5) {\\n captions.setup.call(this);\\n }\\n\\n // Reset volume\\n this.volume = null;\\n\\n // Reset mute state\\n this.muted = null;\\n\\n // Reset loop state\\n this.loop = null;\\n\\n // Reset quality setting\\n this.quality = null;\\n\\n // Reset speed\\n this.speed = null;\\n\\n // Reset volume display\\n controls.updateVolume.call(this);\\n\\n // Reset time display\\n controls.timeUpdate.call(this);\\n\\n // Reset duration display\\n controls.durationUpdate.call(this);\\n\\n // Update the UI\\n ui.checkPlaying.call(this);\\n\\n // Check for picture-in-picture support\\n toggleClass(this.elements.container, this.config.classNames.pip.supported, support.pip && this.isHTML5 && this.isVideo);\\n\\n // Check for airplay support\\n toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);\\n\\n // Add touch class\\n toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);\\n\\n // Ready for API calls\\n this.ready = true;\\n\\n // Ready event at end of execution stack\\n setTimeout(() => {\\n triggerEvent.call(this, this.media, 'ready');\\n }, 0);\\n\\n // Set the title\\n ui.setTitle.call(this);\\n\\n // Assure the poster image is set, if the property was added before the element was created\\n if (this.poster) {\\n ui.setPoster.call(this, this.poster, false).catch(() => {});\\n }\\n\\n // Manually set the duration if user has overridden it.\\n // The event listeners for it doesn't get called if preload is disabled (#701)\\n if (this.config.duration) {\\n controls.durationUpdate.call(this);\\n }\\n\\n // Media metadata\\n if (this.config.mediaMetadata) {\\n controls.setMediaMetadata.call(this);\\n }\\n },\\n // Setup aria attribute for play and iframe title\\n setTitle() {\\n // Find the current text\\n let label = i18n.get('play', this.config);\\n\\n // If there's a media title set, use that for the label\\n if (is.string(this.config.title) && !is.empty(this.config.title)) {\\n label += `, ${this.config.title}`;\\n }\\n\\n // If there's a play button, set label\\n Array.from(this.elements.buttons.play || []).forEach(button => {\\n button.setAttribute('aria-label', label);\\n });\\n\\n // Set iframe title\\n // https://github.com/sampotts/plyr/issues/124\\n if (this.isEmbed) {\\n const iframe = getElement.call(this, 'iframe');\\n if (!is.element(iframe)) {\\n return;\\n }\\n\\n // Default to media type\\n const title = !is.empty(this.config.title) ? this.config.title : 'video';\\n const format = i18n.get('frameTitle', this.config);\\n iframe.setAttribute('title', format.replace('{title}', title));\\n }\\n },\\n // Toggle poster\\n togglePoster(enable) {\\n toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);\\n },\\n // Set the poster image (async)\\n // Used internally for the poster setter, with the passive option forced to false\\n setPoster(poster, passive = true) {\\n // Don't override if call is passive\\n if (passive && this.poster) {\\n return Promise.reject(new Error('Poster already set'));\\n }\\n\\n // Set property synchronously to respect the call order\\n this.media.setAttribute('data-poster', poster);\\n\\n // Show the poster\\n this.elements.poster.removeAttribute('hidden');\\n\\n // Wait until ui is ready\\n return ready.call(this)\\n // Load image\\n .then(() => loadImage(poster)).catch(error => {\\n // Hide poster on error unless it's been set by another call\\n if (poster === this.poster) {\\n ui.togglePoster.call(this, false);\\n }\\n // Rethrow\\n throw error;\\n }).then(() => {\\n // Prevent race conditions\\n if (poster !== this.poster) {\\n throw new Error('setPoster cancelled by later call to setPoster');\\n }\\n }).then(() => {\\n Object.assign(this.elements.poster.style, {\\n backgroundImage: `url('${poster}')`,\\n // Reset backgroundSize as well (since it can be set to \\\"cover\\\" for padded thumbnails for youtube)\\n backgroundSize: ''\\n });\\n ui.togglePoster.call(this, true);\\n return poster;\\n });\\n },\\n // Check playing state\\n checkPlaying(event) {\\n // Class hooks\\n toggleClass(this.elements.container, this.config.classNames.playing, this.playing);\\n toggleClass(this.elements.container, this.config.classNames.paused, this.paused);\\n toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);\\n\\n // Set state\\n Array.from(this.elements.buttons.play || []).forEach(target => {\\n Object.assign(target, {\\n pressed: this.playing\\n });\\n target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));\\n });\\n\\n // Only update controls on non timeupdate events\\n if (is.event(event) && event.type === 'timeupdate') {\\n return;\\n }\\n\\n // Toggle controls\\n ui.toggleControls.call(this);\\n },\\n // Check if media is loading\\n checkLoading(event) {\\n this.loading = ['stalled', 'waiting'].includes(event.type);\\n\\n // Clear timer\\n clearTimeout(this.timers.loading);\\n\\n // Timer to prevent flicker when seeking\\n this.timers.loading = setTimeout(() => {\\n // Update progress bar loading class state\\n toggleClass(this.elements.container, this.config.classNames.loading, this.loading);\\n\\n // Update controls visibility\\n ui.toggleControls.call(this);\\n }, this.loading ? 250 : 0);\\n },\\n // Toggle controls based on state and `force` argument\\n toggleControls(force) {\\n const {\\n controls: controlsElement\\n } = this.elements;\\n if (controlsElement && this.config.hideControls) {\\n // Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)\\n const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();\\n\\n // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide\\n this.toggleControls(Boolean(force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek));\\n }\\n },\\n // Migrate any custom properties from the media to the parent\\n migrateStyles() {\\n // Loop through values (as they are the keys when the object is spread 🤔)\\n Object.values({\\n ...this.media.style\\n })\\n // We're only fussed about Plyr specific properties\\n .filter(key => !is.empty(key) && is.string(key) && key.startsWith('--plyr')).forEach(key => {\\n // Set on the container\\n this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));\\n\\n // Clean up from media element\\n this.media.style.removeProperty(key);\\n });\\n\\n // Remove attribute if empty\\n if (is.empty(this.media.style)) {\\n this.media.removeAttribute('style');\\n }\\n }\\n };\\n\\n class Listeners {\\n constructor(_player) {\\n // Device is touch enabled\\n _defineProperty$1(this, \\\"firstTouch\\\", () => {\\n const {\\n player\\n } = this;\\n const {\\n elements\\n } = player;\\n player.touch = true;\\n\\n // Add touch class\\n toggleClass(elements.container, player.config.classNames.isTouch, true);\\n });\\n // Global window & document listeners\\n _defineProperty$1(this, \\\"global\\\", (toggle = true) => {\\n const {\\n player\\n } = this;\\n\\n // Keyboard shortcuts\\n if (player.config.keyboard.global) {\\n toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false);\\n }\\n\\n // Click anywhere closes menu\\n toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle);\\n\\n // Detect touch by events\\n once.call(player, document.body, 'touchstart', this.firstTouch);\\n });\\n // Container listeners\\n _defineProperty$1(this, \\\"container\\\", () => {\\n const {\\n player\\n } = this;\\n const {\\n config,\\n elements,\\n timers\\n } = player;\\n\\n // Keyboard shortcuts\\n if (!config.keyboard.global && config.keyboard.focused) {\\n on.call(player, elements.container, 'keydown keyup', this.handleKey, false);\\n }\\n\\n // Toggle controls on mouse events and entering fullscreen\\n on.call(player, elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', event => {\\n const {\\n controls: controlsElement\\n } = elements;\\n\\n // Remove button states for fullscreen\\n if (controlsElement && event.type === 'enterfullscreen') {\\n controlsElement.pressed = false;\\n controlsElement.hover = false;\\n }\\n\\n // Show, then hide after a timeout unless another control event occurs\\n const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);\\n let delay = 0;\\n if (show) {\\n ui.toggleControls.call(player, true);\\n // Use longer timeout for touch devices\\n delay = player.touch ? 3000 : 2000;\\n }\\n\\n // Clear timer\\n clearTimeout(timers.controls);\\n\\n // Set new timer to prevent flicker when seeking\\n timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);\\n });\\n\\n // Set a gutter for Vimeo\\n const setGutter = () => {\\n if (!player.isVimeo || player.config.vimeo.premium) {\\n return;\\n }\\n const target = elements.wrapper;\\n const {\\n active\\n } = player.fullscreen;\\n const [videoWidth, videoHeight] = getAspectRatio.call(player);\\n const useNativeAspectRatio = supportsCSS(`aspect-ratio: ${videoWidth} / ${videoHeight}`);\\n\\n // If not active, remove styles\\n if (!active) {\\n if (useNativeAspectRatio) {\\n target.style.width = null;\\n target.style.height = null;\\n } else {\\n target.style.maxWidth = null;\\n target.style.margin = null;\\n }\\n return;\\n }\\n\\n // Determine which dimension will overflow and constrain view\\n const [viewportWidth, viewportHeight] = getViewportSize();\\n const overflow = viewportWidth / viewportHeight > videoWidth / videoHeight;\\n if (useNativeAspectRatio) {\\n target.style.width = overflow ? 'auto' : '100%';\\n target.style.height = overflow ? '100%' : 'auto';\\n } else {\\n target.style.maxWidth = overflow ? `${viewportHeight / videoHeight * videoWidth}px` : null;\\n target.style.margin = overflow ? '0 auto' : null;\\n }\\n };\\n\\n // Handle resizing\\n const resized = () => {\\n clearTimeout(timers.resized);\\n timers.resized = setTimeout(setGutter, 50);\\n };\\n on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {\\n const {\\n target\\n } = player.fullscreen;\\n\\n // Ignore events not from target\\n if (target !== elements.container) {\\n return;\\n }\\n\\n // If it's not an embed and no ratio specified\\n if (!player.isEmbed && is.empty(player.config.ratio)) {\\n return;\\n }\\n\\n // Set Vimeo gutter\\n setGutter();\\n\\n // Watch for resizes\\n const method = event.type === 'enterfullscreen' ? on : off;\\n method.call(player, window, 'resize', resized);\\n });\\n });\\n // Listen for media events\\n _defineProperty$1(this, \\\"media\\\", () => {\\n const {\\n player\\n } = this;\\n const {\\n elements\\n } = player;\\n\\n // Time change on media\\n on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));\\n\\n // Display duration\\n on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event => controls.durationUpdate.call(player, event));\\n\\n // Handle the media finishing\\n on.call(player, player.media, 'ended', () => {\\n // Show poster on end\\n if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {\\n // Restart\\n player.restart();\\n\\n // Call pause otherwise IE11 will start playing the video again\\n player.pause();\\n }\\n });\\n\\n // Check for buffer progress\\n on.call(player, player.media, 'progress playing seeking seeked', event => controls.updateProgress.call(player, event));\\n\\n // Handle volume changes\\n on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));\\n\\n // Handle play/pause\\n on.call(player, player.media, 'playing play pause ended emptied timeupdate', event => ui.checkPlaying.call(player, event));\\n\\n // Loading state\\n on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));\\n\\n // Click video\\n if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {\\n // Re-fetch the wrapper\\n const wrapper = getElement.call(player, `.${player.config.classNames.video}`);\\n\\n // Bail if there's no wrapper (this should never happen)\\n if (!is.element(wrapper)) {\\n return;\\n }\\n\\n // On click play, pause or restart\\n on.call(player, elements.container, 'click', event => {\\n const targets = [elements.container, wrapper];\\n\\n // Ignore if click if not container or in video wrapper\\n if (!targets.includes(event.target) && !wrapper.contains(event.target)) {\\n return;\\n }\\n\\n // Touch devices will just show controls (if hidden)\\n if (player.touch && player.config.hideControls) {\\n return;\\n }\\n if (player.ended) {\\n this.proxy(event, player.restart, 'restart');\\n this.proxy(event, () => {\\n silencePromise(player.play());\\n }, 'play');\\n } else {\\n this.proxy(event, () => {\\n silencePromise(player.togglePlay());\\n }, 'play');\\n }\\n });\\n }\\n\\n // Disable right click\\n if (player.supported.ui && player.config.disableContextMenu) {\\n on.call(player, elements.wrapper, 'contextmenu', event => {\\n event.preventDefault();\\n }, false);\\n }\\n\\n // Volume change\\n on.call(player, player.media, 'volumechange', () => {\\n // Save to storage\\n player.storage.set({\\n volume: player.volume,\\n muted: player.muted\\n });\\n });\\n\\n // Speed change\\n on.call(player, player.media, 'ratechange', () => {\\n // Update UI\\n controls.updateSetting.call(player, 'speed');\\n\\n // Save to storage\\n player.storage.set({\\n speed: player.speed\\n });\\n });\\n\\n // Quality change\\n on.call(player, player.media, 'qualitychange', event => {\\n // Update UI\\n controls.updateSetting.call(player, 'quality', null, event.detail.quality);\\n });\\n\\n // Update download link when ready and if quality changes\\n on.call(player, player.media, 'ready qualitychange', () => {\\n controls.setDownloadUrl.call(player);\\n });\\n\\n // Proxy events to container\\n // Bubble up key events for Edge\\n const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');\\n on.call(player, player.media, proxyEvents, event => {\\n let {\\n detail = {}\\n } = event;\\n\\n // Get error details from media\\n if (event.type === 'error') {\\n detail = player.media.error;\\n }\\n triggerEvent.call(player, elements.container, event.type, true, detail);\\n });\\n });\\n // Run default and custom handlers\\n _defineProperty$1(this, \\\"proxy\\\", (event, defaultHandler, customHandlerKey) => {\\n const {\\n player\\n } = this;\\n const customHandler = player.config.listeners[customHandlerKey];\\n const hasCustomHandler = is.function(customHandler);\\n let returned = true;\\n\\n // Execute custom handler\\n if (hasCustomHandler) {\\n returned = customHandler.call(player, event);\\n }\\n\\n // Only call default handler if not prevented in custom handler\\n if (returned !== false && is.function(defaultHandler)) {\\n defaultHandler.call(player, event);\\n }\\n });\\n // Trigger custom and default handlers\\n _defineProperty$1(this, \\\"bind\\\", (element, type, defaultHandler, customHandlerKey, passive = true) => {\\n const {\\n player\\n } = this;\\n const customHandler = player.config.listeners[customHandlerKey];\\n const hasCustomHandler = is.function(customHandler);\\n on.call(player, element, type, event => this.proxy(event, defaultHandler, customHandlerKey), passive && !hasCustomHandler);\\n });\\n // Listen for control events\\n _defineProperty$1(this, \\\"controls\\\", () => {\\n const {\\n player\\n } = this;\\n const {\\n elements\\n } = player;\\n // IE doesn't support input event, so we fallback to change\\n const inputEvent = browser.isIE ? 'change' : 'input';\\n\\n // Play/pause toggle\\n if (elements.buttons.play) {\\n Array.from(elements.buttons.play).forEach(button => {\\n this.bind(button, 'click', () => {\\n silencePromise(player.togglePlay());\\n }, 'play');\\n });\\n }\\n\\n // Pause\\n this.bind(elements.buttons.restart, 'click', player.restart, 'restart');\\n\\n // Rewind\\n this.bind(elements.buttons.rewind, 'click', () => {\\n // Record seek time so we can prevent hiding controls for a few seconds after rewind\\n player.lastSeekTime = Date.now();\\n player.rewind();\\n }, 'rewind');\\n\\n // Rewind\\n this.bind(elements.buttons.fastForward, 'click', () => {\\n // Record seek time so we can prevent hiding controls for a few seconds after fast forward\\n player.lastSeekTime = Date.now();\\n player.forward();\\n }, 'fastForward');\\n\\n // Mute toggle\\n this.bind(elements.buttons.mute, 'click', () => {\\n player.muted = !player.muted;\\n }, 'mute');\\n\\n // Captions toggle\\n this.bind(elements.buttons.captions, 'click', () => player.toggleCaptions());\\n\\n // Download\\n this.bind(elements.buttons.download, 'click', () => {\\n triggerEvent.call(player, player.media, 'download');\\n }, 'download');\\n\\n // Fullscreen toggle\\n this.bind(elements.buttons.fullscreen, 'click', () => {\\n player.fullscreen.toggle();\\n }, 'fullscreen');\\n\\n // Picture-in-Picture\\n this.bind(elements.buttons.pip, 'click', () => {\\n player.pip = 'toggle';\\n }, 'pip');\\n\\n // Airplay\\n this.bind(elements.buttons.airplay, 'click', player.airplay, 'airplay');\\n\\n // Settings menu - click toggle\\n this.bind(elements.buttons.settings, 'click', event => {\\n // Prevent the document click listener closing the menu\\n event.stopPropagation();\\n event.preventDefault();\\n controls.toggleMenu.call(player, event);\\n }, null, false); // Can't be passive as we're preventing default\\n\\n // Settings menu - keyboard toggle\\n // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus\\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\\n this.bind(elements.buttons.settings, 'keyup', event => {\\n if (![' ', 'Enter'].includes(event.key)) {\\n return;\\n }\\n\\n // Because return triggers a click anyway, all we need to do is set focus\\n if (event.key === 'Enter') {\\n controls.focusFirstMenuItem.call(player, null, true);\\n return;\\n }\\n\\n // Prevent scroll\\n event.preventDefault();\\n\\n // Prevent playing video (Firefox)\\n event.stopPropagation();\\n\\n // Toggle menu\\n controls.toggleMenu.call(player, event);\\n }, null, false // Can't be passive as we're preventing default\\n );\\n\\n // Escape closes menu\\n this.bind(elements.settings.menu, 'keydown', event => {\\n if (event.key === 'Escape') {\\n controls.toggleMenu.call(player, event);\\n }\\n });\\n\\n // Set range input alternative \\\"value\\\", which matches the tooltip time (#954)\\n this.bind(elements.inputs.seek, 'mousedown mousemove', event => {\\n const rect = elements.progress.getBoundingClientRect();\\n const percent = 100 / rect.width * (event.pageX - rect.left);\\n event.currentTarget.setAttribute('seek-value', percent);\\n });\\n\\n // Pause while seeking\\n this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {\\n const seek = event.currentTarget;\\n const attribute = 'play-on-seeked';\\n if (is.keyboardEvent(event) && !['ArrowLeft', 'ArrowRight'].includes(event.key)) {\\n return;\\n }\\n\\n // Record seek time so we can prevent hiding controls for a few seconds after seek\\n player.lastSeekTime = Date.now();\\n\\n // Was playing before?\\n const play = seek.hasAttribute(attribute);\\n // Done seeking\\n const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);\\n\\n // If we're done seeking and it was playing, resume playback\\n if (play && done) {\\n seek.removeAttribute(attribute);\\n silencePromise(player.play());\\n } else if (!done && player.playing) {\\n seek.setAttribute(attribute, '');\\n player.pause();\\n }\\n });\\n\\n // Fix range inputs on iOS\\n // Super weird iOS bug where after you interact with an ,\\n // it takes over further interactions on the page. This is a hack\\n if (browser.isIos) {\\n const inputs = getElements.call(player, 'input[type=\\\"range\\\"]');\\n Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));\\n }\\n\\n // Seek\\n this.bind(elements.inputs.seek, inputEvent, event => {\\n const seek = event.currentTarget;\\n // If it exists, use seek-value instead of \\\"value\\\" for consistency with tooltip time (#954)\\n let seekTo = seek.getAttribute('seek-value');\\n if (is.empty(seekTo)) {\\n seekTo = seek.value;\\n }\\n seek.removeAttribute('seek-value');\\n player.currentTime = seekTo / seek.max * player.duration;\\n }, 'seek');\\n\\n // Seek tooltip\\n this.bind(elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(player, event));\\n\\n // Preview thumbnails plugin\\n // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this\\n this.bind(elements.progress, 'mousemove touchmove', event => {\\n const {\\n previewThumbnails\\n } = player;\\n if (previewThumbnails && previewThumbnails.loaded) {\\n previewThumbnails.startMove(event);\\n }\\n });\\n\\n // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering\\n this.bind(elements.progress, 'mouseleave touchend click', () => {\\n const {\\n previewThumbnails\\n } = player;\\n if (previewThumbnails && previewThumbnails.loaded) {\\n previewThumbnails.endMove(false, true);\\n }\\n });\\n\\n // Show scrubbing preview\\n this.bind(elements.progress, 'mousedown touchstart', event => {\\n const {\\n previewThumbnails\\n } = player;\\n if (previewThumbnails && previewThumbnails.loaded) {\\n previewThumbnails.startScrubbing(event);\\n }\\n });\\n this.bind(elements.progress, 'mouseup touchend', event => {\\n const {\\n previewThumbnails\\n } = player;\\n if (previewThumbnails && previewThumbnails.loaded) {\\n previewThumbnails.endScrubbing(event);\\n }\\n });\\n\\n // Polyfill for lower fill in for webkit\\n if (browser.isWebKit) {\\n Array.from(getElements.call(player, 'input[type=\\\"range\\\"]')).forEach(element => {\\n this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));\\n });\\n }\\n\\n // Current time invert\\n // Only if one time element is used for both currentTime and duration\\n if (player.config.toggleInvert && !is.element(elements.display.duration)) {\\n this.bind(elements.display.currentTime, 'click', () => {\\n // Do nothing if we're at the start\\n if (player.currentTime === 0) {\\n return;\\n }\\n player.config.invertTime = !player.config.invertTime;\\n controls.timeUpdate.call(player);\\n });\\n }\\n\\n // Volume\\n this.bind(elements.inputs.volume, inputEvent, event => {\\n player.volume = event.target.value;\\n }, 'volume');\\n\\n // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)\\n this.bind(elements.controls, 'mouseenter mouseleave', event => {\\n elements.controls.hover = !player.touch && event.type === 'mouseenter';\\n });\\n\\n // Also update controls.hover state for any non-player children of fullscreen element (as above)\\n if (elements.fullscreen) {\\n Array.from(elements.fullscreen.children).filter(c => !c.contains(elements.container)).forEach(child => {\\n this.bind(child, 'mouseenter mouseleave', event => {\\n if (elements.controls) {\\n elements.controls.hover = !player.touch && event.type === 'mouseenter';\\n }\\n });\\n });\\n }\\n\\n // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)\\n this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {\\n elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);\\n });\\n\\n // Show controls when they receive focus (e.g., when using keyboard tab key)\\n this.bind(elements.controls, 'focusin', () => {\\n const {\\n config,\\n timers\\n } = player;\\n\\n // Skip transition to prevent focus from scrolling the parent element\\n toggleClass(elements.controls, config.classNames.noTransition, true);\\n\\n // Toggle\\n ui.toggleControls.call(player, true);\\n\\n // Restore transition\\n setTimeout(() => {\\n toggleClass(elements.controls, config.classNames.noTransition, false);\\n }, 0);\\n\\n // Delay a little more for mouse users\\n const delay = this.touch ? 3000 : 4000;\\n\\n // Clear timer\\n clearTimeout(timers.controls);\\n\\n // Hide again after delay\\n timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);\\n });\\n\\n // Mouse wheel for volume\\n this.bind(elements.inputs.volume, 'wheel', event => {\\n // Detect \\\"natural\\\" scroll - supported on OS X Safari only\\n // Other browsers on OS X will be inverted until support improves\\n const inverted = event.webkitDirectionInvertedFromDevice;\\n // Get delta from event. Invert if `inverted` is true\\n const [x, y] = [event.deltaX, -event.deltaY].map(value => inverted ? -value : value);\\n // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)\\n const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);\\n\\n // Change the volume by 2%\\n player.increaseVolume(direction / 50);\\n\\n // Don't break page scrolling at max and min\\n const {\\n volume\\n } = player.media;\\n if (direction === 1 && volume < 1 || direction === -1 && volume > 0) {\\n event.preventDefault();\\n }\\n }, 'volume', false);\\n });\\n this.player = _player;\\n this.lastKey = null;\\n this.focusTimer = null;\\n this.lastKeyDown = null;\\n this.handleKey = this.handleKey.bind(this);\\n this.toggleMenu = this.toggleMenu.bind(this);\\n this.firstTouch = this.firstTouch.bind(this);\\n }\\n\\n // Handle key presses\\n handleKey(event) {\\n const {\\n player\\n } = this;\\n const {\\n elements\\n } = player;\\n const {\\n key,\\n type,\\n altKey,\\n ctrlKey,\\n metaKey,\\n shiftKey\\n } = event;\\n const pressed = type === 'keydown';\\n const repeat = pressed && key === this.lastKey;\\n\\n // Bail if a modifier key is set\\n if (altKey || ctrlKey || metaKey || shiftKey) {\\n return;\\n }\\n\\n // If the event is bubbled from the media element\\n // Firefox doesn't get the key for whatever reason\\n if (!key) {\\n return;\\n }\\n\\n // Seek by increment\\n const seekByIncrement = increment => {\\n // Divide the max duration into 10th's and times by the number value\\n player.currentTime = player.duration / 10 * increment;\\n };\\n\\n // Handle the key on keydown\\n // Reset on keyup\\n if (pressed) {\\n // Check focused element\\n // and if the focused element is not editable (e.g. text input)\\n // and any that accept key input http://webaim.org/techniques/keyboard/\\n const focused = document.activeElement;\\n if (is.element(focused)) {\\n const {\\n editable\\n } = player.config.selectors;\\n const {\\n seek\\n } = elements.inputs;\\n if (focused !== seek && matches(focused, editable)) {\\n return;\\n }\\n if (event.key === ' ' && matches(focused, 'button, [role^=\\\"menuitem\\\"]')) {\\n return;\\n }\\n }\\n\\n // Which keys should we prevent default\\n const preventDefault = [' ', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'c', 'f', 'k', 'l', 'm'];\\n\\n // If the key is found prevent default (e.g. prevent scrolling for arrows)\\n if (preventDefault.includes(key)) {\\n event.preventDefault();\\n event.stopPropagation();\\n }\\n switch (key) {\\n case '0':\\n case '1':\\n case '2':\\n case '3':\\n case '4':\\n case '5':\\n case '6':\\n case '7':\\n case '8':\\n case '9':\\n if (!repeat) {\\n seekByIncrement(parseInt(key, 10));\\n }\\n break;\\n case ' ':\\n case 'k':\\n if (!repeat) {\\n silencePromise(player.togglePlay());\\n }\\n break;\\n case 'ArrowUp':\\n player.increaseVolume(0.1);\\n break;\\n case 'ArrowDown':\\n player.decreaseVolume(0.1);\\n break;\\n case 'm':\\n if (!repeat) {\\n player.muted = !player.muted;\\n }\\n break;\\n case 'ArrowRight':\\n player.forward();\\n break;\\n case 'ArrowLeft':\\n player.rewind();\\n break;\\n case 'f':\\n player.fullscreen.toggle();\\n break;\\n case 'c':\\n if (!repeat) {\\n player.toggleCaptions();\\n }\\n break;\\n case 'l':\\n player.loop = !player.loop;\\n break;\\n }\\n\\n // Escape is handle natively when in full screen\\n // So we only need to worry about non native\\n if (key === 'Escape' && !player.fullscreen.usingNative && player.fullscreen.active) {\\n player.fullscreen.toggle();\\n }\\n\\n // Store last key for next cycle\\n this.lastKey = key;\\n } else {\\n this.lastKey = null;\\n }\\n }\\n\\n // Toggle menu\\n toggleMenu(event) {\\n controls.toggleMenu.call(this.player, event);\\n }\\n }\\n\\n var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};\\n\\n function createCommonjsModule(fn, module) {\\n \\treturn module = { exports: {} }, fn(module, module.exports), module.exports;\\n }\\n\\n var loadjs_umd = createCommonjsModule(function (module, exports) {\\n (function (root, factory) {\\n {\\n module.exports = factory();\\n }\\n })(commonjsGlobal, function () {\\n /**\\n * Global dependencies.\\n * @global {Object} document - DOM\\n */\\n\\n var devnull = function () {},\\n bundleIdCache = {},\\n bundleResultCache = {},\\n bundleCallbackQueue = {};\\n\\n /**\\n * Subscribe to bundle load event.\\n * @param {string[]} bundleIds - Bundle ids\\n * @param {Function} callbackFn - The callback function\\n */\\n function subscribe(bundleIds, callbackFn) {\\n // listify\\n bundleIds = bundleIds.push ? bundleIds : [bundleIds];\\n var depsNotFound = [],\\n i = bundleIds.length,\\n numWaiting = i,\\n fn,\\n bundleId,\\n r,\\n q;\\n\\n // define callback function\\n fn = function (bundleId, pathsNotFound) {\\n if (pathsNotFound.length) depsNotFound.push(bundleId);\\n numWaiting--;\\n if (!numWaiting) callbackFn(depsNotFound);\\n };\\n\\n // register callback\\n while (i--) {\\n bundleId = bundleIds[i];\\n\\n // execute callback if in result cache\\n r = bundleResultCache[bundleId];\\n if (r) {\\n fn(bundleId, r);\\n continue;\\n }\\n\\n // add to callback queue\\n q = bundleCallbackQueue[bundleId] = bundleCallbackQueue[bundleId] || [];\\n q.push(fn);\\n }\\n }\\n\\n /**\\n * Publish bundle load event.\\n * @param {string} bundleId - Bundle id\\n * @param {string[]} pathsNotFound - List of files not found\\n */\\n function publish(bundleId, pathsNotFound) {\\n // exit if id isn't defined\\n if (!bundleId) return;\\n var q = bundleCallbackQueue[bundleId];\\n\\n // cache result\\n bundleResultCache[bundleId] = pathsNotFound;\\n\\n // exit if queue is empty\\n if (!q) return;\\n\\n // empty callback queue\\n while (q.length) {\\n q[0](bundleId, pathsNotFound);\\n q.splice(0, 1);\\n }\\n }\\n\\n /**\\n * Execute callbacks.\\n * @param {Object or Function} args - The callback args\\n * @param {string[]} depsNotFound - List of dependencies not found\\n */\\n function executeCallbacks(args, depsNotFound) {\\n // accept function as argument\\n if (args.call) args = {\\n success: args\\n };\\n\\n // success and error callbacks\\n if (depsNotFound.length) (args.error || devnull)(depsNotFound);else (args.success || devnull)(args);\\n }\\n\\n /**\\n * Load individual file.\\n * @param {string} path - The file path\\n * @param {Function} callbackFn - The callback function\\n */\\n function loadFile(path, callbackFn, args, numTries) {\\n var doc = document,\\n async = args.async,\\n maxTries = (args.numRetries || 0) + 1,\\n beforeCallbackFn = args.before || devnull,\\n pathname = path.replace(/[\\\\?|#].*$/, ''),\\n pathStripped = path.replace(/^(css|img)!/, ''),\\n isLegacyIECss,\\n e;\\n numTries = numTries || 0;\\n if (/(^css!|\\\\.css$)/.test(pathname)) {\\n // css\\n e = doc.createElement('link');\\n e.rel = 'stylesheet';\\n e.href = pathStripped;\\n\\n // tag IE9+\\n isLegacyIECss = 'hideFocus' in e;\\n\\n // use preload in IE Edge (to detect load errors)\\n if (isLegacyIECss && e.relList) {\\n isLegacyIECss = 0;\\n e.rel = 'preload';\\n e.as = 'style';\\n }\\n } else if (/(^img!|\\\\.(png|gif|jpg|svg|webp)$)/.test(pathname)) {\\n // image\\n e = doc.createElement('img');\\n e.src = pathStripped;\\n } else {\\n // javascript\\n e = doc.createElement('script');\\n e.src = path;\\n e.async = async === undefined ? true : async;\\n }\\n e.onload = e.onerror = e.onbeforeload = function (ev) {\\n var result = ev.type[0];\\n\\n // treat empty stylesheets as failures to get around lack of onerror\\n // support in IE9-11\\n if (isLegacyIECss) {\\n try {\\n if (!e.sheet.cssText.length) result = 'e';\\n } catch (x) {\\n // sheets objects created from load errors don't allow access to\\n // `cssText` (unless error is Code:18 SecurityError)\\n if (x.code != 18) result = 'e';\\n }\\n }\\n\\n // handle retries in case of load failure\\n if (result == 'e') {\\n // increment counter\\n numTries += 1;\\n\\n // exit function and try again\\n if (numTries < maxTries) {\\n return loadFile(path, callbackFn, args, numTries);\\n }\\n } else if (e.rel == 'preload' && e.as == 'style') {\\n // activate preloaded stylesheets\\n return e.rel = 'stylesheet'; // jshint ignore:line\\n }\\n\\n // execute callback\\n callbackFn(path, result, ev.defaultPrevented);\\n };\\n\\n // add to document (unless callback returns `false`)\\n if (beforeCallbackFn(path, e) !== false) doc.head.appendChild(e);\\n }\\n\\n /**\\n * Load multiple files.\\n * @param {string[]} paths - The file paths\\n * @param {Function} callbackFn - The callback function\\n */\\n function loadFiles(paths, callbackFn, args) {\\n // listify paths\\n paths = paths.push ? paths : [paths];\\n var numWaiting = paths.length,\\n x = numWaiting,\\n pathsNotFound = [],\\n fn,\\n i;\\n\\n // define callback function\\n fn = function (path, result, defaultPrevented) {\\n // handle error\\n if (result == 'e') pathsNotFound.push(path);\\n\\n // handle beforeload event. If defaultPrevented then that means the load\\n // will be blocked (ex. Ghostery/ABP on Safari)\\n if (result == 'b') {\\n if (defaultPrevented) pathsNotFound.push(path);else return;\\n }\\n numWaiting--;\\n if (!numWaiting) callbackFn(pathsNotFound);\\n };\\n\\n // load scripts\\n for (i = 0; i < x; i++) loadFile(paths[i], fn, args);\\n }\\n\\n /**\\n * Initiate script load and register bundle.\\n * @param {(string|string[])} paths - The file paths\\n * @param {(string|Function|Object)} [arg1] - The (1) bundleId or (2) success\\n * callback or (3) object literal with success/error arguments, numRetries,\\n * etc.\\n * @param {(Function|Object)} [arg2] - The (1) success callback or (2) object\\n * literal with success/error arguments, numRetries, etc.\\n */\\n function loadjs(paths, arg1, arg2) {\\n var bundleId, args;\\n\\n // bundleId (if string)\\n if (arg1 && arg1.trim) bundleId = arg1;\\n\\n // args (default is {})\\n args = (bundleId ? arg2 : arg1) || {};\\n\\n // throw error if bundle is already defined\\n if (bundleId) {\\n if (bundleId in bundleIdCache) {\\n throw \\\"LoadJS\\\";\\n } else {\\n bundleIdCache[bundleId] = true;\\n }\\n }\\n function loadFn(resolve, reject) {\\n loadFiles(paths, function (pathsNotFound) {\\n // execute callbacks\\n executeCallbacks(args, pathsNotFound);\\n\\n // resolve Promise\\n if (resolve) {\\n executeCallbacks({\\n success: resolve,\\n error: reject\\n }, pathsNotFound);\\n }\\n\\n // publish bundle load event\\n publish(bundleId, pathsNotFound);\\n }, args);\\n }\\n if (args.returnPromise) return new Promise(loadFn);else loadFn();\\n }\\n\\n /**\\n * Execute callbacks when dependencies have been satisfied.\\n * @param {(string|string[])} deps - List of bundle ids\\n * @param {Object} args - success/error arguments\\n */\\n loadjs.ready = function ready(deps, args) {\\n // subscribe to bundle load event\\n subscribe(deps, function (depsNotFound) {\\n // execute callbacks\\n executeCallbacks(args, depsNotFound);\\n });\\n return loadjs;\\n };\\n\\n /**\\n * Manually satisfy bundle dependencies.\\n * @param {string} bundleId - The bundle id\\n */\\n loadjs.done = function done(bundleId) {\\n publish(bundleId, []);\\n };\\n\\n /**\\n * Reset loadjs dependencies statuses\\n */\\n loadjs.reset = function reset() {\\n bundleIdCache = {};\\n bundleResultCache = {};\\n bundleCallbackQueue = {};\\n };\\n\\n /**\\n * Determine if bundle has already been defined\\n * @param String} bundleId - The bundle id\\n */\\n loadjs.isDefined = function isDefined(bundleId) {\\n return bundleId in bundleIdCache;\\n };\\n\\n // export\\n return loadjs;\\n });\\n });\\n\\n // ==========================================================================\\n function loadScript(url) {\\n return new Promise((resolve, reject) => {\\n loadjs_umd(url, {\\n success: resolve,\\n error: reject\\n });\\n });\\n }\\n\\n // ==========================================================================\\n\\n // Parse Vimeo ID from URL\\n function parseId$1(url) {\\n if (is.empty(url)) {\\n return null;\\n }\\n if (is.number(Number(url))) {\\n return url;\\n }\\n const regex = /^.*(vimeo.com\\\\/|video\\\\/)(\\\\d+).*/;\\n return url.match(regex) ? RegExp.$2 : url;\\n }\\n\\n // Try to extract a hash for private videos from the URL\\n function parseHash(url) {\\n /* This regex matches a hexadecimal hash if given in any of these forms:\\n * - [https://player.]vimeo.com/video/{id}/{hash}[?params]\\n * - [https://player.]vimeo.com/video/{id}?h={hash}[¶ms]\\n * - [https://player.]vimeo.com/video/{id}?[params]&h={hash}\\n * - video/{id}/{hash}\\n * If matched, the hash is available in capture group 4\\n */\\n const regex = /^.*(vimeo.com\\\\/|video\\\\/)(\\\\d+)(\\\\?.*&*h=|\\\\/)+([\\\\d,a-f]+)/;\\n const found = url.match(regex);\\n return found && found.length === 5 ? found[4] : null;\\n }\\n\\n // Set playback state and trigger change (only on actual change)\\n function assurePlaybackState$1(play) {\\n if (play && !this.embed.hasPlayed) {\\n this.embed.hasPlayed = true;\\n }\\n if (this.media.paused === play) {\\n this.media.paused = !play;\\n triggerEvent.call(this, this.media, play ? 'play' : 'pause');\\n }\\n }\\n const vimeo = {\\n setup() {\\n const player = this;\\n\\n // Add embed class for responsive\\n toggleClass(player.elements.wrapper, player.config.classNames.embed, true);\\n\\n // Set speed options from config\\n player.options.speed = player.config.speed.options;\\n\\n // Set intial ratio\\n setAspectRatio.call(player);\\n\\n // Load the SDK if not already\\n if (!is.object(window.Vimeo)) {\\n loadScript(player.config.urls.vimeo.sdk).then(() => {\\n vimeo.ready.call(player);\\n }).catch(error => {\\n player.debug.warn('Vimeo SDK (player.js) failed to load', error);\\n });\\n } else {\\n vimeo.ready.call(player);\\n }\\n },\\n // API Ready\\n ready() {\\n const player = this;\\n const config = player.config.vimeo;\\n const {\\n premium,\\n referrerPolicy,\\n ...frameParams\\n } = config;\\n // Get the source URL or ID\\n let source = player.media.getAttribute('src');\\n let hash = '';\\n // Get from
if needed\\n if (is.empty(source)) {\\n source = player.media.getAttribute(player.config.attributes.embed.id);\\n // hash can also be set as attribute on the
\\n hash = player.media.getAttribute(player.config.attributes.embed.hash);\\n } else {\\n hash = parseHash(source);\\n }\\n const hashParam = hash ? {\\n h: hash\\n } : {};\\n\\n // If the owner has a pro or premium account then we can hide controls etc\\n if (premium) {\\n Object.assign(frameParams, {\\n controls: false,\\n sidedock: false\\n });\\n }\\n\\n // Get Vimeo params for the iframe\\n const params = buildUrlParams({\\n loop: player.config.loop.active,\\n autoplay: player.autoplay,\\n muted: player.muted,\\n gesture: 'media',\\n playsinline: player.config.playsinline,\\n // hash has to be added to iframe-URL\\n ...hashParam,\\n ...frameParams\\n });\\n const id = parseId$1(source);\\n // Build an iframe\\n const iframe = createElement('iframe');\\n const src = format(player.config.urls.vimeo.iframe, id, params);\\n iframe.setAttribute('src', src);\\n iframe.setAttribute('allowfullscreen', '');\\n iframe.setAttribute('allow', ['autoplay', 'fullscreen', 'picture-in-picture', 'encrypted-media', 'accelerometer', 'gyroscope'].join('; '));\\n\\n // Set the referrer policy if required\\n if (!is.empty(referrerPolicy)) {\\n iframe.setAttribute('referrerPolicy', referrerPolicy);\\n }\\n\\n // Inject the package\\n if (premium || !config.customControls) {\\n iframe.setAttribute('data-poster', player.poster);\\n player.media = replaceElement(iframe, player.media);\\n } else {\\n const wrapper = createElement('div', {\\n class: player.config.classNames.embedContainer,\\n 'data-poster': player.poster\\n });\\n wrapper.appendChild(iframe);\\n player.media = replaceElement(wrapper, player.media);\\n }\\n\\n // Get poster image\\n if (!config.customControls) {\\n fetch(format(player.config.urls.vimeo.api, src)).then(response => {\\n if (is.empty(response) || !response.thumbnail_url) {\\n return;\\n }\\n\\n // Set and show poster\\n ui.setPoster.call(player, response.thumbnail_url).catch(() => {});\\n });\\n }\\n\\n // Setup instance\\n // https://github.com/vimeo/player.js\\n player.embed = new window.Vimeo.Player(iframe, {\\n autopause: player.config.autopause,\\n muted: player.muted\\n });\\n player.media.paused = true;\\n player.media.currentTime = 0;\\n\\n // Disable native text track rendering\\n if (player.supported.ui) {\\n player.embed.disableTextTrack();\\n }\\n\\n // Create a faux HTML5 API using the Vimeo API\\n player.media.play = () => {\\n assurePlaybackState$1.call(player, true);\\n return player.embed.play();\\n };\\n player.media.pause = () => {\\n assurePlaybackState$1.call(player, false);\\n return player.embed.pause();\\n };\\n player.media.stop = () => {\\n player.pause();\\n player.currentTime = 0;\\n };\\n\\n // Seeking\\n let {\\n currentTime\\n } = player.media;\\n Object.defineProperty(player.media, 'currentTime', {\\n get() {\\n return currentTime;\\n },\\n set(time) {\\n // Vimeo will automatically play on seek if the video hasn't been played before\\n\\n // Get current paused state and volume etc\\n const {\\n embed,\\n media,\\n paused,\\n volume\\n } = player;\\n const restorePause = paused && !embed.hasPlayed;\\n\\n // Set seeking state and trigger event\\n media.seeking = true;\\n triggerEvent.call(player, media, 'seeking');\\n\\n // If paused, mute until seek is complete\\n Promise.resolve(restorePause && embed.setVolume(0))\\n // Seek\\n .then(() => embed.setCurrentTime(time))\\n // Restore paused\\n .then(() => restorePause && embed.pause())\\n // Restore volume\\n .then(() => restorePause && embed.setVolume(volume)).catch(() => {\\n // Do nothing\\n });\\n }\\n });\\n\\n // Playback speed\\n let speed = player.config.speed.selected;\\n Object.defineProperty(player.media, 'playbackRate', {\\n get() {\\n return speed;\\n },\\n set(input) {\\n player.embed.setPlaybackRate(input).then(() => {\\n speed = input;\\n triggerEvent.call(player, player.media, 'ratechange');\\n }).catch(() => {\\n // Cannot set Playback Rate, Video is probably not on Pro account\\n player.options.speed = [1];\\n });\\n }\\n });\\n\\n // Volume\\n let {\\n volume\\n } = player.config;\\n Object.defineProperty(player.media, 'volume', {\\n get() {\\n return volume;\\n },\\n set(input) {\\n player.embed.setVolume(input).then(() => {\\n volume = input;\\n triggerEvent.call(player, player.media, 'volumechange');\\n });\\n }\\n });\\n\\n // Muted\\n let {\\n muted\\n } = player.config;\\n Object.defineProperty(player.media, 'muted', {\\n get() {\\n return muted;\\n },\\n set(input) {\\n const toggle = is.boolean(input) ? input : false;\\n player.embed.setMuted(toggle ? true : player.config.muted).then(() => {\\n muted = toggle;\\n triggerEvent.call(player, player.media, 'volumechange');\\n });\\n }\\n });\\n\\n // Loop\\n let {\\n loop\\n } = player.config;\\n Object.defineProperty(player.media, 'loop', {\\n get() {\\n return loop;\\n },\\n set(input) {\\n const toggle = is.boolean(input) ? input : player.config.loop.active;\\n player.embed.setLoop(toggle).then(() => {\\n loop = toggle;\\n });\\n }\\n });\\n\\n // Source\\n let currentSrc;\\n player.embed.getVideoUrl().then(value => {\\n currentSrc = value;\\n controls.setDownloadUrl.call(player);\\n }).catch(error => {\\n this.debug.warn(error);\\n });\\n Object.defineProperty(player.media, 'currentSrc', {\\n get() {\\n return currentSrc;\\n }\\n });\\n\\n // Ended\\n Object.defineProperty(player.media, 'ended', {\\n get() {\\n return player.currentTime === player.duration;\\n }\\n });\\n\\n // Set aspect ratio based on video size\\n Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {\\n const [width, height] = dimensions;\\n player.embed.ratio = roundAspectRatio(width, height);\\n setAspectRatio.call(this);\\n });\\n\\n // Set autopause\\n player.embed.setAutopause(player.config.autopause).then(state => {\\n player.config.autopause = state;\\n });\\n\\n // Get title\\n player.embed.getVideoTitle().then(title => {\\n player.config.title = title;\\n ui.setTitle.call(this);\\n });\\n\\n // Get current time\\n player.embed.getCurrentTime().then(value => {\\n currentTime = value;\\n triggerEvent.call(player, player.media, 'timeupdate');\\n });\\n\\n // Get duration\\n player.embed.getDuration().then(value => {\\n player.media.duration = value;\\n triggerEvent.call(player, player.media, 'durationchange');\\n });\\n\\n // Get captions\\n player.embed.getTextTracks().then(tracks => {\\n player.media.textTracks = tracks;\\n captions.setup.call(player);\\n });\\n player.embed.on('cuechange', ({\\n cues = []\\n }) => {\\n const strippedCues = cues.map(cue => stripHTML(cue.text));\\n captions.updateCues.call(player, strippedCues);\\n });\\n player.embed.on('loaded', () => {\\n // Assure state and events are updated on autoplay\\n player.embed.getPaused().then(paused => {\\n assurePlaybackState$1.call(player, !paused);\\n if (!paused) {\\n triggerEvent.call(player, player.media, 'playing');\\n }\\n });\\n if (is.element(player.embed.element) && player.supported.ui) {\\n const frame = player.embed.element;\\n\\n // Fix keyboard focus issues\\n // https://github.com/sampotts/plyr/issues/317\\n frame.setAttribute('tabindex', -1);\\n }\\n });\\n player.embed.on('bufferstart', () => {\\n triggerEvent.call(player, player.media, 'waiting');\\n });\\n player.embed.on('bufferend', () => {\\n triggerEvent.call(player, player.media, 'playing');\\n });\\n player.embed.on('play', () => {\\n assurePlaybackState$1.call(player, true);\\n triggerEvent.call(player, player.media, 'playing');\\n });\\n player.embed.on('pause', () => {\\n assurePlaybackState$1.call(player, false);\\n });\\n player.embed.on('timeupdate', data => {\\n player.media.seeking = false;\\n currentTime = data.seconds;\\n triggerEvent.call(player, player.media, 'timeupdate');\\n });\\n player.embed.on('progress', data => {\\n player.media.buffered = data.percent;\\n triggerEvent.call(player, player.media, 'progress');\\n\\n // Check all loaded\\n if (parseInt(data.percent, 10) === 1) {\\n triggerEvent.call(player, player.media, 'canplaythrough');\\n }\\n\\n // Get duration as if we do it before load, it gives an incorrect value\\n // https://github.com/sampotts/plyr/issues/891\\n player.embed.getDuration().then(value => {\\n if (value !== player.media.duration) {\\n player.media.duration = value;\\n triggerEvent.call(player, player.media, 'durationchange');\\n }\\n });\\n });\\n player.embed.on('seeked', () => {\\n player.media.seeking = false;\\n triggerEvent.call(player, player.media, 'seeked');\\n });\\n player.embed.on('ended', () => {\\n player.media.paused = true;\\n triggerEvent.call(player, player.media, 'ended');\\n });\\n player.embed.on('error', detail => {\\n player.media.error = detail;\\n triggerEvent.call(player, player.media, 'error');\\n });\\n\\n // Rebuild UI\\n if (config.customControls) {\\n setTimeout(() => ui.build.call(player), 0);\\n }\\n }\\n };\\n\\n // ==========================================================================\\n\\n // Parse YouTube ID from URL\\n function parseId(url) {\\n if (is.empty(url)) {\\n return null;\\n }\\n const regex = /^.*(youtu.be\\\\/|v\\\\/|u\\\\/\\\\w\\\\/|embed\\\\/|watch\\\\?v=|&v=)([^#&?]*).*/;\\n return url.match(regex) ? RegExp.$2 : url;\\n }\\n\\n // Set playback state and trigger change (only on actual change)\\n function assurePlaybackState(play) {\\n if (play && !this.embed.hasPlayed) {\\n this.embed.hasPlayed = true;\\n }\\n if (this.media.paused === play) {\\n this.media.paused = !play;\\n triggerEvent.call(this, this.media, play ? 'play' : 'pause');\\n }\\n }\\n function getHost(config) {\\n if (config.noCookie) {\\n return 'https://www.youtube-nocookie.com';\\n }\\n if (window.location.protocol === 'http:') {\\n return 'http://www.youtube.com';\\n }\\n\\n // Use YouTube's default\\n return undefined;\\n }\\n const youtube = {\\n setup() {\\n // Add embed class for responsive\\n toggleClass(this.elements.wrapper, this.config.classNames.embed, true);\\n\\n // Setup API\\n if (is.object(window.YT) && is.function(window.YT.Player)) {\\n youtube.ready.call(this);\\n } else {\\n // Reference current global callback\\n const callback = window.onYouTubeIframeAPIReady;\\n\\n // Set callback to process queue\\n window.onYouTubeIframeAPIReady = () => {\\n // Call global callback if set\\n if (is.function(callback)) {\\n callback();\\n }\\n youtube.ready.call(this);\\n };\\n\\n // Load the SDK\\n loadScript(this.config.urls.youtube.sdk).catch(error => {\\n this.debug.warn('YouTube API failed to load', error);\\n });\\n }\\n },\\n // Get the media title\\n getTitle(videoId) {\\n const url = format(this.config.urls.youtube.api, videoId);\\n fetch(url).then(data => {\\n if (is.object(data)) {\\n const {\\n title,\\n height,\\n width\\n } = data;\\n\\n // Set title\\n this.config.title = title;\\n ui.setTitle.call(this);\\n\\n // Set aspect ratio\\n this.embed.ratio = roundAspectRatio(width, height);\\n }\\n setAspectRatio.call(this);\\n }).catch(() => {\\n // Set aspect ratio\\n setAspectRatio.call(this);\\n });\\n },\\n // API ready\\n ready() {\\n const player = this;\\n const config = player.config.youtube;\\n // Ignore already setup (race condition)\\n const currentId = player.media && player.media.getAttribute('id');\\n if (!is.empty(currentId) && currentId.startsWith('youtube-')) {\\n return;\\n }\\n\\n // Get the source URL or ID\\n let source = player.media.getAttribute('src');\\n\\n // Get from
if needed\\n if (is.empty(source)) {\\n source = player.media.getAttribute(this.config.attributes.embed.id);\\n }\\n\\n // Replace the \n )}\n {contentState.hasOpenedBefore && (\n \n )}\n\n {contentState.zoomEnabled && }\n \n {contentState.showExtension || contentState.recording ? (\n
\n {!contentState.recording &&\n !contentState.drawingMode &&\n !contentState.blurMode && (\n {\n const onboardingActive =\n document.documentElement.classList.contains(\n \"screenity-driver-active\"\n ) || Boolean(document.querySelector(\".driver-overlay\"));\n if (onboardingActive) return;\n\n if (\n window.location.href.indexOf(\n chrome.runtime.getURL(\"setup.html\")\n ) === -1 &&\n window.location.href.indexOf(\n chrome.runtime.getURL(\"playground.html\")\n ) === -1 &&\n !contentState.pendingRecording &&\n !contentState.customRegion\n ) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n showExtension: false,\n showPopup: false,\n }));\n }\n }}\n >
\n )}\n \n \n \n
\n \n {contentState.recordingType === \"region\" &&\n contentState.customRegion && }\n {shadowRef.current && }\n {contentState.preparingRecording && (\n \n )}\n \n {contentState.recordingType != \"camera\" &&\n !contentState.onboarding &&\n !(\n contentState.isSubscribed === false &&\n contentState.isLoggedIn === true\n ) &&\n !(!contentState.isLoggedIn && contentState.wasLoggedIn) && (\n \n )}\n {contentState.recordingType === \"camera\" && (\n \n )}\n {!(contentState.hideToolbar && contentState.hideUI) &&\n !contentState.onboarding &&\n !(\n contentState.isSubscribed === false &&\n contentState.isLoggedIn === true\n ) &&\n !(!contentState.isLoggedIn && contentState.wasLoggedIn) && (\n \n )}\n {contentState.showPopup && (\n \n )}\n
\n \n \n
\n ) : (\n
\n )}\n
\n );\n};\n\nexport default Wrapper;\n" }, { "path": "src/pages/Content/camera/Camera.jsx", "content": "import React, { useContext, useEffect } from \"react\";\n\nimport CameraWrap from \"./layout/CameraWrap\";\n\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst Camera = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n return (\n \n {contentState.defaultVideoInput != \"none\" &&\n contentState.cameraActive && }\n
\n );\n};\n\nexport default Camera;\n" }, { "path": "src/pages/Content/camera/components/ResizeHandle.jsx", "content": "import React from \"react\";\n\nimport { CameraResizeIcon } from \"../../toolbar/components/SVG\";\n\nconst ResizeHandle = ({ position }) => {\n return (\n
\n \n
\n );\n};\n\nexport default ResizeHandle;\n" }, { "path": "src/pages/Content/camera/layout/CameraToolbar.jsx", "content": "import React, { useState, useEffect, useContext } from \"react\";\n\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\n\nimport TooltipWrap from \"../../toolbar/components/TooltipWrap\";\n\nimport { CameraCloseIcon, Pip } from \"../../toolbar/components/SVG\";\n\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst CameraToolbar = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n return (\n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraActive: false,\n }));\n chrome.storage.local.set({ cameraActive: false });\n }}\n >\n \n \n {contentState.recording && contentState.surface === \"monitor\" && (\n \n {\n chrome.runtime.sendMessage({ type: \"toggle-pip\" });\n }}\n >\n \n \n \n )}\n \n );\n};\n\nexport default CameraToolbar;\n" }, { "path": "src/pages/Content/camera/layout/CameraWrap.jsx", "content": "import React, {\n useEffect,\n useContext,\n useRef,\n useState,\n useLayoutEffect,\n} from \"react\";\n\nimport { Rnd } from \"react-rnd\";\n\nimport { contentStateContext } from \"../../context/ContentState\";\n\nimport CameraToolbar from \"./CameraToolbar\";\nimport ResizeHandle from \"../components/ResizeHandle\";\n\nconst CameraWrap = (props) => {\n const [contentState, setContentState] = React.useContext(contentStateContext);\n const cameraRef = React.useRef();\n const [cx, setCx] = useState(200);\n const [cy, setCy] = useState(200);\n const [w, setW] = useState(200);\n const [h, setH] = useState(200);\n\n const updateUIPosition = () => {\n const ref =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-draggable\");\n const circleCenterX =\n ref.getBoundingClientRect().left + ref.getBoundingClientRect().width / 2;\n const circleCenterY =\n ref.getBoundingClientRect().top + ref.getBoundingClientRect().height / 2;\n const circleRadius = ref.getBoundingClientRect().width / 2;\n const squareBottomRightX =\n ref.getBoundingClientRect().left + ref.getBoundingClientRect().width;\n const squareBottomRightY =\n ref.getBoundingClientRect().top + ref.getBoundingClientRect().height;\n const handle =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-resize\");\n const toolbar =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-toolbar\");\n\n const c = Math.sqrt(\n Math.pow(circleCenterX - squareBottomRightX, 2) +\n Math.pow(circleCenterY - squareBottomRightY, 2)\n );\n const a = circleRadius / Math.sqrt(2);\n const r = (c + Math.sqrt(c ** 2 + 16 * a ** 2)) / 4;\n\n const x = r - r / Math.sqrt(2);\n const y = r - r / Math.sqrt(2);\n\n handle.style.bottom = `${y - handle.getBoundingClientRect().width / 2}px`;\n handle.style.right = `${x - handle.getBoundingClientRect().height / 2}px`;\n toolbar.style.top = `${y - toolbar.getBoundingClientRect().width / 2}px`;\n toolbar.style.left = `${x - toolbar.getBoundingClientRect().height / 2}px`;\n };\n\n const saveDimensions = () => {\n const ref =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-draggable\");\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraDimensions: {\n size: ref.getBoundingClientRect().width,\n x: ref.getBoundingClientRect().x,\n y: ref.getBoundingClientRect().y,\n },\n }));\n chrome.storage.local.set({\n cameraDimensions: {\n size: ref.getBoundingClientRect().width,\n x: ref.getBoundingClientRect().x,\n y: ref.getBoundingClientRect().y,\n },\n });\n };\n\n useEffect(() => {\n if (!cameraRef.current) return;\n if (!props.shadowRef.current.shadowRoot.querySelector(\".camera-resize\"))\n return;\n if (!props.shadowRef.current.shadowRoot.querySelector(\".camera-toolbar\"))\n return;\n\n updateUIPosition();\n }, [cameraRef.current]);\n\n // I need to make sure the camera is never offscreen (if the user resizes the window)\n useLayoutEffect(() => {\n const updateCameraPosition = () => {\n if (\n !props.shadowRef.current.shadowRoot.querySelector(\".camera-draggable\")\n )\n return;\n const ref =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-draggable\");\n let xpos = cameraRef.current.getDraggablePosition().x;\n let ypos = cameraRef.current.getDraggablePosition().y;\n\n // Width and height of camera\n const width = ref.getBoundingClientRect().width;\n const height = ref.getBoundingClientRect().height;\n\n const { innerWidth, innerHeight } = window;\n\n // Keep camera positioned relative to the bottom and right of the screen, proportionally\n if (xpos + width > innerWidth) {\n xpos = innerWidth - width;\n }\n if (ypos + height > innerHeight) {\n ypos = innerHeight - height;\n }\n\n cameraRef.current.updatePosition({ x: xpos, y: ypos });\n\n saveDimensions();\n };\n\n updateCameraPosition();\n\n window.addEventListener(\"resize\", updateCameraPosition);\n\n return () => {\n window.removeEventListener(\"resize\", updateCameraPosition);\n };\n }, []);\n\n return (\n \n ,\n }}\n minHeight={150}\n minWidth={150}\n enableResizing={{\n bottom: false,\n bottomRight: true,\n bottomLeft: false,\n left: false,\n right: false,\n top: false,\n topRight: false,\n topLeft: false,\n }}\n onResize={(e, direction, ref, delta, position) => {\n updateUIPosition();\n }}\n onResizeStop={(e, direction, ref, delta, position) => {\n saveDimensions();\n }}\n onDragStop={(node, x, y) => {\n saveDimensions();\n }}\n lockAspectRatio={1}\n bounds={\"window\"}\n >\n
\n \n \n \n
\n );\n};\n\nexport default CameraWrap;\n" }, { "path": "src/pages/Content/camera/styles/_Camera.scss", "content": "@use '../../styles/_variables' as *;\n@use './layout/CameraWrap';\n@use './layout/CameraToolbar';\n@use './components/ResizeHandle';" }, { "path": "src/pages/Content/camera/styles/components/_ResizeHandle.scss", "content": "@use '../../../styles/_variables' as *;\n\n.camera-resize {\n\tposition: absolute;\n\tbottom: 20px;\n\tright: 20px;\n\tz-index: $z-index-max;\n\theight: 28px;\n\twidth: 28px;\n\tborder-radius: 50%;\n\tbackground-color: rgba(30, 30, 30, .8);\n\tbox-shadow: 0 2px 10px rgba(0, 0, 0, .15);\n\tborder: 3px solid rgba(255, 255, 255, .2);\n\tbackdrop-filter: blur(10px);\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\topacity: 0;\n\n\tsvg {\n\t\tcolor: #9797A4;\n\t\ttext-align: center;\n\t\tmargin: auto;\n\t\tdisplay: block;\n\t}\n}" }, { "path": "src/pages/Content/camera/styles/layout/_CameraToolbar.scss", "content": "@use '../../../styles/_variables' as *;\n\n.camera-toolbar {\n\tdisplay: flex;\n\talign-items: center;\n padding-left: 4px;\n\tpadding-right: 4px;\n\ttransition: opacity .25s cubic-bezier(.61,.11,.08,.96);\n\tmin-width: max-content;\n\tbackground-color: rgba(30, 30, 30, .8);\n\tbox-shadow: 0 2px 10px rgba(0, 0, 0, .15);\n\theight: 28px;\n\tposition: absolute;\n\tleft: 10px;\n\ttop: 10px;\n\tborder-radius: $container-border-radius;\n\tbackdrop-filter: blur(10px);\n\tz-index: $z-index-max;\n\topacity: 0;\n\tborder: 3px solid rgba(255, 255, 255, .2);\n}\n.camera-draggable:hover {\n\t.camera-toolbar, .camera-resize {\n\t\topacity: 1!important;\n\t}\n}\n.camera-toolbar:hover, .camera-resize:hover {\n\topacity: 1!important;\n}\n\n.CameraToolbarSeparator {\n width: 1px;\n\theight: 18px;\n background-color: rgba(255, 255, 255, .3);\n margin: 0 4px;\n}\n.CameraToggleItem, .CameraToolbarButton {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: #000;\n height: 22px;\n\twidth: 22px;\n\ttext-align: center;\n font-size: 13px;\n line-height: 1;\n\tborder-radius: 50%;\n\ttransition: background-color .25s ease-in-out;\n\tbackground-color: rgba(124, 139, 165, 0);\n\n\tsvg {\n\t\tcolor: $color-icon;\n\t}\n\n\t&:hover {\n\t\tbackground-color: rgba(124, 139, 165, 0.2)!important;\n\t\tcursor: pointer;\n\t}\n\n\t&:disabled {\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t&[data-state='on'] {\n\t\tcolor: #FFF;\n\n\t\tsvg {\n\t\t\tcolor: #FFF;\n\t\t}\n\n\t}\n}\n\n\n.CameraToggleItem:hover, .CameraToggleButton:hover {\n\tcursor: pointer;\n}\n.CameraToggleItem:focus-visible, .CameraToggleButton:focus-visible {\n position: relative;\n box-shadow: $focus-border;\n}\n\n.CameraToggleGroup {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.CameraToggleGroup, .CameraToolbarSeparator {\n\tdisplay: none;\n}" }, { "path": "src/pages/Content/camera/styles/layout/_CameraWrap.scss", "content": "@use '../../../styles/_variables' as *;\n\n.camera-draggable {\n\twidth: 100%;\n\theight: 100%;\n\ttransform-origin: left top;\n\tborder-radius: 50%;\n}\n.camera-grab {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\tborder-radius: 50%;\n\tz-index: 99999999!important;\n\tcursor: grab;\n}\n.camera-flipped {\n\ttransform: scaleX(-1);\n}" }, { "path": "src/pages/Content/camera-only/CameraOnly.jsx", "content": "import React, { useContext } from \"react\";\n\nimport CameraWrap from \"./layout/CameraWrap\";\n\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst CameraOnly = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n return (\n
\n {contentState.defaultVideoInput != \"none\" &&\n contentState.cameraActive &&\n contentState.recordingType === \"camera\" && (\n \n )}\n
\n );\n};\n\nexport default CameraOnly;\n" }, { "path": "src/pages/Content/camera-only/layout/CameraWrap.jsx", "content": "import React, { useEffect, useContext, useRef, useState } from \"react\";\n\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst CameraWrap = (props) => {\n const [contentState, setContentState] = React.useContext(contentStateContext);\n\n return (\n
\n \n
\n );\n};\n\nexport default CameraWrap;\n" }, { "path": "src/pages/Content/camera-only/styles/_CameraOnly.scss", "content": "@use '../../styles/_variables' as *;" }, { "path": "src/pages/Content/canvas/Canvas.jsx", "content": "import React, { useContext } from \"react\";\n\nimport CanvasWrap from \"./layout/CanvasWrap\";\n\nconst Canvas = () => {\n return (\n
\n \n
\n );\n};\n\nexport default Canvas;\n" }, { "path": "src/pages/Content/canvas/layout/CanvasWrap.jsx", "content": "import React, { useEffect, useRef, useContext } from \"react\";\nimport { fabric } from \"fabric\";\n\nimport { contentStateContext } from \"../../context/ContentState\";\n\nimport CustomControls from \"../modules/CustomControls\";\n\nimport ArrowTool from \"../modules/ArrowTool\";\nimport EraserTool from \"../modules/EraserTool\";\nimport ShapeTool from \"../modules/ShapeTool\";\nimport TextTool from \"../modules/TextTool\";\nimport PenTool from \"../modules/PenTool\";\nimport SelectTool from \"../modules/SelectTool\";\n\nimport {\n undoCanvas,\n redoCanvas,\n saveCanvas,\n checkChanges,\n} from \"../modules/History\";\n\nconst CanvasWrap = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const contentStateRef = useRef(null);\n const canvasContainer = useRef();\n const canvasRef = useRef();\n const fabricRef = useRef();\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n // INIT\n useEffect(() => {\n if (!canvasRef.current) return;\n if (fabricRef.current) return;\n\n const canvas = new fabric.Canvas(\"canvas-screenity\", {\n perPixelTargetFind: true,\n });\n fabricRef.current = canvas;\n\n canvas.getContext(\"2d\", { willReadFrequently: true });\n\n // Set width and height of canvas to full size of document\n canvas.setWidth(window.document.body.offsetWidth);\n\n // set max height of 2000px\n //canvas.setHeight(Math.min(window.document.body.offsetHeight, 2500));\n // set height to viewport\n canvas.setHeight(window.innerHeight);\n\n canvas.renderAll();\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n canvas: canvas,\n }));\n\n CustomControls(canvas);\n saveCanvas(\n {\n ...contentState,\n canvas: canvas,\n },\n setContentState,\n );\n }, []);\n\n useEffect(() => {\n if (!fabricRef.current) return;\n\n const resizeCanvas = () => {\n fabricRef.current.setWidth(window.document.body.offsetWidth);\n fabricRef.current.setHeight(window.innerHeight);\n fabricRef.current.renderAll();\n };\n\n window.addEventListener(\"resize\", resizeCanvas);\n\n return () => {\n window.removeEventListener(\"resize\", resizeCanvas);\n };\n }, []);\n\n useEffect(() => {\n const canvas = fabricRef.current;\n if (!canvas) return;\n\n const tool = contentState.tool;\n\n const shouldDraw =\n contentState.drawingMode && (tool === \"pen\" || tool === \"highlighter\");\n\n canvas.isDrawingMode = shouldDraw;\n\n // Important: when leaving pen/highlighter, clear any in-progress brush stroke\n if (!shouldDraw && canvas.freeDrawingBrush) {\n const brush = canvas.freeDrawingBrush;\n if (Array.isArray(brush._points)) brush._points.length = 0;\n if (Array.isArray(brush.points)) brush.points.length = 0;\n if (typeof brush._reset === \"function\") brush._reset();\n }\n\n canvas.requestRenderAll();\n }, [contentState.tool, contentState.drawingMode]);\n\n useEffect(() => {\n const canvas = fabricRef.current;\n if (!canvas) return;\n\n // Only discard selection when leaving select (or when entering a drawing tool)\n if (contentState.tool !== \"select\") {\n canvas.discardActiveObject();\n canvas.requestRenderAll();\n }\n }, [contentState.tool]);\n\n const panXRef = useRef(window.scrollX);\n const panYRef = useRef(window.scrollY);\n\n useEffect(() => {\n if (!fabricRef.current) return;\n\n panXRef.current = window.scrollX;\n panYRef.current = window.scrollY;\n\n // Function to update canvas panning\n const updateCanvasPan = () => {\n fabricRef.current.setZoom(fabricRef.current.getZoom());\n fabricRef.current.absolutePan({\n x: panXRef.current,\n y: panYRef.current,\n });\n };\n\n // Event listener for window scroll\n const handleScroll = () => {\n // Update canvas pan position based on scroll position\n panXRef.current = window.scrollX;\n panYRef.current = window.scrollY;\n updateCanvasPan();\n };\n\n updateCanvasPan();\n\n // Attach scroll event listener\n window.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n // Cleanup function\n return () => {\n // Remove scroll event listener\n window.removeEventListener(\"scroll\", handleScroll);\n\n // Reset canvas pan position\n panXRef.current = 0;\n panYRef.current = 0;\n };\n }, []);\n\n useEffect(() => {\n if (!fabricRef.current) return;\n\n const canvas = fabricRef.current;\n\n // Pass a ref getter instead of snapshot state\n const arrowDrawing = ArrowTool(\n canvas,\n contentStateRef,\n setContentState,\n saveCanvas,\n );\n const eraserDrawing = EraserTool(canvas, contentStateRef, setContentState);\n const shapeDrawing = ShapeTool(\n canvas,\n contentStateRef,\n setContentState,\n saveCanvas,\n );\n const textDrawing = TextTool(\n canvas,\n contentStateRef,\n setContentState,\n saveCanvas,\n );\n const penDrawing = PenTool(\n canvas,\n contentStateRef,\n setContentState,\n saveCanvas,\n );\n\n return () => {\n arrowDrawing.removeEventListeners();\n eraserDrawing.removeEventListeners();\n shapeDrawing.removeEventListeners();\n textDrawing.removeEventListeners();\n penDrawing.removeEventListeners();\n };\n }, []);\n\n useEffect(() => {\n if (!fabricRef.current) return;\n\n const canvas = fabricRef.current;\n\n const selection = SelectTool(canvas, contentStateRef, setContentState);\n const objectChanges = checkChanges(\n canvas,\n contentStateRef,\n setContentState,\n );\n\n return () => {\n selection.removeEventListeners();\n objectChanges.removeEventListeners();\n };\n }, []);\n\n useEffect(() => {\n // Prevent selecting elements unless in select mode\n if (!fabricRef.current) return;\n if (contentState.tool !== \"select\") {\n // De-select all objects on canvas\n fabricRef.current.discardActiveObject();\n\n fabricRef.current.selection = false;\n fabricRef.current.forEachObject((obj) => {\n obj.selectable = false;\n });\n fabricRef.current.renderAll();\n } else {\n fabricRef.current.selection = true;\n fabricRef.current.forEachObject((obj) => {\n obj.selectable = true;\n });\n fabricRef.current.renderAll();\n }\n }, [contentState.tool]);\n\n useEffect(() => {\n const onKeyDown = (event) => {\n const state = contentStateRef.current;\n if (!state) return;\n\n if (\n (event.ctrlKey || event.metaKey) &&\n event.key.toLowerCase() === \"z\" &&\n !event.shiftKey\n ) {\n undoCanvas(state, setContentState);\n }\n if (\n (event.ctrlKey || event.metaKey) &&\n (event.key.toLowerCase() === \"y\" ||\n (event.shiftKey && event.key.toLowerCase() === \"z\"))\n ) {\n redoCanvas(state, setContentState);\n }\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, []);\n\n useEffect(() => {\n if (!fabricRef.current) return;\n\n // De-select all objects on canvas\n fabricRef.current.discardActiveObject();\n fabricRef.current.requestRenderAll();\n }, [contentState.drawingMode]);\n\n return (\n \n \n \n \n \n );\n};\n\nexport default CanvasWrap;\n" }, { "path": "src/pages/Content/canvas/layout/TextToolbar.jsx", "content": "import React, { useRef, useContext, useEffect, useState } from \"react\";\n\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\nimport * as Select from \"@radix-ui/react-select\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst TextToolbar = (props) => {\n const toolbarRef = useRef(null);\n const [contentState, setContentState] = useContext(contentStateContext);\n const [left, setLeft] = useState(0);\n const [top, setTop] = useState(0);\n\n useEffect(() => {\n if (!contentState.canvas) return;\n\n const canvas = contentState.canvas;\n const toolbar = toolbarRef.current;\n\n function positionToolbarOnTextbox(textbox) {\n // place the toolbar on top of the textbox, centered, with a vertical offset\n const textCoords = textbox.getBoundingRect();\n const textOffset = textCoords.left;\n const textWidth = textCoords.width;\n const textHeight = textCoords.height;\n const textTop = textCoords.top;\n const textLeft = textCoords.left;\n const textCenter = textLeft + textWidth / 2;\n const textCenterOffset = textCenter;\n const toolbarWidth = toolbar.clientWidth;\n const toolbarHeight = toolbar.clientHeight;\n const toolbarLeft = textCenterOffset - toolbarWidth / 2;\n const toolbarTop = textTop - toolbarHeight - 10;\n setLeft(toolbarLeft);\n setTop(toolbarTop);\n }\n\n function hideToolbar() {\n toolbar.style.display = \"none\";\n }\n\n canvas.on(\"selection:created\", function (e) {\n const selectedObject = canvas.getActiveObject();\n if (selectedObject === null || selectedObject === undefined) return;\n\n if (selectedObject.type === \"textbox\") {\n positionToolbarOnTextbox(selectedObject);\n }\n });\n\n canvas.on(\"selection:cleared\", function () {\n hideToolbar();\n });\n\n canvas.on(\"object:moving\", function (e) {\n const movedObject = e.target;\n\n if (\n movedObject.type === \"textbox\" &&\n canvas.getActiveObject() === movedObject\n ) {\n positionToolbarOnTextbox(movedObject);\n }\n });\n\n canvas.on(\"object:scaling\", function (e) {\n const resizedObject = e.target;\n\n if (\n resizedObject.type === \"textbox\" &&\n canvas.getActiveObject() === resizedObject\n ) {\n positionToolbarOnTextbox(resizedObject);\n }\n });\n }, [contentState.canvas]);\n\n return (\n \n oioi\n \n );\n};\n\nexport default TextToolbar;\n" }, { "path": "src/pages/Content/canvas/modules/ArrowTool.jsx", "content": "import { fabric } from \"fabric\";\n\nconst createArrowLine = (x, y, color, strokeWidth) => {\n return new fabric.Line([x, y, x, y], {\n strokeWidth: (strokeWidth || 2) * 6,\n stroke: color,\n originX: \"center\",\n originY: \"center\",\n selectable: false,\n evented: false,\n id: \"arrowLine\",\n objectCaching: false,\n });\n};\n\nconst createArrowHead = (x, y, color, strokeWidth) => {\n const size = (strokeWidth || 2) * 16;\n return new fabric.Triangle({\n width: size,\n height: size,\n left: x,\n top: y,\n fill: color,\n originX: \"center\",\n originY: \"center\",\n selectable: false,\n evented: false,\n id: \"arrowHead\",\n objectCaching: false,\n });\n};\n\nconst createArrowCircle = (x, y, id) => {\n return new fabric.Circle({\n radius: 5,\n fill: \"white\",\n stroke: \"#0D99FF\",\n strokeWidth: 2,\n left: x,\n top: y,\n selectable: false,\n evented: true,\n id,\n opacity: 0,\n objectCaching: false,\n });\n};\n\nconst createArrowLineControl = (x, y) => {\n return new fabric.Line([x, y, x, y], {\n strokeWidth: 2,\n stroke: \"#0D99FF\",\n originX: \"center\",\n originY: \"center\",\n selectable: false,\n evented: false,\n id: \"arrowLineControl\",\n opacity: 0,\n objectCaching: false,\n });\n};\n\nconst ArrowTool = (canvas, contentStateRef, setContentState, saveCanvas) => {\n const getState = () => contentStateRef.current;\n\n let arrowPoints = [];\n let arrowLine = null;\n let arrowHead = null;\n let arrowCircle1 = null;\n let arrowCircle2 = null;\n let arrowLineControl = null;\n\n // --- endpoint drag handler (store ref so we can remove safely)\n const onEndpointMouseDown = (e) => {\n // Only when selecting / interacting with existing arrows\n if (!e?.subTargets?.length) return;\n\n const state = getState();\n // Allow endpoint dragging even if tool != arrow, but only in drawingMode\n if (!state?.drawingMode) return;\n\n const hit = e.subTargets.find(\n (obj) => obj?.id === \"arrowCircle1\" || obj?.id === \"arrowCircle2\",\n );\n if (!hit) return;\n\n moveArrowCircle(canvas, hit, getState, saveCanvas, setContentState);\n };\n\n const moveArrowCircle = (\n canvas,\n arrowCircle,\n getState,\n saveCanvas,\n setContentState,\n ) => {\n let isDown = true;\n\n const group = arrowCircle.group;\n const items = group._objects;\n\n const arrowCircle1 = group._objects.find(\n (item) => item.id === \"arrowCircle1\",\n );\n const arrowCircle2 = group._objects.find(\n (item) => item.id === \"arrowCircle2\",\n );\n const arrowLine = group._objects.find((item) => item.id === \"arrowLine\");\n const arrowHead = group._objects.find((item) => item.id === \"arrowHead\");\n const arrowLineControl = group._objects.find(\n (item) => item.id === \"arrowLineControl\",\n );\n\n arrowLineControl.set({ opacity: 0 });\n\n // Ungroup temporarily so we can edit in canvas coords\n group._restoreObjectsState();\n canvas.remove(group);\n items.forEach((item) => canvas.add(item));\n canvas.requestRenderAll();\n\n const updateGeometry = () => {\n const x1 = arrowCircle1.left + 5;\n const y1 = arrowCircle1.top + 5;\n const x2 = arrowCircle2.left + 5;\n const y2 = arrowCircle2.top + 5;\n\n arrowLine.set({ x1, y1, x2, y2 });\n arrowLineControl.set({ x1, y1, x2, y2 });\n\n arrowLine.setCoords();\n arrowLineControl.setCoords();\n\n const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;\n arrowHead.set({ angle: angle + 90, left: x2, top: y2 });\n arrowHead.setCoords();\n };\n\n const onMove = (o) => {\n if (!isDown) return;\n\n const pointer = canvas.getPointer(o.e);\n arrowCircle.set({ left: pointer.x - 5, top: pointer.y - 5 });\n arrowCircle.setCoords();\n\n updateGeometry();\n canvas.requestRenderAll();\n };\n\n const onUp = () => {\n if (!isDown) return;\n isDown = false;\n\n canvas.off(\"mouse:move\", onMove);\n canvas.off(\"mouse:up\", onUp);\n\n arrowLineControl.set({ opacity: 1 });\n\n const newGroup = new fabric.Group(\n [arrowLine, arrowHead, arrowLineControl, arrowCircle1, arrowCircle2],\n {\n selectable: true,\n evented: true,\n id: \"arrowGroup\",\n hasControls: false,\n hasBorders: false,\n hasRotatingPoint: false,\n subTargetCheck: true,\n originX: \"left\",\n originY: \"top\",\n perPixelTargetFind: true,\n },\n );\n\n canvas.add(newGroup);\n canvas.remove(arrowLine);\n canvas.remove(arrowHead);\n canvas.remove(arrowCircle1);\n canvas.remove(arrowCircle2);\n canvas.remove(arrowLineControl);\n canvas.requestRenderAll();\n\n canvas.discardActiveObject();\n canvas.requestRenderAll();\n\n const state = getState();\n saveCanvas({ ...state, tool: \"select\" }, setContentState);\n\n canvas.setActiveObject(newGroup);\n canvas.requestRenderAll();\n };\n\n canvas.on(\"mouse:move\", onMove);\n canvas.on(\"mouse:up\", onUp);\n };\n\n // --- draw handlers\n const onMouseDown = (o) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"arrow\") return;\n if (arrowPoints.length) return;\n\n canvas.selection = false;\n canvas.requestRenderAll();\n\n const { x, y } = canvas.getPointer(o.e);\n arrowPoints = [{ x, y }];\n\n arrowLine = createArrowLine(x, y, state.color, state.strokeWidth);\n arrowHead = createArrowHead(x, y, state.color, state.strokeWidth);\n arrowCircle1 = createArrowCircle(x - 5, y - 5, \"arrowCircle1\");\n arrowCircle2 = createArrowCircle(x - 5, y - 5, \"arrowCircle2\");\n arrowLineControl = createArrowLineControl(x, y);\n\n canvas.add(arrowLine);\n canvas.add(arrowHead);\n canvas.add(arrowLineControl);\n canvas.add(arrowCircle1);\n canvas.add(arrowCircle2);\n\n canvas.requestRenderAll();\n };\n\n const onMouseMove = (o) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"arrow\") return;\n if (!arrowPoints.length) return;\n if (\n !arrowLine ||\n !arrowHead ||\n !arrowCircle1 ||\n !arrowCircle2 ||\n !arrowLineControl\n )\n return;\n\n const { x, y } = canvas.getPointer(o.e);\n const startX = arrowPoints[0].x;\n const startY = arrowPoints[0].y;\n\n arrowLine.set({ x1: startX, y1: startY, x2: x, y2: y });\n arrowLineControl.set({ x1: startX, y1: startY, x2: x, y2: y });\n arrowLine.setCoords();\n arrowLineControl.setCoords();\n\n const angle = (Math.atan2(y - startY, x - startX) * 180) / Math.PI;\n arrowHead.set({ left: x, top: y, angle: angle + 90 });\n arrowHead.setCoords();\n\n arrowCircle1.set({ left: startX - 5, top: startY - 5 });\n\n // keep your “slight offset” if you want, but simplest is:\n arrowCircle2.set({ left: x - 5, top: y - 5 });\n\n arrowCircle1.setCoords();\n arrowCircle2.setCoords();\n\n canvas.requestRenderAll();\n };\n\n const onMouseUp = () => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"arrow\") return;\n if (!arrowPoints.length) return;\n\n canvas.selection = true;\n arrowPoints = [];\n\n arrowCircle1.set({ opacity: 1 });\n arrowCircle2.set({ opacity: 1 });\n arrowLineControl.set({ opacity: 1 });\n\n const group = new fabric.Group(\n [arrowLine, arrowHead, arrowLineControl, arrowCircle1, arrowCircle2],\n {\n selectable: true,\n evented: true,\n id: \"arrowGroup\",\n hasControls: false,\n hasBorders: false,\n hasRotatingPoint: false,\n subTargetCheck: true,\n originX: \"left\",\n originY: \"top\",\n perPixelTargetFind: true,\n },\n );\n\n canvas.add(group);\n canvas.remove(arrowLine);\n canvas.remove(arrowHead);\n canvas.remove(arrowCircle1);\n canvas.remove(arrowCircle2);\n canvas.remove(arrowLineControl);\n\n canvas.requestRenderAll();\n\n saveCanvas({ ...state, tool: \"select\" }, setContentState);\n canvas.setActiveObject(group);\n canvas.requestRenderAll();\n };\n\n // --- selection visibility handlers (keep refs for proper off)\n const onBeforeSelectionCleared = () => {\n const activeObject = canvas.getActiveObject();\n if (activeObject && activeObject.id === \"arrowGroup\") {\n activeObject._objects.forEach((obj) => {\n if (\n obj.id === \"arrowCircle1\" ||\n obj.id === \"arrowCircle2\" ||\n obj.id === \"arrowLineControl\"\n ) {\n obj.set({ opacity: 0 });\n }\n });\n canvas.requestRenderAll();\n }\n };\n\n const onSelectionCleared = () => {\n canvas.getObjects().forEach((obj) => {\n if (obj.type === \"group\") {\n obj._objects.forEach((obj2) => {\n if (\n obj2.id === \"arrowCircle1\" ||\n obj2.id === \"arrowCircle2\" ||\n obj2.id === \"arrowLineControl\"\n ) {\n obj2.set({ opacity: 0 });\n }\n });\n }\n });\n canvas.requestRenderAll();\n };\n\n const onSelectionChanged = () => {\n const activeObject = canvas.getActiveObject();\n\n if (activeObject && activeObject.id === \"arrowGroup\") {\n activeObject._objects.forEach((obj) => {\n if (\n obj.id === \"arrowCircle1\" ||\n obj.id === \"arrowCircle2\" ||\n obj.id === \"arrowLineControl\"\n ) {\n obj.set({ opacity: 1 });\n }\n });\n canvas.requestRenderAll();\n }\n\n if (activeObject && activeObject.type === \"activeSelection\") {\n activeObject._objects.forEach((obj) => {\n if (obj.id === \"arrowGroup\") {\n obj._objects.forEach((obj2) => {\n if (obj2.id === \"arrowLineControl\") obj2.set({ opacity: 1 });\n });\n }\n });\n canvas.requestRenderAll();\n }\n };\n\n // attach\n canvas.on(\"mouse:down\", onEndpointMouseDown); // endpoint dragging\n canvas.on(\"mouse:down\", onMouseDown);\n canvas.on(\"mouse:move\", onMouseMove);\n canvas.on(\"mouse:up\", onMouseUp);\n\n canvas.on(\"before:selection:cleared\", onBeforeSelectionCleared);\n canvas.on(\"selection:cleared\", onSelectionCleared);\n canvas.on(\"selection:created\", onSelectionChanged);\n canvas.on(\"selection:updated\", onSelectionChanged);\n\n return {\n removeEventListeners: function () {\n canvas.off(\"mouse:down\", onEndpointMouseDown);\n canvas.off(\"mouse:down\", onMouseDown);\n canvas.off(\"mouse:move\", onMouseMove);\n canvas.off(\"mouse:up\", onMouseUp);\n\n canvas.off(\"before:selection:cleared\", onBeforeSelectionCleared);\n canvas.off(\"selection:cleared\", onSelectionCleared);\n canvas.off(\"selection:created\", onSelectionChanged);\n canvas.off(\"selection:updated\", onSelectionChanged);\n },\n };\n};\n\nexport default ArrowTool;\n" }, { "path": "src/pages/Content/canvas/modules/CustomControls.jsx", "content": "import React from \"react\";\nimport { fabric } from \"fabric\";\n\nimport {\n HandleControl,\n RotateControl,\n MiddleHandleControl,\n MiddleHandleControlV,\n} from \"./../../images/popup/images.js\";\n\n// Custom controls for the canvas, with rounded square handles and a circular rotate handle\nconst CustomControls = (canvas) => {\n fabric.Object.prototype.set({\n transparentCorners: false,\n borderColor: \"#0D99FF\",\n cornerColor: \"#FFF\",\n borderScaleFactor: 2,\n cornerStyle: \"circle\",\n cornerStrokeColor: \"#0D99FF\",\n borderOpacityWhenMoving: 1,\n });\n\n fabric.Textbox.prototype.set({\n transparentCorners: false,\n borderColor: \"#0D99FF\",\n cornerColor: \"#FFF\",\n borderScaleFactor: 2,\n cornerStyle: \"circle\",\n cornerStrokeColor: \"#0D99FF\",\n borderOpacityWhenMoving: 1,\n });\n\n canvas.selectionColor = \"rgba(46, 115, 252, 0.11)\";\n canvas.selectionBorderColor = \"rgba(98, 155, 255, 0.81)\";\n canvas.selectionLineWidth = 1.5;\n\n // Handle control\n var img = new Image();\n img.src = HandleControl;\n\n function renderIcon(ctx, left, top, styleOverride, fabricObject) {\n const size = 25;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img, -size / 2, -size / 2, size, size);\n ctx.restore();\n }\n\n // Rotate control\n var img2 = new Image();\n img2.src = RotateControl;\n\n function renderIconRotate(ctx, left, top, styleOverride, fabricObject) {\n const wsize = 30;\n const hsize = 30;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img2, -wsize / 2, -hsize / 2, wsize, hsize);\n ctx.restore();\n }\n\n // Middle handle control\n var img3 = new Image();\n img3.src = MiddleHandleControl;\n\n function renderIconMiddle(ctx, left, top, styleOverride, fabricObject) {\n const size = 18;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img3, -(size + 14) / 2, -size / 2, size + 14, size);\n ctx.restore();\n }\n\n // Middle handle control vertical\n var img4 = new Image();\n img4.src = MiddleHandleControlV;\n\n function renderIconMiddleV(ctx, left, top, styleOverride, fabricObject) {\n const size = 18;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img4, -size / 2, -(size + 14) / 2, size, size + 14);\n ctx.restore();\n }\n\n fabric.Object.prototype.controls.tl = new fabric.Control({\n x: -0.5,\n y: -0.5,\n offsetX: -1,\n offsetY: -1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n fabric.Object.prototype.controls.tr = new fabric.Control({\n x: 0.5,\n y: -0.5,\n offsetX: 1,\n offsetY: -1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n fabric.Object.prototype.controls.bl = new fabric.Control({\n x: -0.5,\n y: 0.5,\n offsetX: -1,\n offsetY: 1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n fabric.Object.prototype.controls.br = new fabric.Control({\n x: 0.5,\n y: 0.5,\n offsetX: 1,\n offsetY: 1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n fabric.Object.prototype.controls.mr = new fabric.Control({\n x: 0.5,\n y: 0,\n offsetX: 1,\n offsetY: 0,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingXOrSkewingY,\n render: renderIconMiddleV,\n });\n\n fabric.Object.prototype.controls.ml = new fabric.Control({\n x: -0.5,\n y: 0,\n offsetX: -1,\n offsetY: 0,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingXOrSkewingY,\n render: renderIconMiddleV,\n });\n\n fabric.Object.prototype.controls.mb = new fabric.Control({\n x: 0,\n y: 0.5,\n offsetX: 0,\n offsetY: 1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingYOrSkewingX,\n render: renderIconMiddle,\n });\n\n fabric.Object.prototype.controls.mt = new fabric.Control({\n x: 0,\n y: -0.5,\n offsetX: 0,\n offsetY: -1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingYOrSkewingX,\n render: renderIconMiddle,\n });\n\n fabric.Object.prototype.controls.mtr = new fabric.Control({\n x: 0,\n y: 0.5,\n cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,\n actionHandler: fabric.controlsUtils.rotationWithSnapping,\n offsetY: 26,\n withConnecton: false,\n actionName: \"rotate\",\n render: renderIconRotate,\n });\n\n // Also use same controls for Textbox\n fabric.Textbox.prototype.controls.tl = new fabric.Control({\n x: -0.5,\n y: -0.5,\n offsetX: -1,\n offsetY: -1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n fabric.Textbox.prototype.controls.tr = new fabric.Control({\n x: 0.5,\n y: -0.5,\n offsetX: 1,\n offsetY: -1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n fabric.Textbox.prototype.controls.bl = new fabric.Control({\n x: -0.5,\n y: 0.5,\n offsetX: -1,\n offsetY: 1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n fabric.Textbox.prototype.controls.br = new fabric.Control({\n x: 0.5,\n y: 0.5,\n offsetX: 1,\n offsetY: 1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIcon,\n });\n\n // Ml and mr controls for Textbox. The actionhandler should be for resizing the textbox horizontally, not skewing it\n fabric.Textbox.prototype.controls.ml = new fabric.Control({\n x: -0.5,\n y: 0,\n offsetX: -1,\n offsetY: 0,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.changeWidth,\n render: renderIconMiddleV,\n });\n\n fabric.Textbox.prototype.controls.mr = new fabric.Control({\n x: 0.5,\n y: 0,\n offsetX: 1,\n offsetY: 0,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.changeWidth,\n render: renderIconMiddleV,\n });\n\n fabric.Textbox.prototype.controls.mb = new fabric.Control({\n x: 0,\n y: 0.5,\n offsetX: 0,\n visible: false,\n offsetY: 1,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.changeHeight,\n render: renderIconMiddle,\n });\n\n fabric.Textbox.prototype.controls.mt = new fabric.Control({\n x: 0,\n y: -0.5,\n offsetX: 0,\n offsetY: -1,\n visible: false,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.changeHeight,\n render: renderIconMiddle,\n });\n\n fabric.Textbox.prototype.controls.mtr = new fabric.Control({\n x: 0,\n y: 0.5,\n cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,\n actionHandler: fabric.controlsUtils.rotationWithSnapping,\n offsetY: 26,\n withConnecton: false,\n actionName: \"rotate\",\n render: renderIconRotate,\n });\n\n // Update canvas rendering\n canvas.renderAll();\n};\n\nexport default CustomControls;\n\n/*\nfabric.Object.prototype.set({\n transparentCorners: false,\n borderColor: '#51B9F9',\n cornerColor: '#FFF',\n borderScaleFactor: 2.5,\n cornerStyle: 'circle',\n cornerStrokeColor: '#0E98FC',\n borderOpacityWhenMoving: 1,\n});\n\ncanvas.selectionColor = 'rgba(46, 115, 252, 0.11)';\ncanvas.selectionBorderColor = 'rgba(98, 155, 255, 0.81)';\ncanvas.selectionLineWidth = 1.5;\n\nvar img = document.createElement('img');\nimg.src = 'assets/middlecontrol.svg';\n\nvar img2 = document.createElement('img');\nimg2.src = 'assets/middlecontrolhoz.svg';\n\nvar img3 = document.createElement('img');\nimg3.src = 'assets/edgecontrol.svg';\n\nvar img4 = document.createElement('img');\nimg4.src = 'assets/rotateicon.svg';\n\nfunction renderIcon(ctx, left, top, styleOverride, fabricObject) {\n const wsize = 20;\n const hsize = 25;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img, -wsize / 2, -hsize / 2, wsize, hsize);\n ctx.restore();\n}\nfunction renderIconHoz(ctx, left, top, styleOverride, fabricObject) {\n const wsize = 25;\n const hsize = 20;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img2, -wsize / 2, -hsize / 2, wsize, hsize);\n ctx.restore();\n}\nfunction renderIconEdge(ctx, left, top, styleOverride, fabricObject) {\n const wsize = 25;\n const hsize = 25;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img3, -wsize / 2, -hsize / 2, wsize, hsize);\n ctx.restore();\n}\n\nfunction renderIconRotate(\n ctx,\n left,\n top,\n styleOverride,\n fabricObject\n) {\n const wsize = 40;\n const hsize = 40;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img4, -wsize / 2, -hsize / 2, wsize, hsize);\n ctx.restore();\n}\nfunction resetControls() {\n fabric.Object.prototype.controls.ml = new fabric.Control({\n x: -0.5,\n y: 0,\n offsetX: -1,\n cursorStyleHandler:\n fabric.controlsUtils.scaleSkewCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingXOrSkewingY,\n getActionName: fabric.controlsUtils.scaleOrSkewActionName,\n render: renderIcon,\n });\n\n fabric.Object.prototype.controls.mr = new fabric.Control({\n x: 0.5,\n y: 0,\n offsetX: 1,\n cursorStyleHandler:\n fabric.controlsUtils.scaleSkewCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingXOrSkewingY,\n getActionName: fabric.controlsUtils.scaleOrSkewActionName,\n render: renderIcon,\n });\n\n fabric.Object.prototype.controls.mb = new fabric.Control({\n x: 0,\n y: 0.5,\n offsetY: 1,\n cursorStyleHandler:\n fabric.controlsUtils.scaleSkewCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingYOrSkewingX,\n getActionName: fabric.controlsUtils.scaleOrSkewActionName,\n render: renderIconHoz,\n });\n\n fabric.Object.prototype.controls.mt = new fabric.Control({\n x: 0,\n y: -0.5,\n offsetY: -1,\n cursorStyleHandler:\n fabric.controlsUtils.scaleSkewCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingYOrSkewingX,\n getActionName: fabric.controlsUtils.scaleOrSkewActionName,\n render: renderIconHoz,\n });\n\n fabric.Object.prototype.controls.tl = new fabric.Control({\n x: -0.5,\n y: -0.5,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIconEdge,\n });\n\n fabric.Object.prototype.controls.tr = new fabric.Control({\n x: 0.5,\n y: -0.5,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIconEdge,\n });\n\n fabric.Object.prototype.controls.bl = new fabric.Control({\n x: -0.5,\n y: 0.5,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIconEdge,\n });\n\n fabric.Object.prototype.controls.br = new fabric.Control({\n x: 0.5,\n y: 0.5,\n cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,\n actionHandler: fabric.controlsUtils.scalingEqually,\n render: renderIconEdge,\n });\n\n fabric.Object.prototype.controls.mtr = new fabric.Control({\n x: 0,\n y: 0.5,\n cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,\n actionHandler: fabric.controlsUtils.rotationWithSnapping,\n offsetY: 30,\n withConnecton: false,\n actionName: 'rotate',\n render: renderIconRotate,\n });\n}\nresetControls();\n*/\n" }, { "path": "src/pages/Content/canvas/modules/EraserTool.jsx", "content": "import { saveCanvas } from \"./History\";\n\nconst EraserTool = (canvas, contentStateRef, setContentState) => {\n const getState = () => contentStateRef.current;\n\n let objectsToDelete = [];\n let isDown = false;\n\n const setEraserHitTestMode = (enabled) => {\n // enabled: perPixelTargetFind true, selectable false\n canvas.forEachObject((object) => {\n object.set({\n selectable: false,\n perPixelTargetFind: enabled ? true : false,\n });\n });\n };\n\n const onMouseDown = (o) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"eraser\") return;\n\n objectsToDelete = [];\n isDown = true;\n\n setEraserHitTestMode(true);\n\n if (!o.target) return;\n\n objectsToDelete.push(o.target);\n o.target.set({ opacity: 0.5 });\n\n canvas.requestRenderAll();\n };\n\n const onMouseMove = (o) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"eraser\") return;\n\n if (!isDown) return;\n if (!o.target) return;\n\n // avoid duplicates (optional but nice)\n if (!objectsToDelete.includes(o.target)) {\n objectsToDelete.push(o.target);\n o.target.set({ opacity: 0.5 });\n }\n\n canvas.requestRenderAll();\n };\n\n const onMouseUp = () => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"eraser\") return;\n\n // delete collected\n objectsToDelete.forEach((object) => {\n if (!object) return;\n\n if (object.type === \"group\") {\n // remove group children then group\n object._objects?.forEach((child) => canvas.remove(child));\n canvas.remove(object);\n } else {\n canvas.remove(object);\n }\n });\n\n // restore opacities if any remained (in case duplicates / removed objects)\n canvas.getObjects().forEach((obj) => {\n if (obj?.opacity === 0.5) obj.set({ opacity: 1 });\n });\n\n objectsToDelete = [];\n isDown = false;\n\n // Selection logic is handled by your CanvasWrap effect (based on tool),\n // so we don't force selectable=true here.\n canvas.requestRenderAll();\n\n saveCanvas(contentStateRef, setContentState);\n };\n\n const onKeyDown = (e) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"eraser\") return;\n\n if (e.key === \"Backspace\" || e.key === \"Delete\") {\n const activeObjects = canvas.getActiveObjects();\n const activeObject = canvas.getActiveObject();\n\n // If text editing, don't delete\n if (activeObject?.isEditing) return;\n\n if (activeObjects && activeObjects.length > 1 && !activeObject) {\n canvas.discardActiveObject();\n activeObjects.forEach((obj) => canvas.remove(obj));\n saveCanvas(contentStateRef, setContentState);\n canvas.requestRenderAll();\n return;\n }\n\n if (activeObject) {\n canvas.remove(activeObject);\n saveCanvas(contentStateRef, setContentState);\n canvas.requestRenderAll();\n }\n }\n };\n\n // Attach listeners once\n document.addEventListener(\"keydown\", onKeyDown);\n canvas.on(\"mouse:down\", onMouseDown);\n canvas.on(\"mouse:move\", onMouseMove);\n canvas.on(\"mouse:up\", onMouseUp);\n\n return {\n removeEventListeners: () => {\n canvas.off(\"mouse:down\", onMouseDown);\n canvas.off(\"mouse:move\", onMouseMove);\n canvas.off(\"mouse:up\", onMouseUp);\n document.removeEventListener(\"keydown\", onKeyDown);\n },\n };\n};\n\nexport default EraserTool;\n" }, { "path": "src/pages/Content/canvas/modules/History.jsx", "content": "import { fabric } from \"fabric\";\n\nconst getState = (stateOrRef) =>\n stateOrRef && stateOrRef.current ? stateOrRef.current : stateOrRef;\n\n// Undo and redo functionality for Fabric.js\nconst undoCanvas = (stateOrRef, setToolSettings) => {\n const state = getState(stateOrRef);\n if (!state?.canvas) return;\n\n const canvas = state.canvas;\n\n if (state.undoStack?.length > 0) {\n const undoStack = [...state.undoStack];\n const redoStack = [...(state.redoStack || [])];\n\n const lastItem = undoStack.pop();\n redoStack.push(lastItem);\n\n const penultimateItem = undoStack[undoStack.length - 1];\n if (!penultimateItem) {\n // nothing meaningful to load\n setToolSettings({ ...state, undoStack, redoStack });\n return;\n }\n\n canvas.clear();\n canvas.renderAll();\n\n canvas.loadFromJSON(penultimateItem, () => {\n canvas.discardActiveObject();\n canvas.renderAll();\n });\n\n setToolSettings({ ...state, undoStack, redoStack });\n }\n};\n\nconst redoCanvas = (stateOrRef, setToolSettings) => {\n const state = getState(stateOrRef);\n if (!state?.canvas) return;\n\n const canvas = state.canvas;\n\n if (state.redoStack?.length > 0) {\n const undoStack = [...(state.undoStack || [])];\n const redoStack = [...state.redoStack];\n\n const lastItem = redoStack.pop();\n undoStack.push(lastItem);\n\n canvas.loadFromJSON(lastItem, () => {\n canvas.discardActiveObject();\n canvas.renderAll();\n });\n\n setToolSettings({ ...state, undoStack, redoStack });\n }\n};\n\nconst saveCanvas = (stateOrRef, setToolSettings) => {\n const state = getState(stateOrRef);\n if (!state?.canvas) return;\n\n const canvas = state.canvas;\n\n const json = canvas.toJSON([\n \"id\",\n \"selectable\",\n \"evented\",\n \"hasControls\",\n \"hasBorders\",\n \"hasRotatingPoint\",\n \"subTargetCheck\",\n \"originX\",\n \"originY\",\n \"perPixelTargetFind\",\n \"skipAutoWidthAdjustment\",\n ]);\n\n const jsonString = JSON.stringify(json);\n const undoStack = [...(state.undoStack || []), jsonString];\n\n setToolSettings({\n ...state,\n undoStack,\n redoStack: [],\n });\n};\n\nconst checkChanges = (canvas, stateRef, setToolSettings) => {\n const onChange = () => {\n // always save with latest state\n saveCanvas(stateRef, setToolSettings);\n };\n\n canvas.on(\"object:modified\", onChange);\n\n return {\n removeEventListeners: function () {\n canvas.off(\"object:modified\", onChange);\n },\n };\n};\n\nexport { undoCanvas, redoCanvas, saveCanvas, checkChanges };\n" }, { "path": "src/pages/Content/canvas/modules/ImageTool.jsx", "content": "import { fabric } from \"fabric\";\n\nconst ImageTool = (\n canvas,\n src,\n toolSettings,\n setToolSettings,\n saveCanvas,\n contentState\n) => {\n const image = new Image();\n let fabricImage = null;\n\n image.src = src;\n\n const state = {\n isPlacing: true,\n };\n\n const cleanup = () => {\n state.isPlacing = false;\n canvas.off(\"mouse:move\", onMouseMove);\n canvas.off(\"mouse:down\", onMouseDown);\n canvas.off(\"mouse:up\", onMouseUp);\n };\n\n const onMouseMove = (o) => {\n if (!fabricImage || !state.isPlacing) return;\n const pointer = canvas.getPointer(o.e);\n fabricImage.set({ left: pointer.x, top: pointer.y });\n fabricImage.setCoords();\n canvas.requestRenderAll();\n };\n\n const onMouseDown = () => {\n if (!fabricImage || !state.isPlacing) return;\n state.isPlacing = false;\n\n fabricImage.set({\n opacity: 1,\n selectable: true,\n });\n fabricImage.setCoords();\n\n canvas.setActiveObject(fabricImage);\n canvas.requestRenderAll();\n\n saveCanvas(toolSettings, setToolSettings);\n setToolSettings({ ...toolSettings, tool: \"select\", isAddingImage: false });\n\n // Make other objects selectable again\n canvas.forEachObject((obj) => {\n obj.selectable = true;\n });\n\n cleanup();\n };\n\n const onMouseUp = () => {};\n\n image.onload = () => {\n fabricImage = new fabric.Image(image);\n fabricImage.set({\n left: 0,\n top: 0,\n originX: \"left\",\n originY: \"top\",\n strokeUniform: true,\n fill: \"transparent\",\n angle: 0,\n noScaleCache: false,\n opacity: 0.5,\n selectable: false,\n });\n\n // Scale down\n const maxWidth = 500;\n const maxHeight = 500;\n const width = fabricImage.width;\n const height = fabricImage.height;\n const ratio = Math.min(maxWidth / width, maxHeight / height);\n fabricImage.scale(ratio);\n\n canvas.add(fabricImage);\n canvas.bringToFront(fabricImage);\n canvas.requestRenderAll();\n\n // Make other objects unselectable\n canvas.forEachObject((obj) => {\n obj.selectable = false;\n });\n\n canvas.on(\"mouse:move\", onMouseMove);\n canvas.on(\"mouse:down\", onMouseDown);\n canvas.on(\"mouse:up\", onMouseUp);\n\n // Open toast cancel handler\n contentState.openToast(chrome.i18n.getMessage(\"addImageToastTitle\"), () => {\n if (fabricImage) {\n canvas.remove(fabricImage);\n canvas.requestRenderAll();\n }\n setToolSettings({\n ...toolSettings,\n tool: \"select\",\n isAddingImage: false,\n });\n canvas.forEachObject((obj) => (obj.selectable = true));\n cleanup();\n });\n };\n\n return {\n removeEventListeners: cleanup,\n };\n};\n\nexport default ImageTool;\n" }, { "path": "src/pages/Content/canvas/modules/PenTool.jsx", "content": "import { fabric } from \"fabric\";\n\nconst PenTool = (canvas, contentStateRef, setContentState, saveCanvas) => {\n const getState = () => contentStateRef.current;\n\n const resetBrushStroke = () => {\n const brush = canvas.freeDrawingBrush;\n if (!brush) return;\n\n // Fabric versions differ; do all safe resets.\n if (Array.isArray(brush._points)) brush._points.length = 0;\n if (Array.isArray(brush.points)) brush.points.length = 0;\n\n // Some brushes keep a \"latest\" pointer\n brush._reset && brush._reset();\n };\n\n const ensureBrush = () => {\n // fabric creates freeDrawingBrush lazily; make sure it's there\n if (!canvas.freeDrawingBrush) {\n canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);\n }\n return canvas.freeDrawingBrush;\n };\n\n const syncBrushFromState = () => {\n const state = getState();\n if (!state) return;\n\n const brush = ensureBrush();\n\n // reset defaults\n brush.drawStraightLine = false;\n brush.straightLineKey = \"none\";\n brush.strokeLineCap = \"round\";\n brush.globalCompositeOperation = \"source-over\";\n\n if (state.tool === \"pen\") {\n brush.width = (state.strokeWidth || 2) * 4;\n brush.color = state.color;\n resetBrushStroke();\n return;\n }\n\n if (state.tool === \"highlighter\") {\n brush.width = (state.strokeWidth || 2) * 10;\n brush.color = new fabric.Color(state.color).setAlpha(0.5).toRgba();\n brush.globalCompositeOperation = \"destination-over\";\n brush.strokeLineCap = \"square\";\n resetBrushStroke();\n }\n };\n\n // Sync brush on interactions so tool switches apply immediately\n const onMouseDown = () => {\n syncBrushFromState();\n };\n\n const onMouseUp = () => {\n const state = getState();\n if (!state) return;\n if (state.tool !== \"pen\" && state.tool !== \"highlighter\") return;\n\n // Save with latest state\n // If you updated saveCanvas to accept ref, use: saveCanvas(contentStateRef, setContentState)\n saveCanvas(state, setContentState);\n };\n\n const onPathCreated = (o) => {\n // Only wrap paths if we were drawing (pen/highlighter)\n const state = getState();\n if (!state) return;\n if (state.tool !== \"pen\" && state.tool !== \"highlighter\") return;\n\n const path = o.path;\n if (!path) return;\n\n const pathCopy = new fabric.Path(path.path, {\n id: \"select-stroke\",\n stroke: \"#0D99FF\",\n strokeWidth: 2,\n fill: null,\n opacity: 0,\n selectable: false,\n evented: false,\n });\n\n const group = new fabric.Group([path, pathCopy], {\n selectable: true,\n evented: true,\n id: \"select-group\",\n subTargetCheck: true,\n perPixelTargetFind: true,\n hasControls: false,\n hasBorders: false,\n });\n\n canvas.add(group);\n canvas.remove(path);\n canvas.requestRenderAll();\n };\n\n const hideAllSelectStrokes = () => {\n canvas.getObjects().forEach((obj) => {\n if (obj.type === \"group\") {\n obj._objects?.forEach((child) => {\n if (child.id === \"select-stroke\") child.set({ opacity: 0 });\n });\n }\n });\n };\n\n const activateStroke = () => {\n const state = getState();\n if (!state) return;\n if (state.tool !== \"select\") return;\n\n hideAllSelectStrokes();\n\n const activeObject = canvas.getActiveObject();\n if (activeObject && activeObject.id === \"select-group\") {\n activeObject._objects?.forEach((child) => {\n if (child.id === \"select-stroke\") child.set({ opacity: 1 });\n });\n }\n\n const activeObjects = canvas.getActiveObjects();\n if (activeObjects && activeObjects.length > 1) {\n activeObjects.forEach((obj) => {\n if (obj.id === \"select-group\") {\n obj._objects?.forEach((child) => {\n if (child.id === \"select-stroke\") child.set({ opacity: 1 });\n });\n }\n });\n }\n\n canvas.requestRenderAll();\n };\n\n const deactivateStroke = () => {\n hideAllSelectStrokes();\n canvas.requestRenderAll();\n };\n\n // Attach once\n canvas.on(\"mouse:down\", onMouseDown);\n canvas.on(\"mouse:up\", onMouseUp);\n canvas.on(\"path:created\", onPathCreated);\n canvas.on(\"selection:created\", activateStroke);\n canvas.on(\"selection:updated\", activateStroke);\n canvas.on(\"selection:cleared\", deactivateStroke);\n\n // Initial sync\n syncBrushFromState();\n\n return {\n removeEventListeners: () => {\n canvas.off(\"mouse:down\", onMouseDown);\n canvas.off(\"mouse:up\", onMouseUp);\n canvas.off(\"path:created\", onPathCreated);\n canvas.off(\"selection:created\", activateStroke);\n canvas.off(\"selection:updated\", activateStroke);\n canvas.off(\"selection:cleared\", deactivateStroke);\n },\n };\n};\n\nexport default PenTool;\n" }, { "path": "src/pages/Content/canvas/modules/SelectTool.jsx", "content": "import { fabric } from \"fabric\";\n\nconst SelectTool = (canvas, contentStateRef, setContentState) => {\n const getState = () => contentStateRef.current;\n\n // On mouse over object\n const onMouseOver = (o) => {\n const state = getState();\n if (!state) return;\n if (state.tool !== \"select\") return;\n if (state.isAddingImage) return;\n if (!o.target) return;\n\n if (o.target !== canvas.getActiveObject()) {\n if (o.target.type === \"group\" && o.target.id === \"select-group\") {\n const selectStroke = o.target._objects?.find(\n (object) => object.id === \"select-stroke\",\n );\n if (selectStroke) selectStroke.set({ opacity: 1 });\n } else if (o.target.type === \"group\" && o.target.id === \"arrowGroup\") {\n o.target._objects?.forEach((obj) => {\n if (obj.id === \"arrowLineControl\") obj.set({ opacity: 1 });\n });\n } else {\n // draws fabric controls on the top context\n o.target._renderControls(o.target.canvas.contextTop, {\n hasControls: false,\n });\n }\n canvas.requestRenderAll();\n }\n };\n\n // On mouse out object\n const onMouseOut = (o) => {\n const state = getState();\n if (!state) return;\n if (state.tool !== \"select\") return;\n if (!o.target) return;\n\n if (o.target !== canvas.getActiveObject()) {\n if (o.target.type === \"group\" && o.target.id === \"select-group\") {\n const selectStroke = o.target._objects?.find(\n (object) => object.id === \"select-stroke\",\n );\n if (selectStroke) selectStroke.set({ opacity: 0 });\n } else if (o.target.type === \"group\" && o.target.id === \"arrowGroup\") {\n o.target._objects?.forEach((obj) => {\n if (obj.id === \"arrowLineControl\") obj.set({ opacity: 0 });\n });\n }\n }\n\n if (o.target?.canvas?.contextTop) {\n o.target.canvas.clearContext(o.target.canvas.contextTop);\n }\n canvas.requestRenderAll();\n };\n\n const onMouseDown = (o) => {\n const state = getState();\n if (!state) return;\n if (state.isAddingImage) return;\n if (state.tool !== \"select\") return;\n if (!o.target?.canvas?.contextTop) return;\n\n o.target.canvas.clearContext(o.target.canvas.contextTop);\n };\n\n canvas.on(\"mouse:over\", onMouseOver);\n canvas.on(\"mouse:out\", onMouseOut);\n canvas.on(\"mouse:down\", onMouseDown);\n\n return {\n removeEventListeners: function () {\n canvas.off(\"mouse:over\", onMouseOver);\n canvas.off(\"mouse:out\", onMouseOut);\n canvas.off(\"mouse:down\", onMouseDown);\n },\n };\n};\n\nexport default SelectTool;\n" }, { "path": "src/pages/Content/canvas/modules/ShapeTool.jsx", "content": "import { fabric } from \"fabric\";\n\nconst ShapeTool = (canvas, contentStateRef, setContentState, saveCanvas) => {\n const getState = () => contentStateRef.current;\n\n let shape = null;\n let isDown = false;\n let origX = 0;\n let origY = 0;\n\n const makeShape = (state, pointer) => {\n const color = state.color;\n const strokeWidth = (state.strokeWidth || 2) * 6;\n const fill = state.shapeFill ? color : \"transparent\";\n\n if (state.shape === \"rectangle\") {\n return new fabric.Rect({\n left: origX,\n top: origY,\n originX: \"left\",\n originY: \"top\",\n width: 0,\n height: 0,\n strokeUniform: true,\n angle: 0,\n fill,\n noScaleCache: false,\n stroke: color,\n strokeWidth,\n });\n }\n\n if (state.shape === \"triangle\") {\n return new fabric.Triangle({\n left: origX,\n top: origY,\n originX: \"left\",\n originY: \"top\",\n strokeMilterLimit: 8,\n objectCaching: false,\n width: 0,\n height: 0,\n strokeUniform: true,\n angle: 0,\n fill,\n noScaleCache: false,\n stroke: color,\n strokeWidth,\n });\n }\n\n // circle\n return new fabric.Circle({\n left: origX,\n top: origY,\n originX: \"left\",\n originY: \"top\",\n radius: 0,\n strokeUniform: true,\n angle: 0,\n fill,\n noScaleCache: false,\n stroke: color,\n strokeWidth,\n });\n };\n\n const onMouseDown = (o) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"shape\") return;\n\n isDown = true;\n\n const pointer = canvas.getPointer(o.e);\n origX = pointer.x;\n origY = pointer.y;\n\n shape = makeShape(state, pointer);\n canvas.add(shape);\n canvas.requestRenderAll();\n };\n\n const onMouseMove = (o) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"shape\") return;\n if (!isDown || !shape) return;\n\n const pointer = canvas.getPointer(o.e);\n\n // Handle dragging “backwards”\n const left = Math.min(origX, pointer.x);\n const top = Math.min(origY, pointer.y);\n const w = Math.abs(pointer.x - origX);\n const h = Math.abs(pointer.y - origY);\n\n shape.set({ left, top });\n\n if (state.shape === \"rectangle\" || state.shape === \"triangle\") {\n shape.set({ width: w, height: h });\n } else if (state.shape === \"circle\") {\n // Use min dimension so it stays circular\n const r = Math.min(w, h) / 2;\n shape.set({ radius: r });\n }\n\n shape.setCoords();\n canvas.requestRenderAll();\n };\n\n const onMouseUp = () => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"shape\") return;\n if (!isDown) return;\n\n isDown = false;\n\n canvas.requestRenderAll();\n\n // Save with latest state (not stale snapshot)\n saveCanvas({ ...state, tool: \"select\" }, setContentState);\n\n if (shape) {\n canvas.setActiveObject(shape);\n canvas.requestRenderAll();\n }\n };\n\n canvas.on(\"mouse:down\", onMouseDown);\n canvas.on(\"mouse:move\", onMouseMove);\n canvas.on(\"mouse:up\", onMouseUp);\n\n return {\n removeEventListeners: () => {\n canvas.off(\"mouse:down\", onMouseDown);\n canvas.off(\"mouse:move\", onMouseMove);\n canvas.off(\"mouse:up\", onMouseUp);\n },\n };\n};\n\nexport default ShapeTool;\n" }, { "path": "src/pages/Content/canvas/modules/TextTool.jsx", "content": "import { fabric } from \"fabric\";\n\nconst TextTool = (canvas, contentStateRef, setContentState, saveCanvas) => {\n const getState = () => contentStateRef.current;\n\n // Track the currently-created textbox so we can finalize it cleanly\n let activeCreatedText = null;\n\n const finalizeIfNeeded = () => {\n if (!activeCreatedText) return;\n\n const text = activeCreatedText;\n const currentActive = canvas.getActiveObject();\n\n // If user clicked away / ended editing\n if (currentActive !== text) {\n if ((text.text || \"\").trim() === \"\") {\n canvas.remove(text);\n } else {\n // Save using latest state\n saveCanvas({ ...getState(), canvas }, setContentState);\n }\n activeCreatedText = null;\n canvas.requestRenderAll();\n }\n };\n\n const onCanvasMouseDownCapture = (o) => {\n // This runs on any mouse down to potentially finalize the last text.\n // But don't interfere if user is still editing that text.\n finalizeIfNeeded();\n };\n\n const onMouseDown = (o) => {\n const state = getState();\n if (!state?.drawingMode) return;\n if (state.tool !== \"text\") return;\n\n // Before creating a new one, finalize previous if any\n finalizeIfNeeded();\n\n const pointer = canvas.getPointer(o.e);\n const x = pointer.x;\n const y = pointer.y;\n\n const text = new fabric.Textbox(\"\", {\n left: x,\n top: y,\n fontFamily: \"Satoshi-Medium\",\n fontSize: 20,\n fill: state.color,\n fontWeight: \"normal\",\n fontStyle: \"normal\",\n originX: \"left\",\n originY: \"top\",\n textAlign: \"center\",\n lockUniScaling: true,\n centeredScaling: true,\n skipAutoWidthAdjustment: false,\n perPixelTargetFind: false,\n });\n\n text.on(\"editing:entered\", () => {\n text.borderColor = \"#0D99FF\";\n });\n\n canvas.add(text);\n canvas.setActiveObject(text);\n\n // Start editing\n text.enterEditing();\n text.selectAll();\n\n activeCreatedText = text;\n\n // Set tool back to select (use latest state)\n setContentState((prev) => ({\n ...prev,\n tool: \"select\",\n }));\n\n canvas.requestRenderAll();\n };\n\n const onKeyPress = (event) => {\n const obj = canvas.getActiveObject();\n if (!obj || typeof obj !== \"object\") return;\n\n if (obj.type !== \"textbox\" || !obj.isEditing) return;\n\n const text = obj;\n\n // If user explicitly resized, skip\n if (text.skipAutoWidthAdjustment) return;\n\n // Guard: _textLines might not exist at some moments\n const lines = text._textLines || [];\n if (lines.length === 0) return;\n\n let currentLine = lines[lines.length - 1].join(\"\");\n\n // Backspace\n if (event.key === \"Backspace\" && currentLine.length > 0) {\n currentLine = currentLine.slice(0, -1);\n } else if (event.key && event.key.length === 1) {\n currentLine += event.key;\n } else {\n // ignore other keys\n return;\n }\n\n // Measure\n const tempCanvas = document.createElement(\"canvas\");\n const tempCtx = tempCanvas.getContext(\"2d\");\n tempCtx.font = `${text.fontSize}px ${text.fontFamily}`;\n const textMetrics = tempCtx.measureText(currentLine);\n\n const maxLineWidth = getMaxLineWidth(lines, text);\n\n // Expand width if needed\n if (textMetrics.width > text.width) {\n const nextWidth = Math.max(text.width, textMetrics.width + 2);\n text.set({\n left: text.left - (nextWidth - text.width) / 2,\n width: nextWidth,\n });\n } else if (textMetrics.width < maxLineWidth) {\n text.set({\n left: text.left + (text.width - maxLineWidth) / 2,\n width: maxLineWidth,\n });\n }\n\n canvas.requestRenderAll();\n };\n\n function getMaxLineWidth(textLines, text) {\n let maxLineWidth = 0;\n const tempCanvas = document.createElement(\"canvas\");\n const tempCtx = tempCanvas.getContext(\"2d\");\n tempCtx.font = `${text.fontSize}px ${text.fontFamily}`;\n\n for (let i = 0; i < textLines.length; i++) {\n const line = textLines[i].join(\"\");\n const lineWidth = tempCtx.measureText(line).width;\n maxLineWidth = Math.max(maxLineWidth, lineWidth);\n }\n\n return maxLineWidth;\n }\n\n const onResize = (e) => {\n if (e?.target?.type !== \"textbox\") return;\n e.target.skipAutoWidthAdjustment = true;\n canvas.requestRenderAll();\n };\n\n // Hover logic: DON'T use anonymous mouse:move that you later nuke.\n const onMouseMove = (event) => {\n const pointer = canvas.getPointer(event.e);\n let hoveringTextbox = false;\n\n canvas.forEachObject((obj) => {\n if (obj.type === \"textbox\" && obj.containsPoint(pointer)) {\n hoveringTextbox = true;\n }\n });\n\n canvas.perPixelTargetFind = !hoveringTextbox;\n };\n\n // Attach listeners once\n // Note: we attach the “finalize” handler too, but it’s cheap.\n canvas.on(\"mouse:down\", onCanvasMouseDownCapture);\n canvas.on(\"mouse:down\", onMouseDown);\n\n document.addEventListener(\"keydown\", onKeyPress);\n canvas.on(\"object:resizing\", onResize);\n canvas.on(\"mouse:move\", onMouseMove);\n\n return {\n removeEventListeners: () => {\n canvas.off(\"mouse:down\", onCanvasMouseDownCapture);\n canvas.off(\"mouse:down\", onMouseDown);\n document.removeEventListener(\"keydown\", onKeyPress);\n canvas.off(\"object:resizing\", onResize);\n canvas.off(\"mouse:move\", onMouseMove);\n },\n };\n};\n\nexport default TextTool;\n" }, { "path": "src/pages/Content/canvas/styles/_Canvas.scss", "content": "@use '../../styles/_variables' as *;\n@use './layout/Canvas';" }, { "path": "src/pages/Content/canvas/styles/layout/_Canvas.scss", "content": "@use '../../../styles/_variables' as *;\n\n.CanvasContainer {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\tpointer-events: all!important;\n\ttop: 0px!important;\n\tleft: 0px!important;\n\tz-index: 99999999999!important;\n}\n.canvas {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\ttop: 0px!important;\n\tleft: 0px!important;\n\tz-index: 99999999999!important;\n}\n.canvas-container {\n\twidth: 100vw!important;\n\theight: 100vh!important;\n\ttop: 0px!important;\n\tleft: 0px!important;\n\tz-index: 99999999999;\n\tposition: absolute!important;\n}" }, { "path": "src/pages/Content/context/ContentState.jsx", "content": "import React, {\n createContext,\n useState,\n useEffect,\n useCallback,\n useRef,\n} from \"react\";\n\nimport { updateFromStorage } from \"./utils/updateFromStorage\";\n\n// Shortcuts\nimport Shortcuts from \"../shortcuts/Shortcuts\";\nimport DevHUD from \"../DevHUD\";\n\n// import { initializeContentMessageListener } from \"./messaging/messageListener\";\nimport { setupHandlers } from \"./messaging/handlers\";\n\nimport { checkAuthStatus } from \"./utils/checkAuthStatus\";\nimport {\n initStartFlowTrace,\n traceStep,\n setStartFlowOutcome,\n} from \"../../utils/startFlowTrace\";\n\n//create a context, with createContext api\nexport const contentStateContext = createContext();\nexport const contentStateRef = { current: null };\nexport let setContentState = () => {};\nexport let setTimer = () => {};\n\nconst CURSOR_EFFECTS = [\"target\", \"highlight\", \"spotlight\"];\n\nconst normalizeCursorEffects = (effects) => {\n if (!Array.isArray(effects)) return [];\n return effects.filter((effect) => CURSOR_EFFECTS.includes(effect));\n};\n\nconst deriveCursorMode = (effects, fallbackMode) => {\n if (effects.length === 0) return \"none\";\n if (effects.length === 1) return effects[0];\n if (fallbackMode && effects.includes(fallbackMode)) return fallbackMode;\n return effects[0] || \"none\";\n};\n\nconst ContentState = (props) => {\n const [timer, setTimerInternal] = React.useState(0);\n const CLOUD_FEATURES_ENABLED =\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\";\n setTimer = setTimerInternal;\n const [URL, setURL] = useState(\n \"https://help.screenity.io/getting-started/77KizPC8MHVGfpKpqdux9D/why-does-screenity-ask-for-permissions/9AAE8zJ6iiUtCAtjn4SUT1\",\n );\n const [URL2, setURL2] = useState(\n \"https://help.screenity.io/troubleshooting/9Jy5RGjNrBB42hqUdREQ7W/how-to-grant-screenity-permission-to-record-your-camera-and-microphone/x6U69TnrbMjy5CQ96Er2E9\",\n );\n const startBeepRef = useRef(null);\n const stopBeepRef = useRef(null);\n const prevRecordingRef = useRef(null);\n const hydratedRef = useRef(false);\n const suppressStopBeepRef = useRef(false);\n const suppressStartBeepRef = useRef(false);\n const tabIdRef = useRef(null);\n const activeTabRef = useRef(null);\n const tabRecordedIdRef = useRef(null);\n const recordingUiTabRef = useRef(null);\n const recordingStartTimeRef = useRef(null);\n const timerReadSeqRef = useRef(0);\n const lastBeepStartTimeRef = useRef(null);\n const recordingBeepTabIdRef = useRef(null);\n const verifyDebounceRef = useRef(null);\n\n const isTargetTab = useCallback(() => {\n const tabId = tabIdRef.current;\n const tabRecordedID = tabRecordedIdRef.current;\n const recordingUiTabId = recordingUiTabRef.current;\n const activeTab = activeTabRef.current;\n\n if (tabRecordedID != null) {\n return tabId != null && tabId === tabRecordedID;\n }\n if (recordingUiTabId != null) {\n return tabId != null && tabId === recordingUiTabId;\n }\n if (activeTab != null) {\n return tabId != null && tabId === activeTab;\n }\n return true;\n }, []);\n\n // Check if the user is logged in\n const verifyUser = useCallback(async () => {\n if (!CLOUD_FEATURES_ENABLED) return;\n const result = await checkAuthStatus();\n\n setContentState((prev) => ({\n ...prev,\n isLoggedIn: result.authenticated,\n screenityUser: result.user,\n isSubscribed: result.subscribed,\n hasSubscribedBefore: result.hasSubscribedBefore,\n proSubscription: result.proSubscription,\n ...(result.authenticated ? { wasLoggedIn: false } : {}),\n }));\n\n if (result.authenticated) {\n // Offscreen recording and client-side zoom are not available\n setContentState((prev) => ({\n ...prev,\n offscreenRecording: false,\n zoomEnabled: false,\n }));\n\n chrome.storage.local.set({\n offscreenRecording: false,\n zoomEnabled: false,\n wasLoggedIn: false,\n });\n }\n }, [CLOUD_FEATURES_ENABLED]);\n useEffect(() => {\n verifyUser();\n }, [verifyUser]);\n\n useEffect(() => {\n chrome.runtime.sendMessage({ type: \"get-tab-id\" }, (response) => {\n if (response?.tabId !== undefined && response?.tabId !== null) {\n tabIdRef.current = response.tabId;\n }\n });\n\n chrome.storage.local.get(\n [\n \"activeTab\",\n \"tabRecordedID\",\n \"recordingUiTabId\",\n \"recordingStartTime\",\n \"recordingBeepTabId\",\n \"recordingNow\",\n ],\n (result) => {\n activeTabRef.current = result.activeTab ?? null;\n tabRecordedIdRef.current = result.tabRecordedID ?? null;\n recordingUiTabRef.current = result.recordingUiTabId ?? null;\n recordingStartTimeRef.current = result.recordingStartTime ?? null;\n recordingBeepTabIdRef.current = result.recordingBeepTabId ?? null;\n },\n );\n }, []);\n\n useEffect(() => {\n const locale = chrome.i18n.getMessage(\"@@ui_locale\");\n if (!locale.includes(\"en\")) {\n setURL(\n \"https://translate.google.com/translate?sl=en&tl=\" +\n locale +\n \"&u=https://help.screenity.io/getting-started/77KizPC8MHVGfpKpqdux9D/why-does-screenity-ask-for-permissions/9AAE8zJ6iiUtCAtjn4SUT1\",\n );\n setURL2(\n \"https://translate.google.com/translate?sl=en&tl=\" +\n locale +\n \"&u=https://help.screenity.io/troubleshooting/9Jy5RGjNrBB42hqUdREQ7W/how-to-grant-screenity-permission-to-record-your-camera-and-microphone/x6U69TnrbMjy5CQ96Er2E9\",\n );\n }\n }, []);\n\n const startRecording = useCallback(() => {\n const shouldClearCountdown =\n !contentStateRef.current?.isCountdownVisible &&\n !contentStateRef.current?.countdownActive;\n if (contentStateRef.current.alarm) {\n if (contentStateRef.current.alarmTime === 0) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n alarm: false,\n }));\n chrome.storage.local.set({ alarm: false });\n setTimer(0);\n } else {\n setTimer(contentStateRef.current.alarmTime);\n }\n } else {\n setTimer(0);\n }\n setContentState((prevContentState) => ({\n ...prevContentState,\n recording: true,\n paused: false,\n timeWarning: false,\n pendingRecording: false,\n preparingRecording: false,\n ...(shouldClearCountdown\n ? { countdownActive: false, isCountdownVisible: false }\n : {}),\n }));\n if (tabIdRef.current != null) {\n const preferredTab =\n tabRecordedIdRef.current ??\n recordingUiTabRef.current ??\n tabIdRef.current;\n chrome.storage.local.set({ recordingBeepTabId: preferredTab });\n recordingBeepTabIdRef.current = preferredTab;\n }\n chrome.storage.local.set({ restarting: false });\n traceStep(\"recordingStarted\");\n setStartFlowOutcome(\"ok\");\n\n // This cannot be triggered from here because the user might not have the page focused\n //chrome.runtime.sendMessage({ type: \"start-recording\" });\n }, []);\n\n const restartRecording = useCallback(() => {\n // Restart transitions recording true -> false briefly; suppress the normal\n // \"stop\" beep because this is not a final stop/save action.\n suppressStopBeepRef.current = true;\n const sourceTabId = tabIdRef.current ?? activeTabRef.current ?? null;\n chrome.storage.local.set({ restarting: true });\n setTimeout(() => {\n chrome.runtime.sendMessage({ type: \"discard-backup-restart\" });\n chrome.runtime.sendMessage({ type: \"handle-restart\", sourceTabId });\n if (contentStateRef.current.alarm) {\n setTimer(contentStateRef.current.alarmTime);\n } else {\n setTimer(0);\n }\n setContentState((prevContentState) => ({\n ...prevContentState,\n recording: false,\n time: 0,\n paused: false,\n }));\n }, 100);\n }, []);\n\n useEffect(() => {\n (async () => {\n let realSupport = false;\n\n if (\"VideoEncoder\" in window) {\n try {\n const support = await VideoEncoder.isConfigSupported({\n codec: \"vp8\",\n width: 16,\n height: 16,\n });\n realSupport = support.supported;\n } catch {}\n }\n\n chrome.storage.local.set({ realWebCodecsSupport: realSupport });\n })();\n }, []);\n\n const stopRecording = useCallback(() => {\n chrome.runtime.sendMessage({ type: \"clear-recording-alarm\" });\n chrome.storage.local.set({\n restarting: false,\n tabRecordedID: null,\n drawingMode: false,\n blurMode: false,\n cursorMode: \"none\",\n cursorEffects: [],\n });\n setContentState((prevContentState) => ({\n ...prevContentState,\n recording: false,\n paused: false,\n timeWarning: false,\n showExtension: false,\n blurMode: false,\n showPopup: true,\n pendingRecording: false,\n tabCaptureFrame: false,\n pipEnded: false,\n time: 0,\n timer: 0,\n preparingRecording: false,\n drawingMode: false,\n blurMode: false,\n toolbarMode: \"\",\n cursorMode: \"none\",\n cursorEffects: [],\n }));\n // Remove blur from all elements\n const elements = document.querySelectorAll(\".screenity-blur\");\n elements.forEach((element) => {\n element.classList.remove(\"screenity-blur\");\n });\n setTimer(0);\n chrome.runtime.sendMessage(\n { type: \"stop-recording-tab\", reason: \"content-toolbar-stop\" },\n (res) => {\n if (!res || res.ok !== true) {\n console.warn(\"Stop command not acknowledged, retrying…\");\n setTimeout(() => {\n chrome.runtime.sendMessage({\n type: \"stop-recording-tab\",\n reason: \"content-toolbar-stop-retry\",\n });\n }, 200);\n }\n },\n );\n });\n\n const pauseRecording = useCallback((dismiss) => {\n if (contentStateRef.current?.paused) return;\n chrome.runtime.sendMessage({ type: \"pause-recording-tab\" });\n\n setTimeout(() => {\n setContentState((prev) => ({\n ...prev,\n paused: true,\n }));\n if (!dismiss) {\n contentStateRef.current.openToast(\n chrome.i18n.getMessage(\"pausedRecordingToast\"),\n function () {},\n );\n }\n }, 100);\n });\n\n const resumeRecording = useCallback(() => {\n if (!contentStateRef.current?.paused) return;\n chrome.runtime.sendMessage({ type: \"resume-recording-tab\" });\n\n setContentState((prev) => ({\n ...prev,\n paused: false,\n }));\n });\n\n const dismissRecording = useCallback(() => {\n setStartFlowOutcome(\"cancelled\");\n suppressStopBeepRef.current = true;\n chrome.storage.local.set({ restarting: false });\n chrome.runtime.sendMessage({ type: \"dismiss-recording-tab\" });\n setContentState((prevContentState) => ({\n ...prevContentState,\n recording: false,\n paused: false,\n showExtension: false,\n timeWarning: false,\n showPopup: true,\n time: 0,\n timer: 0,\n tabCaptureFrame: false,\n pendingRecording: false,\n preparingRecording: false,\n pipEnded: false,\n blurMode: false,\n drawingMode: false,\n }));\n // Remove blur from all elements\n const elements = document.querySelectorAll(\".screenity-blur\");\n elements.forEach((element) => {\n element.classList.remove(\"screenity-blur\");\n });\n setTimer(0);\n });\n\n const checkChromeCapturePermissions = useCallback(async () => {\n const permissions = [\"desktopCapture\", \"alarms\", \"offscreen\"];\n\n // Only request clipboardWrite if the user is logged in and subscribed\n if (\n contentStateRef.current?.isLoggedIn &&\n contentStateRef.current?.isSubscribed\n ) {\n permissions.push(\"clipboardWrite\");\n }\n\n const containsPromise = new Promise((resolve) => {\n chrome.permissions.contains({ permissions }, (result) => {\n resolve(result);\n });\n });\n\n const result = await containsPromise;\n\n if (!result) {\n const requestPromise = new Promise((resolve) => {\n chrome.permissions.request({ permissions }, (granted) => {\n resolve(granted);\n });\n });\n\n const granted = await requestPromise;\n\n if (!granted) {\n return false;\n } else {\n chrome.runtime.sendMessage({ type: \"add-alarm-listener\" });\n return true;\n }\n } else {\n return true;\n }\n }, []);\n\n const checkChromeCapturePermissionsSW = useCallback(async () => {\n const { isLoggedIn, isSubscribed } = contentStateRef.current;\n\n return new Promise((resolve) => {\n chrome.runtime.sendMessage(\n {\n type: \"check-capture-permissions\",\n isLoggedIn,\n isSubscribed,\n },\n (response) => {\n resolve(response.status === \"ok\");\n },\n );\n });\n }, []);\n\n const startStreaming = useCallback(async () => {\n // Init start-flow trace for this attempt\n const attemptId = `ra-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;\n await initStartFlowTrace(attemptId, {\n recordingType: contentStateRef.current.recordingType,\n isPro: Boolean(\n contentStateRef.current.isLoggedIn &&\n contentStateRef.current.isSubscribed &&\n CLOUD_FEATURES_ENABLED,\n ),\n countdown: Boolean(contentStateRef.current.countdown),\n });\n traceStep(\"startStreaming\");\n\n // Overlay becomes non-blocking while pending. Popup stays open until the\n // recorder tab takes focus. Also clear countdownCancelled so a stale\n // cancellation from a previous attempt can't block this one.\n // Write to storage immediately (not via useEffect) so the tab activation\n // listener sees pendingRecording=true before the recorder tab opens.\n chrome.storage.local.set({ pendingRecording: true });\n setContentState((prev) => ({\n ...prev,\n pendingRecording: true,\n countdownCancelled: false,\n }));\n\n let permission = false;\n\n if (\n contentStateRef.current?.isLoggedIn &&\n contentStateRef.current?.isSubscribed &&\n CLOUD_FEATURES_ENABLED\n ) {\n const storageResponse = await chrome.runtime.sendMessage({\n type: \"check-storage-quota\",\n });\n\n const { success, canUpload, error } = storageResponse;\n\n if (success && canUpload === false) {\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"storageLimitReachedTitle\"),\n chrome.i18n.getMessage(\"storageLimitReachedDescription\"),\n chrome.i18n.getMessage(\"manageStorageButtonLabel\"),\n chrome.i18n.getMessage(\"closeModalLabel\"),\n () => {\n window.open(process.env.SCREENITY_APP_BASE, \"_blank\");\n },\n () => {},\n );\n } else if (!success) {\n const isSubError = error === \"Subscription inactive\";\n const isAuthError = error === \"Not authenticated\";\n\n // Update content state if subscription is inactive\n if (isSubError) {\n contentStateRef.current.setContentState((prev) => ({\n ...prev,\n isSubscribed: false,\n }));\n } else if (isAuthError) {\n contentStateRef.current.setContentState((prev) => ({\n ...prev,\n isSubscribed: false,\n isLoggedIn: false,\n screenityUser: null,\n proSubscription: null,\n }));\n }\n\n const message = isAuthError\n ? chrome.i18n.getMessage(\"storageCheckFailAuthDescription\")\n : chrome.i18n.getMessage(\"storageCheckFailDescription\");\n\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"storageCheckFailTitle\"),\n message,\n chrome.i18n.getMessage(\"retryButtonLabel\"),\n chrome.i18n.getMessage(\"closeModalLabel\"),\n async () => {\n window.location.reload(); // or retry logic\n },\n () => {},\n );\n }\n\n if (!success || (success && canUpload === false)) {\n setStartFlowOutcome(\"error\", {\n error: canUpload === false ? \"storage-limit\" : (error || \"quota-check-failed\"),\n });\n setContentState((prev) => ({\n ...prev,\n pendingRecording: false,\n preparingRecording: false,\n }));\n return; // Stop recording setup\n }\n }\n\n // Check if in content script or extension page (Chrome)\n if (window.location.href.includes(\"chrome-extension://\")) {\n permission = await checkChromeCapturePermissions();\n } else {\n permission = await checkChromeCapturePermissionsSW();\n }\n\n if (!permission) {\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"chromePermissionsModalTitle\"),\n chrome.i18n.getMessage(\"chromePermissionsModalDescription\"),\n chrome.i18n.getMessage(\"chromePermissionsModalAction\"),\n chrome.i18n.getMessage(\"chromePermissionsModalCancel\"),\n async () => {\n await checkChromeCapturePermissionsSW();\n startStreaming(); // Retry streaming\n },\n () => {},\n null,\n chrome.i18n.getMessage(\"learnMoreDot\"),\n URL,\n true,\n );\n setStartFlowOutcome(\"cancelled\", { error: \"permission-denied\" });\n setContentState((prevContentState) => ({\n ...prevContentState,\n pendingRecording: false,\n preparingRecording: false,\n }));\n return;\n }\n\n const data = await chrome.runtime.sendMessage({ type: \"available-memory\" });\n\n if (\n data.quota < 524288000 &&\n !contentStateRef.current.isLoggedIn &&\n !contentStateRef.current.isSubscribed\n ) {\n if (typeof contentStateRef.current.openModal === \"function\") {\n let clear = null;\n let clearAction = () => {};\n const locale = chrome.i18n.getMessage(\"@@ui_locale\");\n let helpURL =\n \"https://help.screenity.io/troubleshooting/9Jy5RGjNrBB42hqUdREQ7W/what-does-%E2%80%9Cmemory-limit-reached%E2%80%9D-mean-when-recording/8WkwHbt3puuXunYqQnyPcb\";\n\n if (!locale.includes(\"en\")) {\n helpURL =\n \"https://translate.google.com/translate?sl=en&tl=\" +\n locale +\n \"&u=https://help.screenity.io/troubleshooting/9Jy5RGjNrBB42hqUdREQ7W/what-does-%E2%80%9Cmemory-limit-reached%E2%80%9D-mean-when-recording/8WkwHbt3puuXunYqQnyPcb\";\n }\n\n const response = await chrome.runtime.sendMessage({\n type: \"check-restore\",\n });\n if (response.restore) {\n clear = chrome.i18n.getMessage(\"clearSpaceButton\");\n clearAction = () => {\n chrome.runtime.sendMessage({ type: \"clear-recordings\" });\n };\n }\n\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"notEnoughSpaceTitle\"),\n chrome.i18n.getMessage(\"notEnoughSpaceDescription\"),\n clear,\n chrome.i18n.getMessage(\"permissionsModalDismiss\"),\n clearAction,\n () => {},\n null,\n chrome.i18n.getMessage(\"learnMoreDot\"),\n helpURL,\n false, // colorSafe\n chrome.i18n.getMessage(\"getHelpButton\"),\n () => {\n chrome.runtime.sendMessage({\n type: \"report-error\",\n errorCode: \"REC_RUN_MEMORY\",\n source: \"not-enough-space\",\n });\n },\n );\n }\n setStartFlowOutcome(\"error\", { error: \"insufficient-memory\" });\n setContentState((prevContentState) => ({\n ...prevContentState,\n pendingRecording: false,\n preparingRecording: false,\n }));\n return;\n }\n chrome.storage.local.set({\n tabRecordedID: null,\n });\n\n if (\n contentStateRef.current.recordingType === \"region\" &&\n contentStateRef.current.cropTarget\n ) {\n contentStateRef.current.regionCaptureRef.contentWindow.postMessage(\n {\n type: \"crop-target\",\n target: contentStateRef.current.cropTarget,\n width: contentStateRef.current.regionWidth,\n height: contentStateRef.current.regionHeight,\n },\n \"*\",\n );\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n showOnboardingArrow: false,\n }));\n\n if (\n !contentStateRef.current.micActive &&\n contentStateRef.current.askMicrophone\n ) {\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"micMutedModalTitle\"),\n chrome.i18n.getMessage(\"micMutedModalDescription\"),\n chrome.i18n.getMessage(\"micMutedModalAction\"),\n chrome.i18n.getMessage(\"micMutedModalCancel\"),\n () => {\n chrome.runtime.sendMessage({\n type: \"desktop-capture\",\n region:\n contentStateRef.current.recordingType === \"region\" ? true : false,\n customRegion: contentStateRef.current.customRegion,\n offscreenRecording: contentStateRef.current.offscreenRecording,\n camera:\n contentStateRef.current.recordingType === \"camera\" ? true : false,\n });\n setContentState((prevContentState) => ({\n ...prevContentState,\n\n surface: \"default\",\n pipEnded: false,\n }));\n },\n () => {},\n false,\n false,\n false,\n false,\n chrome.i18n.getMessage(\"noShowAgain\"),\n () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n askMicrophone: false,\n }));\n chrome.storage.local.set({ askMicrophone: false });\n },\n );\n } else {\n chrome.runtime.sendMessage({\n type: \"desktop-capture\",\n region:\n contentStateRef.current.recordingType === \"region\" ? true : false,\n customRegion: contentStateRef.current.customRegion,\n offscreenRecording: contentStateRef.current.offscreenRecording,\n camera:\n contentStateRef.current.recordingType === \"camera\" ? true : false,\n });\n traceStep(\"desktopCaptureSent\");\n setContentState((prevContentState) => ({\n ...prevContentState,\n\n surface: \"default\",\n pipEnded: false,\n }));\n }\n }, [contentStateRef]);\n\n const tryRestartRecording = useCallback(() => {\n if (!contentStateRef.current.paused) {\n contentStateRef.current.pauseRecording();\n }\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"restartModalTitle\"),\n chrome.i18n.getMessage(\"restartModalDescription\"),\n chrome.i18n.getMessage(\"restartModalRestart\"),\n chrome.i18n.getMessage(\"restartModalResume\"),\n () => {\n contentStateRef.current.restartRecording();\n },\n () => {\n contentStateRef.current.resumeRecording();\n },\n );\n }, []);\n\n const tryDismissRecording = useCallback(() => {\n if (contentStateRef.current.askDismiss) {\n if (!contentStateRef.current.paused) {\n contentStateRef.current.pauseRecording(true);\n }\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"discardModalTitle\"),\n chrome.i18n.getMessage(\"discardModalDescription\"),\n chrome.i18n.getMessage(\"discardModalDiscard\"),\n chrome.i18n.getMessage(\"discardModalResume\"),\n () => {\n contentStateRef.current.dismissRecording();\n },\n () => {\n contentStateRef.current.resumeRecording();\n },\n );\n } else {\n contentStateRef.current.dismissRecording();\n }\n }, [contentStateRef]);\n\n const handleDevicePermissions = (data) => {\n if (data && data != undefined && data.success) {\n // I need to convert to a regular array of objects\n const audioInput = data.audioinput;\n const videoInput = data.videoinput;\n const cameraPermission = data.cameraPermission;\n const microphonePermission = data.microphonePermission;\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n audioInput: audioInput,\n videoInput: videoInput,\n cameraPermission: cameraPermission,\n microphonePermission: microphonePermission,\n }));\n\n const audioInputById = Array.isArray(audioInput)\n ? Object.fromEntries(\n audioInput.map((device) => [device.deviceId, device.label]),\n )\n : {};\n const videoInputById = Array.isArray(videoInput)\n ? Object.fromEntries(\n videoInput.map((device) => [device.deviceId, device.label]),\n )\n : {};\n\n const defaultAudioInputLabel =\n audioInputById[contentStateRef.current.defaultAudioInput] || \"\";\n const defaultVideoInputLabel =\n videoInputById[contentStateRef.current.defaultVideoInput] || \"\";\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n defaultAudioInputLabel:\n defaultAudioInputLabel || prevContentState.defaultAudioInputLabel,\n defaultVideoInputLabel:\n defaultVideoInputLabel || prevContentState.defaultVideoInputLabel,\n }));\n\n chrome.storage.local.set({\n defaultAudioInputLabel:\n defaultAudioInputLabel ||\n contentStateRef.current.defaultAudioInputLabel,\n defaultVideoInputLabel:\n defaultVideoInputLabel ||\n contentStateRef.current.defaultVideoInputLabel,\n });\n\n chrome.runtime.sendMessage({\n type: \"switch-camera\",\n id: contentStateRef.current.defaultVideoInput,\n });\n\n // Check if first time setting devices\n if (!contentStateRef.current.setDevices) {\n // Set default devices\n // Check if audio devices exist\n if (audioInput.length > 0) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n defaultAudioInput: audioInput[0].deviceId,\n defaultAudioInputLabel: audioInput[0].label || \"\",\n micActive: true,\n }));\n chrome.storage.local.set({\n defaultAudioInput: audioInput[0].deviceId,\n defaultAudioInputLabel: audioInput[0].label || \"\",\n micActive: true,\n });\n }\n if (videoInput.length > 0) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n defaultVideoInput: videoInput[0].deviceId,\n defaultVideoInputLabel: videoInput[0].label || \"\",\n cameraActive: true,\n }));\n chrome.storage.local.set({\n defaultVideoInput: videoInput[0].deviceId,\n defaultVideoInputLabel: videoInput[0].label || \"\",\n cameraActive: true,\n });\n }\n if (audioInput.length > 0 || videoInput.length > 0) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n setDevices: true,\n }));\n chrome.storage.local.set({\n setDevices: true,\n });\n }\n }\n } else {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraPermission: false,\n microphonePermission: false,\n }));\n if (contentStateRef.current.askForPermissions) {\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"permissionsModalTitle\"),\n chrome.i18n.getMessage(\"permissionsModalDescription\"),\n chrome.i18n.getMessage(\"permissionsModalDismiss\"),\n chrome.i18n.getMessage(\"permissionsModalNoShowAgain\"),\n () => {},\n () => {\n noMorePermissions();\n },\n chrome.runtime.getURL(\"assets/helper/permissions.webp\"),\n chrome.i18n.getMessage(\"learnMoreDot\"),\n URL2,\n true,\n false,\n );\n }\n }\n };\n\n const noMorePermissions = useCallback(() => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n askForPermissions: false,\n }));\n chrome.storage.local.set({ askForPermissions: false });\n });\n\n useEffect(() => {\n const handleMessage = (event) => {\n if (event.data.type === \"screenity-permissions\") {\n handleDevicePermissions(event.data);\n } else if (event.data.type === \"screenity-permissions-loaded\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n permissionsLoaded: true,\n }));\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n\n return () => {\n window.removeEventListener(\"message\", handleMessage);\n };\n }, []);\n\n // These settings are available throughout the Content\n const [contentState, setContentStateInternal] = useState({\n color: \"#4597F7\",\n strokeWidth: 2,\n drawingMode: false,\n tool: \"pen\",\n undoStack: [],\n redoStack: [],\n canvas: null,\n swatch: 1,\n time: 0,\n timer: 0,\n processingProgress: 0,\n recording: false,\n startRecording: startRecording,\n restartRecording: restartRecording,\n stopRecording: stopRecording,\n pauseRecording: pauseRecording,\n resumeRecording: resumeRecording,\n dismissRecording: dismissRecording,\n startStreaming: startStreaming,\n setToolbarMode: null,\n openModal: null,\n openToast: null,\n timeWarning: false,\n audioInput: [],\n videoInput: [],\n setDevices: false,\n defaultAudioInput: \"none\",\n defaultVideoInput: \"none\",\n defaultAudioInputLabel: \"\",\n defaultVideoInputLabel: \"\",\n cameraActive: false,\n micActive: false,\n sortBy: \"newest\",\n paused: false,\n toolbarPosition: {\n left: true,\n right: false,\n bottom: true,\n top: false,\n offsetX: 0,\n offsetY: 100,\n },\n popupPosition: {\n left: false,\n right: true,\n top: true,\n bottom: false,\n offsetX: 0,\n offsetY: 0,\n fixed: true,\n },\n cameraDimensions: {\n size: 200,\n x: 100,\n y: 100,\n },\n cameraFlipped: false,\n backgroundEffect: \"blur\",\n backgroundEffectsActive: false,\n countdown: true,\n showExtension: false,\n showPopup: false,\n blurMode: false,\n recordingType: \"screen\",\n customRegion: false,\n regionWidth: 800,\n surface: \"default\",\n regionHeight: 500,\n regionX: 100,\n regionY: 100,\n fromRegion: false,\n cropTarget: null,\n hideToolbar: false,\n alarm: false,\n alarmTime: 5 * 60,\n fromAlarm: false,\n pendingRecording: false,\n askForPermissions: true,\n cameraPermission: true,\n microphonePermission: true,\n askMicrophone: true,\n recordingShortcut: \"⌥⇧W\",\n recordingShortcut: \"⌥⇧D\",\n toggleDrawingModeShortcut: \"\",\n toggleBlurModeShortcut: \"\",\n toggleCursorModeShortcut: \"\",\n cursorMode: \"none\",\n cursorEffects: [],\n shape: \"rectangle\",\n shapeFill: false,\n pushToTalk: false,\n zoomEnabled: false,\n offscreenRecording: false,\n isAddingImage: false,\n pipEnded: false,\n tabCaptureFrame: false,\n showOnboardingArrow: false,\n offline: false,\n updateChrome: false,\n permissionsChecked: false,\n permissionsLoaded: false,\n parentRef: null,\n shadowRef: null,\n settingsOpen: false,\n hideUIAlerts: false,\n toolbarHover: false,\n hideUI: false,\n bigTab: \"record\",\n askDismiss: true,\n quality: \"max\",\n systemAudio: true,\n backup: false,\n backupSetup: false,\n openWarning: false,\n hasOpenedBefore: false,\n qualityValue: \"1080p\",\n fpsValue: \"30\",\n fastRecorderBeta: null,\n fastRecorderStatus: null,\n useWebCodecsRecorder: false,\n countdownActive: false,\n countdownCancelled: false,\n multiMode: false,\n isCountdownVisible: false,\n multiSceneCount: 0,\n preparingRecording: false,\n wasLoggedIn: false,\n hasSeenInstantModeModal: false,\n instantMode: false,\n onboarding: false,\n showProSplash: false,\n hasSubscribedBefore: false,\n startRecordingAfterCountdown: () => {\n if (!contentStateRef.current.countdownCancelled) {\n contentStateRef.current.startRecording();\n }\n },\n cancelCountdown: () => {\n setStartFlowOutcome(\"cancelled\");\n // Eagerly clear recording flags in storage so the action button never\n // sees a stale isRecordingActive state between now and when the\n // background processes dismiss-recording-tab.\n chrome.storage.local.set({\n pendingRecording: false,\n recording: false,\n restarting: false,\n });\n chrome.runtime.sendMessage({ type: \"diag-countdown-cancelled\" }).catch(() => {});\n setContentState((prev) => ({\n ...prev,\n countdownActive: false,\n countdownCancelled: true,\n isCountdownVisible: false,\n recording: false,\n showPopup: true,\n showExtension: true,\n }));\n // Call dismissRecording to ensure everything is properly cleaned up\n contentStateRef.current.dismissRecording();\n },\n resetCountdown: () => {\n setContentState((prev) => ({\n ...prev,\n countdownCancelled: false,\n }));\n },\n onCountdownFinished: () => {\n if (!contentStateRef.current?.countdownCancelled && isTargetTab()) {\n suppressStartBeepRef.current = true;\n playBeep(startBeepRef, \"assets/sounds/beep2.mp3\");\n }\n },\n });\n contentStateRef.current = contentState;\n\n setContentState = (updater) => {\n if (typeof updater === \"function\") {\n setContentStateInternal((prevState) => {\n const newState = updater(prevState);\n contentStateRef.current = newState;\n return newState;\n });\n } else {\n setContentStateInternal(updater);\n contentStateRef.current = updater;\n }\n };\n\n const playBeep = (ref, filename) => {\n if (!ref.current) {\n ref.current = new Audio(chrome.runtime.getURL(filename));\n }\n const audio = ref.current;\n audio.volume = 0.5;\n try {\n audio.currentTime = 0;\n } catch {}\n const playPromise = audio.play();\n if (playPromise?.catch) {\n playPromise.catch((error) => {\n console.warn(\"Beep playback failed:\", error);\n });\n }\n };\n\n useEffect(() => {\n chrome.runtime.sendMessage({ type: \"sync-recording-state\" }, (state) => {\n if (!state) return;\n setContentState((prev) => ({ ...prev, ...state }));\n setTimeout(() => {\n hydratedRef.current = true;\n prevRecordingRef.current = Boolean(state.recording);\n }, 0);\n });\n }, []);\n\n useEffect(() => {\n if (!contentState.preparingRecording) return;\n let canceled = false;\n let pollTimer = null;\n\n const getStatus = async () => {\n const { fastRecorderActiveRecordingId, postStopRecordingId } =\n await chrome.storage.local.get([\n \"fastRecorderActiveRecordingId\",\n \"postStopRecordingId\",\n ]);\n const recordingId =\n fastRecorderActiveRecordingId || postStopRecordingId || null;\n if (!recordingId) return null;\n const key = `freeFinalizeStatus:${recordingId}`;\n const res = await chrome.storage.local.get([key]);\n return res[key] || null;\n };\n\n const applyStatus = (status) => {\n if (!status || canceled) return;\n const pct =\n typeof status.percent === \"number\" ? Math.round(status.percent) : 0;\n setContentState((prev) => ({\n ...prev,\n processingProgress: pct,\n }));\n };\n\n const onChanged = (changes, area) => {\n if (area !== \"local\") return;\n const entry = Object.keys(changes).find((k) =>\n k.startsWith(\"freeFinalizeStatus:\"),\n );\n if (!entry) return;\n applyStatus(changes[entry].newValue);\n };\n\n chrome.storage.onChanged.addListener(onChanged);\n\n (async () => {\n const status = await getStatus();\n applyStatus(status);\n pollTimer = setInterval(async () => {\n const s = await getStatus();\n applyStatus(s);\n }, 500);\n })();\n\n return () => {\n canceled = true;\n chrome.storage.onChanged.removeListener(onChanged);\n if (pollTimer) clearInterval(pollTimer);\n };\n }, [contentState.preparingRecording]);\n\n // Stuck-state detector (diagnostics only).\n // Writes to startFlowTrace if pending/preparing stays active too long.\n useEffect(() => {\n const PENDING_TIMEOUT_MS = 30000;\n const PREPARING_TIMEOUT_MS = 45000;\n\n if (contentState.recording) return; // not stuck if recording started\n\n let timer = null;\n let fired = false;\n\n if (\n contentState.pendingRecording &&\n !contentState.preparingRecording\n ) {\n timer = setTimeout(() => {\n if (fired) return;\n fired = true;\n setStartFlowOutcome(\"stuck\", {\n stuck: {\n state: \"pending\",\n since: Date.now() - PENDING_TIMEOUT_MS,\n durationMs: PENDING_TIMEOUT_MS,\n },\n });\n }, PENDING_TIMEOUT_MS);\n } else if (contentState.preparingRecording) {\n timer = setTimeout(() => {\n if (fired) return;\n fired = true;\n setStartFlowOutcome(\"stuck\", {\n stuck: {\n state: \"preparing\",\n since: Date.now() - PREPARING_TIMEOUT_MS,\n durationMs: PREPARING_TIMEOUT_MS,\n },\n });\n }, PREPARING_TIMEOUT_MS);\n }\n\n return () => {\n if (timer) clearTimeout(timer);\n };\n }, [\n contentState.pendingRecording,\n contentState.preparingRecording,\n contentState.recording,\n ]);\n\n useEffect(() => {\n const isRecording = Boolean(contentState.recording);\n if (!hydratedRef.current) {\n prevRecordingRef.current = isRecording;\n return;\n }\n if (prevRecordingRef.current === null) {\n prevRecordingRef.current = isRecording;\n return;\n }\n if (!isTargetTab()) {\n prevRecordingRef.current = isRecording;\n return;\n }\n\n if (prevRecordingRef.current === false && isRecording === true) {\n if (\n recordingBeepTabIdRef.current != null &&\n tabIdRef.current != null &&\n recordingBeepTabIdRef.current !== tabIdRef.current\n ) {\n prevRecordingRef.current = isRecording;\n return;\n }\n const startTime = recordingStartTimeRef.current;\n const hasStartTime = Number.isFinite(startTime) && startTime > 0;\n const sessionMarker = hasStartTime ? startTime : Date.now();\n const isNewSession = sessionMarker !== lastBeepStartTimeRef.current;\n if (!isNewSession) {\n prevRecordingRef.current = isRecording;\n return;\n }\n lastBeepStartTimeRef.current = sessionMarker;\n if (suppressStartBeepRef.current) {\n suppressStartBeepRef.current = false;\n } else {\n playBeep(startBeepRef, \"assets/sounds/beep2.mp3\");\n }\n } else if (prevRecordingRef.current === true && isRecording === false) {\n if (suppressStopBeepRef.current) {\n suppressStopBeepRef.current = false;\n } else {\n playBeep(stopBeepRef, \"assets/sounds/beep.mp3\");\n }\n }\n\n prevRecordingRef.current = isRecording;\n }, [contentState.recording, isTargetTab]);\n\n // Check Chrome version\n useEffect(() => {\n const version = navigator.userAgent.match(/Chrom(e|ium)\\/([0-9]+)\\./);\n\n const MIN_CHROME_VERSION = 109;\n\n if (version && parseInt(version[2], 10) < MIN_CHROME_VERSION) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n updateChrome: true,\n }));\n }\n }, []);\n\n useEffect(() => {\n if (typeof contentState.openWarning === \"function\") {\n const isMac = navigator.platform.toUpperCase().indexOf(\"MAC\") >= 0;\n const warningList = [\n \"youtube.com\",\n \"meet.google.com\",\n \"zoom.us\",\n \"hangouts.google.com\",\n \"teams.microsoft.com\",\n \"web.whatsapp.com\",\n \"web.skype.com\",\n \"discord.com\",\n \"vimeo.com\",\n ];\n\n if (\n !contentState.recording &&\n isMac &&\n warningList.some((el) => window.location.href.includes(el)) &&\n contentState.recordingType != \"region\" &&\n contentState.recordingType != \"camera\"\n ) {\n contentState.openWarning(\n chrome.i18n.getMessage(\"audioWarningTitle\"),\n chrome.i18n.getMessage(\n \"audioWarningDescription\",\n chrome.i18n.getMessage(\"tabType\"),\n ),\n \"AudioIcon\",\n 10000,\n );\n // Check if url contains \"playground.html\" and \"chrome-extension://\"\n } else if (\n window.location.href.includes(\"playground.html\") &&\n window.location.href.includes(\"chrome-extension://\") &&\n !contentState.recording\n ) {\n contentState.openWarning(\n chrome.i18n.getMessage(\"extensionNotSupportedTitle\"),\n chrome.i18n.getMessage(\"extensionNotSupportedDescription\"),\n \"NotSupportedIcon\",\n 10000,\n );\n }\n }\n }, [\n contentState.openWarning,\n contentState.recording,\n contentState.recordingType,\n ]);\n\n useEffect(() => {\n if (!contentState) return;\n if (typeof contentState.openModal === \"function\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n tryRestartRecording: tryRestartRecording,\n tryDismissRecording: tryDismissRecording,\n }));\n }\n }, [contentState.openModal]);\n\n const updateTimerFromStorage = useCallback(async () => {\n const seq = ++timerReadSeqRef.current;\n const { recording, recordingStartTime, paused, pausedAt, totalPausedMs } =\n await chrome.storage.local.get([\n \"recording\",\n \"recordingStartTime\",\n \"paused\",\n \"pausedAt\",\n \"totalPausedMs\",\n ]);\n if (seq !== timerReadSeqRef.current) return;\n\n if (!recording || !recordingStartTime) {\n setTimer(0);\n return;\n }\n\n const now = Date.now();\n const basePaused = totalPausedMs || 0;\n const extraPaused = paused && pausedAt ? Math.max(0, now - pausedAt) : 0;\n const elapsedSeconds = Math.max(\n 0,\n Math.floor((now - recordingStartTime - basePaused - extraPaused) / 1000),\n );\n\n if (contentStateRef.current?.alarm) {\n const alarmTime = contentStateRef.current?.alarmTime || 0;\n const nextRemaining = Math.max(0, alarmTime - elapsedSeconds);\n setTimer((prev) => (prev === nextRemaining ? prev : nextRemaining));\n return;\n }\n\n setTimer((prev) => (prev === elapsedSeconds ? prev : elapsedSeconds));\n }, []);\n\n useEffect(() => {\n updateTimerFromStorage();\n const interval = setInterval(() => {\n updateTimerFromStorage();\n }, 1000);\n const handleVisibility = () => {\n if (!document.hidden) {\n updateTimerFromStorage();\n }\n };\n const handleFocus = () => updateTimerFromStorage();\n document.addEventListener(\"visibilitychange\", handleVisibility);\n window.addEventListener(\"focus\", handleFocus);\n return () => {\n clearInterval(interval);\n document.removeEventListener(\"visibilitychange\", handleVisibility);\n window.removeEventListener(\"focus\", handleFocus);\n };\n }, [updateTimerFromStorage]);\n\n useEffect(() => {\n const onChanged = (changes, area) => {\n if (area !== \"local\") return;\n let shouldUpdateTimer = false;\n\n if (changes.activeTab) {\n activeTabRef.current = changes.activeTab.newValue ?? null;\n }\n if (changes.tabRecordedID) {\n tabRecordedIdRef.current = changes.tabRecordedID.newValue ?? null;\n }\n if (changes.recordingUiTabId) {\n recordingUiTabRef.current = changes.recordingUiTabId.newValue ?? null;\n }\n if (changes.recordingStartTime) {\n recordingStartTimeRef.current =\n changes.recordingStartTime.newValue ?? null;\n }\n if (changes.recordingBeepTabId) {\n recordingBeepTabIdRef.current =\n changes.recordingBeepTabId.newValue ?? null;\n }\n if (\n changes.screenityToken ||\n changes.screenityUser ||\n changes.isSubscribed ||\n changes.proSubscription ||\n changes.lastAuthCheck ||\n changes.isLoggedIn\n ) {\n // Debounce: multiple auth-related storage keys change in quick\n // succession (e.g. loginWithWebsite writes isLoggedIn + isSubscribed\n // + lastAuthCheck). Coalesce into one verify call.\n clearTimeout(verifyDebounceRef.current);\n verifyDebounceRef.current = setTimeout(verifyUser, 2000);\n }\n if (changes.recordingNow) {\n shouldUpdateTimer = true;\n }\n if (changes.paused) {\n setContentState((prev) => ({\n ...prev,\n paused: Boolean(changes.paused.newValue),\n }));\n shouldUpdateTimer = true;\n }\n if (changes.recording) {\n const isRecording = Boolean(changes.recording.newValue);\n if (isRecording && !isTargetTab()) {\n setContentState((prev) => ({\n ...prev,\n recording: false,\n }));\n return;\n }\n const shouldHideCountdown =\n isRecording &&\n !contentStateRef.current?.isCountdownVisible &&\n !contentStateRef.current?.countdownActive;\n setContentState((prev) => ({\n ...prev,\n recording: isRecording,\n ...(shouldHideCountdown\n ? {\n countdownActive: false,\n isCountdownVisible: false,\n }\n : {}),\n }));\n shouldUpdateTimer = true;\n }\n if (changes.cursorEffects) {\n const nextEffects = normalizeCursorEffects(\n changes.cursorEffects.newValue,\n );\n const fallbackMode =\n changes.cursorMode?.newValue ||\n contentStateRef.current?.cursorMode ||\n \"none\";\n const nextMode = deriveCursorMode(nextEffects, fallbackMode);\n setContentState((prev) => ({\n ...prev,\n cursorEffects: nextEffects,\n cursorMode: nextMode,\n }));\n } else if (changes.cursorMode) {\n const mode = changes.cursorMode.newValue || \"none\";\n const fallbackEffects = mode !== \"none\" ? [mode] : [];\n setContentState((prev) => ({\n ...prev,\n cursorMode: mode,\n cursorEffects:\n Array.isArray(prev.cursorEffects) && prev.cursorEffects.length > 0\n ? prev.cursorEffects\n : fallbackEffects,\n }));\n }\n if (\n changes.recordingNow ||\n changes.paused ||\n changes.recording ||\n changes.recordingStartTime ||\n changes.pausedAt ||\n changes.totalPausedMs\n ) {\n shouldUpdateTimer = true;\n }\n if (shouldUpdateTimer) {\n updateTimerFromStorage();\n }\n };\n\n chrome.storage.onChanged.addListener(onChanged);\n return () => chrome.storage.onChanged.removeListener(onChanged);\n }, [isTargetTab, updateTimerFromStorage, verifyUser]);\n\n useEffect(() => {\n if (!contentState.customRegion) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cropTarget: null,\n }));\n }\n }, [contentState.customRegion]);\n\n // Check when hiding the toolbar\n useEffect(() => {\n if (contentState.hideToolbar && contentState.hideUI) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n drawingMode: false,\n blurMode: false,\n }));\n }\n }, [contentState.hideToolbar, contentState.hideUI]);\n\n useEffect(() => {\n if (window.__screenitySetupHandlersInitialized) return;\n window.__screenitySetupHandlersInitialized = true;\n setupHandlers();\n }, []);\n\n useEffect(() => {\n chrome.storage.local.set({\n pendingRecording: contentState.pendingRecording,\n });\n }, [contentState.pendingRecording]);\n\n // Check if user has enough RAM to record for each quality option\n useEffect(() => {\n if (!contentState.qualityValue) {\n const suggested = \"1080p\"; // safe and high enough quality\n setContentState((prev) => ({ ...prev, qualityValue: suggested }));\n chrome.storage.local.set({ qualityValue: suggested });\n }\n }, []);\n\n useEffect(() => {\n if (contentState.pushToTalk) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: false,\n }));\n\n chrome.storage.local.set({\n micActive: false,\n });\n\n chrome.runtime.sendMessage({\n type: \"set-mic-active-tab\",\n active: false,\n defaultAudioInput: contentState.defaultAudioInput,\n });\n }\n }, [contentState.pushToTalk]);\n\n useEffect(() => {\n if (contentState.backgroundEffectsActive) {\n chrome.runtime.sendMessage({ type: \"background-effects-active\" });\n } else {\n chrome.runtime.sendMessage({ type: \"background-effects-inactive\" });\n }\n }, [contentState.backgroundEffectsActive]);\n\n useEffect(() => {\n if (contentState.backgroundEffectsActive) {\n chrome.runtime.sendMessage({\n type: \"set-background-effect\",\n effect: contentState.backgroundEffect,\n });\n }\n }, [contentState.backgroundEffect, contentState.backgroundEffectsActive]);\n\n // Programmatically add custom scrollbars\n useEffect(() => {\n if (!contentState.parentRef) return;\n\n // Check if on mac\n const isMac = navigator.platform.toUpperCase().indexOf(\"MAC\") >= 0;\n if (isMac) return;\n\n const parentDiv = contentState.parentRef;\n\n const elements = parentDiv.querySelectorAll(\"*\");\n elements.forEach((element) => {\n element.classList.add(\"screenity-scrollbar\");\n });\n\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === \"childList\") {\n const addedNodes = Array.from(mutation.addedNodes);\n const removedNodes = Array.from(mutation.removedNodes);\n\n addedNodes.forEach((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n node.classList.add(\"screenity-scrollbar\");\n }\n });\n\n removedNodes.forEach((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n node.classList.remove(\"screenity-scrollbar\");\n }\n });\n }\n }\n });\n\n observer.observe(parentDiv, { childList: true, subtree: true });\n\n return () => {\n observer.disconnect();\n };\n }, [contentState.parentRef]);\n\n // Programmatically add custom scrollbars\n useEffect(() => {\n if (!contentState.shadowRef) return;\n\n // Check if on mac\n const isMac = navigator.platform.toUpperCase().indexOf(\"MAC\") >= 0;\n if (isMac) return;\n\n const shadowRoot = contentState.shadowRef.shadowRoot;\n\n const elements = shadowRoot.querySelectorAll(\"*\");\n elements.forEach((element) => {\n element.classList.add(\"screenity-scrollbar\");\n });\n\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === \"childList\") {\n const addedNodes = Array.from(mutation.addedNodes);\n const removedNodes = Array.from(mutation.removedNodes);\n\n addedNodes.forEach((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n node.classList.add(\"screenity-scrollbar\");\n }\n });\n\n removedNodes.forEach((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n node.classList.remove(\"screenity-scrollbar\");\n }\n });\n }\n }\n });\n\n observer.observe(shadowRoot, { childList: true, subtree: true });\n\n return () => {\n observer.disconnect();\n };\n }, [\n contentState.parentRef,\n contentState.shadowRef,\n contentState.bigTab,\n contentState.recordingType,\n ]);\n\n useEffect(() => {\n if (!contentState.hideUI) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hideUIAlerts: false,\n hideToolbar: false,\n toolbarHover: false,\n }));\n }\n }, [contentState.hideUI]);\n\n useEffect(() => {\n updateFromStorage();\n }, []);\n\n // (No storage fallback listener here; use direct messaging flow)\n\n return (\n // this is the provider providing state\n \n {props.children}\n \n {process.env.SCREENITY_DEV_MODE === \"true\" && (\n \n )}\n \n );\n};\n\nexport default ContentState;\n" }, { "path": "src/pages/Content/context/messaging/handlers.js", "content": "// src/content/handlers/recordingHandlers.js\nimport {\n registerMessage,\n messageRouter,\n} from \"../../../../messaging/messageRouter\";\nimport { setContentState, contentStateRef } from \"../ContentState\";\nimport { updateFromStorage } from \"../utils/updateFromStorage\";\n\nimport { checkAuthStatus } from \"../utils/checkAuthStatus\";\nimport { traceStep, setStartFlowOutcome } from \"../../../utils/startFlowTrace\";\nimport JSZip from \"jszip\";\n\nconst CLOUD_FEATURES_ENABLED =\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\";\n\nconst getState = () => contentStateRef.current;\n\nexport const setupHandlers = () => {\n if (window.__screenitySetupHandlersRan) return;\n window.__screenitySetupHandlersRan = true;\n let lastToggleDrawingAt = 0;\n const TOGGLE_DRAWING_COOLDOWN_MS = 400;\n let projectReadySeq = 0;\n const LOCAL_PLAYBACK_MAX_BYTES = 250 * 1024 * 1024;\n let latestLocalPlaybackOffer = null;\n let latestLocalPlaybackProjectId = null;\n let latestLocalPlaybackSceneId = null;\n let localPlaybackBuildPromise = null;\n let localPlaybackBuildOfferId = null;\n let activeLocalPlaybackSource = null;\n const TRUSTED_APP_ORIGIN = (() => {\n try {\n const appBase = process.env.SCREENITY_APP_BASE;\n return appBase ? new URL(appBase).origin : null;\n } catch {\n return null;\n }\n })();\n\n const getProjectMessageTargetOrigin = () => {\n if (!TRUSTED_APP_ORIGIN) return null;\n return window.location.origin === TRUSTED_APP_ORIGIN\n ? TRUSTED_APP_ORIGIN\n : null;\n };\n\n const postProjectHandoff = (payload) => {\n const targetOrigin = getProjectMessageTargetOrigin();\n if (!targetOrigin) {\n console.warn(\n \"[Screenity][Content] Ignoring project handoff on untrusted origin\",\n {\n source: payload?.source || \"unknown\",\n pageOrigin: window.location.origin,\n trustedOrigin: TRUSTED_APP_ORIGIN,\n projectId: payload?.projectId || null,\n },\n );\n return false;\n }\n\n window.postMessage(payload, targetOrigin);\n // Replay once shortly after first post to reduce race conditions with late listeners.\n setTimeout(() => {\n window.postMessage(\n {\n ...payload,\n replay: true,\n replayAt: Date.now(),\n },\n targetOrigin,\n );\n }, 250);\n return true;\n };\n\n const revokeActiveLocalPlaybackSource = (reason = \"unknown\") => {\n if (activeLocalPlaybackSource?.url) {\n URL.revokeObjectURL(activeLocalPlaybackSource.url);\n console.info(\"[Screenity][Content] Revoked local screen playback URL\", {\n reason,\n offerId: activeLocalPlaybackSource.offerId || null,\n });\n }\n activeLocalPlaybackSource = null;\n };\n\n const markLocalPlaybackFallback = async ({\n offerId,\n projectId,\n sceneId,\n reason,\n }) => {\n if (!offerId) return;\n try {\n await chrome.runtime.sendMessage({\n type: \"cloud-local-playback-mark-fallback\",\n offerId,\n projectId: projectId || null,\n sceneId: sceneId || null,\n reason: reason || \"unknown\",\n });\n } catch {\n // best effort\n }\n };\n\n const fetchLocalPlaybackSourceFromExtension = async ({\n offerId,\n projectId,\n sceneId,\n }) => {\n const offerRes = await chrome.runtime.sendMessage({\n type: \"cloud-local-playback-get-offer\",\n offerId,\n projectId,\n sceneId,\n });\n if (!offerRes?.ok || !offerRes.offer) {\n throw new Error(\"local-playback-offer-unavailable\");\n }\n const offer = offerRes.offer;\n if (\n !offer.chunkCount ||\n !offer.estimatedBytes ||\n offer.estimatedBytes > LOCAL_PLAYBACK_MAX_BYTES\n ) {\n throw new Error(\"local-playback-offer-too-large-or-empty\");\n }\n\n const parts = [];\n for (let i = 0; i < offer.chunkCount; i += 1) {\n // eslint-disable-next-line no-await-in-loop\n const chunkRes = await chrome.runtime.sendMessage({\n type: \"cloud-local-playback-read-chunk\",\n offerId: offer.offerId,\n projectId: offer.projectId,\n sceneId: offer.sceneId,\n index: i,\n });\n if (!chunkRes?.ok || !chunkRes.chunk?.base64) {\n throw new Error(`local-playback-chunk-read-failed:${i}`);\n }\n const binary = atob(chunkRes.chunk.base64);\n const bytes = new Uint8Array(binary.length);\n for (let j = 0; j < binary.length; j += 1) {\n bytes[j] = binary.charCodeAt(j);\n }\n const mimeType = chunkRes.chunk.mimeType || \"video/webm\";\n parts.push(new Blob([bytes], { type: mimeType }));\n }\n\n const blob = new Blob(parts, {\n type: parts[0]?.type || \"video/webm\",\n });\n const url = URL.createObjectURL(blob);\n return {\n offer,\n url,\n size: blob.size || 0,\n mimeType: blob.type || \"video/webm\",\n chunkCount: parts.length,\n };\n };\n\n const ensureLocalPlaybackReady = async ({ projectId, sceneId, offer }) => {\n if (!offer?.offerId) {\n throw new Error(\"local-playback-offer-missing\");\n }\n\n if (\n activeLocalPlaybackSource?.offerId === offer.offerId &&\n activeLocalPlaybackSource?.url\n ) {\n return activeLocalPlaybackSource;\n }\n\n if (\n localPlaybackBuildPromise &&\n localPlaybackBuildOfferId === offer.offerId\n ) {\n return localPlaybackBuildPromise;\n }\n\n localPlaybackBuildOfferId = offer.offerId;\n localPlaybackBuildPromise = (async () => {\n const source = await fetchLocalPlaybackSourceFromExtension({\n offerId: offer.offerId,\n projectId,\n sceneId,\n });\n\n revokeActiveLocalPlaybackSource(\"new-offer\");\n activeLocalPlaybackSource = {\n offerId: source.offer.offerId,\n projectId: source.offer.projectId || projectId || null,\n sceneId: source.offer.sceneId || sceneId || null,\n url: source.url,\n mimeType: source.mimeType,\n size: source.size,\n chunkCount: source.chunkCount,\n expiresAt: source.offer.expiresAt || null,\n };\n\n try {\n await chrome.runtime.sendMessage({\n type: \"cloud-local-playback-mark-used\",\n offerId: source.offer.offerId,\n projectId: source.offer.projectId || null,\n sceneId: source.offer.sceneId || null,\n usedBy: \"app-editor\",\n });\n } catch {\n // best effort\n }\n\n return activeLocalPlaybackSource;\n })();\n\n try {\n const ready = await localPlaybackBuildPromise;\n return ready;\n } finally {\n localPlaybackBuildPromise = null;\n localPlaybackBuildOfferId = null;\n }\n };\n\n const postLocalPlaybackHandoff = ({\n projectId,\n sceneId,\n offer,\n readySource = null,\n fallbackReason = null,\n forceRefresh = true,\n }) =>\n postProjectHandoff({\n source: \"update-project-ready-local-playback\",\n projectId: projectId || null,\n sceneId: sceneId || null,\n forceRefresh,\n handoffAt: Date.now(),\n localPlayback: {\n available: Boolean(offer?.offerId),\n trackType: \"screen\",\n offerId: offer?.offerId || null,\n chunkCount: offer?.chunkCount || 0,\n estimatedBytes: offer?.estimatedBytes || 0,\n expiresAt: offer?.expiresAt || null,\n source: offer?.source || \"indexeddb-screen-chunks\",\n ready: Boolean(readySource?.url),\n url: readySource?.url || null,\n mimeType: readySource?.mimeType || null,\n localBytes: readySource?.size || null,\n fallbackReason: fallbackReason || null,\n },\n });\n\n const onWindowProjectMessage = (event) => {\n if (event.source !== window) return;\n if (event.origin !== TRUSTED_APP_ORIGIN) return;\n const data = event?.data || {};\n if (data?.type !== \"screenity-local-playback-request\") return;\n\n const requestedProjectId = data?.projectId || null;\n const requestedSceneId = data?.sceneId || null;\n const requestId = data?.requestId || null;\n const offer = latestLocalPlaybackOffer;\n\n if (\n !offer?.offerId ||\n !offer.available ||\n !requestedProjectId ||\n requestedProjectId !== latestLocalPlaybackProjectId ||\n (requestedSceneId &&\n latestLocalPlaybackSceneId &&\n requestedSceneId !== latestLocalPlaybackSceneId)\n ) {\n postProjectHandoff({\n source: \"screenity-local-playback-response\",\n requestId,\n projectId: requestedProjectId,\n sceneId: requestedSceneId,\n localPlayback: {\n available: false,\n trackType: \"screen\",\n fallbackReason: \"offer-unavailable\",\n },\n });\n return;\n }\n\n void ensureLocalPlaybackReady({\n projectId: requestedProjectId,\n sceneId: requestedSceneId || latestLocalPlaybackSceneId,\n offer,\n })\n .then((readySource) => {\n console.info(\"[Screenity][Content] Local screen playback used\", {\n projectId: requestedProjectId,\n sceneId: requestedSceneId || latestLocalPlaybackSceneId || null,\n offerId: offer.offerId,\n bytes: readySource?.size || 0,\n });\n postProjectHandoff({\n source: \"screenity-local-playback-response\",\n requestId,\n projectId: requestedProjectId,\n sceneId: requestedSceneId || latestLocalPlaybackSceneId || null,\n forceRefresh: true,\n localPlayback: {\n available: true,\n ready: true,\n trackType: \"screen\",\n offerId: offer.offerId,\n url: readySource?.url || null,\n mimeType: readySource?.mimeType || null,\n localBytes: readySource?.size || null,\n chunkCount: offer.chunkCount || 0,\n estimatedBytes: offer.estimatedBytes || 0,\n expiresAt: offer.expiresAt || null,\n source: offer.source || \"indexeddb-screen-chunks\",\n },\n });\n })\n .catch((err) => {\n const reason = err?.message || \"local-playback-build-failed\";\n console.warn(\n \"[Screenity][Content] Local screen playback fallback\",\n {\n projectId: requestedProjectId,\n sceneId: requestedSceneId || latestLocalPlaybackSceneId || null,\n offerId: offer.offerId,\n reason,\n },\n );\n void markLocalPlaybackFallback({\n offerId: offer.offerId,\n projectId: requestedProjectId,\n sceneId: requestedSceneId || latestLocalPlaybackSceneId || null,\n reason,\n });\n postProjectHandoff({\n source: \"screenity-local-playback-response\",\n requestId,\n projectId: requestedProjectId,\n sceneId: requestedSceneId || latestLocalPlaybackSceneId || null,\n forceRefresh: true,\n localPlayback: {\n available: true,\n ready: false,\n trackType: \"screen\",\n offerId: offer.offerId,\n fallbackReason: reason,\n },\n });\n });\n };\n\n window.addEventListener(\"message\", onWindowProjectMessage);\n window.addEventListener(\"beforeunload\", () => {\n revokeActiveLocalPlaybackSource(\"content-beforeunload\");\n });\n\n // Initialize message router\n if (!window.__screenityHandlersInitialized) {\n messageRouter();\n window.__screenityHandlersInitialized = true;\n }\n\n // Register content message handlers\n registerMessage(\"time\", () => {\n // Timer is driven by ContentState's storage-based tick.\n // Ignore external timer pushes to avoid jitter/skips.\n });\n\n registerMessage(\"toggle-popup\", () => {\n setContentState((prev) => ({\n ...prev,\n showExtension: !prev.showExtension,\n hasOpenedBefore: true,\n showPopup: true,\n }));\n setTimer(0);\n updateFromStorage();\n });\n\n registerMessage(\"ready-to-record\", () => {\n traceStep(\"readyToRecordReceived\");\n\n setContentState((prev) => ({\n ...prev,\n showPopup: false,\n showExtension: true,\n preparingRecording: false,\n pendingRecording: true,\n }));\n const state = getState();\n\n if (state.countdown) {\n // Start countdown\n traceStep(\"countdownStart\");\n setContentState((prev) => ({\n ...prev,\n countdownActive: true,\n isCountdownVisible: true,\n countdownCancelled: false,\n }));\n chrome.runtime.sendMessage({ type: \"diag-countdown-started\" }).catch(() => {});\n } else {\n // No countdown, start immediately. countdownCancelled is cleared\n // in startStreaming so it can't be stale here.\n state.startRecordingAfterCountdown();\n }\n });\n\n registerMessage(\"stop-recording-tab\", () => {\n const state = getState();\n if (!state.recording) return;\n state.stopRecording();\n });\n\n registerMessage(\"toggle-drawing-mode\", () => {\n const now = Date.now();\n if (now - lastToggleDrawingAt < TOGGLE_DRAWING_COOLDOWN_MS) {\n return;\n }\n lastToggleDrawingAt = now;\n if (document.hidden || !document.hasFocus()) {\n return;\n }\n const nextDrawingMode = !contentStateRef.current.drawingMode;\n setContentState((prev) => ({\n ...prev,\n drawingMode: nextDrawingMode,\n blurMode: nextDrawingMode ? false : prev.blurMode,\n }));\n\n registerMessage(\"toggle-drawing-mode\", () => {\n const now = Date.now();\n if (now - lastToggleDrawingAt < TOGGLE_DRAWING_COOLDOWN_MS) return;\n lastToggleDrawingAt = now;\n if (document.hidden || !document.hasFocus()) return;\n\n const nextDrawingMode = !contentStateRef.current.drawingMode;\n\n setContentState((prev) => ({\n ...prev,\n drawingMode: nextDrawingMode,\n blurMode: nextDrawingMode ? false : prev.blurMode,\n }));\n\n chrome.storage.local.set({\n drawingMode: nextDrawingMode,\n ...(nextDrawingMode ? { blurMode: false } : {}),\n });\n });\n });\n\n registerMessage(\"toggle-blur-mode\", () => {\n const nextBlurMode = !contentStateRef.current.blurMode;\n setContentState((prev) => ({\n ...prev,\n blurMode: nextBlurMode,\n drawingMode: nextBlurMode ? false : prev.drawingMode,\n }));\n chrome.storage.local.set({\n blurMode: nextBlurMode,\n drawingMode: nextBlurMode ? false : contentStateRef.current.drawingMode,\n });\n });\n\n registerMessage(\"toggle-hide-ui\", () => {\n const nextHideUI = !contentStateRef.current.hideUI;\n setContentState((prev) => ({\n ...prev,\n hideUI: nextHideUI,\n hideToolbar: nextHideUI ? true : prev.hideToolbar,\n hideUIAlerts: nextHideUI ? true : prev.hideUIAlerts,\n }));\n chrome.storage.local.set({\n hideUI: nextHideUI,\n ...(nextHideUI ? { hideToolbar: true, hideUIAlerts: true } : {}),\n });\n });\n\n registerMessage(\"toggle-cursor-mode\", () => {\n const state = getState();\n const nextMode =\n contentStateRef.current.cursorMode === \"none\" ? \"cursor\" : \"\";\n if (state?.setToolbarMode) {\n state.setToolbarMode(nextMode);\n } else {\n setContentState((prev) => ({\n ...prev,\n toolbarMode: nextMode,\n }));\n }\n });\n\n registerMessage(\"recording-ended\", async () => {\n const state = getState();\n\n // Double-check with storage before resetting UI\n // This prevents false positives when service worker restarts with stale state\n const { recording, recorderSession, pendingRecording } =\n await chrome.storage.local.get([\n \"recording\",\n \"recorderSession\",\n \"pendingRecording\",\n ]);\n\n const isActuallyRecording =\n recording || (recorderSession && recorderSession.status === \"recording\");\n\n // Only reset if we're truly not recording\n if (isActuallyRecording || pendingRecording) {\n // Recording is actually still active - ignore this stale message\n console.warn(\n \"Ignoring stale recording-ended message - recording still active\",\n );\n return;\n }\n\n if (!state.showPopup) {\n setContentState((prev) => ({\n ...prev,\n showExtension: false,\n recording: false,\n paused: false,\n pipEnded: false,\n time: 0,\n timer: 0,\n }));\n }\n });\n\n registerMessage(\"recording-error\", () => {\n setStartFlowOutcome(\"error\");\n setContentState((prev) => ({\n ...prev,\n pendingRecording: false,\n preparingRecording: false,\n pipEnded: false,\n }));\n });\n\n registerMessage(\"start-stream\", () => {\n const state = getState();\n if (\n state.preparingRecording ||\n state.pendingRecording ||\n state.recording ||\n state.pipEnded\n ) {\n console.warn(\"[Screenity][Content] start-stream BLOCKED by guard state:\", {\n preparingRecording: state.preparingRecording,\n pendingRecording: state.pendingRecording,\n recording: state.recording,\n pipEnded: state.pipEnded,\n });\n return;\n }\n\n setContentState((prev) => ({\n ...prev,\n showExtension: true,\n showPopup: true,\n }));\n\n if (state.recordingType !== \"camera\") {\n state.startStreaming();\n } else if (state.defaultVideoInput !== \"none\" && state.cameraActive) {\n state.startStreaming();\n }\n });\n\n registerMessage(\"commands\", (message) => {\n if (!message) return;\n\n const startRecordingCommand = message.commands.find(\n (command) => command.name === \"start-recording\",\n );\n const cancelRecordingCommand = message.commands.find(\n (command) => command.name === \"cancel-recording\",\n );\n const toggleDrawingModeCommand = message.commands.find(\n (command) => command.name === \"toggle-drawing-mode\",\n );\n const toggleBlurModeCommand = message.commands.find(\n (command) => command.name === \"toggle-blur-mode\",\n );\n const toggleCursorModeCommand = message.commands.find(\n (command) => command.name === \"toggle-cursor-mode\",\n );\n\n setContentState((prev) => ({\n ...prev,\n recordingShortcut: startRecordingCommand.shortcut,\n dismissRecordingShortcut: cancelRecordingCommand.shortcut,\n toggleDrawingModeShortcut: toggleDrawingModeCommand?.shortcut || \"\",\n toggleBlurModeShortcut: toggleBlurModeCommand?.shortcut || \"\",\n toggleCursorModeShortcut: toggleCursorModeCommand?.shortcut || \"\",\n }));\n });\n\n registerMessage(\"cancel-recording\", () => {\n const state = getState();\n state.dismissRecording();\n });\n\n registerMessage(\"pause-recording\", () => {\n const state = getState();\n if (state.paused) {\n state.resumeRecording();\n } else {\n state.pauseRecording();\n }\n });\n\n registerMessage(\"set-surface\", (message) => {\n setContentState((prev) => ({\n ...prev,\n surface: message.surface,\n }));\n });\n\n registerMessage(\"pip-ended\", () => {\n const state = getState();\n if (state.recording || state.pendingRecording) {\n setContentState((prev) => ({\n ...prev,\n pipEnded: true,\n }));\n }\n });\n\n registerMessage(\"pip-started\", () => {\n const state = getState();\n if (state.recording || state.pendingRecording) {\n setContentState((prev) => ({\n ...prev,\n pipEnded: false,\n }));\n }\n });\n\n registerMessage(\"setup-complete\", () => {\n setContentState((prev) => ({\n ...prev,\n showOnboardingArrow: true,\n }));\n });\n\n registerMessage(\"hide-popup-recording\", () => {\n setContentState((prev) => ({\n ...prev,\n showPopup: false,\n showExtension: false,\n }));\n });\n\n registerMessage(\"stream-error\", (message) => {\n const state = getState();\n const errorCode = message?.errorCode || null;\n const errorWhy = message?.why || message?.error || null;\n\n state.openModal(\n chrome.i18n.getMessage(\"streamErrorModalTitle\"),\n chrome.i18n.getMessage(\"streamErrorModalDescription\"),\n chrome.i18n.getMessage(\"permissionsModalDismiss\"),\n null,\n () => {\n state.dismissRecording();\n },\n () => {\n state.dismissRecording();\n },\n null, // image\n null, // learnMore\n null, // learnMoreLink\n false, // colorSafe\n chrome.i18n.getMessage(\"getHelpButton\"),\n () => {\n chrome.runtime.sendMessage({\n type: \"report-error\",\n errorCode,\n errorWhy,\n source: \"stream-error\",\n });\n },\n );\n });\n\n registerMessage(\"stream-ended-warning\", (message) => {\n const state = getState();\n // Show a toast warning but don't stop the recording\n // The user can decide whether to continue or stop manually\n if (state.openToast) {\n state.openToast(\n message.message ||\n chrome.i18n.getMessage(\"streamEndedWarningToast\"),\n () => {},\n 10000, // Show for 10 seconds\n );\n }\n });\n\n registerMessage(\"show-toast\", (message) => {\n const state = getState();\n if (typeof state.openToast !== \"function\") return;\n state.openToast(message?.message || \"\", () => {}, message?.timeout || 5000);\n });\n\n registerMessage(\"backup-error\", () => {\n const state = getState();\n state.openModal(\n chrome.i18n.getMessage(\"backupPermissionFailTitle\"),\n chrome.i18n.getMessage(\"backupPermissionFailDescription\"),\n chrome.i18n.getMessage(\"permissionsModalDismiss\"),\n null,\n () => {\n state.dismissRecording();\n },\n () => {\n state.dismissRecording();\n },\n );\n });\n\n registerMessage(\"fast-recorder-hard-fail\", async () => {\n const state = getState();\n if (typeof state.openModal !== \"function\") return;\n\n const downloadBundle = async () => {\n const userAgent = navigator.userAgent;\n let platformInfo = {};\n try {\n platformInfo = await chrome.runtime.sendMessage({\n type: \"get-platform-info\",\n });\n } catch {}\n\n const manifestInfo = chrome.runtime.getManifest().version;\n const fastRecorderData = await chrome.storage.local.get([\n \"fastRecorderBeta\",\n \"fastRecorderDecision\",\n \"fastRecorderDisabledForDevice\",\n \"fastRecorderDisabledReason\",\n \"fastRecorderDisabledDetails\",\n \"fastRecorderDisabledAt\",\n \"fastRecorderProbe\",\n \"fastRecorderValidation\",\n \"fastRecorderValidationFailed\",\n \"fastRecorderInUse\",\n \"fastRecorderActiveRecordingId\",\n ]);\n\n const data = {\n userAgent: userAgent,\n platformInfo: platformInfo,\n manifestInfo: manifestInfo,\n defaultAudioInput: state.defaultAudioInput,\n defaultAudioOutput: state.defaultAudioOutput,\n defaultVideoInput: state.defaultVideoInput,\n quality: state.quality,\n systemAudio: state.systemAudio,\n audioInput: state.audioInput,\n audioOutput: state.audioOutput,\n backgroundEffectsActive: state.backgroundEffectsActive,\n recording: state.recording,\n recordingType: state.recordingType,\n askForPermissions: state.askForPermissions,\n cameraPermission: state.cameraPermission,\n microphonePermission: state.microphonePermission,\n askMicrophone: state.askMicrophone,\n cursorMode: state.cursorMode,\n zoomEnabled: state.zoomEnabled,\n offscreenRecording: state.offscreenRecording,\n updateChrome: state.updateChrome,\n permissionsChecked: state.permissionsChecked,\n permissionsLoaded: state.permissionsLoaded,\n hideUI: state.hideUI,\n alarm: state.alarm,\n alarmTime: state.alarmTime,\n surface: state.surface,\n blurMode: state.blurMode,\n fastRecorder: fastRecorderData,\n };\n\n const zip = new JSZip();\n zip.file(\"troubleshooting.json\", JSON.stringify(data));\n const blob = await zip.generateAsync({ type: \"blob\" });\n const url = window.URL.createObjectURL(blob);\n\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"screenity-troubleshooting.zip\";\n a.click();\n window.URL.revokeObjectURL(url);\n\n chrome.runtime.sendMessage({ type: \"indexed-db-download\" });\n };\n\n state.openModal(\n chrome.i18n.getMessage(\"fastRecorderFailedTitle\"),\n chrome.i18n.getMessage(\"fastRecorderFailedDescription\"),\n chrome.i18n.getMessage(\"downloadAnywayButton\"),\n chrome.i18n.getMessage(\"cancelButton\"),\n () => {\n chrome.runtime.sendMessage({ type: \"open-download-mp4\" });\n },\n () => {},\n null,\n null,\n null,\n true,\n false,\n () => {},\n );\n });\n\n registerMessage(\"recording-check\", (message, sender) => {\n const state = getState();\n\n if (!message.force) {\n if (!state.showExtension && !state.recording) {\n updateFromStorage(true, sender.id);\n }\n } else {\n // After navigation, PiP is always destroyed (the iframe that owned it\n // was torn down with the old page). Set pipEnded: true so the inline\n // camera overlay is visible immediately. If the camera iframe\n // successfully re-enters PiP later, a \"pip-started\" message will flip\n // this back to false.\n setContentState((prev) => ({\n ...prev,\n showExtension: true,\n recording: true,\n pipEnded: true,\n }));\n updateFromStorage(false, sender.id);\n }\n });\n\n registerMessage(\"stop-pending\", () => {\n setStartFlowOutcome(\"error\");\n setContentState((prev) => ({\n ...prev,\n pendingRecording: false,\n preparingRecording: false,\n pipEnded: false,\n }));\n });\n\n registerMessage(\"reopen-popup-multi\", (message) => {\n setContentState((prev) => ({\n ...prev,\n showExtension: true,\n showPopup: true,\n }));\n updateFromStorage(false, message.senderId);\n\n setTimeout(() => {\n const state = getState();\n if (state.openToast) {\n state.openToast(chrome.i18n.getMessage(\"addedToMultiToast\"), () => {});\n }\n }, 1000);\n });\n\n registerMessage(\"open-popup-project\", (message) => {\n setContentState((prev) => ({\n ...prev,\n showExtension: true,\n showPopup: true,\n recordingProjectTitle: message.projectTitle,\n projectId: message.projectId,\n recordingToScene: message.recordingToScene,\n activeSceneId: message.activeSceneId,\n }));\n\n updateFromStorage(false, message.senderId);\n\n setTimeout(() => {\n const state = getState();\n if (state.openToast) {\n state.openToast(\n chrome.i18n.getMessage(\"readyRecordSceneToast\"),\n () => {},\n );\n }\n }, 1000);\n });\n\n registerMessage(\"time-warning\", () => {\n // Only trigger when actively recording\n const state = getState();\n\n if (state.recording && !state.paused) {\n setContentState((prev) => ({\n ...prev,\n timeWarning: true,\n }));\n\n if (state.openToast) {\n state.openToast(\n chrome.i18n.getMessage(\"reachingRecordingLimitToast\"),\n () => {},\n 5000,\n );\n }\n }\n });\n registerMessage(\"time-stopped\", () => {\n const state = getState();\n // Only trigger when actively recording\n if (state.recording && !state.paused) {\n setContentState((prev) => ({\n ...prev,\n timeWarning: false,\n }));\n\n if (state.openToast) {\n state.openToast(\n chrome.i18n.getMessage(\"recordingLimitReachedToast\"),\n () => {},\n 5000,\n );\n }\n }\n });\n\n registerMessage(\"get-project-info\", (message) => {\n const payload = {\n source: \"get-project-info\",\n requestedAt: Date.now(),\n };\n if (activeLocalPlaybackSource?.url && latestLocalPlaybackOffer?.offerId) {\n payload.localPlayback = {\n available: true,\n ready: true,\n trackType: \"screen\",\n offerId: latestLocalPlaybackOffer.offerId,\n url: activeLocalPlaybackSource.url,\n mimeType: activeLocalPlaybackSource.mimeType || \"video/webm\",\n localBytes: activeLocalPlaybackSource.size || null,\n chunkCount: latestLocalPlaybackOffer.chunkCount || 0,\n estimatedBytes: latestLocalPlaybackOffer.estimatedBytes || 0,\n expiresAt: latestLocalPlaybackOffer.expiresAt || null,\n };\n }\n postProjectHandoff(payload);\n });\n registerMessage(\"check-auth\", async (message) => {\n if (!CLOUD_FEATURES_ENABLED) {\n // Default to local user\n const { recording } = await chrome.storage.local.get(\"recording\");\n\n setContentState((prev) => ({\n ...prev,\n isLoggedIn: false,\n screenityUser: null,\n isSubscribed: false,\n proSubscription: null,\n showExtension: true,\n showPopup: !recording,\n }));\n\n return;\n }\n\n const result = await checkAuthStatus();\n\n const { recording } = await chrome.storage.local.get(\"recording\");\n\n setContentState((prev) => ({\n ...prev,\n isLoggedIn: result.authenticated,\n screenityUser: result.user,\n isSubscribed: result.subscribed,\n proSubscription: result.proSubscription,\n ...(result.authenticated ? { wasLoggedIn: false } : {}),\n showExtension: true,\n showPopup: !recording,\n }));\n\n if (result.authenticated) {\n // Offscreen recording and client-side zoom are not available\n setContentState((prev) => ({\n ...prev,\n offscreenRecording: false,\n onboarding: false,\n showProSplash: false,\n zoomEnabled: false,\n }));\n\n chrome.storage.local.set({\n offscreenRecording: false,\n zoomEnabled: false,\n wasLoggedIn: false,\n });\n }\n });\n registerMessage(\"update-project-loading\", (message, sender) => {\n window.postMessage(\n { source: \"update-project-loading\", multiMode: message.multiMode },\n \"*\",\n );\n\n if (!message.multiMode) {\n setContentState((prev) => ({\n ...prev,\n showExtension: false,\n showPopup: false,\n }));\n }\n\n updateFromStorage(true, sender.id);\n });\n registerMessage(\"update-project-ready\", (message, sender) => {\n const projectId = message?.projectId || null;\n if (!projectId) {\n console.warn(\n \"[Screenity][Content] Ignoring update-project-ready without projectId\",\n );\n return;\n }\n\n projectReadySeq += 1;\n const handoffAt = Date.now();\n const handoffId = `${projectId}:${handoffAt}:${projectReadySeq}`;\n const localPlayback = message?.localPlayback || null;\n latestLocalPlaybackOffer =\n localPlayback?.available && localPlayback?.trackType === \"screen\"\n ? localPlayback\n : null;\n latestLocalPlaybackProjectId = latestLocalPlaybackOffer ? projectId : null;\n latestLocalPlaybackSceneId = latestLocalPlaybackOffer\n ? message.sceneId || null\n : null;\n\n const posted = postProjectHandoff({\n source: \"update-project-ready\",\n share: message.share,\n newProject: message.newProject,\n sceneId: message.sceneId,\n projectId,\n localPlayback:\n localPlayback?.available && localPlayback?.trackType === \"screen\"\n ? {\n ...localPlayback,\n ready:\n activeLocalPlaybackSource?.offerId === localPlayback.offerId &&\n Boolean(activeLocalPlaybackSource?.url),\n url:\n activeLocalPlaybackSource?.offerId === localPlayback.offerId\n ? activeLocalPlaybackSource.url\n : null,\n mimeType:\n activeLocalPlaybackSource?.offerId === localPlayback.offerId\n ? activeLocalPlaybackSource.mimeType || \"video/webm\"\n : null,\n localBytes:\n activeLocalPlaybackSource?.offerId === localPlayback.offerId\n ? activeLocalPlaybackSource.size || null\n : null,\n }\n : {\n available: false,\n trackType: \"screen\",\n },\n handoffAt,\n handoffId,\n handoffSeq: projectReadySeq,\n forceRefresh: true,\n });\n\n if (posted) {\n window.__screenityLastProjectReady = {\n projectId,\n sceneId: message.sceneId || null,\n handoffAt,\n handoffId,\n localPlaybackOfferId: localPlayback?.offerId || null,\n };\n updateFromStorage(false, sender?.id);\n }\n\n const capturedOffer = latestLocalPlaybackOffer;\n if (posted && capturedOffer?.offerId) {\n const capturedSceneId = message.sceneId || null;\n console.info(\"[Screenity][Content] Local screen playback offered\", {\n projectId,\n sceneId: capturedSceneId,\n offerId: capturedOffer.offerId,\n chunkCount: capturedOffer.chunkCount || 0,\n estimatedBytes: capturedOffer.estimatedBytes || 0,\n });\n void ensureLocalPlaybackReady({\n projectId,\n sceneId: capturedSceneId,\n offer: capturedOffer,\n })\n .then((readySource) => {\n console.info(\"[Screenity][Content] Local screen playback ready\", {\n projectId,\n sceneId: capturedSceneId,\n offerId: capturedOffer.offerId,\n bytes: readySource?.size || 0,\n });\n postLocalPlaybackHandoff({\n projectId,\n sceneId: capturedSceneId,\n offer: capturedOffer,\n readySource,\n });\n })\n .catch((err) => {\n const reason = err?.message || \"local-playback-build-failed\";\n console.warn(\"[Screenity][Content] Local screen playback fallback\", {\n projectId,\n sceneId: capturedSceneId,\n offerId: capturedOffer.offerId,\n reason,\n });\n void markLocalPlaybackFallback({\n offerId: capturedOffer.offerId,\n projectId,\n sceneId: capturedSceneId,\n reason,\n });\n postLocalPlaybackHandoff({\n projectId,\n sceneId: capturedSceneId,\n offer: capturedOffer,\n fallbackReason: reason,\n });\n });\n }\n });\n registerMessage(\"clear-project-recording\", (message) => {\n updateFromStorage(false, message.senderId);\n });\n registerMessage(\"preparing-recording\", () => {\n traceStep(\"preparingReceived\");\n setContentState((prev) => ({\n ...prev,\n preparingRecording: true,\n showExtension: true,\n showPopup: false,\n }));\n });\n};\n" }, { "path": "src/pages/Content/context/utils/checkAuthStatus.js", "content": "export const checkAuthStatus = async () => {\n return new Promise((resolve) => {\n chrome.runtime.sendMessage({ type: \"check-auth-status\" }, (response) => {\n if (chrome.runtime.lastError) {\n console.error(\n \"❌ Error checking auth status:\",\n chrome.runtime.lastError.message\n );\n resolve({ authenticated: false });\n } else {\n resolve({\n authenticated: !!response?.authenticated,\n user: response?.user ?? null,\n subscribed: !!response?.subscribed,\n proSubscription: response?.proSubscription ?? null,\n cached: response?.cached ?? false,\n });\n }\n });\n });\n};\n" }, { "path": "src/pages/Content/context/utils/checkRecording.js", "content": "import { setContentState } from \"../ContentState\";\n\nexport const checkRecording = async (id) => {\n const { recording } = await chrome.storage.local.get(\"recording\");\n const { tabRecordedID } = await chrome.storage.local.get(\"tabRecordedID\");\n if (id == null && tabRecordedID) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n recording: false,\n }));\n } else if (recording && tabRecordedID) {\n if (id != tabRecordedID) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n recording: false,\n }));\n }\n }\n};\n" }, { "path": "src/pages/Content/context/utils/updateFromStorage.js", "content": "import { setContentState } from \"../ContentState\";\nimport { checkRecording } from \"./checkRecording\";\n\nconst CURSOR_EFFECTS = [\"target\", \"highlight\", \"spotlight\"];\n\nconst normalizeCursorEffects = (effects) => {\n if (!Array.isArray(effects)) return [];\n return effects.filter((effect) => CURSOR_EFFECTS.includes(effect));\n};\n\nconst deriveCursorMode = (effects, fallbackMode) => {\n if (effects.length === 0) return \"none\";\n if (effects.length === 1) return effects[0];\n if (fallbackMode && effects.includes(fallbackMode)) return fallbackMode;\n return effects[0] || \"none\";\n};\n\nexport const updateFromStorage = (check = true, id = null) => {\n chrome.storage.local.get(\n [\n \"audioInput\",\n \"videoInput\",\n \"defaultAudioInput\",\n \"defaultVideoInput\",\n \"defaultAudioInputLabel\",\n \"defaultVideoInputLabel\",\n \"cameraDimensions\",\n \"cameraFlipped\",\n \"cameraActive\",\n \"micActive\",\n \"recording\",\n \"paused\",\n \"backgroundEffect\",\n \"backgroundEffectsActive\",\n \"toolbarPosition\",\n \"countdown\",\n \"recordingType\",\n \"customRegion\",\n \"regionWidth\",\n \"regionHeight\",\n \"regionX\",\n \"regionY\",\n \"hideToolbar\",\n \"alarm\",\n \"alarmTime\",\n \"pendingRecording\",\n \"askForPermissions\",\n \"cursorMode\",\n \"cursorEffects\",\n \"pushToTalk\",\n \"askMicrophone\",\n \"offscreenRecording\",\n \"zoomEnabled\",\n \"setDevices\",\n \"popupPosition\",\n \"surface\",\n \"hideUIAlerts\",\n \"hideUI\",\n \"bigTab\",\n \"toolbarHover\",\n \"askDismiss\",\n \"swatch\",\n \"color\",\n \"strokeWidth\",\n \"quality\",\n \"systemAudio\",\n \"backup\",\n \"backupSetup\",\n \"qualityValue\",\n \"fpsValue\",\n \"fastRecorderBeta\",\n \"fastRecorderStatus\",\n \"useWebCodecsRecorder\",\n \"multiMode\",\n \"multiSceneCount\",\n \"sortBy\",\n \"wasLoggedIn\",\n \"instantMode\",\n \"hasSeenInstantModeModal\",\n \"hasSubscribedBefore\",\n ],\n (result) => {\n const storedEffects = normalizeCursorEffects(result.cursorEffects);\n const hasStoredEffects = Array.isArray(result.cursorEffects);\n const legacyMode =\n result.cursorMode !== undefined && result.cursorMode !== null\n ? result.cursorMode\n : \"none\";\n const cursorEffects = hasStoredEffects\n ? storedEffects\n : legacyMode !== \"none\"\n ? [legacyMode]\n : [];\n const cursorMode = deriveCursorMode(cursorEffects, legacyMode);\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n audioInput:\n result.audioInput !== undefined && result.audioInput !== null\n ? result.audioInput\n : prevContentState.audioInput,\n videoInput:\n result.videoInput !== undefined && result.videoInput !== null\n ? result.videoInput\n : prevContentState.videoInput,\n defaultAudioInput:\n result.defaultAudioInput !== undefined &&\n result.defaultAudioInput !== null\n ? result.defaultAudioInput\n : prevContentState.defaultAudioInput,\n defaultVideoInput:\n result.defaultVideoInput !== undefined &&\n result.defaultVideoInput !== null\n ? result.defaultVideoInput\n : prevContentState.defaultVideoInput,\n defaultAudioInputLabel:\n result.defaultAudioInputLabel !== undefined &&\n result.defaultAudioInputLabel !== null\n ? result.defaultAudioInputLabel\n : prevContentState.defaultAudioInputLabel,\n defaultVideoInputLabel:\n result.defaultVideoInputLabel !== undefined &&\n result.defaultVideoInputLabel !== null\n ? result.defaultVideoInputLabel\n : prevContentState.defaultVideoInputLabel,\n cameraDimensions:\n result.cameraDimensions !== undefined &&\n result.cameraDimensions !== null\n ? result.cameraDimensions\n : prevContentState.cameraDimensions,\n cameraFlipped:\n result.cameraFlipped !== undefined && result.cameraFlipped !== null\n ? result.cameraFlipped\n : prevContentState.cameraFlipped,\n cameraActive:\n result.cameraActive !== undefined && result.cameraActive !== null\n ? result.cameraActive\n : prevContentState.cameraActive,\n micActive:\n result.micActive !== undefined && result.micActive !== null\n ? result.micActive\n : prevContentState.micActive,\n backgroundEffect:\n result.backgroundEffect !== undefined &&\n result.backgroundEffect !== null\n ? result.backgroundEffect\n : prevContentState.backgroundEffect,\n backgroundEffectsActive:\n result.backgroundEffectsActive !== undefined &&\n result.backgroundEffectsActive !== null\n ? result.backgroundEffectsActive\n : prevContentState.backgroundEffectsActive,\n toolbarPosition:\n result.toolbarPosition !== undefined &&\n result.toolbarPosition !== null\n ? result.toolbarPosition\n : prevContentState.toolbarPosition,\n countdown:\n result.countdown !== undefined && result.countdown !== null\n ? result.countdown\n : prevContentState.countdown,\n recording:\n result.recording !== undefined && result.recording !== null\n ? result.recording\n : prevContentState.recording,\n paused:\n result.paused !== undefined && result.paused !== null\n ? result.paused\n : prevContentState.paused,\n recordingType:\n result.recordingType !== undefined && result.recordingType !== null\n ? result.recordingType\n : prevContentState.recordingType,\n customRegion:\n result.customRegion !== undefined && result.customRegion !== null\n ? result.customRegion\n : prevContentState.customRegion,\n regionWidth:\n result.regionWidth !== undefined && result.regionWidth !== null\n ? result.regionWidth\n : prevContentState.regionWidth,\n regionHeight:\n result.regionHeight !== undefined && result.regionHeight !== null\n ? result.regionHeight\n : prevContentState.regionHeight,\n regionX:\n result.regionX !== undefined && result.regionX !== null\n ? result.regionX\n : prevContentState.regionX,\n regionY:\n result.regionY !== undefined && result.regionY !== null\n ? result.regionY\n : prevContentState.regionY,\n hideToolbar:\n result.hideToolbar !== undefined && result.hideToolbar !== null\n ? result.hideToolbar\n : prevContentState.hideToolbar,\n alarm:\n result.alarm !== undefined && result.alarm !== null\n ? result.alarm\n : prevContentState.alarm,\n alarmTime:\n result.alarmTime !== undefined && result.alarmTime !== null\n ? result.alarmTime\n : prevContentState.alarmTime,\n pendingRecording:\n result.pendingRecording !== undefined &&\n result.pendingRecording !== null\n ? result.pendingRecording\n : prevContentState.pendingRecording,\n askForPermissions:\n result.askForPermissions !== undefined &&\n result.askForPermissions !== null\n ? result.askForPermissions\n : prevContentState.askForPermissions,\n cursorMode: cursorMode || prevContentState.cursorMode,\n cursorEffects:\n cursorEffects.length > 0 || hasStoredEffects\n ? cursorEffects\n : prevContentState.cursorEffects,\n pushToTalk:\n result.pushToTalk !== undefined && result.pushToTalk !== null\n ? result.pushToTalk\n : prevContentState.pushToTalk,\n zoomEnabled:\n result.zoomEnabled !== undefined && result.zoomEnabled !== null\n ? result.zoomEnabled\n : prevContentState.zoomEnabled,\n askMicrophone:\n result.askMicrophone !== undefined && result.askMicrophone !== null\n ? result.askMicrophone\n : prevContentState.askMicrophone,\n offscreenRecording:\n result.offscreenRecording !== undefined &&\n result.offscreenRecording !== null\n ? result.offscreenRecording\n : prevContentState.offscreenRecording,\n setDevices:\n result.setDevices !== undefined && result.setDevices !== null\n ? result.setDevices\n : prevContentState.setDevices,\n popupPosition:\n result.popupPosition !== undefined && result.popupPosition !== null\n ? result.popupPosition\n : prevContentState.popupPosition,\n surface:\n result.surface !== undefined && result.surface !== null\n ? result.surface\n : prevContentState.surface,\n hideUIAlerts:\n result.hideUIAlerts !== undefined && result.hideUIAlerts !== null\n ? result.hideUIAlerts\n : prevContentState.hideUIAlerts,\n hideUI:\n result.hideUI !== undefined && result.hideUI !== null\n ? result.hideUI\n : prevContentState.hideUI,\n bigTab:\n result.bigTab !== undefined && result.bigTab !== null\n ? result.bigTab\n : prevContentState.bigTab,\n toolbarHover:\n result.toolbarHover !== undefined && result.toolbarHover !== null\n ? result.toolbarHover\n : prevContentState.toolbarHover,\n askDismiss:\n result.askDismiss !== undefined && result.askDismiss !== null\n ? result.askDismiss\n : prevContentState.askDismiss,\n swatch:\n result.swatch !== undefined && result.swatch !== null\n ? result.swatch\n : prevContentState.swatch,\n color:\n result.color !== undefined && result.color !== null\n ? result.color\n : prevContentState.color,\n strokeWidth:\n result.strokeWidth !== undefined && result.strokeWidth !== null\n ? result.strokeWidth\n : prevContentState.strokeWidth,\n quality:\n result.quality !== undefined && result.quality !== null\n ? result.quality\n : prevContentState.quality,\n systemAudio:\n result.systemAudio !== undefined && result.systemAudio !== null\n ? result.systemAudio\n : prevContentState.systemAudio,\n backup:\n result.backup !== undefined && result.backup !== null\n ? result.backup\n : prevContentState.backup,\n backupSetup:\n result.backupSetup !== undefined && result.backupSetup !== null\n ? result.backupSetup\n : prevContentState.backupSetup,\n qualityValue:\n result.qualityValue !== undefined && result.qualityValue !== null\n ? result.qualityValue\n : prevContentState.qualityValue,\n fpsValue:\n result.fpsValue !== undefined && result.fpsValue !== null\n ? result.fpsValue\n : prevContentState.fpsValue,\n fastRecorderBeta:\n result.fastRecorderBeta !== undefined &&\n result.fastRecorderBeta !== null\n ? result.fastRecorderBeta\n : prevContentState.fastRecorderBeta,\n fastRecorderStatus:\n result.fastRecorderStatus !== undefined &&\n result.fastRecorderStatus !== null\n ? result.fastRecorderStatus\n : prevContentState.fastRecorderStatus,\n useWebCodecsRecorder:\n result.useWebCodecsRecorder !== undefined &&\n result.useWebCodecsRecorder !== null\n ? result.useWebCodecsRecorder\n : prevContentState.useWebCodecsRecorder,\n multiMode: result.multiMode || false,\n multiSceneCount: result.multiSceneCount || 0,\n wasLoggedIn: result.wasLoggedIn || false,\n sortBy: result.sortBy || \"newest\",\n instantMode: result.instantMode || false,\n hasSeenInstantModeModal: result.hasSeenInstantModeModal || false,\n onboarding: result.onboarding || false,\n hasSubscribedBefore: result.hasSubscribedBefore || false,\n showProSplash: result.showProSplash || false,\n }));\n\n if (result.systemAudio === undefined || result.systemAudio === null) {\n chrome.storage.local.set({ systemAudio: true });\n }\n\n if (\n result.backgroundEffect === undefined ||\n result.backgroundEffect === null\n ) {\n chrome.storage.local.set({ backgroundEffect: \"blur\" });\n }\n\n if (result.backup === undefined || result.backup === null) {\n chrome.storage.local.set({ backup: false });\n }\n\n if (result.countdown === undefined || result.countdown === null) {\n chrome.storage.local.set({ countdown: true });\n }\n\n if (result.backupSetup === undefined || result.backupSetup === null) {\n chrome.storage.local.set({ backupSetup: false });\n }\n\n if (!hasStoredEffects && legacyMode) {\n chrome.storage.local.set({\n cursorEffects: cursorEffects,\n cursorMode: cursorMode,\n });\n }\n\n if (result.backgroundEffectsActive) {\n chrome.runtime.sendMessage({ type: \"backgroundEffectsActive\" });\n }\n\n if (check) {\n checkRecording(id);\n }\n\n if (result.alarm) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: parseFloat(result.alarmTime),\n timer: parseFloat(result.alarmTime),\n }));\n } else if (!result.recording) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: 0,\n timer: 0,\n }));\n }\n }\n );\n};\n" }, { "path": "src/pages/Content/countdown/Countdown.jsx", "content": "import React, { useState, useEffect, useContext, useRef } from \"react\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst COUNTDOWN_TIME = 3;\nconst DEBUG_START_FLOW =\n typeof window !== \"undefined\" ? !!window.SCREENITY_DEBUG_RECORDER : false;\n\nconst Countdown = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [count, setCount] = useState(COUNTDOWN_TIME);\n const [isTransforming, setIsTransforming] = useState(false);\n const [isRotating, setIsRotating] = useState(false);\n\n const END_HOLD_MS = 1000;\n const POST_HIDE_START_DELAY_MS = 150;\n const HIDE_AFTER_END_MS = 0;\n\n const intervalRef = useRef(null);\n const activeRef = useRef(false);\n const cancelledRef = useRef(false);\n const wasVisibleRef = useRef(false);\n const finishRef = useRef(null);\n const resetRef = useRef(null);\n const completedRef = useRef(false);\n const hideTimeoutRef = useRef(null);\n const finishTimeoutRef = useRef(null);\n const startTimeoutRef = useRef(null);\n const startAtRef = useRef(0);\n const runIdRef = useRef(0);\n\n const cleanupTimers = () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n if (finishTimeoutRef.current) {\n clearTimeout(finishTimeoutRef.current);\n finishTimeoutRef.current = null;\n }\n if (startTimeoutRef.current) {\n clearTimeout(startTimeoutRef.current);\n startTimeoutRef.current = null;\n }\n };\n\n const logStartFlow = (event, data = {}) => {\n if (!DEBUG_START_FLOW) return;\n const payload = { ts: Date.now(), event, ...data };\n console.info(\"[Screenity][StartFlow]\", payload);\n try {\n const update = {\n startFlowDebug: {\n ...(data || {}),\n event,\n ts: payload.ts,\n },\n };\n if (event === \"countdown_start\") {\n update.countdownVisibleAt = payload.ts;\n } else if (event === \"countdown_end\") {\n update.countdownHiddenAt = payload.ts;\n }\n chrome.storage.local.set(update);\n } catch {}\n };\n\n useEffect(() => {\n activeRef.current = contentState.countdownActive;\n cancelledRef.current = contentState.countdownCancelled;\n finishRef.current = contentState.onCountdownFinished;\n resetRef.current = contentState.resetCountdown;\n }, [\n contentState.countdownActive,\n contentState.countdownCancelled,\n contentState.onCountdownFinished,\n contentState.resetCountdown,\n ]);\n\n // Handle cancellation\n const handleCancel = () => {\n if (contentState.countdownActive || contentState.isCountdownVisible) {\n cleanupTimers();\n setCount(COUNTDOWN_TIME);\n setIsTransforming(false);\n setIsRotating(false);\n completedRef.current = false;\n logStartFlow(\"countdown_cancel\", { visible: false });\n contentState.cancelCountdown();\n }\n };\n\n // Countdown logic\n useEffect(() => {\n if (!contentState.countdownActive) {\n cleanupTimers();\n completedRef.current = false;\n return;\n }\n\n cleanupTimers();\n // Reset immediately at run start so a stale previous `1` cannot\n // short-circuit the next countdown cycle.\n setCount(COUNTDOWN_TIME);\n completedRef.current = false;\n runIdRef.current += 1;\n const runId = runIdRef.current;\n startAtRef.current = performance.now();\n logStartFlow(\"countdown_start\", { visible: true });\n\n const tick = () => {\n if (runIdRef.current !== runId) return;\n if (!activeRef.current || cancelledRef.current) return;\n const elapsedMs = performance.now() - startAtRef.current;\n const remainingMs = Math.max(0, COUNTDOWN_TIME * 1000 - elapsedMs);\n const nextCount = Math.max(1, Math.ceil(remainingMs / 1000));\n setCount(nextCount);\n\n if (remainingMs <= 0) {\n return;\n }\n\n intervalRef.current = setTimeout(tick, 100);\n };\n\n intervalRef.current = setTimeout(tick, 100);\n\n return cleanupTimers;\n }, [contentState.countdownActive]);\n\n useEffect(() => {\n if (!activeRef.current || cancelledRef.current) {\n return;\n }\n if (count !== 1) {\n return;\n }\n const elapsedMs = performance.now() - startAtRef.current;\n // Ignore stale count=1 carried from a previous run; valid final-second\n // entry happens after ~2s for a 3..2..1 countdown.\n if (elapsedMs < (COUNTDOWN_TIME - 1) * 1000) {\n return;\n }\n if (completedRef.current) {\n return;\n }\n completedRef.current = true;\n\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n\n if (!cancelledRef.current && activeRef.current) {\n finishTimeoutRef.current = setTimeout(() => {\n if (cancelledRef.current || !activeRef.current) {\n finishTimeoutRef.current = null;\n return;\n }\n setContentState((prev) => ({\n ...prev,\n isCountdownVisible: false,\n countdownActive: false,\n }));\n const endedAt = Date.now();\n const dispatchStartAfterHide = () => {\n if (cancelledRef.current) return;\n const startDispatchedAt = Date.now();\n logStartFlow(\"countdown_end\", {\n visible: false,\n endedAt,\n startDispatchedAt,\n });\n chrome.storage.local.set({\n countdownFinishedAt: endedAt,\n lastCountdownStartGate: {\n endedAt,\n countdownHiddenAt: endedAt,\n startDispatchedAt,\n overlayVisible: false,\n ts: startDispatchedAt,\n },\n });\n finishRef.current?.();\n // Countdown-enabled flow should start from background only.\n // Waiting briefly after hide avoids capturing the countdown frame.\n startTimeoutRef.current = setTimeout(() => {\n if (cancelledRef.current) {\n startTimeoutRef.current = null;\n return;\n }\n chrome.runtime\n .sendMessage({\n type: \"countdown-finished\",\n endedAt,\n })\n .catch(() => {});\n startTimeoutRef.current = null;\n }, POST_HIDE_START_DELAY_MS);\n };\n // Wait for at least one paint after hidden state commit.\n requestAnimationFrame(() => {\n requestAnimationFrame(dispatchStartAfterHide);\n });\n hideTimeoutRef.current = setTimeout(() => {\n hideTimeoutRef.current = null;\n }, HIDE_AFTER_END_MS);\n finishTimeoutRef.current = null;\n }, END_HOLD_MS);\n }\n }, [count, setContentState]);\n\n // Start animation when countdown becomes visible\n useEffect(() => {\n if (contentState.isCountdownVisible && !wasVisibleRef.current) {\n resetRef.current?.();\n completedRef.current = false;\n setCount(COUNTDOWN_TIME);\n setIsTransforming(true);\n\n const rotateId = setTimeout(() => {\n if (!cancelledRef.current) {\n setIsRotating(true);\n }\n }, 10);\n\n const transformId = setTimeout(() => {\n if (!cancelledRef.current) {\n setIsTransforming(false);\n }\n }, (COUNTDOWN_TIME * 1000) / 2);\n\n return () => {\n clearTimeout(rotateId);\n clearTimeout(transformId);\n };\n }\n\n if (!contentState.isCountdownVisible) {\n setIsRotating(false);\n setIsTransforming(false);\n }\n }, [contentState.isCountdownVisible]);\n\n useEffect(() => {\n wasVisibleRef.current = contentState.isCountdownVisible;\n }, [contentState.isCountdownVisible]);\n\n // Cleanup on unmount\n useEffect(() => {\n return cleanupTimers;\n }, []);\n\n return (\n \n {contentState.isCountdownVisible && (\n
\n \n \n \n \n \n \n \n \n\n
\n
{count}
\n \n
\n
\n
\n
\n \n\n
\n {chrome.i18n.getMessage(\"countdownMessage\")}\n
\n
\n \n )}\n \n );\n};\n\nexport default Countdown;\n" }, { "path": "src/pages/Content/countdown/styles/_Countdown.scss", "content": "@use \"../../styles/_variables\" as *;\n\n.countdown {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: $z-index-max;\n}\n\n.countdown-circle {\n width: 200px;\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 999;\n text-align: center;\n}\n.countdown-overlay {\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: 99;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.countdown-number {\n position: absolute;\n width: 20px;\n height: 60px;\n z-index: 9999999;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n font-weight: 300 !important;\n font-family: $font-light !important;\n font-size: 48px !important;\n line-height: 60px !important;\n letter-spacing: normal !important;\n text-transform: none !important;\n word-spacing: normal !important;\n color: $color-text-contrast;\n text-align: center;\n display: block;\n transition: all 0.6s ease-in-out;\n}\n.background {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0px;\n top: 0px;\n filter: url(\"#goo\");\n transform: rotate(0deg);\n transition: all 3s ease-in-out;\n}\n.circle {\n z-index: 9;\n position: absolute;\n transform: scale(0.8);\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n border-radius: 50%;\n background: radial-gradient(\n 118.3% 119.01% at 35.44% 0%,\n #2baef8 23.13%,\n #3582f6 46.35%,\n #486def 74.48%,\n #7b9aea 100%\n );\n width: 200px;\n height: 200px;\n transition: all 1.5s ease-in-out;\n}\n.c {\n width: 50px;\n height: 50px;\n z-index: 999;\n border-radius: 50%;\n position: absolute;\n top: 0px;\n right: 0px;\n left: 0px;\n bottom: 0px;\n margin: auto;\n transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;\n opacity: 1;\n}\n.c2 {\n background: radial-gradient(\n 118.3% 119.01% at 35.44% 0%,\n #2b96f8 23.13%,\n #356bf6 64.58%\n );\n transform: translate(20px, 20px);\n}\n.c3 {\n background: radial-gradient(\n 118.3% 119.01% at 35.44% 0%,\n #4884ca 15.3%,\n #2b89f8 78.83%\n );\n transform: translate(-30px, -40px);\n}\n.c3:after {\n content: \"\";\n position: absolute;\n width: 150px;\n height: 150px;\n filter: blur(50px);\n border-radius: 50%;\n top: 0px;\n right: 0px;\n left: 0px;\n bottom: 0px;\n margin: auto;\n transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;\n background: #cbe8f7;\n z-index: -1;\n}\n.recording-countdown {\n pointer-events: all;\n}\n.recording-countdown .c2 {\n transform: translate(-15px, 15px);\n}\n.recording-countdown .c3 {\n transform: translate(-10px, -5px);\n}\n.countdown-info {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n bottom: 20px;\n border-radius: 30px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n text-align: center;\n display: block;\n padding: 10px 20px;\n font-family: $font-medium;\n font-size: $font-size-normal;\n line-height: 1.4;\n letter-spacing: normal;\n text-transform: none;\n color: $color-text-contrast;\n z-index: $z-index-max;\n width: fit-content;\n}\n" }, { "path": "src/pages/Content/cursor/trackClicks.js", "content": "export function startClickTracking(\n isRegion = false,\n regionWidth = 0,\n regionHeight = 0,\n regionX = 0,\n regionY = 0,\n contentStateRef = null // <- optional\n) {\n const handleClick = async (e) => {\n // Skip if blur mode is active\n if (contentStateRef?.current?.blurMode) return;\n\n // Ignore clicks inside the toolbar\n if (\n e.target.closest(\".ToolbarRoot\") ||\n e.target.closest(\".ToolbarRecordingControls\") ||\n e.target.closest(\".ToolbarToggleWrap\") ||\n e.target.closest(\".ToolbarPaused\") ||\n e.target.closest(\".Toast\") ||\n e.target.closest(\"#screenity-root-container\")\n ) {\n return;\n }\n\n const canvasWrapper = document.getElementById(\"canvas-wrapper-screenity\");\n if (canvasWrapper && canvasWrapper.contains(e.target)) {\n return;\n }\n\n const { surface, recordingWindowId, recordingType } =\n await chrome.storage.local.get([\n \"surface\",\n \"recordingWindowId\",\n \"recordingType\",\n ]);\n\n if (recordingType === \"camera\") {\n return;\n }\n\n let clickX = e.clientX;\n let clickY = e.clientY;\n\n if (isRegion) {\n // Check if click is inside region bounds\n const inRegion =\n clickX >= regionX &&\n clickX <= regionX + regionWidth &&\n clickY >= regionY &&\n clickY <= regionY + regionHeight;\n\n if (!inRegion) {\n return;\n }\n\n // Normalize to region-relative coordinates\n clickX = clickX - regionX;\n clickY = clickY - regionY;\n }\n\n chrome.runtime.sendMessage({\n type: \"click-event\",\n payload: {\n x: clickX,\n y: clickY,\n relativeToRegion: isRegion,\n surface: surface || \"unknown\",\n recordingWindowId,\n timestamp: Date.now(),\n region: isRegion,\n isTab: recordingType === \"region\",\n },\n });\n };\n\n window.addEventListener(\"mousedown\", handleClick, true);\n return () => window.removeEventListener(\"mousedown\", handleClick, true);\n}\n" }, { "path": "src/pages/Content/images/popup/images.js", "content": "// I need to make this work for a Chrome extension, so I can't import images, instead it needs to be a string with the path to the image\nconst URL =\n \"chrome-extension://\" + chrome.i18n.getMessage(\"@@extension_id\") + \"/assets\";\n\nconst DropdownIcon = `${URL}/dropdown.svg`;\nconst MicOnIcon = `${URL}/mic-on.svg`;\nconst MicOffIcon = `${URL}/mic-off.svg`;\nconst CameraOnIcon = `${URL}/camera-on.svg`;\nconst CameraOffIcon = `${URL}/camera-off.svg`;\nconst CheckWhiteIcon = `${URL}/check-white.svg`;\nconst Waveform = `${URL}/waveform.svg`;\nconst RecordTabActive = `${URL}/record-tab-active.svg`;\nconst RecordTabInactive = `${URL}/record-tab-inactive.svg`;\nconst VideoTabActive = `${URL}/video-tab-active.svg`;\nconst VideoTabInactive = `${URL}/video-tab-inactive.svg`;\nconst ScreenTabOn = `${URL}/screen-tab-on.svg`;\nconst ScreenTabOff = `${URL}/screen-tab-off.svg`;\nconst RegionTabOn = `${URL}/region-tab-on.svg`;\nconst RegionTabOff = `${URL}/region-tab-off.svg`;\nconst AudioTabOn = `${URL}/audio-tab-on.svg`;\nconst AudioTabOff = `${URL}/audio-tab-off.svg`;\nconst MockupTabOn = `${URL}/mockup-tab-on.svg`;\nconst MockupTabOff = `${URL}/mockup-tab-off.svg`;\n// const TempLogo = `${URL}/temp-logo.png`;\nconst TempLogo = `${URL}/new-logo.svg`;\nconst TempFigma = `${URL}/temp/figma.webp`;\nconst TempTwitter = `${URL}/temp/twitter.webp`;\nconst TempDesignSystem = `${URL}/temp/designsystem.webp`;\nconst TempMarketing = `${URL}/temp/marketing.webp`;\nconst TempSubstack = `${URL}/temp/substack.webp`;\nconst CopyLinkIcon = `${URL}/copy-link.svg`;\nconst MoreActionsIcon = `${URL}/more-actions.svg`;\nconst ProfilePic = `${URL}/pfp.png`;\nconst HandleControl = `${URL}/canvas/handle.png`;\nconst RotateControl = `${URL}/canvas/rotate.png`;\nconst MiddleHandleControl = `${URL}/canvas/middle-handle.png`;\nconst MiddleHandleControlV = `${URL}/canvas/middle-handle-v.png`;\nconst DefaultCursor = `${URL}/cursors/default.svg`;\nconst CameraTabIconOn = `${URL}/camera-tab-icon-on.svg`;\nconst CameraTabIconOff = `${URL}/camera-tab-icon-off.svg`;\nconst CameraOffBlue = `${URL}/camera-off-blue.svg`;\nconst MicOffBlue = `${URL}/mic-off-blue.svg`;\nconst DropdownGroup = `${URL}/dropdown-group.svg`;\nconst PlaceholderThumb = `${URL}/placeholder-thumb.png`;\nconst CloseWhiteIcon = `${URL}/close-white.svg`;\n\nexport {\n DropdownIcon,\n MicOnIcon,\n MicOffIcon,\n CameraOnIcon,\n CameraOffIcon,\n CheckWhiteIcon,\n Waveform,\n RecordTabActive,\n RecordTabInactive,\n VideoTabActive,\n VideoTabInactive,\n ScreenTabOn,\n ScreenTabOff,\n RegionTabOn,\n RegionTabOff,\n AudioTabOn,\n AudioTabOff,\n MockupTabOn,\n MockupTabOff,\n TempLogo,\n TempFigma,\n TempTwitter,\n TempDesignSystem,\n TempMarketing,\n TempSubstack,\n CopyLinkIcon,\n MoreActionsIcon,\n ProfilePic,\n HandleControl,\n RotateControl,\n MiddleHandleControl,\n MiddleHandleControlV,\n DefaultCursor,\n CameraTabIconOn,\n CameraTabIconOff,\n CameraOffBlue,\n MicOffBlue,\n DropdownGroup,\n PlaceholderThumb,\n CloseWhiteIcon,\n};\n" }, { "path": "src/pages/Content/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}" }, { "path": "src/pages/Content/index.js", "content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport \"./styles/app.scss\";\nimport Content from \"./Content\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);\n" }, { "path": "src/pages/Content/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Content from \"./Content\";\n\n// Check if screenity-ui already exists, if so, remove it\nconst existingRoot = document.getElementById(\"screenity-ui\");\nif (existingRoot) {\n document.body.removeChild(existingRoot);\n}\n\nconst root = document.createElement(\"div\");\nroot.id = \"screenity-ui\";\ndocument.body.appendChild(root);\n\nconst appRoot = createRoot(root);\nappRoot.render();\n" }, { "path": "src/pages/Content/modal/Modal.jsx", "content": "import React, { useState, useEffect, useContext, useCallback } from \"react\";\nimport * as AlertDialog from \"@radix-ui/react-alert-dialog\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst Modal = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [title, setTitle] = useState(\"Test\");\n const [description, setDescription] = useState(\"Description here\");\n const [button1, setButton1] = useState(\"Submit\");\n const [button2, setButton2] = useState(\"Cancel\");\n const [trigger, setTrigger] = useState(() => {});\n const [trigger2, setTrigger2] = useState(() => {});\n const [showModal, setShowModal] = useState(false);\n const [image, setImage] = useState(null);\n const [learnmore, setLearnMore] = useState(null);\n const [learnMoreLink, setLearnMoreLink] = useState(() => {});\n const [colorSafe, setColorSafe] = useState(false);\n const [sideButton, setSideButton] = useState(false);\n const [sideButtonAction, setSideButtonAction] = useState(() => {});\n\n const openModal = useCallback(\n (\n title,\n description,\n button1,\n button2,\n action,\n action2,\n image = null,\n learnMore = null,\n learnMoreLink = null,\n colorSafe = false,\n sideButton = false,\n sideButtonAction = () => {}\n ) => {\n setTitle(title);\n setDescription(description);\n setButton1(button1);\n setButton2(button2);\n setShowModal(true);\n setTrigger(() => action);\n setTrigger2(() => action2);\n setImage(image);\n setLearnMore(learnMore);\n setLearnMoreLink(() => learnMoreLink);\n setColorSafe(colorSafe);\n setSideButton(sideButton);\n setSideButtonAction(() => sideButtonAction);\n }\n );\n\n useEffect(() => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openModal: openModal,\n }));\n\n return () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openModal: null,\n }));\n };\n }, []);\n\n return (\n {\n setShowModal(open);\n }}\n >\n \n \n
\n \n \n {title}\n \n \n {description.split(\"\\n\").map((line, idx) => (\n \n {line}\n
\n \n ))}\n {learnmore && (\n <>\n {\" \"}\n \n {learnmore}\n \n \n )}\n \n {image && (\n \n )}\n
\n {sideButton && (\n {\n sideButtonAction();\n setShowModal(false);\n }}\n >\n {sideButton}\n \n )}\n {button2 && (\n \n \n \n )}\n {button1 && (\n \n trigger()}\n >\n {button1}\n \n \n )}\n
\n \n \n \n );\n};\n\nexport default Modal;\n" }, { "path": "src/pages/Content/modal/styles/_Modal.scss", "content": "@use \"../../styles/_variables\" as *;\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.AlertDialogOverlay {\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n inset: 0;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 99999999999;\n}\n\n.AlertDialogContent {\n overflow: auto !important;\n background-color: white;\n border-radius: 30px;\n box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 90vw;\n max-width: 500px;\n max-height: 85vh;\n padding: 35px 25px;\n animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: $z-index-max;\n}\n.AlertDialogContent:focus {\n outline: none;\n}\n\n.AlertDialogTitle {\n margin: 0;\n color: $color-text-primary;\n font-size: $font-size-normal;\n line-height: 1.4;\n font-family: $font-bold;\n font-weight: 700;\n}\n\n.AlertDialogDescription {\n margin-bottom: 20px;\n color: $color-text-secondary;\n font-size: $font-size-normal;\n line-height: 1.5;\n\n a {\n color: $color-primary !important;\n font-weight: 600 !important;\n text-decoration: none !important;\n display: inline-block;\n cursor: pointer;\n }\n}\n\n.Button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n padding: 0 15px;\n font-size: 14px;\n line-height: 1;\n font-weight: 500;\n height: 35px;\n}\n.Button.blue {\n background-color: rgba(48, 128, 248, 0.1);\n color: $color-primary;\n\n &:hover {\n background-color: rgba(48, 128, 248, 0.15);\n cursor: pointer;\n }\n &:focus {\n box-shadow: $focus-border;\n }\n}\n.Button.red {\n background-color: rgba(247, 56, 90, 0.1);\n color: rgba(247, 56, 90, 1);\n}\n.Button.red:hover {\n background-color: rgba(247, 56, 90, 0.15);\n cursor: pointer;\n}\n.Button.red:focus {\n box-shadow: $focus-border;\n}\n.Button.grey {\n background: rgba(110, 118, 132, 0.1);\n color: $color-text-secondary;\n}\n.Button.grey:hover {\n background: rgba(110, 118, 132, 0.15);\n cursor: pointer;\n}\n.Button.grey:focus {\n box-shadow: $focus-border;\n}\n\n@keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes contentShow {\n from {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n.SideButtonModal {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n padding: 0 15px;\n font-size: 14px;\n line-height: 1;\n font-weight: 500;\n height: 35px;\n color: $color-text-secondary;\n font-family: $font-medium;\n\n &:hover {\n cursor: pointer;\n background: rgba(110, 118, 132, 0.05);\n }\n}\n" }, { "path": "src/pages/Content/popup/PopupContainer.jsx", "content": "import React, {\n useState,\n useEffect,\n useContext,\n useLayoutEffect,\n useRef,\n} from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\n\nimport {\n RecordTabActive,\n RecordTabInactive,\n VideoTabActive,\n VideoTabInactive,\n TempLogo,\n ProfilePic,\n} from \"../images/popup/images\";\n\nimport { Rnd } from \"react-rnd\";\n\nimport {\n CloseIconPopup,\n GrabIconPopup,\n HelpIconPopup,\n} from \"../toolbar/components/SVG\";\n\n/* Component import */\nimport RecordingTab from \"./layout/RecordingTab\";\nimport VideosTab from \"./layout/VideosTab\";\n\n// Layouts\nimport SettingsMenu from \"./layout/SettingsMenu\";\nimport InactiveSubscription from \"./layout/InactiveSubscription\";\nimport LoggedOut from \"./layout/LoggedOut\";\nimport Welcome from \"./layout/Welcome\";\nimport {\n runProPopupOnboardingIfNeeded,\n runProCameraOnboardingIfNeeded,\n} from \"./onboarding/proOnboarding\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\nimport { supportContextQuery } from \"../../utils/buildSupportContext\";\n\nconst PopupContainer = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const contentStateRef = useRef(contentState);\n const [tab, setTab] = useState(\"record\");\n const [badge, setBadge] = useState(TempLogo);\n const DragRef = useRef(null);\n const PopupRef = useRef(null);\n const [elastic, setElastic] = React.useState(\"\");\n const [shake, setShake] = React.useState(\"\");\n const [dragging, setDragging] = React.useState(\"\");\n const [onboarding, setOnboarding] = useState(false);\n const [showProSplash, setShowProSplash] = useState(false);\n const [open, setOpen] = useState(false);\n const recordTabRef = useRef(null);\n const videoTabRef = useRef(null);\n const pillRef = useRef(null);\n const [URL, setURL] = useState(\"https://help.screenity.io/\");\n const isCloudBuild = process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\";\n const wasCameraActiveRef = useRef(null);\n\n useEffect(() => {\n chrome.storage.local.get([\"onboarding\", \"showProSplash\"], (result) => {\n const nextOnboarding = Boolean(result.onboarding);\n const nextShowProSplash = Boolean(result.showProSplash);\n setOnboarding(nextOnboarding);\n setShowProSplash(nextShowProSplash);\n setContentState((prevContentState) => ({\n ...prevContentState,\n onboarding: nextOnboarding,\n showProSplash: nextShowProSplash,\n }));\n });\n }, [setContentState]);\n\n useEffect(() => {\n if (contentState.isLoggedIn) {\n setOnboarding(false);\n setShowProSplash(false);\n return;\n }\n setOnboarding(Boolean(contentState.onboarding));\n setShowProSplash(Boolean(contentState.showProSplash));\n }, [\n contentState.isLoggedIn,\n contentState.onboarding,\n contentState.showProSplash,\n ]);\n\n useEffect(() => {\n const buildURL = async () => {\n const locale = chrome.i18n.getMessage(\"@@ui_locale\");\n\n // Default URL\n let baseURL = \"https://help.screenity.io/\";\n\n // If logged in, switch to Tally with prefilled params\n if (contentState?.isLoggedIn && contentState?.screenityUser) {\n const { name, email } = contentState.screenityUser;\n const qs = await supportContextQuery({\n includeRecordingState: true,\n source: \"popup\",\n user: { name, email },\n });\n baseURL = `https://tally.so/r/310MNg?extension=true&${qs}`;\n }\n\n // If non-English locale, wrap with Google Translate\n if (!locale.includes(\"en\")) {\n setURL(\n `https://translate.google.com/translate?sl=en&tl=${locale}&u=${encodeURIComponent(\n baseURL\n )}`\n );\n } else {\n setURL(baseURL);\n }\n };\n buildURL();\n }, [contentState]);\n\n const onValueChange = (tab) => {\n setTab(tab);\n\n if (contentState.isLoggedIn && contentState.isSubscribed === false) {\n setBadge(\n \"data:image/svg+xml,⚠️\"\n );\n } else if (tab === \"record\" && !contentState.isLoggedIn) {\n setBadge(TempLogo);\n } else {\n const avatar = contentState?.screenityUser?.avatar;\n setBadge(avatar || ProfilePic);\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n bigTab: tab,\n }));\n };\n useEffect(() => {\n setTab(contentState.bigTab);\n }, []);\n\n useEffect(() => {\n if (contentState.isLoggedIn && contentState.isSubscribed === false) {\n setBadge(\n \"data:image/svg+xml,⚠️\"\n );\n } else if (tab === \"record\" && !contentState.isLoggedIn) {\n setBadge(TempLogo);\n } else {\n const avatar = contentState?.screenityUser?.avatar;\n setBadge(avatar || ProfilePic);\n }\n }, [\n contentState.isLoggedIn,\n contentState.isSubscribed,\n contentState.wasLoggedIn,\n tab,\n ]);\n\n const showWelcomeSplash = Boolean(\n isCloudBuild &&\n !contentState.isLoggedIn &&\n !contentState.wasLoggedIn &&\n (\n onboarding ||\n showProSplash ||\n contentState.onboarding ||\n contentState.showProSplash\n ),\n );\n\n useLayoutEffect(() => {\n if (!recordTabRef.current || !videoTabRef.current || !pillRef.current)\n return;\n\n const tabRef =\n tab === \"record\" ? recordTabRef.current : videoTabRef.current;\n\n pillRef.current.style.left = `${tabRef.offsetLeft}px`;\n pillRef.current.style.width = `${tabRef.getBoundingClientRect().width}px`;\n }, [tab]);\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n useLayoutEffect(() => {\n function setPopupPosition(e) {\n let xpos = DragRef.current.getDraggablePosition().x;\n let ypos = DragRef.current.getDraggablePosition().y;\n\n // Width and height of popup\n const width = PopupRef.current.getBoundingClientRect().width;\n const height = PopupRef.current.getBoundingClientRect().height;\n\n // Keep popup positioned relative to the bottom and right of the screen, proportionally\n if (xpos > window.innerWidth + 10) {\n xpos = window.innerWidth + 10;\n }\n if (ypos + height + 40 > window.innerHeight) {\n ypos = window.innerHeight - height - 40;\n }\n\n // Check if attached to right or bottom, if so, keep it there\n if (contentStateRef.current.popupPosition.fixed) {\n if (xpos < window.innerWidth) {\n xpos = window.innerWidth + 10;\n }\n }\n\n DragRef.current.updatePosition({ x: xpos, y: ypos });\n }\n window.addEventListener(\"resize\", setPopupPosition);\n setPopupPosition();\n return () => window.removeEventListener(\"resize\", setPopupPosition);\n }, []);\n\n const handleDragStart = (e, d) => {\n setDragging(\"ToolbarDragging\");\n };\n\n const handleDrag = (e, d) => {\n // Width and height\n const width = PopupRef.current.getBoundingClientRect().width;\n const height = PopupRef.current.getBoundingClientRect().height;\n\n if (\n d.x - 40 < width ||\n d.x > window.innerWidth + 10 ||\n d.y < 0 ||\n d.y + height + 40 > window.innerHeight\n ) {\n setShake(\"ToolbarShake\");\n } else {\n setShake(\"\");\n }\n };\n\n const handleDrop = (e, d) => {\n let anim = \"ToolbarElastic\";\n if (e === null) {\n anim = \"\";\n }\n setShake(\"\");\n setDragging(\"\");\n let xpos = d.x;\n let ypos = d.y;\n\n // Width and height\n const width = PopupRef.current.getBoundingClientRect().width;\n const height = PopupRef.current.getBoundingClientRect().height;\n\n // Check if popup is off screen\n if (d.x - 40 < width) {\n setElastic(anim);\n xpos = width + 40;\n } else if (d.x + 10 > window.innerWidth) {\n setElastic(anim);\n xpos = window.innerWidth + 10;\n }\n\n if (d.y < 0) {\n setElastic(anim);\n ypos = 0;\n } else if (d.y + height + 40 > window.innerHeight) {\n setElastic(anim);\n ypos = window.innerHeight - height - 40;\n }\n DragRef.current.updatePosition({ x: xpos, y: ypos });\n\n setTimeout(() => {\n setElastic(\"\");\n }, 250);\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n popupPosition: {\n ...prevContentState.popupPosition,\n offsetX: xpos,\n offsetY: ypos,\n left: xpos < window.innerWidth / 2 ? true : false,\n right: xpos < window.innerWidth / 2 ? false : true,\n top: ypos < window.innerHeight / 2 ? true : false,\n bottom: ypos < window.innerHeight / 2 ? false : true,\n },\n }));\n\n // Is it on the left or right, also top or bottom\n let left = xpos < window.innerWidth / 2 ? true : false;\n let right = xpos < window.innerWidth / 2 ? false : true;\n let top = ypos < window.innerHeight / 2 ? true : false;\n let bottom = ypos < window.innerHeight / 2 ? false : true;\n let offsetX = xpos;\n let offsetY = ypos;\n let fixed = d.x + 9 > window.innerWidth ? true : false;\n\n if (right) {\n offsetX = window.innerWidth - xpos;\n }\n if (bottom) {\n offsetY = window.innerHeight - ypos;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n popupPosition: {\n ...prevContentState.popupPosition,\n offsetX: offsetX,\n offsetY: offsetY,\n left: left,\n right: right,\n top: top,\n bottom: bottom,\n fixed: fixed,\n },\n }));\n\n chrome.storage.local.set({\n popupPosition: {\n offsetX: offsetX,\n offsetY: offsetY,\n left: left,\n right: right,\n top: top,\n bottom: bottom,\n fixed: fixed,\n },\n });\n };\n\n useEffect(() => {\n let x = contentState.popupPosition.offsetX;\n let y = contentState.popupPosition.offsetY;\n\n if (contentState.popupPosition.bottom) {\n y = window.innerHeight - contentState.popupPosition.offsetY;\n }\n\n if (contentState.popupPosition.right) {\n x = window.innerWidth - contentState.popupPosition.offsetX;\n }\n\n DragRef.current.updatePosition({ x: x, y: y });\n\n handleDrop(null, { x: x, y: y });\n }, []);\n\n useEffect(() => {\n requestAnimationFrame(() => {\n const tabRef =\n contentState.bigTab === \"record\"\n ? recordTabRef.current\n : videoTabRef.current;\n\n if (tabRef && pillRef.current) {\n pillRef.current.style.left = `${tabRef.offsetLeft}px`;\n pillRef.current.style.width = `${\n tabRef.getBoundingClientRect().width\n }px`;\n }\n });\n }, [\n contentState.isLoggedIn,\n contentState.bigTab,\n contentState.wasLoggedIn,\n pillRef.current,\n ]);\n\n useEffect(() => {\n const isPro = Boolean(contentState.isLoggedIn && contentState.isSubscribed);\n if (!isCloudBuild || !isPro) return;\n runProPopupOnboardingIfNeeded({\n rootContext: props.shadowRef?.current?.shadowRoot || document,\n isPro,\n isLoggedIn: Boolean(contentState.isLoggedIn),\n popupOpen: Boolean(contentState.showPopup && contentState.showExtension),\n cameraEnabled: Boolean(contentState.cameraActive),\n pendingRecording: Boolean(contentState.pendingRecording),\n preparingRecording: Boolean(contentState.preparingRecording),\n recording: Boolean(contentState.recording),\n countdownActive: Boolean(contentState.countdownActive),\n isCountdownVisible: Boolean(contentState.isCountdownVisible),\n });\n }, [\n isCloudBuild,\n contentState.isLoggedIn,\n contentState.isSubscribed,\n contentState.showPopup,\n contentState.showExtension,\n contentState.recordingToScene,\n contentState.cameraActive,\n contentState.pendingRecording,\n contentState.preparingRecording,\n contentState.recording,\n contentState.countdownActive,\n contentState.isCountdownVisible,\n props.shadowRef,\n ]);\n\n useEffect(() => {\n const isPro = Boolean(contentState.isLoggedIn && contentState.isSubscribed);\n const cameraEnabled = Boolean(contentState.cameraActive);\n if (wasCameraActiveRef.current === null) {\n wasCameraActiveRef.current = cameraEnabled;\n return;\n }\n const becameEnabled = cameraEnabled && !wasCameraActiveRef.current;\n wasCameraActiveRef.current = cameraEnabled;\n if (!becameEnabled || !isCloudBuild || !isPro) return;\n runProCameraOnboardingIfNeeded({\n rootContext: props.shadowRef?.current?.shadowRoot || document,\n isPro,\n isLoggedIn: Boolean(contentState.isLoggedIn),\n popupOpen: Boolean(contentState.showPopup && contentState.showExtension),\n cameraEnabled,\n pendingRecording: Boolean(contentState.pendingRecording),\n preparingRecording: Boolean(contentState.preparingRecording),\n recording: Boolean(contentState.recording),\n countdownActive: Boolean(contentState.countdownActive),\n isCountdownVisible: Boolean(contentState.isCountdownVisible),\n });\n }, [\n isCloudBuild,\n contentState.cameraActive,\n contentState.isLoggedIn,\n contentState.isSubscribed,\n contentState.showPopup,\n contentState.showExtension,\n contentState.pendingRecording,\n contentState.preparingRecording,\n contentState.recording,\n contentState.countdownActive,\n contentState.isCountdownVisible,\n props.shadowRef,\n ]);\n\n return (\n \n
\n \n \n \n \n \n {\n window.open(URL, \"_blank\");\n }}\n >\n \n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n showExtension: false,\n }));\n }}\n >\n \n \n \n
\n {contentState.isLoggedIn && contentState.isSubscribed === false ? (\n \n ⚠️\n
\n ) : (\n \n )}\n \n
\n
\n {showWelcomeSplash ? (\n {\n setOnboarding(false);\n setShowProSplash(false);\n chrome.storage.local.set({\n onboarding: false,\n showProSplash: false,\n firstTimePro: false,\n });\n setContentState((prev) => ({\n ...prev,\n onboarding: false,\n showProSplash: false,\n }));\n }}\n isBack={showProSplash}\n clearBack={() => {\n setShowProSplash(false);\n setContentState((prev) => ({\n ...prev,\n showProSplash: false,\n }));\n chrome.storage.local.set({ showProSplash: false });\n }}\n setContentState={setContentState}\n />\n ) : isCloudBuild &&\n contentState.isSubscribed === false &&\n contentState.isLoggedIn === true ? (\n {\n const type = contentState.hasSubscribedBefore\n ? \"handle-reactivate\"\n : \"handle-upgrade\";\n chrome.runtime.sendMessage({ type });\n }}\n onDowngradeClick={async () => {\n chrome.runtime.sendMessage({ type: \"handle-logout\" });\n setContentState((prev) => ({\n ...prev,\n isLoggedIn: false,\n isSubscribed: false,\n screenityUser: null,\n proSubscription: null,\n wasLoggedIn: false,\n bigTab: \"record\",\n }));\n contentState.openToast(\n chrome.i18n.getMessage(\"loggedOutToastTitle\"),\n () => {},\n 2000\n );\n }}\n />\n ) : isCloudBuild &&\n !contentState.isLoggedIn &&\n contentState.wasLoggedIn ? (\n {\n // Log back in\n chrome.runtime.sendMessage({ type: \"handle-login\" });\n }}\n onDowngradeClick={() => {\n chrome.storage.local.set({\n wasLoggedIn: false,\n stayLoggedOut: true,\n });\n setContentState((prev) => ({\n ...prev,\n isLoggedIn: false,\n wasLoggedIn: false,\n bigTab: \"record\", // Ensure UI state sync\n }));\n setTab(\"record\"); // Switch immediately\n\n requestAnimationFrame(() => {\n if (recordTabRef.current && pillRef.current) {\n const tabRef = recordTabRef.current;\n pillRef.current.style.left = `${tabRef.offsetLeft}px`;\n pillRef.current.style.width = `${\n tabRef.getBoundingClientRect().width\n }px`;\n }\n });\n }}\n />\n ) : (\n \n \n
\n \n
\n \n
\n {chrome.i18n.getMessage(\"recordTab\")}\n \n \n
\n \n
\n {chrome.i18n.getMessage(\"videosTab\")}\n \n \n \n \n \n \n \n \n \n )}\n
\n {contentState.settingsOpen && (\n {\n window.open(URL, \"_blank\");\n }}\n >\n \n \n \n {chrome.i18n.getMessage(\"helpPopup\")}\n \n )}\n \n \n \n );\n};\n\nexport default PopupContainer;\n" }, { "path": "src/pages/Content/popup/components/BackgroundEffects.jsx", "content": "import React, { useContext } from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst BackgroundEffects = () => {\n const [contentState, setContentState] = React.useContext(contentStateContext);\n\n // Background images\n const URL =\n \"chrome-extension://\" +\n chrome.i18n.getMessage(\"@@extension_id\") +\n \"/assets/\";\n\n const images = [\n URL + \"backgrounds/back1.webp\",\n URL + \"backgrounds/back2.webp\",\n URL + \"backgrounds/back3.webp\",\n URL + \"backgrounds/back4.webp\",\n URL + \"backgrounds/back5.webp\",\n URL + \"backgrounds/back6.webp\",\n ];\n\n return (\n
\n {\n if (value) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n backgroundEffect: value,\n }));\n chrome.storage.local.set({ backgroundEffect: value });\n }\n }}\n >\n \n {chrome.i18n.getMessage(\"blurTypeLabel\")}\n \"blur\"\n \n {images.map((image, index) => (\n \n \"background\"\n \n ))}\n \n
\n );\n};\n\nexport default BackgroundEffects;\n" }, { "path": "src/pages/Content/popup/components/Dropdown.jsx", "content": "import React, { useEffect, useState, useContext, useRef } from \"react\";\n\nimport * as Select from \"@radix-ui/react-select\";\nimport {\n DropdownIcon,\n CheckWhiteIcon,\n CameraOnIcon,\n CameraOffIcon,\n MicOnIcon,\n MicOffIcon,\n} from \"../../images/popup/images\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst Dropdown = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [label, setLabel] = useState(chrome.i18n.getMessage(\"None\"));\n const [open, setOpen] = useState(false);\n const cameraAnchorId =\n props.type === \"camera\" ? \"pro-onboarding-camera-toggle\" : undefined;\n\n const updateItems = () => {\n if (props.type === \"camera\") {\n if (\n contentState.defaultVideoInput === \"none\" ||\n !contentState.cameraActive\n ) {\n setLabel(chrome.i18n.getMessage(\"noCameraDropdownLabel\"));\n } else {\n // Check if defaultVideoInput is in camdevices, if not set to none\n if (\n contentState.videoInput.find(\n (device) => device.deviceId === contentState.defaultVideoInput\n )\n ) {\n setLabel(\n contentState.videoInput.find(\n (device) => device.deviceId === contentState.defaultVideoInput\n ).label\n );\n } else {\n setLabel(chrome.i18n.getMessage(\"noCameraDropdownLabel\"));\n }\n }\n } else {\n if (\n contentState.defaultAudioInput === \"none\" ||\n (!contentState.micActive && !contentState.pushToTalk)\n ) {\n setLabel(chrome.i18n.getMessage(\"noMicrophoneDropdownLabel\"));\n } else {\n // Check if defaultAudioInput is in micdevices, if not set to none\n if (\n contentState.audioInput.find(\n (device) => device.deviceId === contentState.defaultAudioInput\n )\n ) {\n setLabel(\n contentState.audioInput.find(\n (device) => device.deviceId === contentState.defaultAudioInput\n ).label\n );\n } else {\n setLabel(chrome.i18n.getMessage(\"noMicrophoneDropdownLabel\"));\n }\n }\n }\n };\n\n useEffect(() => {\n updateItems();\n }, [\n contentState.defaultAudioInput,\n contentState.defaultVideoInput,\n contentState.audioInput,\n contentState.videoInput,\n contentState.cameraActive,\n contentState.micActive,\n ]);\n\n useEffect(() => {\n updateItems();\n }, []);\n\n const toggleActive = (e) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(false);\n if (props.type === \"camera\") {\n if (contentState.cameraActive) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraActive: false,\n }));\n chrome.storage.local.set({\n cameraActive: false,\n });\n setLabel(chrome.i18n.getMessage(\"noCameraDropdownLabel\"));\n } else {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraActive: true,\n }));\n chrome.storage.local.set({\n cameraActive: true,\n });\n setLabel(\n contentState.videoInput.find(\n (device) => device.deviceId === contentState.defaultVideoInput\n ).label\n );\n }\n } else {\n if (contentState.micActive) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: false,\n }));\n chrome.storage.local.set({\n micActive: false,\n });\n setLabel(chrome.i18n.getMessage(\"noMicrophoneDropdownLabel\"));\n } else {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: true,\n }));\n chrome.storage.local.set({\n micActive: true,\n });\n setLabel(\n contentState.audioInput.find(\n (device) => device.deviceId === contentState.defaultAudioInput\n ).label\n );\n }\n }\n };\n\n const clickedIcon = useRef(false);\n\n return (\n {\n if (clickedIcon.current) return;\n setOpen(open);\n }}\n value={\n props.type === \"camera\" && contentState.cameraActive\n ? contentState.defaultVideoInput\n : props.type === \"camera\" && !contentState.cameraActive\n ? \"none\"\n : props.type === \"mic\" &&\n (contentState.micActive || contentState.pushToTalk)\n ? contentState.defaultAudioInput\n : props.type === \"mic\" && !contentState.micActive\n ? \"none\"\n : \"none\"\n }\n onValueChange={(newValue) => {\n if (props.type === \"camera\") {\n if (newValue === \"none\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraActive: false,\n }));\n chrome.storage.local.set({\n cameraActive: false,\n });\n setLabel(chrome.i18n.getMessage(\"noCameraDropdownLabel\"));\n } else {\n const selectedLabel =\n contentState.videoInput.find(\n (device) => device.deviceId === newValue\n )?.label || \"\";\n setContentState((prevContentState) => ({\n ...prevContentState,\n defaultVideoInput: newValue,\n defaultVideoInputLabel: selectedLabel,\n cameraActive: true,\n }));\n chrome.storage.local.set({\n defaultVideoInput: newValue,\n defaultVideoInputLabel: selectedLabel,\n cameraActive: true,\n });\n chrome.runtime.sendMessage({\n type: \"switch-camera\",\n id: newValue,\n });\n setLabel(selectedLabel);\n }\n } else {\n if (newValue === \"none\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: false,\n }));\n chrome.storage.local.set({\n micActive: false,\n });\n setLabel(chrome.i18n.getMessage(\"noMicrophoneDropdownLabel\"));\n } else {\n const selectedLabel =\n contentState.audioInput.find(\n (device) => device.deviceId === newValue\n )?.label || \"\";\n setContentState((prevContentState) => ({\n ...prevContentState,\n defaultAudioInput: newValue,\n defaultAudioInputLabel: selectedLabel,\n micActive: true,\n }));\n chrome.storage.local.set({\n defaultAudioInput: newValue,\n defaultAudioInputLabel: selectedLabel,\n micActive: true,\n });\n setLabel(selectedLabel);\n }\n }\n }}\n >\n \n {\n e.stopPropagation();\n e.preventDefault();\n setOpen(false);\n clickedIcon.current = true;\n }}\n onMouseDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n setOpen(false);\n clickedIcon.current = true;\n }}\n onMouseUp={(e) => {\n clickedIcon.current = false;\n }}\n >\n {\n e.stopPropagation();\n setOpen(false);\n toggleActive(e);\n clickedIcon.current = true;\n }}\n onMouseDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n setOpen(false);\n clickedIcon.current = true;\n }}\n onContextMenu={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onMouseUp={(e) => {\n clickedIcon.current = false;\n }}\n >\n {props.type == \"camera\" && (\n \n )}\n {props.type == \"mic\" && (\n \n )}\n \n \n
\n \n {label}\n \n
\n {props.type == \"camera\" &&\n (contentState.defaultVideoInput == \"none\" ||\n !contentState.cameraActive) && (\n
\n {chrome.i18n.getMessage(\"offLabel\")}\n
\n )}\n {props.type == \"mic\" &&\n (contentState.defaultAudioInput == \"none\" ||\n (!contentState.micActive && !contentState.pushToTalk)) && (\n
\n {chrome.i18n.getMessage(\"offLabel\")}\n
\n )}\n \n \n \n \n \n \n \n \n \n \n {props.type == \"camera\"\n ? chrome.i18n.getMessage(\"noCameraDropdownLabel\")\n : chrome.i18n.getMessage(\"noMicrophoneDropdownLabel\")}\n \n \n {props.type == \"camera\" && contentState.videoInput.length > 0 && (\n \n )}\n {props.type == \"mic\" && contentState.audioInput.length > 0 && (\n \n )}\n \n {props.type == \"camera\" &&\n contentState.videoInput.map((device) => (\n \n {device.label}\n \n ))}\n {props.type == \"mic\" &&\n contentState.audioInput.map((device) => (\n \n {device.label}\n \n ))}\n \n \n \n \n \n \n );\n};\n\nconst SelectItem = React.forwardRef(\n ({ children, className, ...props }, forwardedRef) => {\n return (\n \n {children}\n \n \n \n \n );\n }\n);\n\nexport default Dropdown;\n" }, { "path": "src/pages/Content/popup/components/RegionDimensions.jsx", "content": "import React, { useState, useRef, useContext, useEffect } from \"react\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst RegionDimensions = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n const handleWidth = (e) => {\n let value = e.target.value;\n if (isNaN(value)) {\n return;\n }\n if (value < 0) {\n return;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n regionWidth: value,\n fromRegion: false,\n }));\n chrome.storage.local.set({\n regionWidth: value,\n });\n };\n\n const handleHeight = (e) => {\n let value = e.target.value;\n if (isNaN(value)) {\n return;\n }\n if (value < 0) {\n return;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n regionHeight: value,\n fromRegion: false,\n }));\n chrome.storage.local.set({\n regionHeight: value,\n });\n };\n\n return (\n
\n
\n \n handleWidth(e)}\n onBlur={(e) => {\n if (e.target.value === \"\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n regionWidth: 100,\n fromRegion: false,\n }));\n chrome.storage.local.set({\n regionWidth: 100,\n });\n }\n }}\n value={contentState.regionWidth}\n />\n W\n
\n
\n \n handleHeight(e)}\n onBlur={(e) => {\n if (e.target.value === \"\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n regionHeight: 100,\n fromRegion: false,\n }));\n chrome.storage.local.set({\n regionHeight: 100,\n });\n }\n }}\n value={contentState.regionHeight}\n />\n H\n
\n
\n );\n};\n\nexport default RegionDimensions;\n" }, { "path": "src/pages/Content/popup/components/Switch.jsx", "content": "import React, { useContext, useEffect, useState, useRef } from \"react\";\nimport * as S from \"@radix-ui/react-switch\";\n\n// Components\nimport { DropdownIcon } from \"../../images/popup/images\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nexport const BaseSwitch = ({ value, checked, onChange }) => (\n \n \n \n);\n\nconst Switch = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const switchRef = useRef(null);\n const switchId = props.anchorId || props.value || props.name;\n const switchRowId =\n props.rowAnchorId ||\n (props.anchorId ? `${props.anchorId}-row` : undefined);\n const [hideToolbarLabel, setHideToolbarLabel] = useState(\n chrome.i18n.getMessage(\"hideToolbarLabel\")\n );\n const [hideToolbarState, setHideToolbarState] = useState(1);\n\n useEffect(() => {\n // Check click outside\n const handleClickOutside = (event) => {\n if (props.name != \"hideUI\") return;\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(event.target) &&\n !dropdownInRef.current.contains(event.target)\n ) {\n if (dropdownRef.current.querySelector(\":hover\")) return;\n if (dropdownInRef.current.querySelector(\":hover\")) return;\n // Check if any children of dropdownref are clicked also\n let children = dropdownRef.current.querySelectorAll(\"*\");\n for (let i = 0; i < children.length; i++) {\n if (children[i].contains(event.target)) return;\n }\n\n dropdownRef.current.classList.remove(\"labelDropdownActive\");\n }\n };\n\n // Bind the event listener\n document.addEventListener(\"click\", handleClickOutside);\n\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"click\", handleClickOutside);\n };\n }, []);\n\n useEffect(() => {\n if (props.name === \"hideUI\") {\n if (contentState.hideUIAlerts) {\n setHideToolbarLabel(chrome.i18n.getMessage(\"hideUIAlerts\"));\n setHideToolbarState(2);\n } else if (contentState.hideToolbar) {\n setHideToolbarLabel(chrome.i18n.getMessage(\"hideToolbarLabel\"));\n setHideToolbarState(1);\n } else if (contentState.toolbarHover) {\n setHideToolbarLabel(chrome.i18n.getMessage(\"toolbarHoverOnly\"));\n setHideToolbarState(3);\n }\n }\n }, [contentState.hideToolbar]);\n\n const dropdownRef = useRef(null);\n const dropdownInRef = useRef(null);\n return (\n
\n
\n {\n if (props.name === \"hideUI\") {\n e.preventDefault();\n e.stopPropagation();\n if (e.target.classList.contains(\"labelDropdownContentItem\"))\n return;\n dropdownRef.current.classList.toggle(\"labelDropdownActive\");\n }\n }}\n >\n {props.name !== \"hideUI\" && props.label}\n {props.name === \"hideUI\" && (\n
\n
\n {hideToolbarLabel}\n \n
\n
\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hideToolbar: true,\n hideUIAlerts: false,\n toolbarHover: false,\n }));\n chrome.storage.local.set({\n hideToolbar: true,\n hideUIAlerts: false,\n toolbarHover: false,\n });\n setHideToolbarLabel(\n chrome.i18n.getMessage(\"hideToolbarLabel\")\n );\n dropdownRef.current.classList.remove(\"labelDropdownActive\");\n setHideToolbarState(1);\n }}\n >\n {chrome.i18n.getMessage(\"hideToolbarLabel\")}\n
\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hideToolbar: false,\n hideUIAlerts: true,\n toolbarHover: false,\n }));\n chrome.storage.local.set({\n hideToolbar: false,\n hideUIAlerts: true,\n toolbarHover: false,\n });\n setHideToolbarLabel(chrome.i18n.getMessage(\"hideUIAlerts\"));\n dropdownRef.current.classList.remove(\"labelDropdownActive\");\n setHideToolbarState(2);\n }}\n >\n {chrome.i18n.getMessage(\"hideUIAlerts\")}\n
\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hideToolbar: false,\n hideUIAlerts: false,\n toolbarHover: true,\n }));\n chrome.storage.local.set({\n hideToolbar: false,\n hideUIAlerts: false,\n toolbarHover: true,\n });\n setHideToolbarLabel(\n chrome.i18n.getMessage(\"toolbarHoverOnly\")\n );\n dropdownRef.current.classList.remove(\"labelDropdownActive\");\n setHideToolbarState(3);\n }}\n >\n {chrome.i18n.getMessage(\"toolbarHoverOnly\")}\n
\n \n \n )}\n {props.experimental && (\n Experimental\n )}\n \n {props.value ? (\n {\n if (props.disabled) return;\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n [props.value]: checked,\n }));\n chrome.storage.local.set({ [props.value]: checked });\n\n if (props.value === \"customRegion\") {\n if (checked) {\n chrome.storage.local.set({\n region: true,\n });\n }\n }\n\n if (props.name === \"hideUI\") {\n if (hideToolbarState === 1) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hideToolbar: true,\n hideUIAlerts: false,\n toolbarHover: false,\n }));\n chrome.storage.local.set({\n hideToolbar: true,\n hideUIAlerts: false,\n toolbarHover: false,\n });\n } else if (hideToolbarState === 2) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hideToolbar: false,\n hideUIAlerts: true,\n toolbarHover: false,\n }));\n chrome.storage.local.set({\n hideToolbar: false,\n hideUIAlerts: true,\n toolbarHover: false,\n });\n } else if (hideToolbarState === 3) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hideToolbar: false,\n hideUIAlerts: false,\n toolbarHover: true,\n }));\n chrome.storage.local.set({\n hideToolbar: false,\n hideUIAlerts: false,\n toolbarHover: true,\n });\n }\n } else if (props.name === \"pushToTalk\") {\n if (!checked) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: true,\n }));\n }\n }\n\n if (typeof props.onChange === \"function\") {\n props.onChange(checked);\n }\n }}\n >\n \n \n ) : (\n \n \n \n )}\n \n \n );\n};\n\nexport default Switch;\n" }, { "path": "src/pages/Content/popup/components/TimeSetter.jsx", "content": "import React, { useContext, useEffect, useState, useRef } from \"react\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst TimeSetter = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [hours, setHours] = useState(Math.floor(contentState.alarmTime / 3600));\n const [minutes, setMinutes] = useState(\n Math.floor((contentState.alarmTime % 3600) / 60)\n );\n const [seconds, setSeconds] = useState(\n Math.floor((contentState.alarmTime % 3600) % 60)\n );\n\n useEffect(() => {\n // Get from contentState\n setHours(Math.floor(contentState.alarmTime / 3600));\n setMinutes(Math.floor((contentState.alarmTime % 3600) / 60));\n setSeconds(Math.floor((contentState.alarmTime % 3600) % 60));\n }, []);\n\n useEffect(() => {\n if (!contentState.fromAlarm) return;\n // Set the time in seconds\n setHours(Math.floor(contentState.alarmTime / 3600));\n setMinutes(Math.floor((contentState.alarmTime % 3600) / 60));\n setSeconds(Math.floor((contentState.alarmTime % 3600) % 60));\n }, [contentState.alarmTime]);\n\n useEffect(() => {\n if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return;\n if (hours === \"\" || minutes === \"\" || seconds === \"\") return;\n setHours(parseFloat(hours));\n setMinutes(parseFloat(minutes));\n setSeconds(parseFloat(seconds));\n // Set the time in seconds\n setContentState((prevContentState) => ({\n ...prevContentState,\n alarmTime: hours * 3600 + minutes * 60 + seconds,\n fromAlarm: false,\n time: hours * 3600 + minutes * 60 + seconds,\n timer: hours * 3600 + minutes * 60 + seconds,\n }));\n chrome.storage.local.set({\n alarmTime: hours * 3600 + minutes * 60 + seconds,\n });\n }, [hours, minutes, seconds]);\n\n useEffect(() => {\n if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return;\n if (contentState.alarm) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: hours * 3600 + minutes * 60 + seconds,\n timer: hours * 3600 + minutes * 60 + seconds,\n fromAlarm: false,\n }));\n } else {\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: 0,\n timer: 0,\n }));\n }\n }, [contentState.alarm]);\n\n const handleHours = (e) => {\n // Limit between 0 to 4, number only\n // Only 1 digit\n if (e.target.value.length > 1) {\n if (e.target.value[0] === \"0\") {\n e.target.value = parseFloat(e.target.value[1]);\n } else {\n return;\n }\n }\n if (isNaN(e.target.value)) {\n return;\n }\n if (e.target.value > 4) {\n e.target.value = 4;\n }\n setContentState((prevContentState) => ({\n ...prevContentState,\n fromAlarm: true,\n }));\n\n setHours(e.target.value);\n };\n\n const handleMinutes = (e) => {\n // Limit between 0 to 59, number only\n if (isNaN(e.target.value)) {\n return;\n }\n if (e.target.value > 59) {\n e.target.value = 59;\n }\n setContentState((prevContentState) => ({\n ...prevContentState,\n fromAlarm: true,\n }));\n\n setMinutes(e.target.value);\n };\n\n const handleSeconds = (e) => {\n // Limit between 0 to 59, number only\n if (isNaN(e.target.value)) {\n return;\n }\n if (e.target.value > 59) {\n e.target.value = 59;\n }\n setContentState((prevContentState) => ({\n ...prevContentState,\n fromAlarm: true,\n }));\n setSeconds(e.target.value);\n };\n\n return (\n
\n
\n {\n if (e.target.value === \"\") {\n e.target.value = 0;\n setMinutes(0);\n }\n }}\n onFocus={(e) => {\n e.target.select();\n }}\n />\n M\n
\n
\n {\n if (e.target.value === \"\") {\n e.target.value = 0;\n setSeconds(0);\n }\n }}\n onFocus={(e) => {\n e.target.select();\n }}\n />\n S\n
\n
\n );\n};\n\nexport default TimeSetter;\n" }, { "path": "src/pages/Content/popup/components/TooltipWrap.jsx", "content": "import React, { useEffect, useContext, useState } from \"react\";\n\nimport * as Tooltip from \"@radix-ui/react-tooltip\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst TooltipWrap = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const classname = props.name ? props.name : \"\";\n const [override, setOverride] = useState(\"\");\n\n useEffect(() => {\n // Check if hideUI is set\n if (contentState.hideUI) {\n setOverride(\"override\");\n } else {\n setOverride(\"\");\n }\n }, [contentState.hideUI]);\n\n return (\n
\n {props.content == \"\" ? (\n
{props.children}
\n ) : (\n \n \n {props.children}\n \n \n {props.content}\n \n \n \n \n )}\n
\n );\n};\n\nexport default TooltipWrap;\n" }, { "path": "src/pages/Content/popup/components/VideoItem.jsx", "content": "import React from \"react\";\n\nimport { CopyLinkIcon, MoreActionsIcon } from \"../../images/popup/images\";\n\nconst VideoItem = ({ title, date, thumbnail, onOpen, onCopyLink }) => {\n const formatRelativeTime = (timestamp) => {\n const now = new Date();\n const then = new Date(timestamp);\n const diffInSeconds = Math.floor((now - then) / 1000);\n\n const thresholds = [\n { unit: \"year\", seconds: 31536000 },\n { unit: \"month\", seconds: 2592000 },\n { unit: \"week\", seconds: 604800 },\n { unit: \"day\", seconds: 86400 },\n { unit: \"hour\", seconds: 3600 },\n { unit: \"minute\", seconds: 60 },\n { unit: \"second\", seconds: 1 },\n ];\n\n for (const { unit, seconds } of thresholds) {\n const value = Math.floor(diffInSeconds / seconds);\n if (value >= 1) {\n return `${value} ${unit}${value !== 1 ? \"s\" : \"\"} ago`;\n }\n }\n\n return \"just now\";\n };\n\n return (\n {\n if (\n e.target.closest(\".copy-link\") ||\n e.target.closest(\".more-actions\")\n ) {\n e.stopPropagation();\n return;\n }\n onOpen();\n }}\n >\n
\n
\n {/*\n\t\t\t\t\tNeed a better way to handle thumbnails - proxy from server?\n\n\t\t\t\t\t
*/}\n
\n
{title}
\n
\n {formatRelativeTime(date)}\n
\n
\n
\n
\n {\n e.preventDefault();\n e.stopPropagation();\n onCopyLink();\n }}\n >\n \"Copy\n \n {/* {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n \"More\n */}\n
\n \n \n );\n};\n\nexport default VideoItem;\n" }, { "path": "src/pages/Content/popup/layout/Announcement.jsx", "content": "import React, { useState, useEffect } from \"react\";\n\nconst Announcement = (props) => {\n const [URL, setURL] = useState(\n \"https://help.screenity.io/getting-started/77KizPC8MHVGfpKpqdux9D/what%E2%80%99s-changed-in-the-new-version-of-screenity/bDtvcwAtw9PPesQeNH4zjE\"\n );\n\n useEffect(() => {\n // check i18n locale, and set URL accordingly w/ google translate\n const locale = chrome.i18n.getMessage(\"@@ui_locale\");\n if (!locale.includes(\"en\")) {\n setURL(\n \"https://translate.google.com/translate?sl=en&tl=\" +\n locale +\n \"&u=\" +\n URL\n );\n }\n }, []);\n return (\n
\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"updateAnnouncementTitle\")} 👋\n
\n
\n {chrome.i18n.getMessage(\"updateAnnouncementDescription\")}{\" \"}\n \n {chrome.i18n.getMessage(\"updateAnnouncementLearnMore\")}\n \n
\n {\n props.setOnboarding(false);\n chrome.storage.local.set({ updatingFromOld: false });\n }}\n >\n {chrome.i18n.getMessage(\"updateAnnouncementButton\")}\n
\n
\n
\n \n );\n};\n\nexport default Announcement;\n" }, { "path": "src/pages/Content/popup/layout/InactiveSubscription.jsx", "content": "import React from \"react\";\n\nconst formatDeletionDate = (isoDate) => {\n try {\n const date = new Date(isoDate);\n\n // Get the extension locale (fallback to 'en')\n const locale = chrome?.i18n?.getUILanguage?.() || \"en\";\n\n // Use numeric-only format if not English\n const useFallback = !locale.startsWith(\"en\");\n\n return date.toLocaleDateString(undefined, {\n year: \"numeric\",\n month: useFallback ? \"2-digit\" : \"long\",\n day: \"2-digit\",\n });\n } catch {\n return \"unknown date\";\n }\n};\n\nconst InactiveSubscription = ({\n onManageClick,\n onDowngradeClick,\n subscription,\n hasSubscribedBefore,\n}) => {\n const deletionDate = subscription?.deletionAt || subscription?.endsAt;\n const formattedDate = deletionDate ? formatDeletionDate(deletionDate) : null;\n\n return (\n \n
\n
\n
\n {hasSubscribedBefore\n ? chrome.i18n.getMessage(\"inactiveSubscriptionTitle\") ||\n \"Your Pro subscription is inactive\"\n : chrome.i18n.getMessage(\"noSubscriptionYetTitle\") ||\n \"Unlock Pro to get started\"}\n
\n\n \n {chrome.i18n.getMessage(\"inactiveSubscriptionDescription\") ||\n \"Your Screenity Pro subscription is inactive.\"}\n
\n {hasSubscribedBefore\n ? chrome.i18n.getMessage(\"inactiveSubscriptionReactivation\") ||\n \"Please reactivate to resume access.\"\n : chrome.i18n.getMessage(\"noSubscriptionYetDescription\") ||\n \"Please subscribe to access Pro features.\"}\n
\n\n {formattedDate && hasSubscribedBefore && (\n \n {chrome.i18n.getMessage(\"inactiveSubscriptionDeletionWarning\") ||\n \"Your videos and data will be permanently deleted on \"}\n \n {formattedDate}\n \n
\n )}\n\n \n {hasSubscribedBefore\n ? chrome.i18n.getMessage(\"manageSubscriptionButton\") ||\n \"Manage your subscription\"\n : chrome.i18n.getMessage(\"upgradeToProButton\") ||\n \"Upgrade to Pro\"}\n \n \n \n
\n
\n \n {chrome.i18n.getMessage(\"inactiveSubscriptionFreeVersion\") ||\n \"Want to keep using the free version?\"}\n
\n\n \n {chrome.i18n.getMessage(\"downgradeToFreeButton\") ||\n \"Log out and downgrade\"}\n
\n \n \n \n );\n};\n\nexport default InactiveSubscription;\n" }, { "path": "src/pages/Content/popup/layout/LoggedOut.jsx", "content": "import React from \"react\";\n\nconst LoggedOut = ({ onManageClick, onDowngradeClick }) => {\n return (\n \n
\n
\n
\n {chrome.i18n.getMessage(\"loggedOutTitle\") ||\n \"You’ve been logged out\"}\n
\n\n \n {chrome.i18n.getMessage(\"loggedOutDescription\") ||\n \"To keep your recordings synced to your account, and access premium features, you’ll need to log back in.\"}\n
\n\n \n {chrome.i18n.getMessage(\"logBackInButton\") || \"Log back in\"}\n
\n \n \n\n
\n
\n \n {chrome.i18n.getMessage(\"loggedOutFreeVersion\") ||\n \"You can keep using the extension without an account - but your recordings won’t be saved and can’t be recovered later.\"}\n
\n\n \n {chrome.i18n.getMessage(\"continueWithoutLogin\") ||\n \"Continue without login\"}\n
\n \n \n \n );\n};\n\nexport default LoggedOut;\n" }, { "path": "src/pages/Content/popup/layout/RecordingTab.jsx", "content": "import React, { useEffect, useState, useContext } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\n\nimport RecordingType from \"./RecordingType\";\nimport {\n ScreenTabOn,\n ScreenTabOff,\n RegionTabOn,\n RegionTabOff,\n MockupTabOn,\n MockupTabOff,\n CameraTabIconOn,\n CameraTabIconOff,\n CheckWhiteIcon,\n CloseWhiteIcon,\n} from \"../../images/popup/images\";\n\nimport { BaseSwitch } from \"../components/Switch\";\nimport TooltipWrap from \"../components/TooltipWrap\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst RecordingTab = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n const [tabRecordingDisabled, setTabRecordingDisabled] = useState(false);\n const [showModalSoon, setShowModalSoon] = useState(false); // 👈 NEW\n\n useEffect(() => {\n if (tabRecordingDisabled && contentState.recordingType === \"region\") {\n setContentState((prev) => ({\n ...prev,\n recordingType: \"screen\",\n }));\n chrome.storage.local.set({ recordingType: \"screen\" });\n\n contentState.openToast?.(\n chrome.i18n.getMessage(\"tabRecordingDisabledToast\"),\n 4000\n );\n }\n }, [tabRecordingDisabled]);\n\n useEffect(() => {\n const currentUrl = window.location.href;\n const isBlocked = currentUrl.includes(process.env.SCREENITY_APP_BASE);\n\n setTabRecordingDisabled(isBlocked);\n\n if (isBlocked && contentState.recordingType === \"region\") {\n setContentState((prev) => ({\n ...prev,\n recordingType: \"screen\",\n }));\n chrome.storage.local.set({ recordingType: \"screen\" });\n\n contentState.openToast?.(\n chrome.i18n.getMessage(\"tabRecordingDisabledToast\"),\n 4000\n );\n }\n }, [contentState.recordingType]);\n\n const onValueChange = (tab) => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n recordingType: tab,\n }));\n chrome.storage.local.set({ recordingType: tab });\n\n if (tab === \"camera\") {\n chrome.runtime.sendMessage({ type: \"camera-only-update\" });\n } else {\n chrome.runtime.sendMessage({ type: \"screen-update\" });\n }\n };\n\n useEffect(() => {\n const onKey = (e) => {\n if (e.key === \"Escape\") setShowModalSoon(false);\n };\n if (showModalSoon) window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [showModalSoon]);\n\n return (\n
\n \n {contentState.recordingToScene && (\n
\n
\n {chrome.i18n.getMessage(\"addingToLabel\") || \"Adding to: \"}\n {contentState.recordingProjectTitle}\n
\n {(!contentState.multiMode ||\n contentState.multiSceneCount === 0) && (\n
\n
\n {\n setContentState((prev) => ({\n ...prev,\n projectTitle: \"\",\n projectId: null,\n activeSceneId: null,\n recordingToScene: false,\n multiMode: false,\n multiSceneCount: 0,\n multiProjectId: null,\n }));\n\n // also in chrome local storage\n chrome.storage.local.set({\n recordingProjectTitle: \"\",\n projectId: null,\n activeSceneId: null,\n recordingToScene: false,\n multiMode: false,\n multiProjectId: null,\n });\n\n // show toast\n contentState.openToast(\n chrome.i18n.getMessage(\"projectRecordingCancelledToast\"),\n 3000\n );\n }}\n >\n \"Close\"\n
\n
\n )}\n
\n )}\n \n \n
\n
\n \n
\n {chrome.i18n.getMessage(\"screenType\")}\n
\n \n \n {\n if (tabRecordingDisabled) {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n style={\n tabRecordingDisabled\n ? { cursor: \"not-allowed\", opacity: 0.5 }\n : {}\n }\n >\n
\n
\n \n
\n {chrome.i18n.getMessage(\"tabType\")}\n
\n \n \n \n
\n
\n \n
\n {chrome.i18n.getMessage(\"cameraType\")}\n
\n \n
\n
\n \n {\n // If not logged in, show the modal instead of toggling\n if (!contentState.isLoggedIn) {\n setShowModalSoon(true);\n }\n }}\n >\n \n {contentState.multiMode &&\n contentState.multiSceneCount > 0 ? (\n {\n // Send finish message to background to finalize multi project\n chrome.runtime.sendMessage({\n type: \"finish-multi-recording\",\n });\n setContentState((prev) => ({\n ...prev,\n showExtension: false,\n hasOpenedBefore: true,\n showPopup: false,\n }));\n }}\n style={{\n cursor: \"pointer\",\n width: \"28px\",\n height: \"28px\",\n background: \"#3080F8\",\n borderRadius: \"50%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n }}\n >\n \n \n {contentState.multiSceneCount}\n
\n \n ) : (\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n multiMode: checked,\n }));\n chrome.storage.local.set({ multiMode: checked });\n\n if (checked) {\n chrome.storage.local\n .get([\"hasSeenMultiRecordingInfo\"])\n .then((res) => {\n if (!res.hasSeenMultiRecordingInfo) {\n contentState.openModal(\n chrome.i18n.getMessage(\n \"multiRecordingModeTitle\"\n ) || \"Multi-recording mode\",\n chrome.i18n.getMessage(\n \"multiRecordingModeDescription\"\n ) ||\n \"Record multiple scenes, like your screen, camera, or both, one after another. This is great for doing multiple takes, switching views, or breaking your recording into parts. When you’re done, click Finish to open the editor with all your scenes combined in one project.\",\n \"Got it\",\n chrome.i18n.getMessage(\n \"permissionsModalDismiss\"\n ) || \"Dismiss\",\n () => {},\n () => {},\n null,\n \"\",\n \"\",\n true,\n false\n );\n\n // Mark as seen\n chrome.storage.local.set({\n hasSeenMultiRecordingInfo: true,\n });\n }\n });\n chrome.storage.local.set({ instantMode: false });\n setContentState((prevContentState) => ({\n ...prevContentState,\n instantMode: false,\n }));\n }\n }}\n />\n )}\n \n \n {contentState.multiMode && contentState.multiSceneCount > 0\n ? chrome.i18n.getMessage(\"finishLabelMulti\") || \"Finish\"\n : chrome.i18n.getMessage(\"multiLabel\") || \"Multi\"}\n \n \n \n \n {/* \n
\n
\n \n
\n {chrome.i18n.getMessage(\"MockupType\")}\n
\n */}\n \n\n {showModalSoon && (\n \n setShowModalSoon(false)}\n style={{\n position: \"absolute\",\n top: -10,\n right: -10,\n width: 32,\n height: 32,\n borderRadius: \"50%\",\n background: \"rgb(252 252 252)\",\n border: \"1px solid #E2E8F0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n boxShadow: \"0 2px 8px rgba(0,0,0,0.12)\",\n cursor: \"pointer\",\n }}\n >\n \n \n {/* 👇 Embed the video here */}\n \n
\n {chrome.i18n.getMessage(\"shareModalSandboxTitle\")}\n
\n\n
\n {chrome.i18n.getMessage(\"shareModalSandboxDescription\")}\n
\n\n {\n chrome.runtime.sendMessage({ type: \"pricing\" });\n }}\n >\n {chrome.i18n.getMessage(\"shareModalSandboxButton\")}\n \n\n {\n chrome.runtime.sendMessage({ type: \"handle-login\" });\n }}\n className=\"ModalSoonSecondary\"\n style={{\n marginTop: 16,\n width: \"100%\",\n background: \"transparent\",\n border: \"none\",\n color: \"#6B7280\",\n fontSize: 13,\n textAlign: \"center\",\n cursor: \"pointer\",\n }}\n >\n {chrome.i18n.getMessage(\"shareModalSandboxLogin\")}\n \n \n )}\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default RecordingTab;\n" }, { "path": "src/pages/Content/popup/layout/RecordingType.jsx", "content": "import React, { useEffect, useContext, useState, useRef } from \"react\";\n\nimport Dropdown from \"../components/Dropdown\";\nimport Switch from \"../components/Switch\";\nimport RegionDimensions from \"../components/RegionDimensions\";\nimport Settings from \"./Settings\";\nimport { contentStateContext } from \"../../context/ContentState\";\nimport { CameraOffBlue, MicOffBlue } from \"../../images/popup/images\";\nimport TooltipWrap from \"../components/TooltipWrap\";\n\nimport BackgroundEffects from \"../components/BackgroundEffects\";\n\nimport { AlertIcon, TimeIcon, NoInternet } from \"../../toolbar/components/SVG\";\n\nconst CLOUD_FEATURES_ENABLED =\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\";\n\nconst RecordingType = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [cropActive, setCropActive] = useState(false);\n const [time, setTime] = useState(0);\n const [URL, setURL] = useState(\n \"https://help.screenity.io/getting-started/77KizPC8MHVGfpKpqdux9D/what-are-the-technical-requirements-for-using-screenity/6kdB6qru6naVD8ZLFvX3m9\"\n );\n const [URL2, setURL2] = useState(\n \"https://help.screenity.io/troubleshooting/9Jy5RGjNrBB42hqUdREQ7W/how-to-grant-screenity-permission-to-record-your-camera-and-microphone/x6U69TnrbMjy5CQ96Er2E9\"\n );\n\n const buttonRef = useRef(null);\n const isMac = navigator.platform.toUpperCase().indexOf(\"MAC\") >= 0;\n\n useEffect(() => {\n const locale = chrome.i18n.getMessage(\"@@ui_locale\");\n if (!locale.includes(\"en\")) {\n setURL(\n `https://translate.google.com/translate?sl=en&tl=${locale}&u=https://help.screenity.io/getting-started/77KizPC8MHVGfpKpqdux9D/what-are-the-technical-requirements-for-using-screenity/6kdB6qru6naVD8ZLFvX3m9`\n );\n setURL2(\n `https://translate.google.com/translate?sl=en&tl=${locale}&u=https://help.screenity.io/troubleshooting/9Jy5RGjNrBB42hqUdREQ7W/how-to-grant-screenity-permission-to-record-your-camera-and-microphone/x6U69TnrbMjy5CQ96Er2E9`\n );\n }\n }, []);\n\n useEffect(() => {\n // Convert seconds to mm:ss\n let minutes = Math.floor(contentState.alarmTime / 60);\n let seconds = contentState.alarmTime - minutes * 60;\n if (seconds < 10) {\n seconds = \"0\" + seconds;\n }\n setTime(minutes + \":\" + seconds);\n }, []);\n\n useEffect(() => {\n // Convert seconds to mm:ss\n let minutes = Math.floor(contentState.alarmTime / 60);\n let seconds = contentState.alarmTime - minutes * 60;\n if (seconds < 10) {\n seconds = \"0\" + seconds;\n }\n setTime(minutes + \":\" + seconds);\n }, [contentState.alarmTime]);\n\n // Start recording\n const startStreaming = () => {\n contentState.startStreaming();\n };\n\n useEffect(() => {\n // Check if CropTarget is null\n if (typeof CropTarget === \"undefined\") {\n setCropActive(false);\n setContentState((prevContentState) => ({\n ...prevContentState,\n customRegion: false,\n }));\n } else {\n setCropActive(true);\n }\n }, []);\n\n useEffect(() => {\n if (contentState.recording) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n pendingRecording: false,\n }));\n }\n }, [contentState.recording]);\n\n return (\n
\n {contentState.updateChrome && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"customAreaRecordingDisabledTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"customAreaRecordingDisabledDescription\")}\n
\n
\n \n
\n )}\n {/*contentState.offline && (\n
\n
\n \n
\n
\n
You are currently offline
\n
\n Some features are unavailable\n
\n
\n
\n Try again\n
\n
\n\t\t\t)*/}\n {!cropActive &&\n contentState.recordingType === \"region\" &&\n !contentState.offline && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"customAreaRecordingDisabledTitle\")}\n
\n
\n {chrome.i18n.getMessage(\n \"customAreaRecordingDisabledDescription\"\n )}\n
\n
\n
\n \n {chrome.i18n.getMessage(\"customAreaRecordingDisabledAction\")}\n \n
\n
\n )}\n {!contentState.cameraPermission && (\n {\n if (typeof contentState.openModal === \"function\") {\n contentState.openModal(\n chrome.i18n.getMessage(\"permissionsModalTitle\"),\n chrome.i18n.getMessage(\"permissionsModalDescription\"),\n chrome.i18n.getMessage(\"permissionsModalReview\"),\n chrome.i18n.getMessage(\"permissionsModalDismiss\"),\n () => {\n chrome.runtime.sendMessage({\n type: \"extension-media-permissions\",\n });\n },\n () => {},\n chrome.runtime.getURL(\"assets/helper/permissions.webp\"),\n chrome.i18n.getMessage(\"learnMoreDot\"),\n URL2,\n true,\n false\n );\n }\n }}\n >\n \n {chrome.i18n.getMessage(\"allowCameraAccessButton\")}\n \n )}\n {contentState.cameraPermission && (\n \n )}\n {contentState.cameraPermission &&\n contentState.defaultVideoInput != \"none\" &&\n contentState.cameraActive && (\n
\n \n {(!contentState.isLoggedIn || contentState.instantMode) && (\n
\n \n
\n )}\n\n {contentState.backgroundEffectsActive &&\n (!contentState.isLoggedIn || contentState.instantMode) && (\n \n )}\n
\n )}\n\n {!contentState.microphonePermission && (\n {\n if (typeof contentState.openModal === \"function\") {\n contentState.openModal(\n chrome.i18n.getMessage(\"permissionsModalTitle\"),\n chrome.i18n.getMessage(\"permissionsModalDescription\"),\n chrome.i18n.getMessage(\"permissionsModalReview\"),\n chrome.i18n.getMessage(\"permissionsModalDismiss\"),\n () => {\n chrome.runtime.sendMessage({\n type: \"extension-media-permissions\",\n });\n },\n () => {},\n chrome.runtime.getURL(\"assets/helper/permissions.webp\"),\n chrome.i18n.getMessage(\"learnMoreDot\"),\n URL2,\n true,\n false\n );\n }\n }}\n >\n \n {chrome.i18n.getMessage(\"allowMicrophoneAccessButton\")}\n \n )}\n {contentState.microphonePermission && (\n \n )}\n {((!contentState.isLoggedIn &&\n contentState.microphonePermission &&\n contentState.defaultAudioInput != \"none\" &&\n contentState.micActive) ||\n (contentState.microphonePermission && contentState.pushToTalk)) && (\n
\n \n \n
\n )}\n {contentState.recordingType === \"region\" && cropActive && (\n
\n
\n \n {contentState.customRegion && }\n
\n )}\n {contentState.isLoggedIn &&\n !contentState.recordingToScene &&\n CLOUD_FEATURES_ENABLED && (\n <>\n
\n \n
\n {\n if (checked) {\n contentState.openModal(\n chrome.i18n.getMessage(\"instantRecordingModeTitle\") ||\n \"Instant recording mode\",\n chrome.i18n.getMessage(\n \"instantRecordingModeDescription\"\n ) ||\n \"This records everything into one video for instant download and sharing. You won’t be able to change the camera layout afterward, but other edits are still possible.\",\n chrome.i18n.getMessage(\"instantRecordingModeAction\") ||\n \"Got it\",\n chrome.i18n.getMessage(\"permissionsModalDismiss\") ||\n \"Dismiss\",\n () => {},\n () => {},\n null,\n \"\",\n \"\",\n true,\n false\n );\n } else {\n // Turn off background effects in chrome.storage\n chrome.storage.local.set({\n backgroundEffectsActive: false,\n });\n\n // Update in memory\n setContentState((prev) => ({\n ...prev,\n backgroundEffectsActive: false,\n }));\n }\n }}\n />\n
\n \n \n )}\n \n {contentState.alarm && contentState.alarmTime > 0 && (\n
\n \n {time}\n
\n )}\n \n {contentState.pendingRecording\n ? chrome.i18n.getMessage(\"recordButtonInProgressLabel\")\n : (!contentState.cameraPermission || !contentState.cameraActive) &&\n contentState.recordingType === \"camera\"\n ? chrome.i18n.getMessage(\"recordButtonNoCameraLabel\")\n : contentState.multiMode && contentState.multiSceneCount > 0\n ? chrome.i18n.getMessage(\"recordButtonMultiLabel\")\n : chrome.i18n.getMessage(\"recordButtonLabel\")}\n \n \n {contentState.recordingShortcut}\n \n \n \n
\n );\n};\n\nexport default RecordingType;\n" }, { "path": "src/pages/Content/popup/layout/Settings.jsx", "content": "import React, { useState, useContext, useEffect } from \"react\";\nimport * as Collapsible from \"@radix-ui/react-collapsible\";\nimport { DropdownIcon } from \"../../images/popup/images\";\n\n// Components\nimport Switch from \"../components/Switch\";\nimport TimeSetter from \"../components/TimeSetter\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst Settings = () => {\n const [open, setOpen] = useState(false);\n const [contentState, setContentState] = useContext(contentStateContext);\n const [chromeVersion, setChromeVersion] = useState(null);\n // Check if Mac\n const isMac = navigator.platform.toUpperCase().indexOf(\"MAC\") >= 0;\n // Set shortcut to Option+Shift+E on Mac and Alt+Shift+E on Windows, using character codes\n const shortcut = isMac ? \"⌥⇧E\" : \"Alt⇧E\";\n\n // Get Chrome version\n const getChromeVersion = () => {\n var raw = navigator.userAgent.match(/Chrom(e|ium)\\/([0-9]+)\\./);\n return raw ? parseInt(raw[2], 10) : false;\n };\n\n useEffect(() => {\n setChromeVersion(getChromeVersion());\n }, []);\n\n useEffect(() => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n settingsOpen: open,\n }));\n }, [open]);\n\n return (\n \n \n
\n ✨ {chrome.i18n.getMessage(\"showMoreOptionsLabel\")}{\" \"}\n \n
\n \n \n \n \n \n {contentState.alarm && }\n \n {contentState.recordingType != \"region\" &&\n contentState.recordingType != \"camera\" &&\n !contentState.isSubscribed &&\n (chromeVersion === null || chromeVersion >= 109) && (\n \n )}\n {contentState.recordingType != \"camera\" &&\n !contentState.isSubscribed && (\n \n )}\n \n \n );\n};\n\nexport default Settings;\n" }, { "path": "src/pages/Content/popup/layout/SettingsMenu.jsx", "content": "// Work in progress - settings for the recording\n\nimport React, { useState, useContext, useRef, useEffect } from \"react\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\n\nimport { MoreIconPopup } from \"../../toolbar/components/SVG\";\n\nimport TooltipWrap from \"../components/TooltipWrap\";\n\nimport { CheckWhiteIcon, DropdownGroup } from \"../../images/popup/images\";\n\nimport { buildDiagnosticZip } from \"../../../utils/buildDiagnosticZip\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\nimport {\n probeFastRecorderSupport,\n shouldUseFastRecorder,\n getFastRecorderStickyState,\n} from \"../../../../media/fastRecorderGate\";\nimport { resetOnboardingSeen } from \"../onboarding/storage\";\nimport { runProPopupOnboardingIfNeeded } from \"../onboarding/proOnboarding\";\n\nconst CLOUD_FEATURES_ENABLED =\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\";\n\nconst SettingsMenu = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [restore, setRestore] = useState(false);\n const [cloudRestore, setCloudRestore] = useState(false);\n const [oldChrome, setOldChrome] = useState(false);\n const [openQuality, setOpenQuality] = useState(false);\n const [openResize, setOpenResize] = useState(false);\n const [openFPS, setOpenFPS] = useState(false);\n const [RAM, setRAM] = useState(0);\n const [width, setWidth] = useState(0);\n const [height, setHeight] = useState(0);\n const [fastRecorderInfo, setFastRecorderInfo] = useState({\n status: null,\n probe: null,\n decision: null,\n disabled: false,\n disabledReason: null,\n disabledDetails: null,\n disabledAt: null,\n });\n\n useEffect(() => {\n // Check chrome version\n const chromeVersion = navigator.userAgent.match(/Chrom(e|ium)\\/([0-9]+)\\./);\n const MIN_CHROME_VERSION = 110;\n\n if (chromeVersion && parseInt(chromeVersion[2], 10) < MIN_CHROME_VERSION) {\n setOldChrome(true);\n }\n }, []);\n\n const handleTroubleshooting = () => {\n if (typeof contentState.openModal === \"function\") {\n contentState.openModal(\n chrome.i18n.getMessage(\"troubleshootModalTitle\"),\n chrome.i18n.getMessage(\"troubleshootModalDescription\"),\n chrome.i18n.getMessage(\"troubleshootModalButton\"),\n chrome.i18n.getMessage(\"sandboxEditorCancelButton\"),\n async () => {\n try {\n const { blob, filename } = await buildDiagnosticZip({\n source: \"popup-settings\",\n extraConfig: {\n defaultAudioInput: contentState.defaultAudioInput,\n defaultAudioOutput: contentState.defaultAudioOutput,\n defaultVideoInput: contentState.defaultVideoInput,\n quality: contentState.quality,\n systemAudio: contentState.systemAudio,\n audioInput: contentState.audioInput,\n audioOutput: contentState.audioOutput,\n backgroundEffectsActive: contentState.backgroundEffectsActive,\n recording: contentState.recording,\n recordingType: contentState.recordingType,\n askForPermissions: contentState.askForPermissions,\n cameraPermission: contentState.cameraPermission,\n microphonePermission: contentState.microphonePermission,\n askMicrophone: contentState.askMicrophone,\n cursorMode: contentState.cursorMode,\n zoomEnabled: contentState.zoomEnabled,\n offscreenRecording: contentState.offscreenRecording,\n updateChrome: contentState.updateChrome,\n permissionsChecked: contentState.permissionsChecked,\n permissionsLoaded: contentState.permissionsLoaded,\n hideUI: contentState.hideUI,\n alarm: contentState.alarm,\n alarmTime: contentState.alarmTime,\n surface: contentState.surface,\n blurMode: contentState.blurMode,\n },\n });\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n a.click();\n window.URL.revokeObjectURL(url);\n } catch (err) {\n console.error(\"[Screenity] Troubleshooting export failed:\", err);\n }\n },\n () => {},\n );\n }\n };\n\n useEffect(() => {\n // More accurate screen detection\n const w = window.screen.availWidth * window.devicePixelRatio;\n const h = window.screen.availHeight * window.devicePixelRatio;\n setWidth(Math.round(w));\n setHeight(Math.round(h));\n\n // Fix RAM detection on macOS\n const isMac = navigator.userAgent.includes(\"Macintosh\");\n const ram = isMac ? 32 : Number(navigator.deviceMemory) || 4;\n setRAM(ram);\n }, []);\n\n const getFastRecDebug = () => {\n try {\n const params = new URLSearchParams(window.location.search);\n return params.get(\"fastRecDebug\") === \"1\";\n } catch {\n return false;\n }\n };\n\n const hasLadderFields = (probe) => {\n if (!probe || !probe.details) return false;\n return (\n Array.isArray(probe.details.attemptSummary) &&\n probe.details.attemptSummary.length > 0 &&\n Boolean(probe.details.selectedVideoConfig)\n );\n };\n\n const runFastRecorderProbe = async (source = \"auto\") => {\n if (!contentState) return;\n const userSetting =\n contentState.useWebCodecsRecorder === true\n ? true\n : contentState.useWebCodecsRecorder === false\n ? false\n : null;\n const sticky = await getFastRecorderStickyState();\n const probe = await probeFastRecorderSupport();\n const useFast = shouldUseFastRecorder(userSetting, probe, sticky);\n const decision = {\n useFast,\n why:\n userSetting === false\n ? \"user_disabled\"\n : sticky?.disabled && userSetting !== true\n ? \"sticky_disabled\"\n : probe.ok\n ? \"probe_ok\"\n : \"probe_failed\",\n at: Date.now(),\n };\n const status = {\n userSetting,\n probe: { ...probe, at: probe.at || Date.now() },\n decision,\n disabled: Boolean(sticky?.disabled),\n disabledReason: sticky?.reason || null,\n disabledDetails: sticky?.details || null,\n disabledAt: null,\n updatedAt: Date.now(),\n };\n try {\n await chrome.storage.local.set({ fastRecorderStatus: status });\n } catch {}\n setFastRecorderInfo({\n status,\n probe: status.probe,\n decision,\n disabled: status.disabled,\n disabledReason: status.disabledReason,\n disabledDetails: status.disabledDetails,\n disabledAt: status.disabledAt,\n });\n if (getFastRecDebug()) {\n console.log(\"[FastRecorderStatus]\", { source, status });\n }\n return status;\n };\n\n const migrateFastRecorderStatus = async () => {\n const existing = await chrome.storage.local.get([\"fastRecorderStatus\"]);\n if (existing.fastRecorderStatus) {\n const status = existing.fastRecorderStatus;\n if (!hasLadderFields(status?.probe)) {\n await runFastRecorderProbe(\"stale-status\");\n const refreshed = await chrome.storage.local.get([\"fastRecorderStatus\"]);\n return refreshed.fastRecorderStatus || status;\n }\n return status;\n }\n const legacy = await chrome.storage.local.get([\n \"fastRecorderBeta\",\n \"fastRecorderProbe\",\n \"fastRecorderDecision\",\n \"fastRecorderDisabledForDevice\",\n \"fastRecorderDisabledReason\",\n \"fastRecorderDisabledDetails\",\n \"fastRecorderDisabledAt\",\n ]);\n const status = {\n userSetting:\n legacy.fastRecorderBeta === true\n ? true\n : legacy.fastRecorderBeta === false\n ? false\n : null,\n probe: legacy.fastRecorderProbe || null,\n decision: legacy.fastRecorderDecision || null,\n disabled: Boolean(legacy.fastRecorderDisabledForDevice),\n disabledReason: legacy.fastRecorderDisabledReason || null,\n disabledDetails: legacy.fastRecorderDisabledDetails || null,\n disabledAt: legacy.fastRecorderDisabledAt || null,\n updatedAt: Date.now(),\n };\n try {\n await chrome.storage.local.set({ fastRecorderStatus: status });\n } catch {}\n if (!hasLadderFields(status.probe)) {\n await runFastRecorderProbe(\"stale-legacy\");\n const refreshed = await chrome.storage.local.get([\"fastRecorderStatus\"]);\n return refreshed.fastRecorderStatus || status;\n }\n return status;\n };\n\n useEffect(() => {\n let canceled = false;\n (async () => {\n const status = await migrateFastRecorderStatus();\n if (canceled) return;\n setFastRecorderInfo((prev) => ({\n ...prev,\n status,\n probe: status?.probe || null,\n decision: status?.decision || null,\n disabled: Boolean(status?.disabled),\n disabledReason: status?.disabledReason || null,\n disabledDetails: status?.disabledDetails || null,\n disabledAt: status?.disabledAt || null,\n }));\n const staleHours = 12;\n const probeAgeMs =\n status?.probe?.at && Number.isFinite(status.probe.at)\n ? Date.now() - status.probe.at\n : Infinity;\n const shouldRun =\n !status?.probe ||\n probeAgeMs > staleHours * 60 * 60 * 1000 ||\n !hasLadderFields(status?.probe);\n if (shouldRun) {\n await runFastRecorderProbe(\"effect\");\n }\n })();\n return () => {\n canceled = true;\n };\n }, [contentState?.useWebCodecsRecorder]);\n\n return (\n {\n props.setOpen(open);\n\n chrome.runtime\n .sendMessage({ type: \"check-restore\" })\n .then((response) => {\n setRestore(response.restore);\n });\n\n if (CLOUD_FEATURES_ENABLED && contentState.isSubscribed) {\n chrome.runtime\n .sendMessage({ type: \"check-cloud-restore\" })\n .then((response) => {\n setCloudRestore(response?.cloudRestore ?? false);\n })\n .catch(() => setCloudRestore(false));\n }\n\n chrome.storage.local.get([\"fastRecorderStatus\"], (result) => {\n const status = result.fastRecorderStatus || null;\n setFastRecorderInfo((prev) => ({\n ...prev,\n status,\n probe: status?.probe || null,\n decision: status?.decision || null,\n disabled: Boolean(status?.disabled),\n disabledReason: status?.disabledReason || null,\n disabledDetails: status?.disabledDetails || null,\n disabledAt: status?.disabledAt || null,\n }));\n });\n }}\n >\n \n \n \n\n \n \n {!contentState.isSubscribed && !contentState.isLoggedIn && (\n {\n if (open) {\n setOpenFPS(false);\n setOpenQuality(false);\n }\n setOpenResize(open);\n }}\n >\n \n {chrome.i18n.getMessage(\"resizeWindowLabel\")}\n
\n \n
\n \n \n \n \n {\n chrome.runtime.sendMessage({\n type: \"resize-window\",\n width: 3840,\n height: 2160,\n });\n }}\n disabled={width < 3840 || height < 2160}\n >\n 3840 x 2160 (4k)\n \n \n \n {\n chrome.runtime.sendMessage({\n type: \"resize-window\",\n width: 1920,\n height: 1080,\n });\n }}\n disabled={width < 1920 || height < 1080}\n >\n 1920 x 1080 (1080p)\n \n \n \n {\n chrome.runtime.sendMessage({\n type: \"resize-window\",\n width: 1280,\n height: 720,\n });\n }}\n disabled={width < 1280 || height < 720}\n >\n 1280 x 720 (720p)\n \n \n \n {\n chrome.runtime.sendMessage({\n type: \"resize-window\",\n width: 640,\n height: 480,\n });\n }}\n disabled={width < 640 || height < 480}\n >\n 640 x 480 (480p)\n \n \n \n {\n chrome.runtime.sendMessage({\n type: \"resize-window\",\n width: 480,\n height: 360,\n });\n }}\n disabled={width < 480 || height < 360}\n >\n 480 x 360 (360p)\n \n \n \n {\n chrome.runtime.sendMessage({\n type: \"resize-window\",\n width: 320,\n height: 240,\n });\n }}\n disabled={width < 320 || height < 240}\n >\n 320 x 240 (240p)\n \n \n \n \n \n )}\n {!contentState.isSubscribed && !contentState.isLoggedIn && (\n {\n if (open) {\n setOpenFPS(false);\n setOpenResize(false);\n }\n setOpenQuality(open);\n }}\n >\n \n {chrome.i18n.getMessage(\"maxResolutionLabel\") +\n \" (\" +\n contentState.qualityValue +\n \")\"}\n
\n \n
\n \n \n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n qualityValue: value,\n }));\n chrome.storage.local.set({\n qualityValue: value,\n });\n }}\n >\n \n \n 4k\n \n \n \n \n \n \n \n 1080p\n \n \n \n \n \n \n \n 720p\n \n \n \n \n \n \n 480p\n \n \n \n \n \n 360p\n \n \n \n \n \n 240p\n \n \n \n \n \n \n \n \n )}\n {!contentState.isSubscribed && !contentState.isLoggedIn && (\n {\n if (open) {\n setOpenQuality(false);\n setOpenResize(false);\n }\n setOpenFPS(open);\n }}\n >\n \n {chrome.i18n.getMessage(\"maxFPSLabel\") +\n \" (\" +\n contentState.fpsValue +\n \" fps)\"}\n
\n \n
\n \n \n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n fpsValue: value,\n }));\n chrome.storage.local.set({\n fpsValue: value,\n });\n }}\n >\n \n 60 fps\n \n \n \n \n \n 30 fps\n \n \n \n \n \n 24 fps\n \n \n \n \n \n 15 fps\n \n \n \n \n \n 10 fps\n \n \n \n \n \n 5 fps\n \n \n \n \n \n \n \n \n )}\n {\n e.preventDefault();\n }}\n onCheckedChange={(checked) => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n systemAudio: checked,\n }));\n chrome.storage.local.set({\n systemAudio: checked,\n });\n }}\n checked={contentState.systemAudio}\n >\n {chrome.i18n.getMessage(\"systemAudioLabel\")}\n \n \n \n \n {!contentState.isSubscribed &&\n !contentState.isLoggedIn &&\n fastRecorderInfo?.probe?.ok === true &&\n fastRecorderInfo?.probe?.details?.selectedVideoConfig && (\n {\n e.preventDefault();\n }}\n onCheckedChange={(checked) => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n useWebCodecsRecorder: checked,\n }));\n chrome.storage.local.set({\n useWebCodecsRecorder: checked,\n ...(checked\n ? {\n lastWebCodecsFailureAt: null,\n lastWebCodecsFailureCode: null,\n }\n : {}),\n });\n }}\n checked={contentState.useWebCodecsRecorder === true}\n >\n {chrome.i18n.getMessage(\"webcodecsToggleLabel\")}\n \n \n \n \n )}\n {!oldChrome &&\n !contentState.isSubscribed &&\n !contentState.isLoggedIn && (\n {\n e.preventDefault();\n }}\n onCheckedChange={(checked) => {\n if (!checked) {\n chrome.runtime.sendMessage({ type: \"close-backup-tab\" });\n }\n setContentState((prevContentState) => ({\n ...prevContentState,\n backup: checked,\n backupSetup: false,\n }));\n chrome.storage.local.set({\n backup: checked,\n backupSetup: false,\n });\n }}\n checked={contentState.backup}\n >\n {chrome.i18n.getMessage(\"backupsToggle\")}\n \n \n \n \n )}\n {!contentState.isSubscribed && !contentState.isLoggedIn && (\n {\n e.preventDefault();\n chrome.runtime.sendMessage({ type: \"restore-recording\" });\n }}\n disabled={!restore}\n >\n {chrome.i18n.getMessage(\"restoreRecording\")}\n \n )}\n {!contentState.isSubscribed && !contentState.isLoggedIn && (\n {\n e.preventDefault();\n handleTroubleshooting();\n }}\n >\n {chrome.i18n.getMessage(\"downloadForTroubleshootingOption\")}\n \n )}\n\n {contentState.isLoggedIn && !CLOUD_FEATURES_ENABLED && (\n {\n e.preventDefault();\n chrome.runtime.sendMessage({ type: \"open-account-settings\" });\n }}\n >\n {chrome.i18n.getMessage(\"accountSettingsOption\")}\n \n )}\n {contentState.isLoggedIn && !CLOUD_FEATURES_ENABLED && (\n {\n e.preventDefault();\n chrome.runtime.sendMessage({\n type: \"open-support\",\n name: contentState.screenityUser?.name || \"\",\n email: contentState.screenityUser?.email || \"\",\n });\n }}\n >\n {chrome.i18n.getMessage(\"supportSettingsOption\")}\n \n )}\n {CLOUD_FEATURES_ENABLED && (\n <>\n {contentState.isLoggedIn && contentState.isSubscribed && (\n {\n e.preventDefault();\n await resetOnboardingSeen([\"proPopupCore\", \"proCameraInfo\"]);\n props.setOpen(false);\n runProPopupOnboardingIfNeeded({\n rootContext: props.shadowRef?.current?.shadowRoot || document,\n isPro: Boolean(\n contentState.isLoggedIn && contentState.isSubscribed\n ),\n isLoggedIn: Boolean(contentState.isLoggedIn),\n popupOpen: Boolean(\n contentState.showPopup && contentState.showExtension\n ),\n cameraEnabled: Boolean(contentState.cameraActive),\n pendingRecording: Boolean(contentState.pendingRecording),\n preparingRecording: Boolean(contentState.preparingRecording),\n recording: Boolean(contentState.recording),\n countdownActive: Boolean(contentState.countdownActive),\n isCountdownVisible: Boolean(contentState.isCountdownVisible),\n forceStart: true,\n });\n }}\n >\n {chrome.i18n.getMessage(\"resetOnboardingOption\") ||\n \"Reset onboarding\"}\n \n )}\n {contentState.isLoggedIn && contentState.isSubscribed && (\n {\n e.preventDefault();\n chrome.runtime.sendMessage({\n type: \"restore-cloud-recording\",\n });\n }}\n disabled={!cloudRestore}\n >\n {chrome.i18n.getMessage(\"recoverLastRecordingOption\")}\n \n )}\n \n )}\n {CLOUD_FEATURES_ENABLED && (\n {\n e.preventDefault();\n if (contentState.isLoggedIn) {\n // Log out flow\n chrome.runtime.sendMessage({ type: \"handle-logout\" });\n setContentState((prev) => ({\n ...prev,\n isLoggedIn: false,\n wasLoggedIn: true,\n isSubscribed: false,\n screenityUser: null,\n proSubscription: null,\n bigTab: \"record\",\n }));\n contentState.openToast(\n chrome.i18n.getMessage(\"loggedOutToastTitle\"),\n () => {},\n 2000\n );\n } else {\n // Log in flow (open login page)\n chrome.runtime.sendMessage({ type: \"handle-login\" });\n }\n props.setOpen(false); // Close the menu after action\n }}\n >\n {contentState.isLoggedIn\n ? chrome.i18n.getMessage(\"logoutButtonLabel\") || \"Log out\"\n : chrome.i18n.getMessage(\"loginButtonLabel\") ||\n \"Log in or sign up\"}\n \n )}\n \n \n \n );\n};\n\nexport default SettingsMenu;\n" }, { "path": "src/pages/Content/popup/layout/VideosTab.jsx", "content": "import React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport VideoItem from \"../components/VideoItem\";\nimport { PlaceholderThumb } from \"../../images/popup/images\";\nimport { useContext } from \"react\";\nimport { contentStateContext } from \"../../context/ContentState\";\n\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { DropdownIcon, CheckWhiteIcon } from \"../../images/popup/images\";\n\nimport {\n TempTwitter,\n TempFigma,\n TempDesignSystem,\n TempMarketing,\n TempSubstack,\n} from \"../../images/popup/images\";\n\nconst CLOUD_FEATURES_ENABLED =\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\";\n\nconst VideosTab = (props) => {\n const [videos, setVideos] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [hasMore, setHasMore] = useState(true);\n const [contentState, setContentState] = useContext(contentStateContext);\n const fetchedPagesRef = useRef(new Set()); // key = `${sortBy}-${page}`\n const videoCacheRef = useRef({}); // key: `${sortBy}-${page}` → video[]\n const VIDEO_CACHE_STORAGE_KEY = \"cachedVideosBySort\";\n\n const pageRef = useRef(0); // Track page here without triggering re-renders\n const observerRef = useRef();\n\n const PAGE_SIZE = 8;\n const sortBy = contentState.sortBy || \"newest\";\n const filter = \"all\";\n\n const lastFetchTimeRef = useRef(0);\n const FETCH_COOLDOWN_MS = 1500;\n\n useEffect(() => {\n if (!CLOUD_FEATURES_ENABLED) {\n // show only local placeholder videos\n return;\n }\n\n chrome.storage.local.get(VIDEO_CACHE_STORAGE_KEY, (result) => {\n if (result?.[VIDEO_CACHE_STORAGE_KEY]) {\n videoCacheRef.current = result[VIDEO_CACHE_STORAGE_KEY];\n\n // Hydrate fetchedPagesRef with cached keys\n fetchedPagesRef.current = new Set(Object.keys(videoCacheRef.current));\n\n // Collect all cached videos for current sort\n const matchingKeys = Object.keys(videoCacheRef.current).filter((key) =>\n key.startsWith(`${sortBy}-`)\n );\n\n // Sort by page number (e.g. newest-0, newest-1, newest-2...)\n const sortedKeys = matchingKeys.sort((a, b) => {\n const aPage = parseInt(a.split(\"-\")[1], 10);\n const bPage = parseInt(b.split(\"-\")[1], 10);\n return aPage - bPage;\n });\n\n const allCachedVideos = sortedKeys.flatMap(\n (key) => videoCacheRef.current[key] || []\n );\n\n setVideos(allCachedVideos);\n\n // Update pageRef to next page\n pageRef.current = sortedKeys.length;\n\n // If the last page is smaller than PAGE_SIZE, we're done\n const lastPageKey = sortedKeys[sortedKeys.length - 1];\n const lastPage = videoCacheRef.current[lastPageKey] || [];\n setHasMore(lastPage.length === PAGE_SIZE);\n } else {\n // No cache found, do initial fetch\n pageRef.current = 0;\n setHasMore(true);\n fetchVideos();\n }\n });\n }, []);\n\n useEffect(() => {\n if (!CLOUD_FEATURES_ENABLED) {\n // show only local placeholder videos\n return;\n }\n\n if (contentState.isSubscribed) {\n setVideos([]);\n pageRef.current = 0;\n setHasMore(true);\n fetchedPagesRef.current = new Set();\n fetchVideos();\n }\n }, [sortBy]);\n\n const fetchVideos = useCallback(async () => {\n if (!CLOUD_FEATURES_ENABLED) {\n // show only local placeholder videos\n return;\n }\n\n const now = Date.now();\n\n if (\n !contentState.isSubscribed ||\n loading ||\n !hasMore ||\n now - lastFetchTimeRef.current < FETCH_COOLDOWN_MS\n ) {\n return;\n }\n\n lastFetchTimeRef.current = now;\n\n const cacheKey = `${sortBy}-${pageRef.current}`;\n if (fetchedPagesRef.current.has(cacheKey)) return;\n fetchedPagesRef.current.add(cacheKey);\n setLoading(true);\n\n try {\n if (videoCacheRef.current[cacheKey]) {\n const cachedVideos = videoCacheRef.current[cacheKey];\n setVideos((prev) => [...prev, ...cachedVideos]);\n\n if (cachedVideos.length < PAGE_SIZE) {\n setHasMore(false);\n } else {\n pageRef.current += 1;\n }\n\n return;\n }\n\n const response = await chrome.runtime.sendMessage({\n type: \"fetch-videos\",\n page: pageRef.current,\n pageSize: PAGE_SIZE,\n sort: sortBy,\n filter,\n });\n\n if (!response?.success) {\n console.error(\"❌ Failed to fetch videos:\", response?.error);\n setError(response?.error || \"Failed to load videos\");\n setHasMore(false);\n return;\n }\n\n const newVideos = response.videos || [];\n setVideos((prev) => [...prev, ...newVideos]);\n\n if (newVideos.length > 0) {\n videoCacheRef.current[cacheKey] = newVideos;\n chrome.storage.local.set({\n [VIDEO_CACHE_STORAGE_KEY]: videoCacheRef.current,\n });\n }\n\n if (newVideos.length < PAGE_SIZE) {\n setHasMore(false);\n } else {\n pageRef.current += 1;\n }\n } catch (err) {\n console.error(\"❌ Unexpected error:\", err);\n setError(\"Failed to load videos\");\n } finally {\n setLoading(false);\n }\n }, [loading, hasMore, contentState.isSubscribed, sortBy]);\n\n // useEffect(() => {\n // if (contentState.isSubscribed) {\n // fetchVideos();\n // }\n // }, []); // Run once on mount\n\n useEffect(() => {\n if (!CLOUD_FEATURES_ENABLED) {\n // show only local placeholder videos\n return;\n }\n if (!observerRef.current || !hasMore || !contentState.isSubscribed) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n if (entries[0].isIntersecting) {\n fetchVideos();\n }\n },\n { threshold: 1.0 }\n );\n\n observer.observe(observerRef.current);\n\n return () => observer.disconnect();\n }, [fetchVideos, hasMore]);\n\n const handleVideoClick = (videoId) => {\n if (!CLOUD_FEATURES_ENABLED) {\n // show only local placeholder videos\n return;\n }\n const url = process.env.SCREENITY_APP_BASE + `/editor/${videoId}/edit`;\n window.open(url, \"_blank\");\n };\n\n const handleCopyLink = (videoId) => {\n if (!CLOUD_FEATURES_ENABLED) {\n // show only local placeholder videos\n return;\n }\n const link = process.env.SCREENITY_APP_BASE + `/view/${videoId}`;\n navigator.clipboard\n .writeText(link)\n .then(() => {\n contentState.openToast(\n chrome.i18n.getMessage(\"copiedToClipboardToast\"),\n 3000\n );\n })\n .catch((err) => {\n console.error(\"❌ Failed to copy:\", err);\n contentState.openToast(\n chrome.i18n.getMessage(\"failedToCopyToClipboardToast\"),\n 3000\n );\n });\n };\n\n useEffect(() => {\n if (!CLOUD_FEATURES_ENABLED) {\n // show only local placeholder videos\n return;\n }\n chrome.storage.local.get([\"sortBy\"], (result) => {\n if (result.sortBy && !contentState.sortBy) {\n setContentState((prev) => ({ ...prev, sortBy: result.sortBy }));\n }\n });\n }, []);\n\n const sortLabelMap = {\n newest: chrome.i18n.getMessage(\"newestSortLabel\"),\n oldest: chrome.i18n.getMessage(\"oldestSortLabel\"),\n alphabetical: \"A–Z\",\n \"reverse-alphabetical\": \"Z–A\",\n };\n\n return (\n \n {!contentState.isSubscribed && (\n
\n {/* 👇 Embed the video here */}\n \n
\n {chrome.i18n.getMessage(\"shareModalSandboxTitle\")}\n
\n\n
\n {chrome.i18n.getMessage(\"shareModalSandboxDescription\")}\n
\n\n {\n chrome.runtime.sendMessage({ type: \"pricing\" });\n }}\n >\n {chrome.i18n.getMessage(\"shareModalSandboxButton\")}\n
\n\n {\n chrome.runtime.sendMessage({ type: \"handle-login\" });\n }}\n className=\"ModalSoonSecondary\"\n style={{\n marginTop: 16,\n width: \"100%\",\n background: \"transparent\",\n border: \"none\",\n color: \"#6B7280\",\n fontSize: 13,\n textAlign: \"center\",\n cursor: \"pointer\",\n }}\n >\n {chrome.i18n.getMessage(\"shareModalSandboxLogin\")}\n \n \n )}\n \n \n
\n \n
\n {chrome.i18n.getMessage(\"allVideosHeading\")}\n
\n \n {/* \n
\n Team\n
\n \n \n
\n Shared\n
\n */}\n
\n \n \n \n \n\n \n \n {\n setContentState((prev) => ({ ...prev, sortBy: value }));\n chrome.storage.local.set({ sortBy: value });\n }}\n >\n \n {chrome.i18n.getMessage(\"newestSortLabel\")}\n \n \n \n \n\n \n {chrome.i18n.getMessage(\"oldestSortLabel\")}\n \n \n \n \n\n \n A–Z\n \n \n \n \n\n \n Z–A\n \n \n \n \n \n \n \n \n \n\n \n
\n {error &&

{error}

}\n {videos.length === 0 &&\n !loading &&\n !error &&\n contentState.isSubscribed && (\n
\n
\n 👻\n
\n {chrome.i18n.getMessage(\"noVideosFound\")}\n
\n )}\n {(contentState.isSubscribed\n ? videos\n : [\n {\n title: \"Bug report\",\n createdAt: \"3 minutes ago\",\n data: { thumbnail: TempTwitter },\n },\n {\n title: \"Figma async review\",\n createdAt: \"1 hour ago\",\n data: { thumbnail: TempFigma },\n },\n {\n title: \"Design systems onboarding\",\n createdAt: \"4 days ago\",\n data: { thumbnail: TempDesignSystem },\n },\n {\n title: \"Cool SaaS resources\",\n createdAt: \"Feb 12\",\n data: { thumbnail: TempMarketing },\n },\n {\n title: \"Newsletter promo\",\n createdAt: \"Jan 23\",\n data: { thumbnail: TempSubstack },\n },\n {\n title: \"Product demo\",\n createdAt: \"Jan 15\",\n data: { thumbnail: PlaceholderThumb },\n },\n ]\n ).map((video, i) => (\n handleVideoClick(video._id)\n : undefined\n }\n onCopyLink={\n contentState.isSubscribed\n ? () => handleCopyLink(video._id)\n : undefined\n }\n />\n ))}\n {loading && (\n
\n
\n {chrome.i18n.getMessage(\"loadingVideosLabel\")}\n
\n )}\n
\n
\n\n
\n \n \n {chrome.i18n.getMessage(\"goToDashboardButtonLabel\")}\n \n {/* Ctrl+D */}\n \n
\n \n\n \n \n \n
\n );\n};\n\nexport default VideosTab;\n" }, { "path": "src/pages/Content/popup/layout/Welcome.jsx", "content": "import React, { useEffect, useState } from \"react\";\nimport SoloDev from \"../../../../assets/solo-dev.png\";\n// import EditorPreview from \"../../../../assets/editor-preview.png\"; // replace with actual screenshot file\n\nconst Welcome = (props) => {\n const isUpdated = props.isBack;\n const clearBack = props.clearBack;\n const [learntAboutPro, setLearntAboutPro] = useState(false);\n\n useEffect(() => {\n // if (isUpdated) {\n chrome.storage.local.get(\"learntAboutPro\", (res) => {\n if (res.learntAboutPro) setLearntAboutPro(true);\n });\n // }\n }, []);\n\n return (\n \n
\n
\n
\n {!isUpdated\n ? chrome.i18n.getMessage(\"welcomePopupTitle\")\n : chrome.i18n.getMessage(\"welcomeBackPopupTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"welcomePopupDescriptionTop\")}\n
\n {chrome.i18n.getMessage(\"welcomePopupDescriptionBottom\")}\n
\n {\n if (isUpdated) clearBack();\n props.setOnboarding(false);\n props.setContentState((prev) => ({\n ...prev,\n onboarding: false,\n }));\n chrome.storage.local.set({ onboarding: false });\n }}\n >\n 👋 {chrome.i18n.getMessage(\"welcomePopupCTA\")}\n
\n
\n
\n\n
\n
\n
\n {!isUpdated\n ? chrome.i18n.getMessage(\"welcomeProTitle\")\n : chrome.i18n.getMessage(\"welcomeBackProTitle\") ||\n \"Want to do more with your recordings?\"}\n
\n\n
\n \n \n
\n
\n\n \n {learntAboutPro\n ? chrome.i18n.getMessage(\"welcomeProDescription\") ||\n \"Sign in to save your videos to the cloud, share with a link, and access advanced editing features.\"\n : chrome.i18n.getMessage(\"welcomeBackProDescription\") ||\n \"Sign in to save your videos to the cloud, share with a link, and access advanced editing features.\"}\n

\n\n {/* {\n if (!isUpdated || learntAboutPro) {\n chrome.runtime.sendMessage({ type: \"handle-login\" });\n } else {\n chrome.storage.local.set({ learntAboutPro: true });\n chrome.runtime.sendMessage({ type: \"pricing\" });\n setLearntAboutPro(true);\n }\n }}\n role=\"button\"\n className=\"main-button dashboard-button\"\n tabIndex=\"0\"\n style={{\n zIndex: 99,\n marginTop: \"25px\",\n }}\n >\n \n {!isUpdated || learntAboutPro\n ? chrome.i18n.getMessage(\"welcomeProButton\") ||\n \"Sign in to unlock paid features\"\n : !learntAboutPro\n ? chrome.i18n.getMessage(\"welcomeBackProCTA\") ||\n \"Learn more about Screenity Pro\"\n : chrome.i18n.getMessage(\"welcomeBackProCTAAfterLearn\") ||\n \"Sign in to unlock paid features\"}\n \n
*/}\n\n {\n if (learntAboutPro) {\n // After they've seen the Pro info, trigger sign in\n chrome.runtime.sendMessage({ type: \"handle-login\" });\n } else {\n // First click: show pricing page and mark as \"learnt\"\n chrome.storage.local.set({ learntAboutPro: true });\n chrome.runtime.sendMessage({ type: \"pricing\" });\n setLearntAboutPro(true);\n }\n }}\n role=\"button\"\n className=\"main-button dashboard-button\"\n tabIndex=\"0\"\n style={{\n zIndex: 99,\n marginTop: \"25px\",\n }}\n >\n \n {learntAboutPro\n ? chrome.i18n.getMessage(\"welcomeProButton\") ||\n \"Sign in to unlock paid features\"\n : chrome.i18n.getMessage(\"welcomeBackProCTA\") ||\n \"Learn more about Screenity Pro\"}\n \n \n \n {chrome.i18n.getMessage(\"welcomeProSupport\") ||\n \"Support development by a solo indie maker \"}\n \"Alyssa\n \n \n \n \n );\n};\n\nexport default Welcome;\n" }, { "path": "src/pages/Content/popup/layout/WelcomeAlternate.jsx", "content": "import React, { useState, useEffect } from \"react\";\nimport CheckBlueIcon from \"../../../../assets/check-blue.svg\";\nimport SoloDev from \"../../../../assets/solo-dev.png\";\n\nconst FeatureItem = ({ text }) => {\n // render with a checkmark icon on left and text on right\n return (\n
\n
\n \"Checkmark\"\n
\n {text}\n
\n );\n};\n\nconst Welcome = (props) => {\n return (\n \n
\n {/*
\n\t\t\t\t\t\n\t\t\t\t
*/}\n
\n
\n {chrome.i18n.getMessage(\"welcomePopupTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"welcomePopupDescriptionTop\")}\n
\n {chrome.i18n.getMessage(\"welcomePopupDescriptionBottom\")}\n
\n {\n props.setOnboarding(false);\n chrome.storage.local.set({ updatingFromOld: false });\n }}\n >\n 👋 {chrome.i18n.getMessage(\"welcomePopupCTA\")}\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"welcomePopupCloudTitle\")}\n
\n
\n
\n \n \n \n \n \n
\n \n \n {chrome.i18n.getMessage(\"welcomePopupCTA\")}\n \n \n $8/mo\n \n \n \n {chrome.i18n.getMessage(\"welcomePopupSupport\")}{\" \"}\n \"Alyssa\n \n
\n
\n \n );\n};\n\nexport default Welcome;\n" }, { "path": "src/pages/Content/popup/onboarding/proOnboarding.js", "content": "import { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\nimport { hasSeenOnboarding, markOnboardingSeen } from \"./storage\";\n\nconst CORE_KEY = \"proPopupCore\";\nconst CAMERA_KEY = \"proCameraInfo\";\nconst POPOVER_CLASS = \"ScreenityOnboardingPopover onboarding-popover\";\nconst DRIVER_STYLE_ID = \"screenity-driver-onboarding-style\";\nconst TOOLBAR_HELP_URL =\n \"https://help.screenity.io/recording/how-to-hide-the-toolbar\";\nconst IDLE_START_DELAY_MS = 420;\n\nconst STEP_IDS = {\n WELCOME: \"welcome\",\n TOOLBAR: \"toolbar\",\n CAMERA: \"camera\",\n INSTANT: \"instant\",\n};\n\nconst TOOLBAR_SELECTORS = [\n \"#pro-onboarding-recording-toolbar-root\",\n \"#pro-onboarding-recording-toolbar .ToolbarRoot\",\n \"#pro-onboarding-recording-toolbar\",\n \"#pro-onboarding-recording-toolbar-controls\",\n \".react-draggable .ToolbarRoot\",\n];\nconst INSTANT_PRIMARY_SELECTORS = [\n \"#pro-onboarding-instant-mode-toggle-row\",\n \"#pro-onboarding-instant-mode-field\",\n \"#pro-onboarding-instant-mode-toggle\",\n];\nconst INSTANT_FALLBACK_SELECTORS = [\n \"#pro-onboarding-popup-container\",\n \".popup-container\",\n];\nconst CAMERA_SELECTORS = [\n \".camera-page .camera-draggable\",\n \".camera-draggable\",\n \".camera-page\",\n];\nconst CONFLICT_SELECTORS = [\n \".AlertDialogContent\",\n \".AlertDialogOverlay\",\n \".countdown-overlay\",\n \".countdown-circle\",\n \".recording-countdown\",\n];\nconst START_CANCEL_EVENTS = [\"mousedown\", \"click\", \"keydown\"];\n\nconst DEBUG =\n typeof window !== \"undefined\" && Boolean(window.SCREENITY_DEBUG_ONBOARDING);\n\nlet activeDriver = null;\nlet activeRun = null;\nlet restoreRootStyle = null;\nlet pendingStartTimer = null;\nlet cancelPendingStartListeners = null;\nlet onboardingInProgress = false;\nlet pendingStartToken = 0;\n\nconst logDebug = (event, payload = {}) => {\n if (!DEBUG) return;\n // eslint-disable-next-line no-console\n console.debug(\"[Screenity][Onboarding]\", event, payload);\n};\n\nconst getRoot = (context) => (context?.querySelector ? context : document);\n\nconst t = (key, fallback) => {\n try {\n return chrome.i18n.getMessage(key) || fallback;\n } catch {\n return fallback;\n }\n};\n\nconst getOnboardingText = () => ({\n welcomeTitle: t(\n \"proOnboardingWelcomeTitle\",\n \"Welcome to the Screenity Pro extension\",\n ),\n welcomeDescription: t(\n \"proOnboardingWelcomeDescription\",\n \"A few quick tips before you record.
Auto-zooms only work for clicks inside Chrome tabs. You can still add zooms manually later.\",\n ),\n toolbarTitle: t(\"proOnboardingToolbarTitle\", \"Recording toolbar & effects\"),\n toolbarDescription: t(\n \"proOnboardingToolbarDescription\",\n \"Use this toolbar for drawing, cursor effects, blur, and recording controls.

This toolbar is included in the video unless you hide it.\",\n ),\n cameraTitle: t(\"proOnboardingCameraTitle\", \"Camera is captured separately\"),\n cameraDescription: t(\n \"proOnboardingCameraDescription\",\n \"Your camera may hide or move to PiP while recording, that’s normal.

It’s captured separately so you can position it later.\",\n ),\n instantTitle: t(\"proOnboardingInstantTitle\", \"Instant mode\"),\n instantDescription: t(\n \"proOnboardingInstantDescription\",\n \"Best for quick sharing with unlimited downloads.

Advanced layouts/editor options aren’t available in this mode.\",\n ),\n doneBtnText: t(\"proOnboardingDone\", \"Got it\"),\n nextBtnText: t(\"proOnboardingNext\", \"Next\"),\n prevBtnText: t(\"proOnboardingBack\", \"Back\"),\n learnMoreLabel: t(\"proOnboardingToolbarLearnMore\", \"Learn more\"),\n});\n\nconst find = (root, selector) => {\n try {\n return root.querySelector(selector);\n } catch {\n return null;\n }\n};\n\nconst findFirst = (root, selectors = []) => {\n for (const selector of selectors) {\n const el = find(root, selector);\n if (el) return el;\n }\n return null;\n};\n\nconst isElementVisible = (el) => {\n if (!el || !el.isConnected) return false;\n if (\n typeof el.getClientRects === \"function\" &&\n el.getClientRects().length === 0\n ) {\n return false;\n }\n const style = window.getComputedStyle(el);\n return style.display !== \"none\" && style.visibility !== \"hidden\";\n};\n\nconst waitForElement = async (root, selectors, timeoutMs = 1200) => {\n const start = Date.now();\n while (Date.now() - start < timeoutMs) {\n const el = findFirst(root, selectors);\n if (isElementVisible(el)) return el;\n await new Promise((resolve) => setTimeout(resolve, 60));\n }\n return null;\n};\n\nconst clearScheduledStart = () => {\n if (pendingStartTimer) {\n clearTimeout(pendingStartTimer);\n pendingStartTimer = null;\n }\n if (typeof cancelPendingStartListeners === \"function\") {\n cancelPendingStartListeners();\n cancelPendingStartListeners = null;\n }\n};\n\nconst clearDriverUiState = (root) => {\n document.documentElement.classList.remove(\"screenity-driver-modal-step\");\n document.documentElement.classList.remove(\"screenity-driver-active\");\n setToolbarCloseVisible(root, false);\n if (typeof restoreRootStyle === \"function\") restoreRootStyle();\n restoreRootStyle = null;\n};\n\nconst hasConflictSelectorsVisible = (root) => {\n for (const selector of CONFLICT_SELECTORS) {\n if (isElementVisible(find(root, selector))) return true;\n if (root !== document && isElementVisible(find(document, selector))) {\n return true;\n }\n }\n return false;\n};\n\nconst hasBlockingFlags = (state = {}) =>\n Boolean(\n state.pendingRecording ||\n state.preparingRecording ||\n state.recording ||\n state.countdownActive ||\n state.isCountdownVisible,\n );\n\nconst shouldSkip = ({ root, popupOpen, isPro, isLoggedIn, state = {} }) => {\n if (!popupOpen || !isPro || !isLoggedIn) return true;\n if (document.hidden) return true;\n if (hasBlockingFlags(state)) return true;\n if (hasConflictSelectorsVisible(root)) return true;\n return false;\n};\n\nconst isRecordingNow = async () => {\n try {\n const result = await chrome.storage.local.get([\n \"recording\",\n \"pendingRecording\",\n \"preparingRecording\",\n \"countdownActive\",\n \"isCountdownVisible\",\n ]);\n return Boolean(\n result.recording ||\n result.pendingRecording ||\n result.preparingRecording ||\n result.countdownActive ||\n result.isCountdownVisible,\n );\n } catch {\n return false;\n }\n};\n\nconst describeNode = (node) => {\n if (!node) return null;\n const rootNode = node.getRootNode?.();\n const rootType =\n rootNode === document\n ? \"document\"\n : rootNode?.host\n ? \"shadow-root\"\n : \"other\";\n let rect = null;\n try {\n const r = node.getBoundingClientRect();\n rect = { x: r.x, y: r.y, width: r.width, height: r.height };\n } catch {}\n return {\n tag: node.tagName,\n id: node.id || null,\n className: node.className || null,\n isConnected: Boolean(node.isConnected),\n rootType,\n parentTag: node.parentElement?.tagName || null,\n parentClass: node.parentElement?.className || null,\n rect,\n };\n};\n\nconst getDriverDomSnapshot = () => {\n const overlay = document.querySelector(\".driver-overlay\");\n const stage = document.querySelector(\".driver-stage\");\n const popover = document.querySelector(\".driver-popover\");\n return {\n overlay: describeNode(overlay),\n stage: describeNode(stage),\n popover: describeNode(popover),\n };\n};\n\nconst resolveStepElement = (step) => {\n const raw = step?.element;\n if (!raw) return null;\n if (typeof raw === \"function\") {\n try {\n return raw();\n } catch {\n return null;\n }\n }\n if (typeof raw === \"string\") {\n try {\n return document.querySelector(raw);\n } catch {\n return null;\n }\n }\n return raw;\n};\n\nconst logStepState = (event, step, options) => {\n const state = options?.state || activeDriver?.getState?.() || {};\n const activeStep =\n step || state.activeStep || activeDriver?.getActiveStep?.();\n const target = resolveStepElement(activeStep);\n logDebug(event, {\n activeIndex: state.activeIndex ?? activeDriver?.getActiveIndex?.(),\n title: activeStep?.popover?.title || null,\n target: describeNode(target),\n targetVisible: isElementVisible(target),\n targetRootType:\n target?.getRootNode?.()?.host != null ? \"shadow-root\" : \"document\",\n driverDom: getDriverDomSnapshot(),\n });\n};\n\nconst ensureDriverStyles = () => {\n if (document.getElementById(DRIVER_STYLE_ID)) return;\n // Driver computes coordinates in document viewport space.\n // Keeping driver DOM in document.body avoids shadow-root stage/popover drift.\n const style = document.createElement(\"style\");\n style.id = DRIVER_STYLE_ID;\n style.textContent = `\n .driver-overlay { z-index: 2147483645 !important; }\n .driver-stage { z-index: 2147483646 !important; }\n .driver-popover.ScreenityOnboardingPopover,\n .ScreenityOnboardingPopover {\n z-index: 2147483647 !important;\n border-radius: 30px !important;\n max-width: 340px !important;\n background: var(--color-background, #f9fafb) !important;\n color: var(--color-text-primary, #1f2430) !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n box-shadow: 0px 4px 30px rgba(30, 31, 37, 0.12) !important;\n padding: 20px !important;\n font-size: 14px !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-title,\n .ScreenityOnboardingPopover .driver-popover-title {\n font-size: 1rem !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n font-weight: 500 !important;\n margin-bottom: 12px !important;\n color: var(--color-text-primary, #1f2430) !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-description,\n .ScreenityOnboardingPopover .driver-popover-description {\n font-size: 14px !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n font-weight: 500 !important;\n color: var(--color-text-secondary, #667085) !important;\n line-height: 1.5 !important;\n margin-bottom: 18px !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-close-btn,\n .ScreenityOnboardingPopover .driver-popover-close-btn {\n display: none !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-description a,\n .ScreenityOnboardingPopover .driver-popover-description a {\n color: #3b82f6 !important;\n text-decoration: none !important;\n cursor: pointer !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-progress-text,\n .ScreenityOnboardingPopover .driver-popover-progress-text {\n font-size: 12px !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n color: var(--color-text-secondary, #667085) !important;\n opacity: 0.7 !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns,\n .ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns {\n gap: 6px !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n .driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n .ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n .ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn {\n border-radius: 30px !important;\n padding: 10px 14px !important;\n font-size: 14px !important;\n text-shadow: none !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n .ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn {\n background-color: var(--color-primary, #3b82f6) !important;\n color: white !important;\n border: none !important;\n }\n .driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n .ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn {\n background-color: transparent !important;\n color: var(--color-text-primary, #1f2430) !important;\n border: 1px solid var(--color-border, #d0d5dd) !important;\n }\n\t\t\t/* Modal step: hide stage cutout + center popover */\n.screenity-driver-modal-step .driver-stage,\n.screenity-driver-modal-step .driver-stage-wrapper {\n display: none !important;\n}\n\n.screenity-driver-modal-step .driver-popover-arrow {\n display: none !important;\n}\n\n.screenity-driver-modal-step .driver-popover.ScreenityOnboardingPopover,\n.screenity-driver-modal-step .ScreenityOnboardingPopover {\n position: fixed !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n margin: 0 !important;\n}\n\t.screenity-driver-modal-step .driver-popover.ScreenityOnboardingPopover,\n.screenity-driver-modal-step .ScreenityOnboardingPopover {\n max-width: 420px !important;\n padding: 26px !important;\n}\n\t/* Welcome icon */\n.screenity-driver-modal-step .screenity-welcome-emoji {\n font-size: 24px;\n line-height: 1;\n margin-bottom: 10px;\n}\n `;\n document.head.appendChild(style);\n};\n\nconst lowerRootContainerZIndex = (root) => {\n const container =\n find(root, \"#screenity-root-container\") ||\n root?.host ||\n document.getElementById(\"screenity-root-container\");\n if (!container) return () => {};\n const prevValue = container.style.zIndex;\n const prevPriority = container.style.getPropertyPriority(\"z-index\");\n container.style.setProperty(\"z-index\", \"10000\", \"important\");\n return () => {\n if (prevValue) {\n container.style.setProperty(\"z-index\", prevValue, prevPriority || \"\");\n } else {\n container.style.removeProperty(\"z-index\");\n }\n };\n};\n\nconst setToolbarCloseVisible = (root, visible) => {\n if (!root?.querySelectorAll) return;\n root.querySelectorAll(\".toolbar-controls\").forEach((node) => {\n if (visible) node.classList.add(\"open\");\n else node.classList.remove(\"open\");\n });\n};\n\nconst buildWelcomeStep = (copy) => ({\n id: STEP_IDS.WELCOME,\n // No element => no cutout highlight (acts like a modal when centered in onPopoverRender)\n popover: {\n title: copy.welcomeTitle,\n showButtons: [\"next\"],\n description: copy.welcomeDescription,\n },\n});\n\nconst buildToolbarStep = (element, copy) => ({\n id: STEP_IDS.TOOLBAR,\n element,\n popover: {\n title: copy.toolbarTitle,\n side: \"top\",\n align: \"center\",\n showButtons: [\"previous\", \"next\"],\n description: copy.toolbarDescription,\n },\n});\n\nconst buildCameraStep = (element, copy) => ({\n id: STEP_IDS.CAMERA,\n element,\n popover: {\n title: copy.cameraTitle,\n side: \"top\",\n align: \"center\",\n showButtons: [\"previous\", \"next\"],\n description: copy.cameraDescription,\n },\n});\n\nconst buildInstantStep = (element, copy) => ({\n id: STEP_IDS.INSTANT,\n element,\n popover: {\n title: copy.instantTitle,\n side: \"left\",\n align: \"center\",\n showButtons: [\"previous\", \"next\"],\n description: copy.instantDescription,\n },\n});\n\nconst shouldMarkSeen = (abortReason) =>\n abortReason == null || abortReason === \"dismissed\";\n\nconst destroyActive = (abortReason = \"external\") => {\n if (!activeRun) return;\n if (!activeRun.abortReason) activeRun.abortReason = abortReason;\n if (!activeDriver) {\n clearDriverUiState(activeRun.root);\n if (typeof activeRun.stopObserver === \"function\") activeRun.stopObserver();\n activeRun = null;\n onboardingInProgress = false;\n return;\n }\n try {\n activeDriver.destroy();\n } catch {}\n};\n\nconst setModalStep = (enabled) => {\n document.documentElement.classList.toggle(\n \"screenity-driver-modal-step\",\n enabled,\n );\n};\n\nconst startBlockingObserver = ({ root, getState }) => {\n const observer = new MutationObserver(() => {\n if (!activeDriver) return;\n const runtimeState = getState?.() || {};\n if (\n hasConflictSelectorsVisible(root) ||\n hasBlockingFlags(runtimeState) ||\n document.hidden\n ) {\n destroyActive(\"conflict\");\n }\n });\n observer.observe(document.documentElement, {\n childList: true,\n subtree: true,\n attributes: true,\n });\n return () => observer.disconnect();\n};\n\nconst addInteractionCancelListeners = (root, onCancel) => {\n const popup =\n find(root, \"#pro-onboarding-popup-container\") ||\n find(root, \".popup-container\");\n const target = popup || document;\n const handler = (event) => {\n if (event.type === \"keydown\" && event.key === \"Tab\") return;\n onCancel();\n };\n START_CANCEL_EVENTS.forEach((eventName) => {\n target.addEventListener(eventName, handler, { capture: true });\n });\n return () => {\n START_CANCEL_EVENTS.forEach((eventName) => {\n target.removeEventListener(eventName, handler, { capture: true });\n });\n };\n};\n\nconst resolveTourSteps = ({\n toolbarEl,\n cameraEl,\n instantEl,\n copy,\n includeCamera = false,\n}) => {\n const steps = [buildWelcomeStep(copy)];\n\n if (isElementVisible(toolbarEl)) steps.push(buildToolbarStep(toolbarEl, copy));\n if (includeCamera && isElementVisible(cameraEl)) {\n steps.push(buildCameraStep(cameraEl, copy));\n }\n if (isElementVisible(instantEl)) steps.push(buildInstantStep(instantEl, copy));\n\n return steps;\n};\n\nconst startDriver = ({ steps, root, getState, onFinish, copy }) => {\n if (!steps.length) return;\n ensureDriverStyles();\n restoreRootStyle = lowerRootContainerZIndex(root);\n document.documentElement.classList.add(\"screenity-driver-active\");\n\n activeRun = {\n root,\n cameraStepShown: false,\n abortReason: null,\n stopObserver: startBlockingObserver({ root, getState }),\n onFinish,\n };\n\n const d = driver({\n allowClose: true,\n overlayClickBehavior: \"close\",\n showProgress: true,\n popoverOffset: 18,\n stagePadding: 12,\n popoverClass: POPOVER_CLASS,\n doneBtnText: copy.doneBtnText,\n nextBtnText: copy.nextBtnText,\n prevBtnText: copy.prevBtnText,\n steps,\n onCloseClick: () => {\n destroyActive(\"dismissed\");\n },\n onHighlightStarted: (element, step) => {\n const isWelcome = step?.id === STEP_IDS.WELCOME;\n setModalStep(isWelcome);\n\n const isToolbarStep = step?.id === STEP_IDS.TOOLBAR;\n setToolbarCloseVisible(root, isToolbarStep);\n },\n onHighlighted: (element, step, options) => {\n if (step?.id === STEP_IDS.CAMERA && activeRun) {\n activeRun.cameraStepShown = true;\n }\n logStepState(\"highlighted\", step, options);\n },\n onPopoverRender: (popover, options) => {\n const step = options?.state?.activeStep || {};\n\n if (step.id === STEP_IDS.WELCOME && popover?.title) {\n // Only insert once\n if (\n !popover.title.parentElement?.querySelector(\n \".screenity-welcome-emoji\",\n )\n ) {\n const emoji = document.createElement(\"div\");\n emoji.className = \"screenity-welcome-emoji\";\n emoji.textContent = \"👋\";\n popover.title.parentElement.insertBefore(emoji, popover.title);\n }\n }\n if (\n step.id === STEP_IDS.TOOLBAR &&\n popover?.description &&\n !popover.description.querySelector(\"a\")\n ) {\n const desc = popover.description;\n desc.appendChild(document.createTextNode(\" \"));\n const link = document.createElement(\"a\");\n link.href = TOOLBAR_HELP_URL;\n link.target = \"_blank\";\n link.rel = \"noopener noreferrer\";\n link.textContent = copy.learnMoreLabel;\n desc.appendChild(link);\n }\n\n logStepState(\"popover_render\", options?.state?.activeStep, options);\n },\n onDestroyed: async (element, step, options) => {\n const run = activeRun;\n clearDriverUiState(root);\n if (run && typeof run.stopObserver === \"function\") run.stopObserver();\n\n activeDriver = null;\n activeRun = null;\n onboardingInProgress = false;\n\n logStepState(\"destroyed\", step, options);\n run?.onFinish?.({\n cameraStepShown: Boolean(run?.cameraStepShown),\n shouldMarkSeen: shouldMarkSeen(run?.abortReason),\n });\n },\n });\n\n activeDriver = d;\n d.drive();\n logStepState(\"drive_started\", steps[0], { state: d.getState?.() || {} });\n};\n\nexport const runProPopupOnboardingIfNeeded = async ({\n rootContext = null,\n isPro = false,\n isLoggedIn = false,\n popupOpen = false,\n cameraEnabled = false,\n pendingRecording = false,\n preparingRecording = false,\n recording = false,\n countdownActive = false,\n isCountdownVisible = false,\n forceStart = false,\n} = {}) => {\n const root = getRoot(rootContext);\n const state = {\n pendingRecording,\n preparingRecording,\n recording,\n countdownActive,\n isCountdownVisible,\n };\n const copy = getOnboardingText();\n\n if (!popupOpen || !isPro || !isLoggedIn) {\n clearScheduledStart();\n if (activeDriver) destroyActive(\"popup-closed\");\n return;\n }\n\n if (\n shouldSkip({\n root,\n popupOpen,\n isPro,\n isLoggedIn,\n state,\n })\n ) {\n clearScheduledStart();\n if (\n activeDriver &&\n (hasBlockingFlags(state) || hasConflictSelectorsVisible(root))\n ) {\n destroyActive(\"conflict\");\n }\n return;\n }\n\n if (await hasSeenOnboarding(CORE_KEY)) return;\n if (pendingStartTimer || onboardingInProgress || activeDriver) return;\n\n const startDelayMs = forceStart ? 0 : IDLE_START_DELAY_MS;\n const token = ++pendingStartToken;\n if (!forceStart) {\n cancelPendingStartListeners = addInteractionCancelListeners(root, () => {\n clearScheduledStart();\n });\n }\n\n pendingStartTimer = setTimeout(async () => {\n if (token !== pendingStartToken) return;\n clearScheduledStart();\n\n const latestSkip = shouldSkip({\n root,\n popupOpen,\n isPro,\n isLoggedIn,\n state,\n });\n if (latestSkip) return;\n if (await isRecordingNow()) return;\n if (await hasSeenOnboarding(CORE_KEY)) return;\n\n onboardingInProgress = true;\n\n const toolbarEl = await waitForElement(root, TOOLBAR_SELECTORS, 900);\n const cameraEl = await waitForElement(root, CAMERA_SELECTORS, 700);\n const instantPrimaryEl = await waitForElement(\n root,\n INSTANT_PRIMARY_SELECTORS,\n 900,\n );\n const instantEl =\n instantPrimaryEl ||\n (await waitForElement(root, INSTANT_FALLBACK_SELECTORS, 250));\n\n const includeCamera =\n cameraEnabled &&\n !(await hasSeenOnboarding(CAMERA_KEY)) &&\n isElementVisible(cameraEl);\n\n const steps = resolveTourSteps({\n toolbarEl,\n cameraEl,\n instantEl,\n copy,\n includeCamera,\n });\n\n if (!steps.length) {\n onboardingInProgress = false;\n return;\n }\n\n startDriver({\n steps,\n root,\n copy,\n getState: () => state,\n onFinish: async ({ cameraStepShown, shouldMarkSeen }) => {\n if (!shouldMarkSeen) return;\n await markOnboardingSeen(CORE_KEY);\n if (includeCamera || cameraStepShown) {\n await markOnboardingSeen(CAMERA_KEY);\n }\n },\n });\n }, startDelayMs);\n};\n\nexport const runProCameraOnboardingIfNeeded = async ({\n rootContext = null,\n isPro = false,\n isLoggedIn = false,\n popupOpen = false,\n cameraEnabled = false,\n pendingRecording = false,\n preparingRecording = false,\n recording = false,\n countdownActive = false,\n isCountdownVisible = false,\n} = {}) => {\n const root = getRoot(rootContext);\n const state = {\n pendingRecording,\n preparingRecording,\n recording,\n countdownActive,\n isCountdownVisible,\n };\n const copy = getOnboardingText();\n\n if (\n shouldSkip({\n root,\n popupOpen,\n isPro,\n isLoggedIn,\n state,\n })\n ) {\n if (\n activeDriver &&\n (hasBlockingFlags(state) || hasConflictSelectorsVisible(root))\n ) {\n destroyActive(\"conflict\");\n }\n return;\n }\n if (!cameraEnabled) return;\n if (await hasSeenOnboarding(CAMERA_KEY)) return;\n if (pendingStartTimer || onboardingInProgress || activeDriver) return;\n\n const cameraEl = await waitForElement(root, CAMERA_SELECTORS, 900);\n if (!isElementVisible(cameraEl)) return;\n\n setTimeout(() => {\n if (\n shouldSkip({\n root,\n popupOpen,\n isPro,\n isLoggedIn,\n state,\n })\n ) {\n return;\n }\n onboardingInProgress = true;\n startDriver({\n steps: [\n {\n id: STEP_IDS.CAMERA,\n element: cameraEl,\n popover: {\n title: copy.cameraTitle,\n side: \"top\",\n align: \"center\",\n showButtons: [\"next\"],\n description: copy.cameraDescription,\n },\n },\n ],\n root,\n copy,\n getState: () => state,\n onFinish: async ({ shouldMarkSeen }) => {\n if (!shouldMarkSeen) return;\n await markOnboardingSeen(CAMERA_KEY);\n },\n });\n }, 260);\n};\n" }, { "path": "src/pages/Content/popup/onboarding/storage.js", "content": "const ONBOARDING_SEEN_KEY = \"onboardingSeen\";\n\nexport const hasSeenOnboarding = async (key) => {\n try {\n const result = await chrome.storage.sync.get([ONBOARDING_SEEN_KEY]);\n const seen = result?.[ONBOARDING_SEEN_KEY];\n return Boolean(seen && typeof seen === \"object\" && seen[key] === true);\n } catch {\n return false;\n }\n};\n\nexport const markOnboardingSeen = async (key) => {\n try {\n const result = await chrome.storage.sync.get([ONBOARDING_SEEN_KEY]);\n const current =\n result?.[ONBOARDING_SEEN_KEY] &&\n typeof result[ONBOARDING_SEEN_KEY] === \"object\"\n ? result[ONBOARDING_SEEN_KEY]\n : {};\n await chrome.storage.sync.set({\n [ONBOARDING_SEEN_KEY]: {\n ...current,\n [key]: true,\n },\n });\n } catch {}\n};\n\nexport const resetOnboardingSeen = async (keys = []) => {\n try {\n const result = await chrome.storage.sync.get([ONBOARDING_SEEN_KEY]);\n const current =\n result?.[ONBOARDING_SEEN_KEY] &&\n typeof result[ONBOARDING_SEEN_KEY] === \"object\"\n ? { ...result[ONBOARDING_SEEN_KEY] }\n : {};\n\n if (Array.isArray(keys) && keys.length > 0) {\n keys.forEach((key) => {\n delete current[key];\n });\n } else {\n Object.keys(current).forEach((key) => {\n delete current[key];\n });\n }\n\n await chrome.storage.sync.set({\n [ONBOARDING_SEEN_KEY]: current,\n });\n } catch {}\n};\n" }, { "path": "src/pages/Content/popup/styles/_Popup.scss", "content": "@use \"../../styles/_variables\" as *;\n\n@use \"./layout/_PopupContainer.scss\";\n@use \"./layout/_Settings.scss\";\n@use \"./layout/_VideosTab.scss\";\n@use \"./layout/_Announcement.scss\";\n@use \"./layout/_Welcome\";\n@use \"./layout/_SettingsMenu.scss\";\n@use \"./components/_Dropdown.scss\";\n@use \"./components/_Tabs.scss\";\n@use \"./components/_Switch\";\n@use \"./components/_VideoItem\";\n@use \"./components/_MainButton\";\n@use \"./components/_BackgroundEffects\";\n@use \"./components/_RegionDimensions\";\n@use \"./components/_TimeSetter\";\n@use \"./components/_Tooltip\";\n" }, { "path": "src/pages/Content/popup/styles/components/_BackgroundEffects.scss", "content": "@use '../../../styles/_variables' as *;\n\n.background-effects-toggle-group {\n\tdisplay: flex;\n\theight: 40px;\n\twidth: 100%;\n\tgap: 8px;\n\tmargin-bottom: 8px;\n\tmargin-top: 8px;\n}\n.background-effect {\n\tdisplay: flex;\n\twidth: 40px;\n\theight: 40px;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 30px;\n\tposition: relative;\n\tcolor: #FFF;\n\n\tspan {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 12px;\n\t\tfont-weight: 600;\n\t\tz-index: 99999;\n\t\tfont-weight: 500;\n\t}\n\t&[data-state='on']::after {\n\t\tcontent: \"\";\n\t\tborder-radius: 50%;\n\t\tdisplay: block;\n\t\twidth: 46px;\n\t\theight: 46px;\n\t\tposition: absolute;\n\t\tborder: 2px solid $color-primary;\n\t\tbox-sizing: border-box;\n\t}\n\timg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t}\n\t&:hover:not([data-state='on']) {\n\t\tcursor: pointer;\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\tborder-radius: 50%;\n\t\tdisplay: block;\n\t\twidth: 46px;\n\t\theight: 46px;\n\t\tposition: absolute;\n\t\tborder: 2px solid $color-primary;\n\t\topacity: .5;\n\t\tbox-sizing: border-box;\n\t\t}\n\t}\n\t&:focus-visible {\n\t\tbox-shadow: $focus-border;\n\n\t}\n}" }, { "path": "src/pages/Content/popup/styles/components/_Dropdown.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.SelectTrigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n border-radius: $container-border-radius;\n line-height: 1;\n height: 44px;\n gap: 5px;\n background-color: $color-background;\n color: $color-text-primary;\n width: 100%;\n box-sizing: border-box;\n margin-top: $spacing-02;\n margin-bottom: $spacing-02;\n}\n.SelectTrigger:hover {\n box-shadow: $container-shadow-focus;\n cursor: pointer;\n}\n.SelectTrigger:focus {\n box-shadow: $focus-border !important;\n}\n.SelectTrigger[data-placeholder] {\n color: var(--violet9);\n}\n.SelectTrigger[data-state=\"open\"] {\n box-shadow: $focus-border;\n}\n\n.SelectValue {\n text-align: left;\n flex: 1;\n display: block;\n width: 100%;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n height: 100%;\n line-height: 44px;\n }\n}\n\n.SelectIconDrop,\n.SelectIconType {\n text-align: center;\n}\n.SelectIconType {\n padding-left: 6px;\n padding-right: 0px;\n}\n.SelectIconDrop {\n padding-right: $spacing-05;\n}\n.SelectTrigger[data-state=\"open\"] .SelectIconDrop img {\n transform: rotate(180deg);\n}\n\n.SelectContent {\n overflow: hidden;\n z-index: $z-index-max;\n width: var(--radix-select-trigger-width);\n max-height: var(--radix-select-content-available-height);\n font-family: $font-medium;\n background-color: white;\n border-radius: 15px;\n margin-top: $spacing-02;\n box-shadow: $container-shadow-focus;\n}\n.SelectItem {\n font-size: $font-size-normal;\n line-height: 1;\n color: var(--violet11);\n display: flex;\n align-items: center;\n height: 44px;\n padding-left: $spacing-05;\n padding-right: $spacing-05;\n color: $color-text-primary;\n position: relative;\n user-select: none;\n}\n.SelectItem[data-disabled] {\n color: $color-text-secondary;\n pointer-events: none;\n}\n.SelectItem[data-highlighted] {\n background: $color-light-grey;\n outline: none !important;\n}\n.SelectItem:hover {\n background: $color-light-grey;\n cursor: pointer;\n}\n\n.SelectSeparator {\n height: 1px;\n background-color: $color-border;\n width: calc(100% - $spacing-04 * 2);\n margin: auto;\n border-radius: $container-border-radius;\n margin-top: $spacing-02;\n margin-bottom: $spacing-02;\n}\n\n.SelectItemIndicator {\n position: absolute;\n right: $spacing-04;\n width: 24px;\n height: 24px;\n background: $color-primary;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.SelectScrollButton {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 25px;\n background-color: white;\n color: var(--violet11);\n cursor: default;\n}\n\n.SelectOff {\n background: $color-red-light;\n color: $color-red;\n padding-left: $spacing-04;\n padding-right: $spacing-04;\n padding-top: $spacing-03;\n padding-bottom: $spacing-03;\n margin-right: $spacing-02;\n border-radius: $container-border-radius;\n font-size: $font-size-small;\n font-weight: $font-weight-bold;\n}\n.SelectIconButton {\n border-radius: $container-border-radius;\n position: relative;\n padding: 8px;\n &:hover {\n background-color: $color-light-grey;\n }\n}\n" }, { "path": "src/pages/Content/popup/styles/components/_MainButton.scss", "content": "@use '../../../styles/_variables' as *;\n\n\n.main-button {\n\twidth: 100%;\n\theight: 45px;\n\tborder-radius: $container-border-radius;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tposition: relative;\n\tbox-sizing: border-box;\n\n\n\t.main-button-label {\n\t\tcolor: $color-text-contrast;\n\t\ttext-align: center;\n\t\tvertical-align: middle;\n\t\talign-items: center;\n\t}\n\t.main-button-shortcut {\n\t\tposition: absolute;\n\t\tfont-size: $font-size-small;\n\t\tright: $spacing-05;\n\t\tcolor: $color-text-contrast;\n\t\topacity: .7;\n\t}\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: .5;\n\t}\n}\n.main-button:focus {\n\tbox-shadow: $focus-border!important;\n}\n\n@property --x {\n syntax: '';\n inherits: false;\n initial-value: 35.44%;\n}\n@property --y {\n syntax: '';\n inherits: false;\n initial-value: 0%;\n}\n\n.recording-button {\n\tmargin-top: $spacing-03;\n\tfilter: $gradient-shadow-primary;\n\tbackground:radial-gradient(127.41% 127.78% at 35.44% 0%, #2BAEF8 23.13%, #3582F6 46.35%, #486DEF 74.48%, #7B9AEA 100%);\n\tanimation: 0;\n\tanimation: background-size 6s ease-in-out infinite;\n\tanimation-play-state: paused;\n\tposition: relative;\n\tz-index: 2;\n}\n@keyframes background-size {\n\t/* Animate scale and position in and out looping */\n\t0% {\n\t\tbackground-size: 100% 100%;\n\t\tbackground-position: 0% 0%;\n\t}\n\t50% {\n\t\tbackground-size: 150% 150%;\n\t\tbackground-position: 100% 0%;\n\n\t}\n\t100% {\n\t\tbackground-size: 100% 100%;\n\t\tbackground-position: 0% 0%;\n\t}\n}\n\n.recording-button:hover {\n\tanimation-play-state: running!important;\n}\n.recording-button:before {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: block;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tbox-sizing: border-box;\n\tborder-radius: $container-border-radius;\n\ttransition: all .25s ease-in-out;\n}\n.recording-button:hover:before {\n\tbox-shadow: 0px 0px 0px 4px rgba(52, 138, 247, 0.25);\n}\n@keyframes pulse-animation {\n\t0% {\n\t\tbox-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n\t}\n\t25% {\n\t\tbox-shadow: 0px 0px 0px 6px rgba(52, 138, 247, 0.25);\n\t}\n\t50% {\n\t\tbox-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n\t}\n\t100% {\n\t\tbox-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n\t}\n}\n@keyframes gradient-animation {\n\t0% {\n\t\t--x: 35.44%;\n\t\t--y: 0%;\n\t}\n\t25% {\n\t\t--x: 100%;\n\t\t--y: 30%;\n\t}\n\t50% {\n\t\t--x: 70%;\n\t\t--y: 100%;\n\t}\n\t75% {\n\t\t--x: 30%;\n\t\t--y: 90%;\n\t}\n\t100% {\n\t\t--x: 35.44%;\n\t\t--y: 0%;\n\t}\n}\n\n.dashboard-button {\n\tbackground: $color-text-primary;\n\tbox-shadow: 0px 0px 0px 0px rgba(41, 41, 47, 0.25);\n\ttransition: all .25s ease-in-out;\n}\n.dashboard-button:hover {\n\tbox-shadow: 0px 0px 0px 4px rgba(41, 41, 47, 0.25);\n}\n\n.alarm-time-button {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 15px;\n\tpadding: 4px 8px;\n\tposition: absolute;\n\tcolor: $color-text-contrast;\n\topacity: .7;\n\tfont-family: $font-medium;\n\tfont-size: 12px;\n\tleft: 6px;\n\n\tsvg {\n\t\tmargin-top: 4px;\n\t\tmargin-right: 4px;\n\t\twidth: 14px;\n\t}\n}" }, { "path": "src/pages/Content/popup/styles/components/_RegionDimensions.scss", "content": "@use '../../../styles/_variables' as *;\n\n.region-dimensions {\n\twidth: 100%;\n\tdisplay: flex;\n\tgap: 10px;\n\tmargin-top: 10px;\n\tmargin-bottom: 10px;\n}\n.region-input {\n\tflex: 1;\n\tposition: relative;\n\n\tinput {\n\t\tcolor: $color-text-primary!important;\n\t\tborder-radius: $container-border-radius;\n\t\theight: 40px;\n\t\tbox-sizing: border-box;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tpadding-left: 18px;\n\t\tpadding-right: 40px;\n\t\tfont-family: $font-medium;\n\t\tbackground-color: $color-background;\n\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t\tbox-shadow: $focus-border;\n\t\t}\n\t}\n\tspan {\n\t\tcolor: $color-text-secondary;\n\t\tfont-family: $font-medium;\n\t\tposition: absolute;\n\t\tright: 18px;\n\t\tbottom: 12px;\n\t\tuser-select: none;\n\t}\n}" }, { "path": "src/pages/Content/popup/styles/components/_Switch.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.SwitchRow {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 40px;\n\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n}\n.SwitchRow * {\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n}\n\n.SwitchRoot {\n width: 34px;\n height: 22px;\n background-color: $color-border;\n border-radius: 9999px;\n position: relative;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.SwitchRoot[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.SwitchRoot:focus {\n box-shadow: $focus-border;\n}\n.SwitchRoot[data-state=\"checked\"] {\n background-color: $color-primary;\n}\n.SwitchRoot:hover {\n cursor: pointer;\n}\n\n.SwitchThumb {\n display: block;\n width: 14px;\n height: 14px;\n background-color: white;\n border-radius: 9999px;\n box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);\n transition: transform 100ms;\n transform: translateX(4px);\n will-change: transform;\n}\n.SwitchThumb[data-state=\"checked\"] {\n transform: translateX(16px);\n}\n\n.Label {\n color: $color-text-secondary;\n display: inline-block !important;\n /* Ellipsis */\n text-overflow: clip;\n white-space: nowrap;\n\n &:hover {\n text-overflow: clip;\n }\n}\n\n.ExperimentalLabel {\n color: $color-text-contrast;\n font-size: 12px;\n background-color: $color-primary;\n border-radius: 15px;\n padding: 2px 8px;\n display: inline-block !important;\n margin-left: 8px;\n}\n\n.labelDropdownWrap {\n display: inline-block;\n vertical-align: middle;\n position: relative;\n border-radius: $container-border-radius;\n box-sizing: border-box;\n\n img {\n display: inline-block;\n margin-left: 6px;\n }\n .labelDropdown {\n display: inline-block;\n }\n &:hover {\n cursor: pointer;\n }\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n border-radius: $container-border-radius;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n margin-top: -4px;\n margin-left: -8px;\n }\n &:hover::after {\n border-color: #fff;\n }\n &:hover {\n background-color: #fff;\n }\n}\n.labelDropdownActive {\n .labelDropdownContent {\n display: block !important;\n }\n\n img {\n transform: rotate(180deg);\n }\n}\n.labelDropdownContent {\n position: absolute;\n background-color: $color-background;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 9999999999;\n border-radius: 15px;\n padding: 8px 0px;\n margin-top: 4px;\n border: 1px solid $color-border;\n display: none;\n\n .labelDropdownContentItem {\n color: $color-text-primary;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n &:hover {\n background-color: $color-light-grey;\n cursor: pointer;\n }\n }\n}\n" }, { "path": "src/pages/Content/popup/styles/components/_Tabs.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n/* Radix tabs navigation */\n/* reset */\nbutton,\nfieldset,\ninput {\n all: unset;\n}\n\n.TabsRoot {\n width: 100%;\n margin: auto;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n}\n.TabsList {\n margin: auto;\n flex-shrink: 0;\n display: flex;\n width: fit-content;\n align-items: center;\n}\n.hiddenTabs {\n display: none !important;\n pointer-events: none !important;\n user-select: none !important;\n opacity: 0 !important;\n height: 0 !important;\n overflow: hidden !important;\n transition: opacity 0.3s ease !important;\n}\n.TabsTrigger {\n padding-left: 14px;\n padding-right: 14px;\n color: $color-text-secondary;\n user-select: none;\n cursor: pointer;\n}\n.TabsTrigger[data-state=\"active\"] {\n color: $color-text-primary;\n}\n.TabsTrigger:focus-visible {\n position: relative;\n box-shadow: $focus-border !important;\n}\n.TabsTriggerSpacer {\n height: 50px;\n width: 1px;\n background: $color-border;\n flex-shrink: 0;\n margin-left: 8px;\n margin-right: 8px;\n}\n\n/* Content of the Radix tabs */\n.TabsContent {\n width: 100%;\n display: block;\n height: 100%;\n box-sizing: border-box;\n flex: 1 1 auto;\n\n &::after {\n content: \"\";\n display: block;\n clear: both;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 30px;\n background: linear-gradient(\n to bottom,\n transparent 0%,\n rgba(255, 255, 255, 0.5) 100%\n );\n pointer-events: none; /* Allow content behind the gradient to be clickable */\n }\n}\n.TabsContent:focus {\n outline: none;\n}\n.TabsContent:focus-visible {\n box-shadow: $focus-inner-border;\n}\n.TabsContent[data-state=\"inactive\"] {\n display: none;\n}\n\n/* Pill animation */\n.pill-anim {\n position: absolute;\n height: 32px;\n top: 0px;\n bottom: 0px;\n margin-top: auto;\n margin-bottom: auto;\n border-radius: 30px;\n background: $color-background;\n box-shadow: $container-shadow-focus;\n transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n/*\n.TabsList[data-value=\"record\"] {\n\t.pill-anim {\n\t\tleft: $spacing-03;\n\t\twidth: 102px;\n\t}\n}\n.TabsList[data-value=\"dashboard\"] {\n\t.pill-anim {\n\t\tleft: 109px;\n\t\twidth: 132px;\n\t}\n}\n*/\n\n/* Specific to the top level tabs */\n.TabsRoot.tl {\n height: calc(100% - 40px);\n margin-top: 40px;\n}\n.TabsList.tl {\n border-radius: 30px;\n background: $color-light-grey;\n padding: 6px;\n font-family: $font-bold;\n position: relative;\n}\n.TabsTrigger.tl {\n border-radius: 30px;\n background: transparent;\n height: 32px;\n display: flex;\n align-items: center;\n padding-left: 16px;\n padding-right: 17px;\n z-index: 2;\n position: relative;\n}\n.TabsTrigger.tl[data-state=\"inactive\"]:hover :before {\n content: \"\";\n position: absolute;\n display: block;\n box-sizing: border-box;\n height: 100%;\n width: calc(100% - 10px);\n margin-left: 5px;\n background: #edeef3;\n z-index: -2;\n left: 0px;\n border-radius: $container-border-radius;\n}\n.TabsTriggerIcon {\n width: 20px;\n height: 20px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n margin-right: $spacing-02;\n}\n\n/* Specific to recording tab context */\n.recording-ui {\n width: 100%;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n\n .TabsRoot {\n margin-top: $spacing-03;\n }\n .TabsList {\n width: 100%;\n border-bottom: $container-border;\n margin: auto;\n justify-content: center;\n }\n .TabsTrigger {\n padding-top: $spacing-03;\n padding-bottom: $spacing-04;\n box-sizing: border-box;\n position: relative;\n display: block;\n padding-left: 16px;\n padding-right: 16px;\n }\n .TabsTrigger:hover {\n background: $color-light-grey;\n border-top-right-radius: 15px;\n border-top-left-radius: 15px;\n }\n .TabsTrigger:focus-visible {\n border-radius: 10px 10px 0px 0px !important;\n }\n .TabsTrigger[data-state=\"active\"]::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 80%;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n height: 2px;\n border-radius: 30px;\n background: $color-primary;\n }\n .TabsTrigger[data-state=\"active\"] > .TabsTriggerLabel {\n color: $color-text-primary !important;\n }\n\n .TabsTriggerLabel {\n text-align: center;\n }\n .TabsTriggerIcon {\n width: 20px;\n height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n margin: auto;\n margin-bottom: $spacing-03;\n border-radius: 30px;\n }\n .TabsContent {\n background: $color-light-grey;\n padding: $spacing-05;\n border-bottom-left-radius: $container-border-radius;\n border-bottom-right-radius: $container-border-radius;\n max-height: calc(95vh - 200px);\n overflow-y: overlay;\n }\n span {\n display: block;\n }\n}\n\n.video-ui {\n width: 100%;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n\n .TabsRoot {\n margin-top: $spacing-03;\n }\n .TabsList {\n width: 100%;\n border-bottom: $container-border;\n margin: auto;\n justify-content: space-between;\n padding-left: $spacing-04;\n padding-right: $spacing-04;\n box-sizing: border-box;\n }\n .TabsTriggerWrap {\n display: flex !important;\n align-items: center;\n flex-direction: row;\n justify-content: left;\n position: relative;\n display: block;\n box-sizing: border-box;\n }\n .TabsTrigger {\n padding-top: $spacing-03;\n padding-bottom: $spacing-04;\n box-sizing: border-box;\n position: relative;\n display: block;\n padding-left: 20px;\n padding-right: 20px;\n }\n .TabsTrigger:hover {\n background: $color-light-grey;\n border-top-right-radius: 15px;\n border-top-left-radius: 15px;\n }\n .TabsTrigger:focus-visible {\n border-radius: 10px 10px 0px 0px !important;\n }\n .TabsTrigger[data-state=\"active\"]::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 80%;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n height: 2px;\n border-radius: 30px;\n background: $color-primary;\n }\n .TabsTrigger[data-state=\"active\"] > .TabsTriggerLabel {\n color: $color-text-primary !important;\n }\n .TabsTriggerLabel {\n text-align: center;\n }\n\n .TabsContent {\n background: $color-light-grey;\n border-bottom-left-radius: $container-border-radius;\n border-bottom-right-radius: $container-border-radius;\n }\n span {\n display: block;\n }\n\n .TabsSort {\n margin-right: $spacing-04;\n border-radius: $container-border-radius;\n padding-left: $spacing-03;\n padding-right: $spacing-03;\n padding-top: $spacing-03;\n padding-bottom: $spacing-03;\n margin-bottom: 5px;\n }\n .TabsSort:hover {\n cursor: pointer;\n background: $color-light-grey;\n }\n .TabsSortLabel {\n display: flex;\n flex-direction: row;\n justify-content: right;\n align-items: center;\n color: $color-text-secondary;\n white-space: nowrap;\n }\n .TabsSortLabel img {\n margin-left: $spacing-03;\n }\n .TabsSort:focus-visible {\n box-shadow: $focus-border;\n outline: none !important;\n }\n}\n\n.projectActiveBanner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n background-color: #29292f; /* dark background */\n color: white;\n border-radius: 100px; /* pill shape */\n padding: 10px 16px;\n font-weight: 600;\n font-size: 15px;\n line-height: 1.3;\n max-width: 80%;\n user-select: none;\n cursor: default;\n gap: 16px;\n top: 41px;\n z-index: 999999;\n margin: auto;\n left: 0;\n right: 0;\n position: absolute;\n}\n\n.projectActiveBannerLeft {\n /* text container */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.projectActiveBannerRight {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.projectActiveBannerDivider {\n width: 1px;\n height: 24px;\n background-color: #44444d; /* subtle divider color */\n}\n\n.projectActiveBannerClose {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.projectActiveBannerClose img {\n width: 14px;\n height: 14px;\n opacity: 0.6;\n\n &:hover {\n opacity: 1;\n }\n}\n" }, { "path": "src/pages/Content/popup/styles/components/_TimeSetter.scss", "content": "@use '../../../styles/_variables' as *;\n\n.time-set-parent {\n\twidth: 100%;\n\tdisplay: flex;\n\tgap: 10px;\n\tmargin-top: 10px;\n\tmargin-bottom: 10px;\n}\n.time-set-input {\n\tflex: 1;\n\tposition: relative;\n\n\tinput {\n\t\tborder-radius: $container-border-radius;\n\t\theight: 40px;\n\t\tbox-sizing: border-box;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tpadding-left: 18px;\n\t\tpadding-right: 40px;\n\t\tfont-family: $font-medium;\n\t\tbackground-color: $color-background;\n\t\t-webkit-appearance: textfield;\n -moz-appearance: textfield;\n appearance: textfield;\n\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\toutline: none;\n\t\t\t\t\t\tbox-shadow: $focus-border;\n\t\t\t\t\t}\n\n\t}\n\tspan {\n\t\tcolor: $color-text-secondary;\n\t\tfont-family: $font-medium;\n\t\tposition: absolute;\n\t\tright: 18px;\n\t\tbottom: 12px;\n\t\tuser-select: none;\n\t}\n}" }, { "path": "src/pages/Content/popup/styles/components/_Tooltip.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.TooltipContent {\n border-radius: $container-border-radius;\n background-color: $color-text-primary;\n padding: 10px 15px;\n font-size: 12px;\n line-height: 1;\n font-family: $font-medium;\n z-index: 99999999 !important;\n color: $color-text-contrast;\n box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n user-select: none;\n transition: opacity 0.3 ease-in-out !important;\n will-change: transform, opacity;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n\n.hide-tooltip {\n display: none !important;\n}\n\n.tooltip-tall {\n margin-bottom: 20px;\n}\n\n.tooltip-small {\n margin-bottom: 5px;\n}\n\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"top\"] {\n animation-name: slideDownAndFade;\n}\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"right\"] {\n animation-name: slideLeftAndFade;\n}\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"bottom\"] {\n animation-name: slideUpAndFade;\n}\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"left\"] {\n animation-name: slideRightAndFade;\n}\n\n@keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n#screenity-ui [data-radix-popper-content-wrapper] {\n z-index: $z-index-max !important;\n}\n\n.override {\n display: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n}\n" }, { "path": "src/pages/Content/popup/styles/components/_VideoItem.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.video-item-root {\n width: calc(100% - 2 * #{$spacing-03});\n border-radius: 15px;\n padding: $spacing-03;\n display: block;\n .video-item {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n .video-item-left {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n min-width: 0;\n justify-content: left;\n }\n .video-item-thumbnail {\n min-width: 48px;\n width: 48px;\n height: 38px;\n background: grey;\n border-radius: 5px;\n margin-right: $spacing-04;\n }\n .video-item-info {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: $spacing-02;\n }\n .video-item-info-title {\n color: $color-text-primary;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .video-item-info-date {\n margin-top: $spacing-02;\n color: $color-text-secondary;\n font-size: $font-size-small;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n}\n\n.video-item-root:hover {\n cursor: pointer;\n background: #e9eaee;\n}\n.video-item-root:focus-visible {\n box-shadow: $focus-border;\n outline: none !important;\n}\n\n/* Actions */\n.video-item-right {\n display: flex;\n align-items: center;\n justify-content: right;\n gap: $spacing-03;\n min-width: max-content;\n opacity: 0;\n\n .copy-link {\n background: $color-background;\n height: 32px;\n width: 32px;\n border-radius: 10px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n z-index: 999999;\n }\n .copy-link:focus-visible {\n box-shadow: $focus-border;\n outline: none !important;\n }\n .more-actions {\n height: 32px;\n width: 32px;\n background: $color-background;\n text-align: center;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .more-actions:focus-visible {\n box-shadow: $focus-border;\n outline: none !important;\n }\n}\n\n.video-item-root:hover,\n.video-item-root:focus-visible {\n .video-item-right {\n opacity: 1;\n }\n}\n\n// .video-item-right:focus-within {\n// opacity: 1;\n// }\n" }, { "path": "src/pages/Content/popup/styles/layout/_Announcement.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.announcement {\n width: 100%;\n top: 0px;\n left: 0px;\n padding-bottom: 24px;\n}\n.announcement-wrap {\n width: 85%;\n margin: auto;\n}\n.announcement-hero {\n width: 100%;\n margin-bottom: 16px;\n margin-top: 44px;\n\n img {\n width: 100%;\n border-radius: 15px;\n }\n}\n.announcement-details {\n text-align: center;\n}\n.announcement-title {\n font-family: $font-bold;\n font-size: 16px;\n color: $color-text-primary;\n letter-spacing: -0.8px;\n margin-bottom: 12px;\n text-align: center;\n}\n.announcement-description {\n font-family: $font-medium;\n font-size: 14px;\n color: $color-text-secondary;\n text-align: center;\n margin-bottom: 24px;\n line-height: 1.6;\n letter-spacing: -0.6px;\n\n a {\n text-decoration: none !important;\n color: $color-primary !important;\n cursor: pointer !important;\n }\n}\n.announcement-cta {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n height: 44px;\n border-radius: $container-border-radius;\n background: $gradient-primary;\n color: $color-text-contrast;\n font-family: $font-medium;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n animation: background-size 6s ease-in-out infinite;\n animation-play-state: paused;\n filter: $gradient-shadow-primary;\n\n &:hover {\n animation-play-state: running !important;\n }\n}\n@keyframes background-size {\n /* Animate scale and position in and out looping */\n 0% {\n background-size: 100% 100%;\n background-position: 0% 0%;\n }\n 50% {\n background-size: 150% 150%;\n background-position: 100% 0%;\n }\n 100% {\n background-size: 100% 100%;\n background-position: 0% 0%;\n }\n}\n" }, { "path": "src/pages/Content/popup/styles/layout/_PopupContainer.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.popup-container:hover .popup-controls {\n opacity: 1;\n}\n.open {\n opacity: 1 !important;\n}\n.popup-drag-head {\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100px;\n z-index: 1;\n border-radius: 30px 30px 0px 0px;\n opacity: 0;\n}\n.popup-controls {\n opacity: 0;\n position: absolute;\n top: -10px;\n right: -10px;\n box-sizing: border-box;\n border-radius: $container-border-radius;\n border: 1px solid $color-border;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n z-index: 999999999;\n background: rgba(240, 238, 238, 1);\n backdrop-filter: blur(10px);\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 6px;\n padding-bottom: 6px;\n transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n .popup-control {\n svg {\n color: $color-icon;\n margin-bottom: -2px;\n }\n }\n .popup-grab {\n cursor: grab;\n }\n\n .popup-close {\n cursor: pointer;\n }\n}\n\n.tempimg {\n height: 100%;\n opacity: 1;\n position: fixed;\n right: 0px;\n top: 20px;\n}\n\n.container {\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0px;\n left: 0px;\n z-index: 999999999;\n font-family: $font-medium;\n font-size: $font-size-normal;\n}\n.ToolbarDragging .popup-container {\n transform: scale(1.02);\n\n filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.4)) !important;\n}\n\n/* Recording popup parent */\n.popup-container {\n width: 356px;\n position: fixed;\n top: 32px;\n right: 28px;\n z-index: $z-index-max;\n filter: $container-shadow;\n pointer-events: all;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96),\n filter 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n}\n.popup-container::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n transition: 2s;\n background: $color-background;\n background-clip: content-box;\n -webkit-mask-image: radial-gradient(\n circle at center top,\n transparent 31px,\n #000 31px\n );\n mask-image: radial-gradient(\n circle at center top,\n transparent 31px,\n #000 31px\n );\n background-position: center bottom 50px;\n border-radius: $container-border-radius;\n position: absolute;\n top: 0px;\n left: 0px;\n}\n\n/*\n.popup-shape {\n\twidth: 100%;\n\theight: 100%;\n\tbackground: $color-background;\n\tbackground-clip: content-box;\n -webkit-mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n background-position: center bottom 50px;\n\tborder-radius: $container-border-radius;\n\tposition: relative;\n}\n*/\n\n.popup-cutout {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n text-align: center;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n top: -22px;\n left: 0px;\n right: 0px;\n margin: auto;\n}\n.popup-cutout img {\n text-align: center;\n margin: auto;\n display: inline-block;\n width: 100%;\n border-radius: 50%;\n}\n\n/* Recording nav area */\n.popup-nav {\n width: 100%;\n position: relative;\n}\n\n/* Recording content area */\n.popup-content {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: $container-border-radius;\n overflow: hidden;\n}\n\n.waveform {\n width: 100%;\n margin-top: $spacing-04;\n margin-bottom: $spacing-04;\n}\n\n.popup-content-divider {\n width: 100%;\n height: 1px;\n background: $color-border;\n margin-top: $spacing-04;\n margin-bottom: $spacing-04;\n}\n\n.popup-warning {\n display: flex;\n width: calc(100% + 32px);\n height: 80px;\n justify-content: space-between;\n align-items: center;\n position: relative;\n overflow: hidden;\n background-color: rgba(56, 126, 247, 0.1);\n margin-left: -16px;\n margin-top: -16px;\n margin-bottom: 8px;\n\n .popup-warning-right {\n color: $color-primary;\n font-family: $font-medium;\n width: 90px;\n }\n}\n.popup-warning-left,\n.popup-warning-right {\n width: 50px;\n display: flex;\n align-items: center;\n text-align: center;\n height: 100%;\n justify-content: center;\n\n svg {\n color: $color-primary;\n }\n}\n.popup-warning-right {\n cursor: pointer;\n}\n.popup-warning-middle {\n flex: 1;\n\n .popup-warning-title {\n font-family: $font-bold;\n color: $color-text-primary;\n }\n .popup-warning-description {\n font-family: $font-medium;\n color: $color-text-secondary;\n margin-top: 4px;\n }\n}\n.permission-button {\n background: rgba(48, 128, 248, 0.1);\n border-radius: $container-border-radius;\n color: $color-primary;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 44px;\n gap: 8px;\n margin-top: $spacing-03;\n margin-bottom: $spacing-03;\n\n &:first-child {\n margin-top: $spacing-02 !important;\n }\n &:last-child {\n margin-bottom: $spacing-02 !important;\n }\n &:hover {\n background: rgba(48, 128, 248, 0.15);\n cursor: pointer;\n }\n\n svg {\n color: $color-primary;\n }\n}\n\n.HelpSection {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n bottom: -40px;\n background: #edeef2;\n border-radius: 30px;\n padding: 4px 12px;\n text-align: center;\n font-family: $font-medium;\n color: $color-text-secondary;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: fit-content;\n\n .HelpIcon {\n margin-top: 3px;\n }\n\n &:hover {\n cursor: pointer;\n background: #fefeff;\n }\n}\n" }, { "path": "src/pages/Content/popup/styles/layout/_Settings.scss", "content": "@use '../../../styles/_variables' as *;\n\n.CollapsibleTrigger {\n\tmargin-top: $spacing-04;\n\tfont-weight: $font-bold;\n\tpadding-top: $spacing-02;\n\tpadding-bottom: $spacing-02;\n\tpadding-left: $spacing-04;\n\tpadding-right: $spacing-04;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\ttext-align: center;\n\tdisplay: block;\n\tborder-radius: $container-border-radius;\n}\n.CollapsibleTrigger:focus-visible {\n\tbox-shadow: $focus-border;\n}\n.CollapsibleLabel {\n\tcolor: $color-text-secondary;\n\tfont-weight: $font-bold;\n\ttext-align: center;\n\tdisplay: inline-block;\n}\n.CollapsibleLabel img {\n\tmargin-left: 4px;\n}\n.CollapsibleTrigger:hover {\n\tcursor: pointer;\n\tbackground: #FFF;\n}\n.CollapsibleRoot[data-state='open'] > .CollapsibleTrigger > .CollapsibleLabel img {\n\ttransform: scaleY(-1);\n\tmargin-bottom: 2px;\n}" }, { "path": "src/pages/Content/popup/styles/layout/_SettingsMenu.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.DropdownMenuContent,\n.DropdownMenuSubContent {\n min-width: 200px;\n background-color: white;\n margin-top: 4px;\n margin-right: 8px;\n padding-top: 12px;\n padding-bottom: 12px;\n border-radius: 15px;\n z-index: 99999;\n font-family: $font-medium;\n color: $color-text-primary;\n box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),\n 0px 10px 20px -15px rgba(22, 23, 24, 0.2);\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n.DropdownMenuContent[data-side=\"top\"],\n.DropdownMenuSubContent[data-side=\"top\"] {\n animation-name: slideDownAndFade;\n}\n.DropdownMenuContent[data-side=\"right\"],\n.DropdownMenuSubContent[data-side=\"right\"] {\n animation-name: slideLeftAndFade;\n}\n.DropdownMenuContent[data-side=\"bottom\"],\n.DropdownMenuSubContent[data-side=\"bottom\"] {\n animation-name: slideUpAndFade;\n}\n.DropdownMenuContent[data-side=\"left\"],\n.DropdownMenuSubContent[data-side=\"left\"] {\n animation-name: slideRightAndFade;\n}\n.ItemIndicator,\n.ItemIndicatorArrow {\n position: absolute;\n right: $spacing-04;\n width: 18px;\n height: 18px;\n background: $color-primary;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.ItemIndicatorArrow {\n background: transparent !important;\n}\n\n.DropdownMenuItem,\n.DropdownMenuCheckboxItem,\n.DropdownMenuRadioItem,\n.DropdownMenuSubTrigger {\n font-size: 14px;\n line-height: 1;\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 5px;\n position: relative;\n padding-left: 22px;\n padding-right: 22px;\n user-select: none;\n outline: none;\n\n &:hover {\n background-color: $color-light-grey !important;\n cursor: pointer;\n }\n}\n.DropdownMenuSubTrigger[data-state=\"open\"] {\n background-color: var(--violet-4);\n color: var(--violet-11);\n}\n.DropdownMenuItem[data-disabled],\n.DropdownMenuCheckboxItem[data-disabled],\n.DropdownMenuRadioItem[data-disabled],\n.DropdownMenuSubTrigger[data-disabled] {\n color: $color-text-secondary !important;\n cursor: not-allowed;\n background-color: $color-light-grey !important;\n}\n.DropdownMenuItem[data-highlighted],\n.DropdownMenuCheckboxItem[data-highlighted],\n.DropdownMenuRadioItem[data-highlighted],\n.DropdownMenuSubTrigger[data-highlighted] {\n background-color: var(--violet-9);\n color: var(--violet-1);\n}\n\n.DropdownMenuLabel {\n padding-left: 25px;\n font-size: 12px;\n line-height: 25px;\n color: var(--mauve-11);\n}\n\n.DropdownMenuSeparator {\n height: 1px;\n background-color: var(--violet-6);\n margin: 5px;\n}\n\n.DropdownMenuItemIndicator {\n position: absolute;\n left: 0;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.DropdownMenuArrow {\n fill: white;\n}\n\n.IconButton {\n font-family: inherit;\n border-radius: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-top: 4px;\n cursor: pointer;\n\n svg {\n color: #9797a4;\n }\n}\n.IconButton:hover {\n background-color: var(--violet-3);\n}\n.IconButton:focus {\n}\n\n.RightSlot {\n margin-left: auto;\n padding-left: 20px;\n color: var(--mauve-11);\n}\n[data-highlighted] > .RightSlot {\n color: white;\n}\n[data-disabled] .RightSlot {\n color: var(--mauve-8);\n}\n\n@keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n" }, { "path": "src/pages/Content/popup/styles/layout/_VideosTab.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.video-ui {\n position: relative;\n /* Blur the background */\n // &:before {\n // \tcontent: '';\n // \tposition: absolute;\n // \tbackdrop-filter: blur(5px);\n // \ttop: 0px;\n // \tleft: 0px;\n // \twidth: 100%;\n // \theight: 100%;\n // \tbackground: rgba(255, 255, 255, 0.5);\n // \tz-index: 999;\n // }\n}\n.blurred {\n /* Blur the background */\n &:before {\n content: \"\";\n position: absolute;\n backdrop-filter: blur(5px);\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.5);\n z-index: 999;\n }\n}\n.videos-list {\n padding-bottom: 10px !important;\n max-height: calc(96vh - 260px);\n overflow-y: overlay;\n padding: $spacing-05;\n}\n.bottom-section {\n width: 100%;\n bottom: 0px;\n left: 0px;\n box-sizing: border-box;\n padding-top: $spacing-03 !important;\n padding-bottom: $spacing-04 !important;\n z-index: 999999;\n padding: $spacing-05;\n}\n.ModalSoon {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: fit-content;\n width: 70%;\n padding: 20px $spacing-05;\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n border-radius: $container-border-radius;\n background: white;\n box-shadow: 0px 4px 100px 0px rgba(0, 0, 0, 0.15);\n z-index: 9999999;\n}\n.strong {\n box-shadow: 0px 4px 100px -20px rgba(0, 0, 0, 0.75) !important;\n}\n.ModalSoonEmoji {\n font-size: 20px;\n margin-bottom: $spacing-03;\n}\n.ModalSoonTitle {\n font-weight: 700;\n color: $color-text-primary;\n margin-bottom: $spacing-03;\n text-align: center;\n}\n.ModalSoonDescription {\n text-align: center;\n color: $color-text-secondary;\n text-align: center;\n margin-bottom: $spacing-03;\n}\n.ModalSoonButton {\n margin-top: $spacing-03;\n color: $color-text-contrast;\n text-align: center;\n border-radius: 30px;\n background: $gradient-primary;\n padding: $spacing-03 $spacing-05;\n\n &:hover {\n cursor: pointer;\n }\n}\n.spinner-container,\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 0;\n color: #6e7684;\n font-size: 14px;\n}\n\n.spinner {\n width: 32px;\n height: 32px;\n border: 3px solid rgba(0, 0, 0, 0.1);\n border-top-color: #6e7684;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n margin-bottom: 10px;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n" }, { "path": "src/pages/Content/popup/styles/layout/_Welcome.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.welcome-title {\n font-family: $font-bold;\n font-size: 18px;\n color: $color-text-primary;\n letter-spacing: -0.8px;\n margin-bottom: 12px;\n text-align: center;\n}\n.welcome-description {\n font-family: $font-medium;\n font-size: 16px;\n color: $color-text-secondary;\n text-align: center;\n margin-bottom: 20px;\n line-height: 1.6;\n letter-spacing: -0.6px;\n\n a {\n text-decoration: none !important;\n color: $color-primary !important;\n cursor: pointer !important;\n }\n}\n.welcome-cta {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n height: 44px;\n border-radius: $container-border-radius;\n background: white;\n border: 1px solid $color-border;\n color: $color-text-primary;\n font-family: $font-medium;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n filter: drop-shadow(0px 1px 2px rgba(53, 87, 98, 0.1));\n}\n.welcome-content {\n background: $color-light-grey;\n border-bottom-left-radius: $container-border-radius;\n border-bottom-right-radius: $container-border-radius;\n max-height: calc(95vh - 300px);\n overflow-y: overlay;\n padding-top: 20px;\n padding-bottom: 20px;\n border-top: 1px solid #e8e8e8;\n}\n.welcome-content-wrap {\n width: 85%;\n margin: auto;\n}\n.welcome-content-title {\n font-family: $font-bold;\n font-size: 14px;\n color: $color-text-primary;\n margin-bottom: 8px;\n margin-top: 8px;\n text-align: center;\n line-height: 1.4;\n}\n.welcome-feature-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 12px;\n}\n.welcome-feature-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.welcome-feature-icon {\n width: 20px;\n height: 20px;\n background: rgba(48, 128, 248, 0.1);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.welcome-feature-icon-text {\n font-size: 14px;\n color: $color-text-secondary;\n font-family: $font-medium;\n}\n.welcome-video {\n margin: 25px 0 !important;\n width: 100%;\n}\n.video-wrapper {\n border-radius: 10px;\n}\n.welcome-support {\n font-family: $font-medium;\n font-size: 12px;\n color: $color-text-secondary !important;\n text-align: center;\n margin-top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n text-decoration: none !important;\n\n img {\n width: 20px;\n }\n}\n" }, { "path": "src/pages/Content/region/Region.jsx", "content": "import React, { useRef, useContext, useEffect } from \"react\";\nimport { Rnd } from \"react-rnd\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst ResizableBox = () => {\n const regionRef = useRef(null);\n const parentRef = useRef(null);\n const cropRef = useRef(null);\n const recordingRef = useRef(null);\n const [contentState, setContentState] = useContext(contentStateContext);\n\n useEffect(() => {\n recordingRef.current = contentState.recording;\n }, [contentState.recording]);\n\n // Check for contentState.regionDimensions to update the Rnd component width and height\n useEffect(() => {\n if (contentState.recordingType != \"region\") return;\n if (!contentState.customRegion) return;\n if (regionRef.current === null) return;\n if (\n contentState.regionWidth === 0 ||\n contentState.regionWidth === undefined\n )\n return;\n if (\n contentState.regionHeight === 0 ||\n contentState.regionHeight === undefined\n )\n return;\n if (contentState.regionX === undefined) return;\n if (contentState.regionY === undefined) return;\n if (contentState.fromRegion) return;\n\n // Get parent element dimensions\n const parentWidth = parentRef.current.offsetWidth;\n const parentHeight = parentRef.current.offsetHeight;\n\n // Calculate maximum size that fits within parent element\n const maxWidth = parentWidth - contentState.regionX;\n const maxHeight = parentHeight - contentState.regionY;\n const newWidth = Math.min(contentState.regionWidth, maxWidth);\n const newHeight = Math.min(contentState.regionHeight, maxHeight);\n\n // Update content state with new size\n setContentState((prevContentState) => ({\n ...prevContentState,\n regionWidth: newWidth,\n regionHeight: newHeight,\n fromRegion: true,\n }));\n\n chrome.storage.local.set({\n regionWidth: newWidth,\n regionHeight: newHeight,\n });\n\n regionRef.current.updateSize({\n width: newWidth,\n height: newHeight,\n x: contentState.regionX,\n y: contentState.regionY,\n });\n setCropTarget();\n }, [\n contentState.recordingType,\n contentState.customRegion,\n contentState.regionWidth,\n contentState.regionHeight,\n contentState.regionX,\n contentState.regionY,\n ]);\n\n const setCropTarget = async () => {\n const target = await CropTarget.fromElement(cropRef.current);\n setContentState((prevContentState) => ({\n ...prevContentState,\n cropTarget: target,\n }));\n };\n\n const handleResize = (e, direction, ref, delta, position) => {\n // Get numeric values of width and height\n const width = parseInt(ref.style.width, 10);\n const height = parseInt(ref.style.height, 10);\n\n // Update content state\n setContentState((prevContentState) => ({\n ...prevContentState,\n regionWidth: width,\n regionHeight: height,\n regionX: position.x,\n regionY: position.y,\n fromRegion: true,\n }));\n\n chrome.storage.local.set({\n regionWidth: width,\n regionHeight: height,\n regionX: position.x,\n regionY: position.y,\n });\n setCropTarget();\n };\n\n const handleMove = (e, d) => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n regionX: d.x,\n regionY: d.y,\n fromRegion: true,\n }));\n chrome.storage.local.set({\n regionX: d.x,\n regionY: d.y,\n });\n setCropTarget();\n };\n\n useEffect(() => {\n setCropTarget();\n }, []);\n\n useEffect(() => {\n const parent = parentRef.current;\n if (!parent) return;\n\n const handleContextMenu = (e) => {\n if (e.target.className.includes(\"resize-handle\")) {\n e.preventDefault();\n }\n };\n\n parent.addEventListener(\"contextmenu\", handleContextMenu);\n return () => {\n parent.removeEventListener(\"contextmenu\", handleContextMenu);\n };\n }, []);\n\n // Shadow DOM event forwarding: mouse events from inside the Shadow DOM\n // get retargeted to the shadow host and stop at `document` — they never\n // reach `window`. re-resizable listens on `window`, so we forward the\n // events that originate from our shadow container.\n useEffect(() => {\n const shadowHostId = \"screenity-root-container\";\n\n const forwardToWindow = (e) => {\n if (\n e.target?.id === shadowHostId ||\n e.target?.closest?.(\"#\" + shadowHostId)\n ) {\n window.dispatchEvent(\n new MouseEvent(e.type, {\n bubbles: false,\n cancelable: true,\n clientX: e.clientX,\n clientY: e.clientY,\n screenX: e.screenX,\n screenY: e.screenY,\n button: e.button,\n buttons: e.buttons,\n })\n );\n }\n };\n\n document.addEventListener(\"mouseup\", forwardToWindow);\n document.addEventListener(\"mousemove\", forwardToWindow);\n return () => {\n document.removeEventListener(\"mouseup\", forwardToWindow);\n document.removeEventListener(\"mousemove\", forwardToWindow);\n };\n }, []);\n\n return (\n {\n // showExtension false, as long as not clicking on the region\n if (\n e.target.className.indexOf(\"resize-handle\") === -1 &&\n e.target.className.indexOf(\"react-draggable\") === -1 &&\n e.target.className.indexOf(\"region-rect\") === -1\n ) {\n // setContentState((prevContentState) => ({\n // ...prevContentState,\n // showExtension: false,\n // }));\n }\n }}\n ref={parentRef}\n >\n \n
\n
\n ,\n top:
,\n topRight:
,\n right:
,\n bottomRight:
,\n bottom:
,\n bottomLeft:
,\n left:
,\n }}\n bounds=\"parent\"\n onResizeStop={handleResize}\n onDragStop={handleMove}\n disableDragging={\n contentState.recording ||\n contentState.drawingMode ||\n contentState.blurMode\n } // Disable dragging when recording\n enableResizing={\n !contentState.recording &&\n !contentState.drawingMode &&\n !contentState.blurMode\n } // Disable resizing when recording\n >\n \n \n
\n );\n};\n\nexport default ResizableBox;\n" }, { "path": "src/pages/Content/region/components/RegionHandles.jsx", "content": "import React, { useState, useContext, useRef, useEffect } from \"react\";\nimport { Rnd } from \"react-rnd\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst ResizableBox = () => {\n return (\n
\n \n \n
\n \n ),\n top: (\n \n ),\n topRight: (\n \n ),\n right: (\n \n ),\n bottomRight: (\n \n ),\n bottom: (\n \n ),\n bottomLeft: (\n \n ),\n left: (\n \n ),\n }}\n >\n \n \n
\n );\n};\n\nexport default ResizableBox;\n" }, { "path": "src/pages/Content/region/layout/CameraToolbar.jsx", "content": "import React, { useState, useEffect, useContext } from \"react\";\n\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\n\nimport { CameraCloseIcon, CameraMoreIcon } from \"../../toolbar/components/SVG\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst CameraToolbar = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n return (\n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraActive: false,\n }));\n chrome.storage.local.set({ cameraActive: false });\n }}\n >\n \n \n \n \n \n \n );\n};\n\nexport default CameraToolbar;\n" }, { "path": "src/pages/Content/region/layout/CameraWrap.jsx", "content": "import React, { useEffect, useContext, useRef, useState } from \"react\";\n\nimport { Rnd } from \"react-rnd\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nimport CameraToolbar from \"./CameraToolbar\";\nimport ResizeHandle from \"../components/ResizeHandle\";\n\nconst CameraWrap = (props) => {\n const [contentState, setContentState] = React.useContext(contentStateContext);\n const cameraRef = React.useRef();\n const [cx, setCx] = useState(200);\n const [cy, setCy] = useState(200);\n const [w, setW] = useState(200);\n const [h, setH] = useState(200);\n\n const updateUIPosition = () => {\n const ref =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-draggable\");\n const circleCenterX =\n ref.getBoundingClientRect().left + ref.getBoundingClientRect().width / 2;\n const circleCenterY =\n ref.getBoundingClientRect().top + ref.getBoundingClientRect().height / 2;\n const circleRadius = ref.getBoundingClientRect().width / 2;\n const squareBottomRightX =\n ref.getBoundingClientRect().left + ref.getBoundingClientRect().width;\n const squareBottomRightY =\n ref.getBoundingClientRect().top + ref.getBoundingClientRect().height;\n const handle =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-resize\");\n const toolbar =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-toolbar\");\n\n // Calculate 'r' using the formula we derived earlier\n const c = Math.sqrt(\n Math.pow(circleCenterX - squareBottomRightX, 2) +\n Math.pow(circleCenterY - squareBottomRightY, 2)\n );\n const a = circleRadius / Math.sqrt(2);\n const r = (c + Math.sqrt(c ** 2 + 16 * a ** 2)) / 4;\n\n // Calculate the handle position\n const x = r - r / Math.sqrt(2);\n const y = r - r / Math.sqrt(2);\n\n // Position the handle element to the calculated coordinates\n handle.style.bottom = `${y - handle.getBoundingClientRect().width / 2}px`;\n handle.style.right = `${x - handle.getBoundingClientRect().height / 2}px`;\n toolbar.style.top = `${y - toolbar.getBoundingClientRect().width / 2}px`;\n toolbar.style.left = `${x - toolbar.getBoundingClientRect().height / 2}px`;\n };\n\n const saveDimensions = () => {\n const ref =\n props.shadowRef.current.shadowRoot.querySelector(\".camera-draggable\");\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraDimensions: {\n size: ref.getBoundingClientRect().width,\n x: ref.getBoundingClientRect().x,\n y: ref.getBoundingClientRect().y,\n },\n }));\n chrome.storage.local.set({\n cameraDimensions: {\n size: ref.getBoundingClientRect().width,\n x: ref.getBoundingClientRect().x,\n y: ref.getBoundingClientRect().y,\n },\n });\n };\n\n useEffect(() => {\n if (!cameraRef.current) return;\n if (!props.shadowRef.current.shadowRoot.querySelector(\".camera-resize\"))\n return;\n if (!props.shadowRef.current.shadowRoot.querySelector(\".camera-toolbar\"))\n return;\n\n updateUIPosition();\n }, [cameraRef.current]);\n\n return (\n
\n ,\n }}\n minHeight={150}\n minWidth={150}\n enableResizing={{\n bottom: false,\n bottomRight: true,\n bottomLeft: false,\n left: false,\n right: false,\n top: false,\n topRight: false,\n topLeft: false,\n }}\n onResize={(e, direction, ref, delta, position) => {\n updateUIPosition();\n }}\n onResizeStop={(e, direction, ref, delta, position) => {\n saveDimensions();\n }}\n onDragStop={(node, x, y) => {\n saveDimensions();\n }}\n lockAspectRatio={1}\n bounds={\"window\"}\n >\n
\n \n \n \n
\n );\n};\n\nexport default CameraWrap;\n" }, { "path": "src/pages/Content/region/styles/_Region.scss", "content": "@use '../../styles/_variables' as *;\n\n.box-hole {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999999999;\n}\n.resize-handle {\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: white;\n border: 2px solid rgba(0, 0, 0, .5);\n box-sizing: border-box;\n}\n.resize-handle.top-left {\n\tbottom: 0;\n left: 0;\n\ttop: 0;\n\tright: 0;\n\tmargin: auto;\n cursor: nwse-resize;\n}\n.resize-handle.top {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n cursor: ns-resize;\n}\n.resize-handle.top-right {\n\tbottom: 0;\n left: 0;\n\ttop: 0;\n\tright: 0;\n\tmargin: auto;\n cursor: nesw-resize;\n}\n.resize-handle.right {\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n.resize-handle.bottom-right {\n\tbottom: 0;\n left: 0;\n\ttop: 0;\n\tright: 0;\n\tmargin: auto;\n cursor: nwse-resize;\n}\n.resize-handle.bottom {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n cursor: ns-resize;\n}\n.resize-handle.bottom-left {\n bottom: 0;\n left: 0;\n\ttop: 0;\n\tright: 0;\n\tmargin: auto;\n cursor: nesw-resize;\n}\n.resize-handle.left {\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n.region-recording * {\n\tpointer-events: none!important;\n}" }, { "path": "src/pages/Content/region/styles/layout/_CameraToolbar.scss", "content": "@use '../../../styles/_variables' as *;\n\n.camera-toolbar {\n\tdisplay: flex;\n\talign-items: center;\n padding-left: 4px;\n\tpadding-right: 4px;\n\ttransition: opacity .25s cubic-bezier(.61,.11,.08,.96);\n\tmin-width: max-content;\n\tbackground-color: rgba(30, 30, 30, .8);\n\tbox-shadow: 0 2px 10px rgba(0, 0, 0, .15);\n\theight: 28px;\n\tposition: absolute;\n\tleft: 10px;\n\ttop: 10px;\n\tborder-radius: $container-border-radius;\n\tbackdrop-filter: blur(10px);\n\tz-index: $z-index-max;\n\topacity: 0;\n\tborder: 3px solid rgba(255, 255, 255, .2);\n}\n.camera-draggable:hover {\n\t.camera-toolbar, .camera-resize {\n\t\topacity: 1!important;\n\t}\n}\n.camera-toolbar:hover, .camera-resize:hover {\n\topacity: 1!important;\n}\n\n.CameraToolbarSeparator {\n width: 1px;\n\theight: 18px;\n background-color: rgba(255, 255, 255, .3);\n margin: 0 4px;\n}\n.CameraToggleItem, .CameraToolbarButton {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: #000;\n height: 22px;\n\twidth: 22px;\n\ttext-align: center;\n font-size: 13px;\n line-height: 1;\n\tborder-radius: 50%;\n\ttransition: background-color .25s ease-in-out;\n\tbackground-color: rgba(124, 139, 165, 0);\n\n\tsvg {\n\t\tcolor: $color-icon;\n\t}\n\n\t&:hover {\n\t\tbackground-color: rgba(124, 139, 165, 0.2)!important;\n\t\tcursor: pointer;\n\t}\n\n\t&:disabled {\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t&[data-state='on'] {\n\t\tcolor: #FFF;\n\n\t\tsvg {\n\t\t\tcolor: #FFF;\n\t\t}\n\n\t}\n}\n\n\n.CameraToggleItem:hover, .CameraToggleButton:hover {\n\tcursor: pointer;\n}\n.CameraToggleItem:focus-visible, .CameraToggleButton:focus-visible {\n position: relative;\n box-shadow: $focus-border;\n}\n\n.CameraToggleGroup {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.CameraToggleGroup, .CameraToolbarSeparator {\n\tdisplay: none;\n}" }, { "path": "src/pages/Content/region/styles/layout/_CameraWrap.scss", "content": "@use '../../../styles/_variables' as *;\n\n.camera-draggable {\n\twidth: 100%;\n\theight: 100%;\n\ttransform-origin: left top;\n\tborder-radius: 50%;\n}\n.camera-grab {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\tborder-radius: 50%;\n\tz-index: 99999999!important;\n\tcursor: grab;\n}\n.camera-flipped {\n\ttransform: scaleX(-1);\n}" }, { "path": "src/pages/Content/shortcuts/Shortcuts.jsx", "content": "import React, { useEffect, useContext, useRef } from \"react\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\nimport { undoCanvas, redoCanvas, saveCanvas } from \"../canvas/modules/History\";\n\nconst Shortcuts = ({ shortcuts }) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const contentStateRef = useRef(contentState);\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n /* For the record, this is the shortcuts object:\n\tshortcuts: {\n \"start-recording\": \"ctrl+shift+1\",\n \"stop-recording\": \"ctrl+shift+2\",\n \"pause-recording\": \"ctrl+shift+3\",\n \"resume-recording\": \"ctrl+shift+4\",\n \"dismiss-recording\": \"ctrl+shift+5\",\n \"restart-recording\": \"ctrl+shift+6\",\n \"toggle-drawing-mode\": \"ctrl+shift+7\",\n },\n\t*/\n\n // Set up all the hotkeys programmatically from the shortcuts object, without using useEffect\n\n /*\n useHotkeys(shortcuts[\"toggle-drawing-mode\"], () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n drawingMode: !prevContentState.drawingMode,\n }));\n });\n */\n\n // in-app shortcuts for screenity tools\n useEffect(() => {\n const getDeepActiveElement = () => {\n let active = document.activeElement;\n while (active && active.shadowRoot && active.shadowRoot.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active;\n };\n\n const isEditableElement = (element) => {\n if (!element) return false;\n if (element.isContentEditable) return true;\n const tag = element.tagName ? element.tagName.toLowerCase() : \"\";\n return tag === \"input\" || tag === \"textarea\" || tag === \"select\";\n };\n\n const isTextEditingActive = () => {\n const state = contentStateRef.current;\n if (state?.tool !== \"text\") return false;\n const activeObj = state?.canvas?.getActiveObject?.();\n return Boolean(activeObj && activeObj.isEditing);\n };\n\n const shouldHandleShortcut = (event) => {\n const state = contentStateRef.current;\n if (!state?.drawingMode && !state?.blurMode) return false;\n if (event.altKey || event.ctrlKey || event.metaKey) return false;\n\n const active = getDeepActiveElement();\n if (isEditableElement(active)) return false;\n if (isTextEditingActive()) return false;\n\n return true;\n };\n\n const getDigitKey = (event) => {\n if (event.code && event.code.startsWith(\"Digit\")) {\n return event.code.replace(\"Digit\", \"\");\n }\n if (event.code && event.code.startsWith(\"Numpad\")) {\n return event.code.replace(\"Numpad\", \"\");\n }\n if (event.key >= \"0\" && event.key <= \"9\") {\n return event.key;\n }\n return null;\n };\n\n const setTool = (tool, nextShape) => {\n setContentState((prev) => ({\n ...prev,\n tool,\n ...(nextShape ? nextShape : {}),\n }));\n };\n\n const clearDrawings = () => {\n const state = contentStateRef.current;\n if (!state?.canvas) return;\n state.canvas.clear();\n state.canvas.renderAll();\n state.canvas.requestRenderAll();\n saveCanvas(state, setContentState);\n };\n\n const clearBlurMasks = () => {\n const blurredElements = document.querySelectorAll(\".screenity-blur\");\n blurredElements.forEach((element) => {\n element.classList.remove(\"screenity-blur\");\n });\n };\n\n const getShadowRoot = () =>\n contentStateRef.current?.shadowRef?.shadowRoot || null;\n\n const toggleColorPicker = () => {\n const shadowRoot = getShadowRoot();\n const trigger = shadowRoot\n ? shadowRoot.querySelector(\"[data-color-trigger]\")\n : document.querySelector(\"[data-color-trigger]\");\n if (trigger) {\n trigger.click();\n }\n };\n\n const openImagePicker = () => {\n const shadowRoot = getShadowRoot();\n const fileInput = shadowRoot\n ? shadowRoot.querySelector('[data-image-upload=\"true\"]')\n : document.querySelector('[data-image-upload=\"true\"]');\n if (fileInput) {\n fileInput.click();\n }\n };\n\n const deriveCursorMode = (effects, fallback) => {\n if (effects.length === 0) return \"none\";\n if (effects.length === 1) return effects[0];\n return fallback || effects[0] || \"none\";\n };\n\n const clearCursorEffects = () => {\n setContentState((prev) => ({\n ...prev,\n cursorEffects: [],\n cursorMode: \"none\",\n }));\n chrome.storage.local.set({\n cursorEffects: [],\n cursorMode: \"none\",\n });\n };\n\n const toggleCursorEffect = (effect) => {\n const state = contentStateRef.current;\n const current = Array.isArray(state.cursorEffects)\n ? state.cursorEffects\n : [];\n const next = current.includes(effect)\n ? current.filter((item) => item !== effect)\n : [...current, effect];\n const nextMode = deriveCursorMode(next, effect);\n\n setContentState((prev) => ({\n ...prev,\n cursorEffects: next,\n cursorMode: nextMode,\n }));\n chrome.storage.local.set({\n cursorEffects: next,\n cursorMode: nextMode,\n });\n };\n\n const handleKeyDown = (event) => {\n const state = contentStateRef.current;\n if (state?.drawingMode && (event.ctrlKey || event.metaKey)) {\n const key = event.key.toLowerCase();\n if (key === \"z\" && !event.shiftKey) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n undoCanvas(state, setContentState);\n return;\n }\n if ((key === \"z\" && event.shiftKey) || key === \"y\") {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n redoCanvas(state, setContentState);\n return;\n }\n }\n\n if (!shouldHandleShortcut(event)) return;\n const digitKey = getDigitKey(event);\n if (!digitKey) return;\n\n let handled = true;\n if (state?.drawingMode) {\n switch (digitKey) {\n case \"1\":\n setTool(\"select\");\n break;\n case \"2\":\n setTool(\"pen\");\n break;\n case \"3\":\n setTool(\"highlighter\");\n break;\n case \"4\":\n setTool(\"eraser\");\n break;\n case \"5\":\n toggleColorPicker();\n break;\n case \"6\":\n setTool(\"text\");\n break;\n case \"7\":\n setTool(\"shape\", { shape: \"rectangle\", shapeFill: false });\n break;\n case \"8\":\n setTool(\"arrow\");\n break;\n case \"9\":\n openImagePicker();\n break;\n case \"0\":\n clearDrawings();\n break;\n default:\n handled = false;\n }\n } else {\n switch (digitKey) {\n case \"0\":\n if (state?.blurMode) {\n clearBlurMasks();\n }\n clearCursorEffects();\n break;\n case \"1\":\n toggleCursorEffect(\"target\");\n break;\n case \"2\":\n toggleCursorEffect(\"highlight\");\n break;\n case \"3\":\n toggleCursorEffect(\"spotlight\");\n break;\n default:\n handled = false;\n }\n }\n if (handled) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown, true);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown, true);\n };\n }, []);\n\n // Push to talk (while Alt/Option + Shift + J key is pressed enable microphone, disable on key up)\n useEffect(() => {\n const handleKeyDown = (event) => {\n if (!contentStateRef.current.pushToTalk) return;\n if (event.code === \"KeyU\" && event.altKey && event.shiftKey) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: true,\n }));\n\n chrome.storage.local.set({\n micActive: true,\n });\n\n chrome.runtime.sendMessage({\n type: \"set-mic-active-tab\",\n active: true,\n defaultAudioInput: contentState.defaultAudioInput,\n });\n }\n };\n\n const handleKeyUp = (event) => {\n if (!contentStateRef.current.pushToTalk) return;\n if (event.code === \"KeyU\" && event.altKey && event.shiftKey) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: false,\n }));\n\n chrome.storage.local.set({\n micActive: false,\n });\n\n chrome.runtime.sendMessage({\n type: \"set-mic-active-tab\",\n active: false,\n defaultAudioInput: contentState.defaultAudioInput,\n });\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n window.addEventListener(\"keyup\", handleKeyUp);\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n window.removeEventListener(\"keyup\", handleKeyUp);\n };\n }, []);\n\n return <>;\n};\n\nexport default Shortcuts;\n" }, { "path": "src/pages/Content/styles/_variables.scss", "content": "@mixin font($font-family, $font-file) {\n @font-face {\n font-family: $font-family;\n src: url($font-file + \".ttf\") format(\"truetype\");\n font-weight: normal;\n font-style: normal;\n }\n}\n\n@include font(\n \"Satoshi-Light\",\n \"chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Light\"\n);\n@include font(\n \"Satoshi-Medium\",\n \"chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Medium\"\n);\n@include font(\n \"Satoshi-Bold\",\n \"chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Bold\"\n);\n@include font(\n \"Gloria Hallelujah\",\n \"chrome-extension://__MSG_@@extension_id__/assets/fonts/GloriaHallelujah-Regular\"\n);\n\n/* Colors */\n$color-background: #fff;\n$color-light-grey: #f6f7fb;\n$color-primary: #3080f8;\n$color-border: #e8e8e8;\n$color-text-contrast: #fff;\n$color-text-primary: #29292f;\n$color-text-secondary: #6e7684;\n$color-red: #d2234d;\n$color-red-light: #faf0f4;\n$color-primary-transparent: rgba(48, 128, 248, 0.1);\n$color-icon: #9797a4;\n\n/* Font */\n//$font-size-normal: 0.875rem;\n//$font-size-small: 0.75rem;\n$font-size-normal: 14px;\n$font-size-detail: 0.8rem;\n$font-size-small: 12px;\n$font-weight-bold: 700;\n$font-weight-normal: 500;\n$font-weight-light: 400;\n$font-light: \"Satoshi-Light\", sans-serif;\n$font-medium: \"Satoshi-Medium\", sans-serif;\n$font-regular: \"Satoshi-Regular\", sans-serif;\n$font-bold: \"Satoshi-Bold\", sans-serif;\n\n/* Spacing */\n/*\n$spacing-01: 0.125rem;\n$spacing-02: 0.25rem;\n$spacing-03: 0.5rem;\n$spacing-04: 0.75rem;\n$spacing-05: 1rem;\n*/\n$spacing-01: 2px;\n$spacing-02: 4px;\n$spacing-03: 8px;\n$spacing-04: 12px;\n$spacing-05: 16px;\n\n/* Container */\n$container-border-radius: 30px;\n$container-border: 1px solid $color-border;\n$container-shadow: drop-shadow(0px 4px 100px rgba(0, 0, 0, 0.35));\n$container-shadow-focus: 2px 2px 10px rgba(0, 0, 0, 0.1);\n$container-soft-shadow: 0 4px 20px rgb(38 38 52 / 8%);\n\n/* Gradients */\n$gradient-primary: radial-gradient(\n 117.41% 117.78% at 35.44% 0%,\n #2baef8 23.13%,\n #3582f6 46.35%,\n #486def 74.48%,\n #7b9aea 100%\n);\n$gradient-shadow-primary: drop-shadow(0px 4px 20px rgba(86, 123, 218, 0.5));\n\n/* Events */\n$focus-border: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n$focus-inner-border: inset 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n\n/* Z-index */\n$z-index-max: 99999999999;\n" }, { "path": "src/pages/Content/styles/app.css", "content": "@font-face {\n font-family: \"Satoshi-Light\";\n src: url(\"chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Light.ttf\") format(\"truetype\");\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: \"Satoshi-Medium\";\n src: url(\"chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Medium.ttf\") format(\"truetype\");\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: \"Satoshi-Bold\";\n src: url(\"chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Bold.ttf\") format(\"truetype\");\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: \"Gloria Hallelujah\";\n src: url(\"chrome-extension://__MSG_@@extension_id__/assets/fonts/GloriaHallelujah-Regular.ttf\") format(\"truetype\");\n font-weight: normal;\n font-style: normal;\n}\n/* Colors */\n/* Font */\n/* Spacing */\n/*\n$spacing-01: 0.125rem;\n$spacing-02: 0.25rem;\n$spacing-03: 0.5rem;\n$spacing-04: 0.75rem;\n$spacing-05: 1rem;\n*/\n/* Container */\n/* Gradients */\n/* Events */\n/* Z-index */\n/* reset */\na,\nbutton {\n all: unset;\n}\n\niframe {\n width: 100%;\n height: 100%;\n position: fixed;\n overflow: scroll;\n z-index: -9999;\n top: 0px;\n left: 0px;\n border: 0px;\n pointer-events: all !important;\n}\n\n.container {\n pointer-events: none !important;\n}\n\n.visually-hidden-toolbar {\n opacity: 0 !important;\n visibility: hidden !important;\n pointer-events: none !important;\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n}\n\n.toolbar-controls {\n opacity: 0;\n cursor: pointer;\n position: absolute;\n top: -10px;\n right: -10px;\n box-sizing: border-box;\n border-radius: 30px;\n border: 1px solid #e8e8e8;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n z-index: 99999999999999;\n background: rgb(240, 238, 238);\n backdrop-filter: blur(10px);\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 6px;\n padding-bottom: 6px;\n transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n}\n.toolbar-controls.open {\n opacity: 1 !important;\n pointer-events: auto;\n}\n.toolbar-controls .popup-control svg {\n color: #9797a4;\n margin-bottom: -2px;\n}\n\n.ToolbarBounds {\n position: fixed;\n top: 0px;\n left: 0px;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 10px solid #3080f8;\n pointer-events: none;\n transform: scale(1.2);\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s ease-in-out;\n}\n\n.ToolbarBounds.ToolbarShake {\n transform: scale(1);\n opacity: 0.4;\n}\n\n.react-draggable {\n pointer-events: all;\n}\n\n.ToolbarShake .react-draggable {\n width: 100%;\n height: 100%;\n}\n\n.ToolbarElastic {\n transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.ToolbarShake .ToolbarRoot {\n animation: subtleshake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n animation-iteration-count: infinite !important;\n background-color: white !important;\n}\n\n.ToolbarDragging .ToolbarRoot {\n transform: scale(1.02);\n}\n.ToolbarDragging .ToolbarRoot::after {\n filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.5));\n}\n\n@keyframes shake {\n 0% {\n transform: translate(1px, 1px) rotate(0deg);\n }\n 20% {\n transform: translate(-3px, 0px) rotate(1deg);\n }\n 30% {\n transform: translate(3px, 2px) rotate(0deg);\n }\n 40% {\n transform: translate(1px, -1px) rotate(1deg);\n }\n 50% {\n transform: translate(-1px, 2px) rotate(-1deg);\n }\n 60% {\n transform: translate(-3px, 1px) rotate(0deg);\n }\n 70% {\n transform: translate(3px, 1px) rotate(-1deg);\n }\n 80% {\n transform: translate(-1px, -1px) rotate(1deg);\n }\n 90% {\n transform: translate(1px, 2px) rotate(0deg);\n }\n 100% {\n transform: translate(1px, -2px) rotate(-1deg);\n }\n}\n@keyframes subtleshake {\n 0% {\n transform: translate(0px, 0px) rotate(0deg);\n }\n 10% {\n transform: translate(-1px, 1px) rotate(1deg);\n }\n 20% {\n transform: translate(-1px, -1px) rotate(-1deg);\n }\n 30% {\n transform: translate(1px, 0px) rotate(0deg);\n }\n 40% {\n transform: translate(-1px, 1px) rotate(-1deg);\n }\n 50% {\n transform: translate(1px, -1px) rotate(1deg);\n }\n 60% {\n transform: translate(-1px, 1px) rotate(-1deg);\n }\n 70% {\n transform: translate(-1px, -1px) rotate(1deg);\n }\n 80% {\n transform: translate(1px, 1px) rotate(0deg);\n }\n 90% {\n transform: translate(0px, -1px) rotate(-1deg);\n }\n 100% {\n transform: translate(-1px, 1px) rotate(1deg);\n }\n}\n.ToolbarTransparent {\n opacity: 0;\n}\n.ToolbarTransparent:hover {\n opacity: 1;\n}\n\n.ToolbarHoverZone {\n display: inline-block;\n position: relative;\n padding: 4px;\n width: -moz-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: fit-content;\n}\n\n.ToolbarRoot {\n display: flex;\n align-items: center;\n padding-left: 10px;\n transition: opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), transform 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n min-width: -moz-max-content;\n min-width: max-content;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n padding-right: 10px;\n height: 48px;\n position: absolute;\n bottom: 20px;\n left: 20px;\n border-radius: 30px;\n}\n.ToolbarRoot::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: #fff;\n z-index: -9999999;\n position: absolute;\n left: 0px;\n top: 0px;\n border-radius: 30px;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n transition: filter 0.2s ease-in-out;\n}\n\n.ForceTransparent {\n opacity: 0 !important;\n}\n\n.ToolbarRecordingControls {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #f6f7fb;\n border-radius: 30px;\n font-family: \"Satoshi-Medium\", sans-serif;\n height: calc(100% - 12px);\n padding-left: 2px;\n padding-right: 2px;\n}\n\n.ToolbarRecordingTime {\n margin-right: 4px;\n width: 42px;\n color: #29292f;\n font-size: 13px;\n line-height: 1;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n}\n\n.TimerWarning {\n color: #ff4c4c; /* or add a pulsing effect */\n font-weight: bold;\n animation: pulse 1s infinite alternate;\n}\n\n@keyframes pulse {\n from {\n opacity: 1;\n }\n to {\n opacity: 0.6;\n }\n}\n.ToolbarToggleGroup {\n display: flex;\n align-items: center;\n}\n\n.ToolbarToggleWrap {\n flex: 1 1 auto;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex: 0 0 auto;\n width: 32px;\n height: 32px;\n display: inline-flex;\n line-height: 1;\n align-items: center;\n justify-content: center;\n}\n\n.ToolbarToggleItem,\n.ToolbarModeItem,\n.ToolbarModeItemSingle,\n.ToolbarLink,\n.ToolbarButton {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #000;\n height: 32px;\n width: 32px;\n text-align: center;\n font-size: 13px;\n line-height: 1;\n border-radius: 50%;\n transition: background-color 0.25s ease-in-out;\n background-color: rgba(124, 139, 165, 0);\n}\n.ToolbarToggleItem svg,\n.ToolbarModeItem svg,\n.ToolbarModeItemSingle svg,\n.ToolbarLink svg,\n.ToolbarButton svg {\n color: #9797a4;\n}\n.ToolbarToggleItem:disabled,\n.ToolbarModeItem:disabled,\n.ToolbarModeItemSingle:disabled,\n.ToolbarLink:disabled,\n.ToolbarButton:disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n background: none !important;\n}\n.ToolbarToggleItem.resume svg,\n.ToolbarModeItem.resume svg,\n.ToolbarModeItemSingle.resume svg,\n.ToolbarLink.resume svg,\n.ToolbarButton.resume svg {\n color: #f7387d !important;\n}\n\n.ToolbarToggleItem:hover,\n.ToolbarModeItem:hover,\n.ToolbarModeItemSingle:hover,\n.ToolbarLink:hover,\n.ToolbarButton:hover {\n cursor: pointer;\n background-color: rgba(124, 139, 165, 0.1) !important;\n}\n\n.ToolbarToggleItem:focus-visible,\n.ToolbarModeItemSingle:focus-visible,\n.ToolbarModeItem:focus-visible,\n.ToolbarLink:focus-visible,\n.ToolbarButton:focus-visible {\n position: relative;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.ToolbarModeItemSingle {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n}\n.ToolbarModeItemSingle:first-child {\n margin-left: 0;\n}\n.ToolbarModeItemSingle[data-state=on] {\n background: rgba(120, 192, 114, 0.1);\n}\n.ToolbarModeItemSingle[data-state=on] svg {\n color: #78c072;\n}\n.ToolbarModeItemSingle[data-state=on]::before {\n transform: translateY(0px) scale(1) !important;\n opacity: 1 !important;\n}\n\n.ToolbarModeItem {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n}\n.ToolbarModeItem:first-child {\n margin-left: 0;\n}\n.ToolbarModeItem::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 50%;\n border-radius: 80px 80px 0% 0%;\n box-sizing: border-box;\n position: absolute;\n top: -16px;\n left: 0;\n z-index: -999999;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s ease-in-out;\n transform: translateY(5px) scale(0) !important;\n border-right: 3px solid white;\n border-top: 9px solid white;\n border-left: 3px solid white;\n background-color: transparent;\n opacity: 0;\n}\n.ToolbarModeItem[data-state=on] {\n background: rgba(56, 126, 247, 0.1);\n}\n.ToolbarModeItem[data-state=on] svg {\n color: #3080f8;\n}\n.ToolbarModeItem[data-state=on]::before {\n transform: translateY(0px) scale(1) !important;\n opacity: 1 !important;\n}\n\n.ToolbarBottom .ToolbarModeItem::before {\n transform: translateY(-5px) scale(0.5) !important;\n bottom: -16px;\n top: unset !important;\n border-bottom: 9px solid white !important;\n border-radius: 0% 0% 80px 80px !important;\n border-top: none !important;\n}\n.ToolbarBottom .ToolbarModeItem[data-state=on]::before {\n transform: translateY(0px) scale(1) !important;\n}\n\n.ToolbarToggleItem {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n}\n.ToolbarToggleItem:first-child {\n margin-left: 0;\n}\n.ToolbarToggleItem[data-state=on] {\n background: radial-gradient(117.41% 117.78% at 35.44% 0%, #2baef8 23.13%, #3582f6 46.35%, #486def 74.48%, #7b9aea 100%);\n color: #fff;\n}\n.ToolbarToggleItem[data-state=on] svg {\n color: #fff;\n}\n\n.ToolbarSeparator {\n width: 1px;\n height: 19px;\n background-color: #e8e8e8;\n margin: 0 8px;\n}\n\n.ToolbarLink {\n background-color: transparent;\n color: var(--mauve11);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n}\n\n.ToolbarLink:hover {\n background-color: transparent;\n cursor: pointer;\n}\n\n.ToolbarPaused {\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 10px solid #f7387d;\n pointer-events: none;\n opacity: 0.5;\n}\n.ToolbarPaused.hidden {\n display: none;\n}\n\n.OnboardingArrow {\n position: absolute;\n z-index: 99999999999;\n width: -moz-max-content;\n width: max-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n left: -69px;\n bottom: 23px;\n transform: rotate(12deg);\n pointer-events: none !important;\n}\n\n.OnboardingText {\n font-size: 32px;\n color: #9797a4;\n font-family: \"Gloria-Hallelujah\", sans-serif !important;\n}\n\n.ArrowShape {\n margin-left: -15px;\n}\n\n.driver-popover.ScreenityOnboardingPopover,\n.ScreenityOnboardingPopover,\n.onboarding-popover {\n border-radius: 30px !important;\n background: #fff !important;\n color: #29292f !important;\n font-family: \"Satoshi-Regular\", sans-serif !important;\n box-shadow: 0 4px 20px rgba(38, 38, 52, 0.08) !important;\n padding: 20px !important;\n max-width: 340px !important;\n font-size: 14px !important;\n z-index: 99999999999 !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-title,\n.ScreenityOnboardingPopover .driver-popover-title,\n.onboarding-popover .driver-popover-title {\n font-size: 1rem !important;\n font-family: \"Satoshi-Bold\", sans-serif !important;\n margin-bottom: 12px !important;\n color: #29292f !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-description,\n.ScreenityOnboardingPopover .driver-popover-description,\n.onboarding-popover .driver-popover-description {\n font-size: 14px !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n color: #6e7684 !important;\n line-height: 1.5 !important;\n margin-bottom: 18px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-description a,\n.ScreenityOnboardingPopover .driver-popover-description a,\n.onboarding-popover .driver-popover-description a {\n color: #3080f8 !important;\n font-family: \"Satoshi-Bold\", sans-serif !important;\n text-decoration: none !important;\n cursor: pointer !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-close-btn,\n.ScreenityOnboardingPopover .driver-popover-close-btn,\n.onboarding-popover .driver-popover-close-btn {\n display: none !important;\n top: 14px;\n right: 12px;\n color: #6e7684 !important;\n font-size: 1.5rem !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow,\n.ScreenityOnboardingPopover .driver-popover-arrow,\n.onboarding-popover .driver-popover-arrow {\n width: 0px;\n height: 0px;\n background: none !important;\n box-shadow: none !important;\n box-sizing: border-box;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-top,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-top,\n.onboarding-popover .driver-popover-arrow-side-top {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-top: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-bottom,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-bottom,\n.onboarding-popover .driver-popover-arrow-side-bottom {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-bottom: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-left,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-left,\n.onboarding-popover .driver-popover-arrow-side-left {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-left: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-right,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-right,\n.onboarding-popover .driver-popover-arrow-side-right {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-right: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-start,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-start,\n.onboarding-popover .driver-popover-arrow-align-start {\n top: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-end,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-end,\n.onboarding-popover .driver-popover-arrow-align-end {\n bottom: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-left,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-left,\n.onboarding-popover .driver-popover-arrow-align-left {\n left: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-right,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-right,\n.onboarding-popover .driver-popover-arrow-align-right {\n right: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-progress-text,\n.ScreenityOnboardingPopover .driver-popover-progress-text,\n.onboarding-popover .driver-popover-progress-text {\n font-size: 0.8rem !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n color: #6e7684 !important;\n opacity: 0.7 !important;\n margin-top: 2px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer,\n.ScreenityOnboardingPopover .driver-popover-footer,\n.onboarding-popover .driver-popover-footer {\n display: flex !important;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 16px;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns {\n gap: 6px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn {\n background-color: #3080f8 !important;\n color: white !important;\n border: none !important;\n padding: 10px 14px !important;\n border-radius: 30px !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n font-weight: 500 !important;\n cursor: pointer !important;\n font-size: 0.875rem !important;\n text-shadow: none !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn:hover,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn:hover,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn:hover {\n background: rgb(23.3341121495, 112.8668224299, 247.1658878505) !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn {\n background-color: transparent !important;\n color: #29292f !important;\n border: 1px solid #e8e8e8 !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn:hover,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn:hover,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn:hover {\n background: #f6f7fb !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn {\n background-color: transparent !important;\n color: #6e7684 !important;\n}\n\nbody {\n background-color: white !important;\n}\n\n.DrawingToolbar.show-toolbar {\n opacity: 1 !important;\n pointer-events: all !important;\n transform: scale(1) translate(calc(-50% + 16px), 0px) !important;\n}\n\n.ToolbarBottom .DrawingToolbar {\n transform-origin: 0 -100% !important;\n}\n\n.DrawingToolbar {\n opacity: 0;\n pointer-events: none;\n align-items: center;\n display: flex;\n min-width: -moz-max-content;\n min-width: max-content;\n padding-left: 10px;\n padding-right: 10px;\n border-radius: 6px;\n box-shadow: 0 2px 10px var(--blackA7);\n position: absolute;\n height: 44px;\n left: 0px;\n transform: translate(calc(-50% + 16px));\n transform-origin: 0 100%;\n border-radius: 15px;\n z-index: 99999999;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n transform: scale(0.5) translate(calc(-50% + 16px), 10px);\n}\n.DrawingToolbar::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n filter: blur(10px);\n opacity: 0.15;\n background-color: #000;\n position: absolute;\n left: 0px;\n top: 0px;\n z-index: -999999999999999 !important;\n}\n.DrawingToolbar::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: rgba(242, 241, 242, 0.85);\n backdrop-filter: blur(5px);\n background-clip: content-box;\n -webkit-mask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);\n mask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);\n background-position: center bottom 50px;\n border-radius: 15px;\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: -2;\n}\n.DrawingToolbar .ToolbarSeparator {\n background-color: #dddcdc;\n}\n\n.ToolbarTop .DrawingToolbar {\n bottom: 49px !important;\n}\n\n.ToolbarBottom .DrawingToolbar {\n top: 48px !important;\n}\n.ToolbarBottom .DrawingToolbar::before {\n -webkit-mask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px) !important;\n mask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px);\n background-position: center bottom 50px !important;\n}\n\n.ColorPicker {\n width: 14px;\n height: 14px;\n background: #ED6C3A;\n border: 1.5px solid rgba(0, 0, 0, 0.2);\n border-radius: 50%;\n}\n\n.shapeToolbar {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 10px var(--blackA7);\n left: 165px;\n padding: 4px;\n opacity: 0;\n bottom: 45px;\n transform: translateY(calc(-50% + 16px));\n transform-origin: 0 100%;\n border-radius: 15px;\n z-index: 99999999;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n transform: scale(0.5) translatY(calc(-50% + 16px), 10px);\n pointer-events: none;\n}\n.shapeToolbar::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: #FFF;\n z-index: -9999999;\n position: absolute;\n left: 0px;\n top: 0px;\n border-radius: 15px;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n transition: filter 0.2s ease-in-out;\n}\n\n.shapeToolbar.show-toolbar {\n opacity: 1 !important;\n pointer-events: all !important;\n transform: scale(1) translateY(calc(-50% + 16px), 0px) !important;\n}\n\n.TooltipContent {\n border-radius: 30px;\n background-color: #29292f;\n padding: 10px 15px;\n font-size: 12px;\n margin-bottom: 10px;\n bottom: 100px;\n line-height: 1;\n font-family: \"Satoshi-Medium\", sans-serif;\n z-index: 99999999 !important;\n color: #fff;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n transition: opacity 0.3 ease-in-out !important;\n will-change: transform, opacity;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n\n.hide-tooltip {\n display: none !important;\n}\n\n.tooltip-tall {\n margin-bottom: 20px;\n}\n\n.tooltip-small {\n margin-bottom: 5px;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=top] {\n animation-name: slideDownAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=right] {\n animation-name: slideLeftAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=bottom] {\n animation-name: slideUpAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=left] {\n animation-name: slideRightAndFade;\n}\n\n@keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n#screenity-ui [data-radix-popper-content-wrapper] {\n z-index: 99999999999 !important;\n}\n\n.override {\n display: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n}\n\n.radial-menu {\n position: absolute;\n z-index: 9999999999999;\n width: 100px;\n height: 100px;\n top: -66px;\n left: -49px;\n pointer-events: none;\n opacity: 1;\n transform: scale(1);\n transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.25s ease-in-out;\n}\n.radial-menu::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n border: 28px solid #FFF;\n box-sizing: border-box;\n border-radius: 50%;\n backdrop-filter: blur(40px);\n opacity: 0;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n transform: scale(0);\n transition: transform 0.25s cubic-bezier(0.18, -0.55, 0.265, 1.45), opacity 0.2s ease-in-out;\n transition-delay: 0.05s;\n}\n.radial-menu[data-state=open] {\n transform: scale(1);\n opacity: 1;\n pointer-events: all !important;\n}\n.radial-menu[data-state=open]::after {\n transform: scale(1);\n border: 28px solid #FFF;\n opacity: 1;\n}\n\n.color-wheel::after {\n opacity: 0 !important;\n}\n\n.eyedropper {\n position: absolute;\n left: 0px;\n top: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n width: 16px;\n height: 16px;\n padding: 8px;\n z-index: 999999999;\n background-color: #FFF;\n border-radius: 50%;\n opacity: 0;\n text-align: center;\n transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease-in-out, background-color 0.25s ease-in-out !important;\n transform: scale(0);\n overflow: hidden;\n transform-style: preserve-3d;\n}\n.eyedropper svg {\n color: #9797a4;\n}\n.eyedropper:focus-visible {\n outline: none;\n background-color: #E6E7EA !important;\n}\n.eyedropper:hover {\n cursor: pointer;\n background-color: #E6E7EA;\n}\n\n.eye-active {\n background-color: #3080f8 !important;\n}\n.eye-active svg {\n color: #FFF !important;\n fill: #FFF !important;\n}\n\n.color-wheel .eyedropper {\n opacity: 0 !important;\n pointer-events: none !important;\n transform: scale(0) !important;\n}\n\n.radial-menu[data-state=open] .eyedropper {\n transform: scale(1) !important;\n opacity: 1;\n}\n\n.radial-menu-items {\n transform: rotate(10deg);\n z-index: 99999999;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n}\n\n.radial-menu-item {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 18px;\n height: 18px;\n z-index: 999;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n line-height: 50px;\n color: white;\n border: 1px solid rgba(0, 0, 0, 0.2);\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n opacity: 0;\n}\n.radial-menu-item:hover {\n cursor: pointer;\n}\n\n.color-wheel .radial-menu-item {\n opacity: 0 !important;\n}\n\n.radial-menu-item-child {\n width: 100%;\n height: 100%;\n position: absolute;\n box-sizing: border-box;\n border: 0px;\n box-shadow: none;\n top: 0px;\n pointer-events: none;\n z-index: 9999999;\n left: 0px;\n border-radius: 50%;\n background-size: cover;\n}\n.radial-menu-item-child:focus-visible {\n outline: none;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.radial-menu[data-state=open] .radial-menu-item-child {\n pointer-events: all !important;\n}\n\n.radial-menu-item:nth-child(1), .wheel-trigger {\n transform: rotate(0deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(1), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0s);\n transform: rotate(0deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(2), .wheel-trigger {\n transform: rotate(40deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(2), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.02s);\n transform: rotate(40deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(3), .wheel-trigger {\n transform: rotate(80deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(3), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.04s);\n transform: rotate(80deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(4), .wheel-trigger {\n transform: rotate(120deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(4), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.06s);\n transform: rotate(120deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(5), .wheel-trigger {\n transform: rotate(160deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(5), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.08s);\n transform: rotate(160deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(6), .wheel-trigger {\n transform: rotate(200deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(6), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.1s);\n transform: rotate(200deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(7), .wheel-trigger {\n transform: rotate(240deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(7), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.12s);\n transform: rotate(240deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(8), .wheel-trigger {\n transform: rotate(280deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(8), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.14s);\n transform: rotate(280deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(9), .wheel-trigger {\n transform: rotate(320deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(9), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(0.25s - 0.16s);\n transform: rotate(320deg) translate(36px);\n opacity: 1;\n}\n\n.color-active {\n border: 1px solid #FFFFFF;\n box-shadow: 0px 0px 0px 2px #0D99FF;\n}\n\n.color-wheel .color-active {\n border: none !important;\n box-shadow: none !important;\n}\n\n.wheel-trigger {\n transition: transform 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), width 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), height 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n opacity: 0;\n margin: auto;\n width: 18px;\n box-sizing: border-box;\n height: 18px;\n z-index: 9999;\n box-sizing: border-box;\n background-blend-mode: screen;\n border-radius: 50%;\n}\n.wheel-trigger:hover {\n cursor: pointer;\n}\n\n.wheel-trigger .radial-menu-item-child {\n transform: rotate(30deg);\n}\n.wheel-trigger .radial-menu-item-child:after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n z-index: 9999999;\n border-radius: 50%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n}\n\n.color-wheel .wheel-trigger {\n width: 100px !important;\n height: 100px !important;\n transform: rotate(320deg) translate(0px) !important;\n z-index: 999999999999 !important;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n}\n\n.color-wheel-handle {\n width: 12px !important;\n height: 12px !important;\n border-radius: 50%;\n left: 20px;\n top: 20px;\n opacity: 0;\n background-color: #F17FD7;\n border: 2px solid white;\n z-index: 999999999999;\n display: none;\n transition: width 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), height 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), margin-left 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), margin-top 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n}\n.color-wheel-handle:hover {\n width: 18px !important;\n height: 18px !important;\n margin-left: -2px;\n margin-top: -2px;\n}\n\n.color-wheel .color-wheel-handle {\n opacity: 0;\n display: block;\n animation: fadeIn 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96) forwards;\n animation-delay: 0.5s;\n}\n\n.w-color-wheel {\n pointer-events: none;\n position: absolute !important;\n width: 100% !important;\n height: 100% !important;\n z-index: 99999999 !important;\n}\n.w-color-wheel::after {\n content: \"\";\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 9999999;\n border: 1px solid rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n border-radius: 50%;\n}\n\n.color-wheel .w-color-wheel {\n pointer-events: all !important;\n}\n\n.w-color-wheel-fill {\n box-shadow: none !important;\n border: 2px solid white !important;\n width: 14px !important;\n height: 14px !important;\n transition: width 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), height 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), margin 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96) !important;\n box-sizing: border-box !important;\n margin-left: -2px !important;\n margin-top: -2px !important;\n z-index: 9999999999 !important;\n}\n\n.w-color-wheel-pointer {\n z-index: 99999999999 !important;\n opacity: 0;\n animation: none !important;\n}\n\n.color-wheel .w-color-wheel-pointer {\n animation: fadeInScale 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;\n animation-delay: 0.28s !important;\n}\n\n.w-color-wheel-fill:hover {\n width: 18px !important;\n height: 18px !important;\n margin-left: -4px !important;\n margin-top: -4px !important;\n}\n\n/* Fade in keyframes */\n@keyframes fadeInScale {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.color-wheel, .color-wheel .wheel-trigger, .color-wheel .wheel-trigger .radial-menu-item-child, .color-wheel-handle {\n cursor: pointer !important;\n}\n\n.color-wheel-input {\n background: #000;\n border-radius: 30px;\n height: 29px;\n color: #FFF;\n text-align: center;\n line-height: 29px;\n padding-left: 8px;\n padding-right: 8px;\n position: absolute;\n margin-top: -35px;\n font-family: \"Satoshi-Medium\", sans-serif;\n left: 50%;\n transform: translate(-50%, 0);\n opacity: 0;\n}\n\n.color-wheel .color-wheel-input {\n animation: fadeIn 0.3s cubic-bezier(0.61, 0.11, 0.08, 0.96) forwards;\n animation-delay: 0.2s;\n pointer-events: all !important;\n}\n\n.color-wheel-input {\n pointer-events: none;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n margin-top: -35px;\n }\n 100% {\n opacity: 1;\n margin-top: -40px;\n }\n}\n.color-active .color-preview {\n opacity: 1;\n}\n\n.radial-menu[data-state=closed] .color-preview {\n opacity: 0 !important;\n}\n\n.color-preview {\n width: 90%;\n height: 90%;\n box-sizing: border-box;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n z-index: 9999999999;\n transform: translate(-50%, -50%);\n opacity: 0;\n animation: none;\n pointer-events: none;\n border: 1px solid #FFF;\n box-sizing: border-box;\n}\n\n.color-wheel .color-preview {\n opacity: 0 !important;\n}\n\n.wheel-trigger .color-active {\n box-shadow: none !important;\n}\n\n.color-active .w-color-wheel {\n transform: scale(1.15) !important;\n}\n.color-active .w-color-wheel::after {\n border: none !important;\n}\n\n.color-wheel .w-color-wheel {\n transform: scale(1) !important;\n}\n.color-wheel .w-color-wheel::after {\n border: 1px solid rgba(0, 0, 0, 0.2) !important;\n}\n\n.radial-menu[data-state=closed] .w-color-wheel {\n transform: scale(1) !important;\n}\n\n.stroke-width-item span {\n width: 18px;\n height: 18px;\n display: block;\n}\n.stroke-width-item div[data-state=on] {\n background: #3080f8 !important;\n}\n.stroke-width-item div[data-state=on] svg {\n color: #FFF !important;\n fill: #FFF !important;\n}\n.stroke-width-item div[data-state=off] svg {\n fill: #201F1D;\n}\n\n.stroke-icon svg {\n text-align: center;\n margin: auto;\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.ToastViewport {\n --viewport-padding: 25px;\n position: fixed;\n bottom: 0;\n right: 0;\n left: 0;\n margin: auto !important;\n display: flex;\n flex-direction: column;\n padding: var(--viewport-padding);\n gap: 14px;\n max-width: 100vw;\n width: -moz-fit-content;\n width: fit-content;\n list-style: none;\n z-index: 2147483647;\n outline: none;\n pointer-events: all !important;\n}\n\n.ToastRoot {\n background-color: #29292f;\n color: #fff;\n border-radius: 30px;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n padding: 10px 14px;\n display: flex;\n flex-direction: row;\n gap: 8px;\n font-size: 15px;\n line-height: 1.5;\n max-width: 100%;\n overflow: hidden;\n justify-content: center;\n align-items: center;\n}\n\n.ToastRoot[data-state=open] {\n animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.ToastRoot[data-state=closed] {\n animation: hide 100ms ease-in;\n}\n\n.ToastRoot[data-swipe=move] {\n transform: translateY(var(--radix-toast-swipe-move-y));\n}\n\n.ToastRoot[data-swipe=cancel] {\n transform: translateY(0);\n transition: transform 200ms ease-out;\n}\n\n.ToastRoot[data-swipe=end] {\n animation: swipeOut 100ms ease-out;\n}\n\n@keyframes hide {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes slideIn {\n from {\n transform: translateY(calc(100% + var(--viewport-padding)));\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes swipeOut {\n from {\n transform: translateY(var(--radix-toast-swipe-end-y));\n }\n to {\n transform: translateY(calc(100% + var(--viewport-padding)));\n }\n}\n.ToastTitle {\n color: #fff;\n font-family: \"Satoshi-Medium\", sans-serif;\n}\n\n.ToastDescription {\n color: var(--slate-11);\n font-family: \"Satoshi-Medium\", sans-serif;\n}\n\n.ToastAction {\n color: #fff;\n font-family: \"Satoshi-Medium\", sans-serif;\n text-align: right;\n background-color: #51515F;\n padding: 0px 12px !important;\n height: 24px !important;\n cursor: pointer;\n}\n\n.toolbar-page {\n width: 100%;\n height: 100%;\n pointer-events: none !important;\n}\n\n.popup-container:hover .popup-controls {\n opacity: 1;\n}\n\n.open {\n opacity: 1 !important;\n}\n\n.popup-drag-head {\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100px;\n z-index: 1;\n border-radius: 30px 30px 0px 0px;\n opacity: 0;\n}\n\n.popup-controls {\n opacity: 0;\n position: absolute;\n top: -10px;\n right: -10px;\n box-sizing: border-box;\n border-radius: 30px;\n border: 1px solid #e8e8e8;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n z-index: 999999999;\n background: rgb(240, 238, 238);\n backdrop-filter: blur(10px);\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 6px;\n padding-bottom: 6px;\n transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.popup-controls .popup-control svg {\n color: #9797a4;\n margin-bottom: -2px;\n}\n.popup-controls .popup-grab {\n cursor: grab;\n}\n.popup-controls .popup-close {\n cursor: pointer;\n}\n\n.tempimg {\n height: 100%;\n opacity: 1;\n position: fixed;\n right: 0px;\n top: 20px;\n}\n\n.container {\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0px;\n left: 0px;\n z-index: 999999999;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 14px;\n}\n\n.ToolbarDragging .popup-container {\n transform: scale(1.02);\n filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.4)) !important;\n}\n\n/* Recording popup parent */\n.popup-container {\n width: 356px;\n position: fixed;\n top: 32px;\n right: 28px;\n z-index: 99999999999;\n filter: drop-shadow(0px 4px 100px rgba(0, 0, 0, 0.35));\n pointer-events: all;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), filter 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n}\n\n.popup-container::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n transition: 2s;\n background: #fff;\n background-clip: content-box;\n -webkit-mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n background-position: center bottom 50px;\n border-radius: 30px;\n position: absolute;\n top: 0px;\n left: 0px;\n}\n\n/*\n.popup-shape {\n\twidth: 100%;\n\theight: 100%;\n\tbackground: $color-background;\n\tbackground-clip: content-box;\n -webkit-mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n background-position: center bottom 50px;\n\tborder-radius: $container-border-radius;\n\tposition: relative;\n}\n*/\n.popup-cutout {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n text-align: center;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n top: -22px;\n left: 0px;\n right: 0px;\n margin: auto;\n}\n\n.popup-cutout img {\n text-align: center;\n margin: auto;\n display: inline-block;\n width: 100%;\n border-radius: 50%;\n}\n\n/* Recording nav area */\n.popup-nav {\n width: 100%;\n position: relative;\n}\n\n/* Recording content area */\n.popup-content {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n overflow: hidden;\n}\n\n.waveform {\n width: 100%;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.popup-content-divider {\n width: 100%;\n height: 1px;\n background: #e8e8e8;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.popup-warning {\n display: flex;\n width: calc(100% + 32px);\n height: 80px;\n justify-content: space-between;\n align-items: center;\n position: relative;\n overflow: hidden;\n background-color: rgba(56, 126, 247, 0.1);\n margin-left: -16px;\n margin-top: -16px;\n margin-bottom: 8px;\n}\n.popup-warning .popup-warning-right {\n color: #3080f8;\n font-family: \"Satoshi-Medium\", sans-serif;\n width: 90px;\n}\n\n.popup-warning-left,\n.popup-warning-right {\n width: 50px;\n display: flex;\n align-items: center;\n text-align: center;\n height: 100%;\n justify-content: center;\n}\n.popup-warning-left svg,\n.popup-warning-right svg {\n color: #3080f8;\n}\n\n.popup-warning-right {\n cursor: pointer;\n}\n\n.popup-warning-middle {\n flex: 1;\n}\n.popup-warning-middle .popup-warning-title {\n font-family: \"Satoshi-Bold\", sans-serif;\n color: #29292f;\n}\n.popup-warning-middle .popup-warning-description {\n font-family: \"Satoshi-Medium\", sans-serif;\n color: #6e7684;\n margin-top: 4px;\n}\n\n.permission-button {\n background: rgba(48, 128, 248, 0.1);\n border-radius: 30px;\n color: #3080f8;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 44px;\n gap: 8px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n.permission-button:first-child {\n margin-top: 4px !important;\n}\n.permission-button:last-child {\n margin-bottom: 4px !important;\n}\n.permission-button:hover {\n background: rgba(48, 128, 248, 0.15);\n cursor: pointer;\n}\n.permission-button svg {\n color: #3080f8;\n}\n\n.HelpSection {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n bottom: -40px;\n background: #edeef2;\n border-radius: 30px;\n padding: 4px 12px;\n text-align: center;\n font-family: \"Satoshi-Medium\", sans-serif;\n color: #6e7684;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: -moz-fit-content;\n width: fit-content;\n}\n.HelpSection .HelpIcon {\n margin-top: 3px;\n}\n.HelpSection:hover {\n cursor: pointer;\n background: #fefeff;\n}\n\n.CollapsibleTrigger {\n margin-top: 12px;\n font-weight: \"Satoshi-Bold\", sans-serif;\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: 12px;\n padding-right: 12px;\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n display: block;\n border-radius: 30px;\n}\n\n.CollapsibleTrigger:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.CollapsibleLabel {\n color: #6e7684;\n font-weight: \"Satoshi-Bold\", sans-serif;\n text-align: center;\n display: inline-block;\n}\n\n.CollapsibleLabel img {\n margin-left: 4px;\n}\n\n.CollapsibleTrigger:hover {\n cursor: pointer;\n background: #FFF;\n}\n\n.CollapsibleRoot[data-state=open] > .CollapsibleTrigger > .CollapsibleLabel img {\n transform: scaleY(-1);\n margin-bottom: 2px;\n}\n\n.video-ui {\n position: relative;\n /* Blur the background */\n}\n\n.blurred {\n /* Blur the background */\n}\n.blurred:before {\n content: \"\";\n position: absolute;\n backdrop-filter: blur(5px);\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.5);\n z-index: 999;\n}\n\n.videos-list {\n padding-bottom: 10px !important;\n max-height: calc(96vh - 260px);\n overflow-y: overlay;\n padding: 16px;\n}\n\n.bottom-section {\n width: 100%;\n bottom: 0px;\n left: 0px;\n box-sizing: border-box;\n padding-top: 8px !important;\n padding-bottom: 12px !important;\n z-index: 999999;\n padding: 16px;\n}\n\n.ModalSoon {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: -moz-fit-content;\n height: fit-content;\n width: 70%;\n padding: 20px 16px;\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n border-radius: 30px;\n background: white;\n box-shadow: 0px 4px 100px 0px rgba(0, 0, 0, 0.15);\n z-index: 9999999;\n}\n\n.strong {\n box-shadow: 0px 4px 100px -20px rgba(0, 0, 0, 0.75) !important;\n}\n\n.ModalSoonEmoji {\n font-size: 20px;\n margin-bottom: 8px;\n}\n\n.ModalSoonTitle {\n font-weight: 700;\n color: #29292f;\n margin-bottom: 8px;\n text-align: center;\n}\n\n.ModalSoonDescription {\n text-align: center;\n color: #6e7684;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.ModalSoonButton {\n margin-top: 8px;\n color: #fff;\n text-align: center;\n border-radius: 30px;\n background: radial-gradient(117.41% 117.78% at 35.44% 0%, #2baef8 23.13%, #3582f6 46.35%, #486def 74.48%, #7b9aea 100%);\n padding: 8px 16px;\n}\n.ModalSoonButton:hover {\n cursor: pointer;\n}\n\n.spinner-container,\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 0;\n color: #6e7684;\n font-size: 14px;\n}\n\n.spinner {\n width: 32px;\n height: 32px;\n border: 3px solid rgba(0, 0, 0, 0.1);\n border-top-color: #6e7684;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n margin-bottom: 10px;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.announcement {\n width: 100%;\n top: 0px;\n left: 0px;\n padding-bottom: 24px;\n}\n\n.announcement-wrap {\n width: 85%;\n margin: auto;\n}\n\n.announcement-hero {\n width: 100%;\n margin-bottom: 16px;\n margin-top: 44px;\n}\n.announcement-hero img {\n width: 100%;\n border-radius: 15px;\n}\n\n.announcement-details {\n text-align: center;\n}\n\n.announcement-title {\n font-family: \"Satoshi-Bold\", sans-serif;\n font-size: 16px;\n color: #29292f;\n letter-spacing: -0.8px;\n margin-bottom: 12px;\n text-align: center;\n}\n\n.announcement-description {\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 14px;\n color: #6e7684;\n text-align: center;\n margin-bottom: 24px;\n line-height: 1.6;\n letter-spacing: -0.6px;\n}\n.announcement-description a {\n text-decoration: none !important;\n color: #3080f8 !important;\n cursor: pointer !important;\n}\n\n.announcement-cta {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n height: 44px;\n border-radius: 30px;\n background: radial-gradient(117.41% 117.78% at 35.44% 0%, #2baef8 23.13%, #3582f6 46.35%, #486def 74.48%, #7b9aea 100%);\n color: #fff;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n animation: background-size 6s ease-in-out infinite;\n animation-play-state: paused;\n filter: drop-shadow(0px 4px 20px rgba(86, 123, 218, 0.5));\n}\n.announcement-cta:hover {\n animation-play-state: running !important;\n}\n\n@keyframes background-size {\n /* Animate scale and position in and out looping */\n 0% {\n background-size: 100% 100%;\n background-position: 0% 0%;\n }\n 50% {\n background-size: 150% 150%;\n background-position: 100% 0%;\n }\n 100% {\n background-size: 100% 100%;\n background-position: 0% 0%;\n }\n}\n.welcome-title {\n font-family: \"Satoshi-Bold\", sans-serif;\n font-size: 18px;\n color: #29292f;\n letter-spacing: -0.8px;\n margin-bottom: 12px;\n text-align: center;\n}\n\n.welcome-description {\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 16px;\n color: #6e7684;\n text-align: center;\n margin-bottom: 20px;\n line-height: 1.6;\n letter-spacing: -0.6px;\n}\n.welcome-description a {\n text-decoration: none !important;\n color: #3080f8 !important;\n cursor: pointer !important;\n}\n\n.welcome-cta {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n height: 44px;\n border-radius: 30px;\n background: white;\n border: 1px solid #e8e8e8;\n color: #29292f;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n filter: drop-shadow(0px 1px 2px rgba(53, 87, 98, 0.1));\n}\n\n.welcome-content {\n background: #f6f7fb;\n border-bottom-left-radius: 30px;\n border-bottom-right-radius: 30px;\n max-height: calc(95vh - 300px);\n overflow-y: overlay;\n padding-top: 20px;\n padding-bottom: 20px;\n border-top: 1px solid #e8e8e8;\n}\n\n.welcome-content-wrap {\n width: 85%;\n margin: auto;\n}\n\n.welcome-content-title {\n font-family: \"Satoshi-Bold\", sans-serif;\n font-size: 14px;\n color: #29292f;\n margin-bottom: 8px;\n margin-top: 8px;\n text-align: center;\n line-height: 1.4;\n}\n\n.welcome-feature-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 12px;\n}\n\n.welcome-feature-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.welcome-feature-icon {\n width: 20px;\n height: 20px;\n background: rgba(48, 128, 248, 0.1);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.welcome-feature-icon-text {\n font-size: 14px;\n color: #6e7684;\n font-family: \"Satoshi-Medium\", sans-serif;\n}\n\n.welcome-video {\n margin: 25px 0 !important;\n width: 100%;\n}\n\n.video-wrapper {\n border-radius: 10px;\n}\n\n.welcome-support {\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 12px;\n color: #6e7684 !important;\n text-align: center;\n margin-top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n text-decoration: none !important;\n}\n.welcome-support img {\n width: 20px;\n}\n\n.DropdownMenuContent,\n.DropdownMenuSubContent {\n min-width: 200px;\n background-color: white;\n margin-top: 4px;\n margin-right: 8px;\n padding-top: 12px;\n padding-bottom: 12px;\n border-radius: 15px;\n z-index: 99999;\n font-family: \"Satoshi-Medium\", sans-serif;\n color: #29292f;\n box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n\n.DropdownMenuContent[data-side=top],\n.DropdownMenuSubContent[data-side=top] {\n animation-name: slideDownAndFade;\n}\n\n.DropdownMenuContent[data-side=right],\n.DropdownMenuSubContent[data-side=right] {\n animation-name: slideLeftAndFade;\n}\n\n.DropdownMenuContent[data-side=bottom],\n.DropdownMenuSubContent[data-side=bottom] {\n animation-name: slideUpAndFade;\n}\n\n.DropdownMenuContent[data-side=left],\n.DropdownMenuSubContent[data-side=left] {\n animation-name: slideRightAndFade;\n}\n\n.ItemIndicator,\n.ItemIndicatorArrow {\n position: absolute;\n right: 12px;\n width: 18px;\n height: 18px;\n background: #3080f8;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.ItemIndicatorArrow {\n background: transparent !important;\n}\n\n.DropdownMenuItem,\n.DropdownMenuCheckboxItem,\n.DropdownMenuRadioItem,\n.DropdownMenuSubTrigger {\n font-size: 14px;\n line-height: 1;\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 5px;\n position: relative;\n padding-left: 22px;\n padding-right: 22px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n outline: none;\n}\n.DropdownMenuItem:hover,\n.DropdownMenuCheckboxItem:hover,\n.DropdownMenuRadioItem:hover,\n.DropdownMenuSubTrigger:hover {\n background-color: #f6f7fb !important;\n cursor: pointer;\n}\n\n.DropdownMenuSubTrigger[data-state=open] {\n background-color: var(--violet-4);\n color: var(--violet-11);\n}\n\n.DropdownMenuItem[data-disabled],\n.DropdownMenuCheckboxItem[data-disabled],\n.DropdownMenuRadioItem[data-disabled],\n.DropdownMenuSubTrigger[data-disabled] {\n color: #6e7684 !important;\n cursor: not-allowed;\n background-color: #f6f7fb !important;\n}\n\n.DropdownMenuItem[data-highlighted],\n.DropdownMenuCheckboxItem[data-highlighted],\n.DropdownMenuRadioItem[data-highlighted],\n.DropdownMenuSubTrigger[data-highlighted] {\n background-color: var(--violet-9);\n color: var(--violet-1);\n}\n\n.DropdownMenuLabel {\n padding-left: 25px;\n font-size: 12px;\n line-height: 25px;\n color: var(--mauve-11);\n}\n\n.DropdownMenuSeparator {\n height: 1px;\n background-color: var(--violet-6);\n margin: 5px;\n}\n\n.DropdownMenuItemIndicator {\n position: absolute;\n left: 0;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.DropdownMenuArrow {\n fill: white;\n}\n\n.IconButton {\n font-family: inherit;\n border-radius: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-top: 4px;\n cursor: pointer;\n}\n.IconButton svg {\n color: #9797a4;\n}\n\n.IconButton:hover {\n background-color: var(--violet-3);\n}\n\n.RightSlot {\n margin-left: auto;\n padding-left: 20px;\n color: var(--mauve-11);\n}\n\n[data-highlighted] > .RightSlot {\n color: white;\n}\n\n[data-disabled] .RightSlot {\n color: var(--mauve-8);\n}\n\n@keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n/* reset */\nbutton {\n all: unset;\n}\n\n.SelectTrigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 30px;\n line-height: 1;\n height: 44px;\n gap: 5px;\n background-color: #fff;\n color: #29292f;\n width: 100%;\n box-sizing: border-box;\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.SelectTrigger:hover {\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n}\n\n.SelectTrigger:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5) !important;\n}\n\n.SelectTrigger[data-placeholder] {\n color: var(--violet9);\n}\n\n.SelectTrigger[data-state=open] {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.SelectValue {\n text-align: left;\n flex: 1;\n display: block;\n width: 100%;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n}\n.SelectValue span {\n overflow: hidden;\n text-overflow: ellipsis;\n height: 100%;\n line-height: 44px;\n}\n\n.SelectIconDrop,\n.SelectIconType {\n text-align: center;\n}\n\n.SelectIconType {\n padding-left: 6px;\n padding-right: 0px;\n}\n\n.SelectIconDrop {\n padding-right: 16px;\n}\n\n.SelectTrigger[data-state=open] .SelectIconDrop img {\n transform: rotate(180deg);\n}\n\n.SelectContent {\n overflow: hidden;\n z-index: 99999999999;\n width: var(--radix-select-trigger-width);\n max-height: var(--radix-select-content-available-height);\n font-family: \"Satoshi-Medium\", sans-serif;\n background-color: white;\n border-radius: 15px;\n margin-top: 4px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.SelectItem {\n font-size: 14px;\n line-height: 1;\n color: var(--violet11);\n display: flex;\n align-items: center;\n height: 44px;\n padding-left: 16px;\n padding-right: 16px;\n color: #29292f;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.SelectItem[data-disabled] {\n color: #6e7684;\n pointer-events: none;\n}\n\n.SelectItem[data-highlighted] {\n background: #f6f7fb;\n outline: none !important;\n}\n\n.SelectItem:hover {\n background: #f6f7fb;\n cursor: pointer;\n}\n\n.SelectSeparator {\n height: 1px;\n background-color: #e8e8e8;\n width: calc(100% - 24px);\n margin: auto;\n border-radius: 30px;\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.SelectItemIndicator {\n position: absolute;\n right: 12px;\n width: 24px;\n height: 24px;\n background: #3080f8;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.SelectScrollButton {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 25px;\n background-color: white;\n color: var(--violet11);\n cursor: default;\n}\n\n.SelectOff {\n background: #faf0f4;\n color: #d2234d;\n padding-left: 12px;\n padding-right: 12px;\n padding-top: 8px;\n padding-bottom: 8px;\n margin-right: 4px;\n border-radius: 30px;\n font-size: 12px;\n font-weight: 700;\n}\n\n.SelectIconButton {\n border-radius: 30px;\n position: relative;\n padding: 8px;\n}\n.SelectIconButton:hover {\n background-color: #f6f7fb;\n}\n\n/* Radix tabs navigation */\n/* reset */\nbutton,\nfieldset,\ninput {\n all: unset;\n}\n\n.TabsRoot {\n width: 100%;\n margin: auto;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n}\n\n.TabsList {\n margin: auto;\n flex-shrink: 0;\n display: flex;\n width: -moz-fit-content;\n width: fit-content;\n align-items: center;\n}\n\n.hiddenTabs {\n display: none !important;\n pointer-events: none !important;\n -webkit-user-select: none !important;\n -moz-user-select: none !important;\n user-select: none !important;\n opacity: 0 !important;\n height: 0 !important;\n overflow: hidden !important;\n transition: opacity 0.3s ease !important;\n}\n\n.TabsTrigger {\n padding-left: 14px;\n padding-right: 14px;\n color: #6e7684;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: pointer;\n}\n\n.TabsTrigger[data-state=active] {\n color: #29292f;\n}\n\n.TabsTrigger:focus-visible {\n position: relative;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5) !important;\n}\n\n.TabsTriggerSpacer {\n height: 50px;\n width: 1px;\n background: #e8e8e8;\n flex-shrink: 0;\n margin-left: 8px;\n margin-right: 8px;\n}\n\n/* Content of the Radix tabs */\n.TabsContent {\n width: 100%;\n display: block;\n height: 100%;\n box-sizing: border-box;\n flex: 1 1 auto;\n}\n.TabsContent::after {\n content: \"\";\n display: block;\n clear: both;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 30px;\n background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 100%);\n pointer-events: none; /* Allow content behind the gradient to be clickable */\n}\n\n.TabsContent:focus {\n outline: none;\n}\n\n.TabsContent:focus-visible {\n box-shadow: inset 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.TabsContent[data-state=inactive] {\n display: none;\n}\n\n/* Pill animation */\n.pill-anim {\n position: absolute;\n height: 32px;\n top: 0px;\n bottom: 0px;\n margin-top: auto;\n margin-bottom: auto;\n border-radius: 30px;\n background: #fff;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n/*\n.TabsList[data-value=\"record\"] {\n\t.pill-anim {\n\t\tleft: $spacing-03;\n\t\twidth: 102px;\n\t}\n}\n.TabsList[data-value=\"dashboard\"] {\n\t.pill-anim {\n\t\tleft: 109px;\n\t\twidth: 132px;\n\t}\n}\n*/\n/* Specific to the top level tabs */\n.TabsRoot.tl {\n height: calc(100% - 40px);\n margin-top: 40px;\n}\n\n.TabsList.tl {\n border-radius: 30px;\n background: #f6f7fb;\n padding: 6px;\n font-family: \"Satoshi-Bold\", sans-serif;\n position: relative;\n}\n\n.TabsTrigger.tl {\n border-radius: 30px;\n background: transparent;\n height: 32px;\n display: flex;\n align-items: center;\n padding-left: 16px;\n padding-right: 17px;\n z-index: 2;\n position: relative;\n}\n\n.TabsTrigger.tl[data-state=inactive]:hover :before {\n content: \"\";\n position: absolute;\n display: block;\n box-sizing: border-box;\n height: 100%;\n width: calc(100% - 10px);\n margin-left: 5px;\n background: #edeef3;\n z-index: -2;\n left: 0px;\n border-radius: 30px;\n}\n\n.TabsTriggerIcon {\n width: 20px;\n height: 20px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n margin-right: 4px;\n}\n\n/* Specific to recording tab context */\n.recording-ui {\n width: 100%;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.recording-ui .TabsRoot {\n margin-top: 8px;\n}\n.recording-ui .TabsList {\n width: 100%;\n border-bottom: 1px solid #e8e8e8;\n margin: auto;\n justify-content: center;\n}\n.recording-ui .TabsTrigger {\n padding-top: 8px;\n padding-bottom: 12px;\n box-sizing: border-box;\n position: relative;\n display: block;\n padding-left: 16px;\n padding-right: 16px;\n}\n.recording-ui .TabsTrigger:hover {\n background: #f6f7fb;\n border-top-right-radius: 15px;\n border-top-left-radius: 15px;\n}\n.recording-ui .TabsTrigger:focus-visible {\n border-radius: 10px 10px 0px 0px !important;\n}\n.recording-ui .TabsTrigger[data-state=active]::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 80%;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n height: 2px;\n border-radius: 30px;\n background: #3080f8;\n}\n.recording-ui .TabsTrigger[data-state=active] > .TabsTriggerLabel {\n color: #29292f !important;\n}\n.recording-ui .TabsTriggerLabel {\n text-align: center;\n}\n.recording-ui .TabsTriggerIcon {\n width: 20px;\n height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n margin: auto;\n margin-bottom: 8px;\n border-radius: 30px;\n}\n.recording-ui .TabsContent {\n background: #f6f7fb;\n padding: 16px;\n border-bottom-left-radius: 30px;\n border-bottom-right-radius: 30px;\n max-height: calc(95vh - 200px);\n overflow-y: overlay;\n}\n.recording-ui span {\n display: block;\n}\n\n.video-ui {\n width: 100%;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.video-ui .TabsRoot {\n margin-top: 8px;\n}\n.video-ui .TabsList {\n width: 100%;\n border-bottom: 1px solid #e8e8e8;\n margin: auto;\n justify-content: space-between;\n padding-left: 12px;\n padding-right: 12px;\n box-sizing: border-box;\n}\n.video-ui .TabsTriggerWrap {\n display: flex !important;\n align-items: center;\n flex-direction: row;\n justify-content: left;\n position: relative;\n display: block;\n box-sizing: border-box;\n}\n.video-ui .TabsTrigger {\n padding-top: 8px;\n padding-bottom: 12px;\n box-sizing: border-box;\n position: relative;\n display: block;\n padding-left: 20px;\n padding-right: 20px;\n}\n.video-ui .TabsTrigger:hover {\n background: #f6f7fb;\n border-top-right-radius: 15px;\n border-top-left-radius: 15px;\n}\n.video-ui .TabsTrigger:focus-visible {\n border-radius: 10px 10px 0px 0px !important;\n}\n.video-ui .TabsTrigger[data-state=active]::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 80%;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n height: 2px;\n border-radius: 30px;\n background: #3080f8;\n}\n.video-ui .TabsTrigger[data-state=active] > .TabsTriggerLabel {\n color: #29292f !important;\n}\n.video-ui .TabsTriggerLabel {\n text-align: center;\n}\n.video-ui .TabsContent {\n background: #f6f7fb;\n border-bottom-left-radius: 30px;\n border-bottom-right-radius: 30px;\n}\n.video-ui span {\n display: block;\n}\n.video-ui .TabsSort {\n margin-right: 12px;\n border-radius: 30px;\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n margin-bottom: 5px;\n}\n.video-ui .TabsSort:hover {\n cursor: pointer;\n background: #f6f7fb;\n}\n.video-ui .TabsSortLabel {\n display: flex;\n flex-direction: row;\n justify-content: right;\n align-items: center;\n color: #6e7684;\n white-space: nowrap;\n}\n.video-ui .TabsSortLabel img {\n margin-left: 8px;\n}\n.video-ui .TabsSort:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n\n.projectActiveBanner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #29292f; /* dark background */\n color: white;\n border-radius: 100px; /* pill shape */\n padding: 10px 16px;\n font-weight: 600;\n font-size: 15px;\n line-height: 1.3;\n max-width: 80%;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: default;\n gap: 16px;\n top: 41px;\n z-index: 999999;\n margin: auto;\n left: 0;\n right: 0;\n position: absolute;\n}\n\n.projectActiveBannerLeft {\n /* text container */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.projectActiveBannerRight {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.projectActiveBannerDivider {\n width: 1px;\n height: 24px;\n background-color: #44444d; /* subtle divider color */\n}\n\n.projectActiveBannerClose {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.projectActiveBannerClose img {\n width: 14px;\n height: 14px;\n opacity: 0.6;\n}\n.projectActiveBannerClose img:hover {\n opacity: 1;\n}\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.SwitchRow {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 40px;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n}\n\n.SwitchRow * {\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n}\n\n.SwitchRoot {\n width: 34px;\n height: 22px;\n background-color: #e8e8e8;\n border-radius: 9999px;\n position: relative;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.SwitchRoot[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.SwitchRoot:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.SwitchRoot[data-state=checked] {\n background-color: #3080f8;\n}\n\n.SwitchRoot:hover {\n cursor: pointer;\n}\n\n.SwitchThumb {\n display: block;\n width: 14px;\n height: 14px;\n background-color: white;\n border-radius: 9999px;\n box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);\n transition: transform 100ms;\n transform: translateX(4px);\n will-change: transform;\n}\n\n.SwitchThumb[data-state=checked] {\n transform: translateX(16px);\n}\n\n.Label {\n color: #6e7684;\n display: inline-block !important;\n /* Ellipsis */\n text-overflow: clip;\n white-space: nowrap;\n}\n.Label:hover {\n text-overflow: clip;\n}\n\n.ExperimentalLabel {\n color: #fff;\n font-size: 12px;\n background-color: #3080f8;\n border-radius: 15px;\n padding: 2px 8px;\n display: inline-block !important;\n margin-left: 8px;\n}\n\n.labelDropdownWrap {\n display: inline-block;\n vertical-align: middle;\n position: relative;\n border-radius: 30px;\n box-sizing: border-box;\n}\n.labelDropdownWrap img {\n display: inline-block;\n margin-left: 6px;\n}\n.labelDropdownWrap .labelDropdown {\n display: inline-block;\n}\n.labelDropdownWrap:hover {\n cursor: pointer;\n}\n.labelDropdownWrap::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n margin-top: -4px;\n margin-left: -8px;\n}\n.labelDropdownWrap:hover::after {\n border-color: #fff;\n}\n.labelDropdownWrap:hover {\n background-color: #fff;\n}\n\n.labelDropdownActive .labelDropdownContent {\n display: block !important;\n}\n.labelDropdownActive img {\n transform: rotate(180deg);\n}\n\n.labelDropdownContent {\n position: absolute;\n background-color: #fff;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 9999999999;\n border-radius: 15px;\n padding: 8px 0px;\n margin-top: 4px;\n border: 1px solid #e8e8e8;\n display: none;\n}\n.labelDropdownContent .labelDropdownContentItem {\n color: #29292f;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n}\n.labelDropdownContent .labelDropdownContentItem:hover {\n background-color: #f6f7fb;\n cursor: pointer;\n}\n\n.video-item-root {\n width: calc(100% - 2 * 8px);\n border-radius: 15px;\n padding: 8px;\n display: block;\n}\n.video-item-root .video-item {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.video-item-root .video-item-left {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n min-width: 0;\n justify-content: left;\n}\n.video-item-root .video-item-thumbnail {\n min-width: 48px;\n width: 48px;\n height: 38px;\n background: grey;\n border-radius: 5px;\n margin-right: 12px;\n}\n.video-item-root .video-item-info {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: 4px;\n}\n.video-item-root .video-item-info-title {\n color: #29292f;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.video-item-root .video-item-info-date {\n margin-top: 4px;\n color: #6e7684;\n font-size: 12px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.video-item-root:hover {\n cursor: pointer;\n background: #e9eaee;\n}\n\n.video-item-root:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n\n/* Actions */\n.video-item-right {\n display: flex;\n align-items: center;\n justify-content: right;\n gap: 8px;\n min-width: -moz-max-content;\n min-width: max-content;\n opacity: 0;\n}\n.video-item-right .copy-link {\n background: #fff;\n height: 32px;\n width: 32px;\n border-radius: 10px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n z-index: 999999;\n}\n.video-item-right .copy-link:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n.video-item-right .more-actions {\n height: 32px;\n width: 32px;\n background: #fff;\n text-align: center;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.video-item-right .more-actions:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n\n.video-item-root:hover .video-item-right,\n.video-item-root:focus-visible .video-item-right {\n opacity: 1;\n}\n\n.main-button {\n width: 100%;\n height: 45px;\n border-radius: 30px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n}\n.main-button .main-button-label {\n color: #fff;\n text-align: center;\n vertical-align: middle;\n align-items: center;\n}\n.main-button .main-button-shortcut {\n position: absolute;\n font-size: 12px;\n right: 16px;\n color: #fff;\n opacity: 0.7;\n}\n.main-button:hover {\n cursor: pointer;\n}\n.main-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.main-button:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5) !important;\n}\n\n@property --x {\n syntax: \"\";\n inherits: false;\n initial-value: 35.44%;\n}\n@property --y {\n syntax: \"\";\n inherits: false;\n initial-value: 0%;\n}\n.recording-button {\n margin-top: 8px;\n filter: drop-shadow(0px 4px 20px rgba(86, 123, 218, 0.5));\n background: radial-gradient(127.41% 127.78% at 35.44% 0%, #2BAEF8 23.13%, #3582F6 46.35%, #486DEF 74.48%, #7B9AEA 100%);\n animation: 0;\n animation: background-size 6s ease-in-out infinite;\n animation-play-state: paused;\n position: relative;\n z-index: 2;\n}\n\n@keyframes background-size {\n /* Animate scale and position in and out looping */\n 0% {\n background-size: 100% 100%;\n background-position: 0% 0%;\n }\n 50% {\n background-size: 150% 150%;\n background-position: 100% 0%;\n }\n 100% {\n background-size: 100% 100%;\n background-position: 0% 0%;\n }\n}\n.recording-button:hover {\n animation-play-state: running !important;\n}\n\n.recording-button:before {\n content: \"\";\n position: absolute;\n display: block;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: 30px;\n transition: all 0.25s ease-in-out;\n}\n\n.recording-button:hover:before {\n box-shadow: 0px 0px 0px 4px rgba(52, 138, 247, 0.25);\n}\n\n@keyframes pulse-animation {\n 0% {\n box-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n }\n 25% {\n box-shadow: 0px 0px 0px 6px rgba(52, 138, 247, 0.25);\n }\n 50% {\n box-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n }\n 100% {\n box-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n }\n}\n@keyframes gradient-animation {\n 0% {\n --x: 35.44%;\n --y: 0%;\n }\n 25% {\n --x: 100%;\n --y: 30%;\n }\n 50% {\n --x: 70%;\n --y: 100%;\n }\n 75% {\n --x: 30%;\n --y: 90%;\n }\n 100% {\n --x: 35.44%;\n --y: 0%;\n }\n}\n.dashboard-button {\n background: #29292f;\n box-shadow: 0px 0px 0px 0px rgba(41, 41, 47, 0.25);\n transition: all 0.25s ease-in-out;\n}\n\n.dashboard-button:hover {\n box-shadow: 0px 0px 0px 4px rgba(41, 41, 47, 0.25);\n}\n\n.alarm-time-button {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 15px;\n padding: 4px 8px;\n position: absolute;\n color: #fff;\n opacity: 0.7;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 12px;\n left: 6px;\n}\n.alarm-time-button svg {\n margin-top: 4px;\n margin-right: 4px;\n width: 14px;\n}\n\n.background-effects-toggle-group {\n display: flex;\n height: 40px;\n width: 100%;\n gap: 8px;\n margin-bottom: 8px;\n margin-top: 8px;\n}\n\n.background-effect {\n display: flex;\n width: 40px;\n height: 40px;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n position: relative;\n color: #FFF;\n}\n.background-effect span {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n z-index: 99999;\n font-weight: 500;\n}\n.background-effect[data-state=on]::after {\n content: \"\";\n border-radius: 50%;\n display: block;\n width: 46px;\n height: 46px;\n position: absolute;\n border: 2px solid #3080f8;\n box-sizing: border-box;\n}\n.background-effect img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: absolute;\n top: 0px;\n left: 0px;\n}\n.background-effect:hover:not([data-state=on]) {\n cursor: pointer;\n}\n.background-effect:hover:not([data-state=on])::after {\n content: \"\";\n border-radius: 50%;\n display: block;\n width: 46px;\n height: 46px;\n position: absolute;\n border: 2px solid #3080f8;\n opacity: 0.5;\n box-sizing: border-box;\n}\n.background-effect:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.region-dimensions {\n width: 100%;\n display: flex;\n gap: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.region-input {\n flex: 1;\n position: relative;\n}\n.region-input input {\n color: #29292f !important;\n border-radius: 30px;\n height: 40px;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n padding-left: 18px;\n padding-right: 40px;\n font-family: \"Satoshi-Medium\", sans-serif;\n background-color: #fff;\n}\n.region-input input:focus-visible {\n outline: none;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n.region-input span {\n color: #6e7684;\n font-family: \"Satoshi-Medium\", sans-serif;\n position: absolute;\n right: 18px;\n bottom: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.time-set-parent {\n width: 100%;\n display: flex;\n gap: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.time-set-input {\n flex: 1;\n position: relative;\n}\n.time-set-input input {\n border-radius: 30px;\n height: 40px;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n padding-left: 18px;\n padding-right: 40px;\n font-family: \"Satoshi-Medium\", sans-serif;\n background-color: #fff;\n -webkit-appearance: textfield;\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.time-set-input input:focus-visible {\n outline: none;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n.time-set-input span {\n color: #6e7684;\n font-family: \"Satoshi-Medium\", sans-serif;\n position: absolute;\n right: 18px;\n bottom: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.TooltipContent {\n border-radius: 30px;\n background-color: #29292f;\n padding: 10px 15px;\n font-size: 12px;\n line-height: 1;\n font-family: \"Satoshi-Medium\", sans-serif;\n z-index: 99999999 !important;\n color: #fff;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n transition: opacity 0.3 ease-in-out !important;\n will-change: transform, opacity;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n\n.hide-tooltip {\n display: none !important;\n}\n\n.tooltip-tall {\n margin-bottom: 20px;\n}\n\n.tooltip-small {\n margin-bottom: 5px;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=top] {\n animation-name: slideDownAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=right] {\n animation-name: slideLeftAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=bottom] {\n animation-name: slideUpAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=left] {\n animation-name: slideRightAndFade;\n}\n\n@keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n#screenity-ui [data-radix-popper-content-wrapper] {\n z-index: 99999999999 !important;\n}\n\n.override {\n display: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n}\n\n.CanvasContainer {\n width: 100%;\n height: 100%;\n position: absolute;\n pointer-events: all !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999999999 !important;\n}\n\n.canvas {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999999999 !important;\n}\n\n.canvas-container {\n width: 100vw !important;\n height: 100vh !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999999999;\n position: absolute !important;\n}\n\n.camera-draggable {\n width: 100%;\n height: 100%;\n transform-origin: left top;\n border-radius: 50%;\n}\n\n.camera-grab {\n width: 100%;\n height: 100%;\n position: absolute;\n border-radius: 50%;\n z-index: 99999999 !important;\n cursor: grab;\n}\n\n.camera-flipped {\n transform: scaleX(-1);\n}\n\n.camera-toolbar {\n display: flex;\n align-items: center;\n padding-left: 4px;\n padding-right: 4px;\n transition: opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n min-width: -moz-max-content;\n min-width: max-content;\n background-color: rgba(30, 30, 30, 0.8);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n height: 28px;\n position: absolute;\n left: 10px;\n top: 10px;\n border-radius: 30px;\n backdrop-filter: blur(10px);\n z-index: 99999999999;\n opacity: 0;\n border: 3px solid rgba(255, 255, 255, 0.2);\n}\n\n.camera-draggable:hover .camera-toolbar, .camera-draggable:hover .camera-resize {\n opacity: 1 !important;\n}\n\n.camera-toolbar:hover, .camera-resize:hover {\n opacity: 1 !important;\n}\n\n.CameraToolbarSeparator {\n width: 1px;\n height: 18px;\n background-color: rgba(255, 255, 255, 0.3);\n margin: 0 4px;\n}\n\n.CameraToggleItem, .CameraToolbarButton {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #000;\n height: 22px;\n width: 22px;\n text-align: center;\n font-size: 13px;\n line-height: 1;\n border-radius: 50%;\n transition: background-color 0.25s ease-in-out;\n background-color: rgba(124, 139, 165, 0);\n}\n.CameraToggleItem svg, .CameraToolbarButton svg {\n color: #9797a4;\n}\n.CameraToggleItem:hover, .CameraToolbarButton:hover {\n background-color: rgba(124, 139, 165, 0.2) !important;\n cursor: pointer;\n}\n.CameraToggleItem:disabled, .CameraToolbarButton:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.CameraToggleItem[data-state=on], .CameraToolbarButton[data-state=on] {\n color: #FFF;\n}\n.CameraToggleItem[data-state=on] svg, .CameraToolbarButton[data-state=on] svg {\n color: #FFF;\n}\n\n.CameraToggleItem:hover, .CameraToggleButton:hover {\n cursor: pointer;\n}\n\n.CameraToggleItem:focus-visible, .CameraToggleButton:focus-visible {\n position: relative;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.CameraToggleGroup {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.CameraToggleGroup, .CameraToolbarSeparator {\n display: none;\n}\n\n.camera-resize {\n position: absolute;\n bottom: 20px;\n right: 20px;\n z-index: 99999999999;\n height: 28px;\n width: 28px;\n border-radius: 50%;\n background-color: rgba(30, 30, 30, 0.8);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n border: 3px solid rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(10px);\n align-items: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n}\n.camera-resize svg {\n color: #9797A4;\n text-align: center;\n margin: auto;\n display: block;\n}\n\n.countdown {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: 99999999999;\n}\n\n.countdown-circle {\n width: 200px;\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 999;\n text-align: center;\n}\n\n.countdown-overlay {\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: 99;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.countdown-number {\n position: absolute;\n width: 20px;\n height: 60px;\n z-index: 9999999;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n font-weight: 300 !important;\n font-family: \"Satoshi-Light\", sans-serif !important;\n font-size: 48px !important;\n line-height: 60px !important;\n letter-spacing: normal !important;\n text-transform: none !important;\n word-spacing: normal !important;\n color: #fff;\n text-align: center;\n display: block;\n transition: all 0.6s ease-in-out;\n}\n\n.background {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0px;\n top: 0px;\n filter: url(\"#goo\");\n transform: rotate(0deg);\n transition: all 3s ease-in-out;\n}\n\n.circle {\n z-index: 9;\n position: absolute;\n transform: scale(0.8);\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n border-radius: 50%;\n background: radial-gradient(118.3% 119.01% at 35.44% 0%, #2baef8 23.13%, #3582f6 46.35%, #486def 74.48%, #7b9aea 100%);\n width: 200px;\n height: 200px;\n transition: all 1.5s ease-in-out;\n}\n\n.c {\n width: 50px;\n height: 50px;\n z-index: 999;\n border-radius: 50%;\n position: absolute;\n top: 0px;\n right: 0px;\n left: 0px;\n bottom: 0px;\n margin: auto;\n transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;\n opacity: 1;\n}\n\n.c2 {\n background: radial-gradient(118.3% 119.01% at 35.44% 0%, #2b96f8 23.13%, #356bf6 64.58%);\n transform: translate(20px, 20px);\n}\n\n.c3 {\n background: radial-gradient(118.3% 119.01% at 35.44% 0%, #4884ca 15.3%, #2b89f8 78.83%);\n transform: translate(-30px, -40px);\n}\n\n.c3:after {\n content: \"\";\n position: absolute;\n width: 150px;\n height: 150px;\n filter: blur(50px);\n border-radius: 50%;\n top: 0px;\n right: 0px;\n left: 0px;\n bottom: 0px;\n margin: auto;\n transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;\n background: #cbe8f7;\n z-index: -1;\n}\n\n.recording-countdown {\n pointer-events: all;\n}\n\n.recording-countdown .c2 {\n transform: translate(-15px, 15px);\n}\n\n.recording-countdown .c3 {\n transform: translate(-10px, -5px);\n}\n\n.countdown-info {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n bottom: 20px;\n border-radius: 30px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n text-align: center;\n display: block;\n padding: 10px 20px;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 14px;\n line-height: 1.4;\n letter-spacing: normal;\n text-transform: none;\n color: #fff;\n z-index: 99999999999;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.AlertDialogOverlay {\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n inset: 0;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 99999999999;\n}\n\n.AlertDialogContent {\n overflow: auto !important;\n background-color: white;\n border-radius: 30px;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 90vw;\n max-width: 500px;\n max-height: 85vh;\n padding: 35px 25px;\n animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 99999999999;\n}\n\n.AlertDialogContent:focus {\n outline: none;\n}\n\n.AlertDialogTitle {\n margin: 0;\n color: #29292f;\n font-size: 14px;\n line-height: 1.4;\n font-family: \"Satoshi-Bold\", sans-serif;\n font-weight: 700;\n}\n\n.AlertDialogDescription {\n margin-bottom: 20px;\n color: #6e7684;\n font-size: 14px;\n line-height: 1.5;\n}\n.AlertDialogDescription a {\n color: #3080f8 !important;\n font-weight: 600 !important;\n text-decoration: none !important;\n display: inline-block;\n cursor: pointer;\n}\n\n.Button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n padding: 0 15px;\n font-size: 14px;\n line-height: 1;\n font-weight: 500;\n height: 35px;\n}\n\n.Button.blue {\n background-color: rgba(48, 128, 248, 0.1);\n color: #3080f8;\n}\n.Button.blue:hover {\n background-color: rgba(48, 128, 248, 0.15);\n cursor: pointer;\n}\n.Button.blue:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.Button.red {\n background-color: rgba(247, 56, 90, 0.1);\n color: rgb(247, 56, 90);\n}\n\n.Button.red:hover {\n background-color: rgba(247, 56, 90, 0.15);\n cursor: pointer;\n}\n\n.Button.red:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.Button.grey {\n background: rgba(110, 118, 132, 0.1);\n color: #6e7684;\n}\n\n.Button.grey:hover {\n background: rgba(110, 118, 132, 0.15);\n cursor: pointer;\n}\n\n.Button.grey:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n@keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes contentShow {\n from {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n.SideButtonModal {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n padding: 0 15px;\n font-size: 14px;\n line-height: 1;\n font-weight: 500;\n height: 35px;\n color: #6e7684;\n font-family: \"Satoshi-Medium\", sans-serif;\n}\n.SideButtonModal:hover {\n cursor: pointer;\n background: rgba(110, 118, 132, 0.05);\n}\n\n.box-hole {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999999999;\n}\n\n.resize-handle {\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: white;\n border: 2px solid rgba(0, 0, 0, 0.5);\n box-sizing: border-box;\n}\n\n.resize-handle.top-left {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nwse-resize;\n}\n\n.resize-handle.top {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n cursor: ns-resize;\n}\n\n.resize-handle.top-right {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nesw-resize;\n}\n\n.resize-handle.right {\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n\n.resize-handle.bottom-right {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nwse-resize;\n}\n\n.resize-handle.bottom {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n cursor: ns-resize;\n}\n\n.resize-handle.bottom-left {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nesw-resize;\n}\n\n.resize-handle.left {\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n\n.region-recording * {\n pointer-events: none !important;\n}\n\n.WarningViewport {\n --viewport-padding: 25px;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n margin: auto !important;\n display: flex;\n flex-direction: column;\n padding: var(--viewport-padding);\n gap: 14px;\n max-width: 100vw;\n width: -moz-fit-content;\n width: fit-content;\n list-style: none;\n z-index: 2147483647;\n outline: none;\n pointer-events: all !important;\n}\n\n.warning-root {\n background-color: #29292f;\n color: #fff;\n border-radius: 30px;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n padding: 14px 20px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 8px;\n font-size: 15px;\n line-height: 1.5;\n max-width: 350px;\n overflow: hidden;\n align-items: center;\n text-align: left;\n align-items: flex-start;\n}\n\n.warning-content {\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n\n.warning-root[data-state=open] {\n animation: slideIn2 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.warning-root[data-state=closed] {\n animation: hide 100ms ease-in;\n}\n\n.warning-root[data-swipe=move] {\n transform: translateY(var(--radix-toast-swipe-move-y));\n}\n\n.warning-root[data-swipe=cancel] {\n transform: translateY(0);\n transition: transform 200ms ease-out;\n}\n\n.warning-root[data-swipe=end] {\n animation: swipeOut2 100ms ease-out;\n}\n\n@keyframes hide {\n from {\n opacity: 1;\n }\n to {\n opacity: 0 !important;\n }\n}\n@keyframes slideIn2 {\n from {\n transform: translateY(calc(-100% - var(--viewport-padding)));\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes swipeOut2 {\n from {\n transform: translateY(var(--radix-toast-swipe-end-y));\n }\n to {\n transform: translateY(calc(-100% - var(--viewport-padding)));\n }\n}\n.warning-title {\n color: #fff;\n font-family: \"Satoshi-Medium\", sans-serif;\n line-height: 1.4;\n}\n\n.warning-description {\n color: #fff;\n opacity: 0.8;\n font-family: \"Satoshi-Medium\", sans-serif;\n line-height: 1.5;\n}\n\n.ToastAction {\n color: #fff;\n font-family: \"Satoshi-Medium\", sans-serif;\n text-align: right;\n background-color: #51515f;\n padding: 0px 12px !important;\n height: 24px !important;\n cursor: pointer;\n}\n\n.warning-close {\n z-index: 999999;\n}\n\n.warning-close:hover {\n cursor: pointer;\n}\n\n:host {\n font-size: 16px;\n line-height: normal;\n letter-spacing: normal;\n word-spacing: normal;\n text-transform: none;\n font-style: normal;\n font-variant: normal;\n text-indent: 0;\n direction: ltr;\n white-space: normal;\n}\n\n.screenity-scrollbar::-webkit-scrollbar {\n background-color: rgba(0, 0, 0, 0);\n width: 16px;\n height: 16px;\n z-index: 999999;\n}\n\n.screenity-scrollbar::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0);\n}\n\n.screenity-scrollbar::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0);\n border-radius: 16px;\n border: 0px solid #fff;\n}\n\n.screenity-scrollbar::-webkit-scrollbar-button {\n display: none;\n}\n\n.screenity-scrollbar:hover::-webkit-scrollbar-thumb {\n background-color: #a0a0a5;\n border: 4px solid #fff;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: #a0a0a5;\n border: 4px solid #f4f4f4;\n}\n\n.ScreenityDropdownMenuContent {\n min-width: 200px;\n background-color: white;\n margin-top: 4px;\n margin-right: 8px;\n padding-top: 12px;\n padding-bottom: 12px;\n border-radius: 15px;\n z-index: 99999;\n font-family: \"Satoshi-Medium\", sans-serif;\n color: #29292f;\n box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n\n.ScreenityDropdownMenuContent[data-side=top] {\n animation-name: slideDownAndFade;\n}\n\n.ScreenityDropdownMenuContent[data-side=right] {\n animation-name: slideLeftAndFade;\n}\n\n.ScreenityDropdownMenuContent[data-side=bottom] {\n animation-name: slideUpAndFade;\n}\n\n.ScreenityDropdownMenuContent[data-side=left] {\n animation-name: slideRightAndFade;\n}\n\n.ScreenityItemIndicator {\n position: absolute;\n right: 12px;\n width: 18px;\n height: 18px;\n background: #3080f8;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.ScreenityDropdownMenuItem,\n.ScreenityDropdownMenuRadioItem {\n font-size: 14px;\n line-height: 1;\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 5px;\n position: relative;\n padding-left: 22px;\n padding-right: 22px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n outline: none;\n}\n\n.ScreenityDropdownMenuItem:hover {\n background-color: #f6f7fb !important;\n cursor: pointer;\n}\n\n.ScreenityDropdownMenuItem[data-disabled] {\n color: #6e7684 !important;\n cursor: not-allowed;\n background-color: #f6f7fb !important;\n}\n\n.driver-popover.ScreenityOnboardingPopover,\n.ScreenityOnboardingPopover,\n.onboarding-popover {\n border-radius: 30px !important;\n background: #fff !important;\n color: #29292f !important;\n font-family: \"Satoshi-Regular\", sans-serif !important;\n box-shadow: 0 4px 20px rgba(38, 38, 52, 0.08) !important;\n padding: 20px !important;\n max-width: 340px !important;\n font-size: 14px !important;\n z-index: 99999999999 !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-title,\n.ScreenityOnboardingPopover .driver-popover-title,\n.onboarding-popover .driver-popover-title {\n font-size: 1rem !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n margin-bottom: 12px !important;\n color: #29292f !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-description,\n.ScreenityOnboardingPopover .driver-popover-description,\n.onboarding-popover .driver-popover-description {\n font-size: 14px !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n color: #6e7684 !important;\n line-height: 1.5 !important;\n margin-bottom: 18px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-description a,\n.ScreenityOnboardingPopover .driver-popover-description a,\n.onboarding-popover .driver-popover-description a {\n color: #3b82f6 !important;\n font-family: \"Satoshi-Bold\", sans-serif !important;\n text-decoration: none !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-close-btn,\n.ScreenityOnboardingPopover .driver-popover-close-btn,\n.onboarding-popover .driver-popover-close-btn {\n top: 14px;\n right: 12px;\n color: #6e7684 !important;\n font-size: 1.5rem !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow,\n.ScreenityOnboardingPopover .driver-popover-arrow,\n.onboarding-popover .driver-popover-arrow {\n width: 0px;\n height: 0px;\n background: none !important;\n box-shadow: none !important;\n box-sizing: border-box;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-top,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-top,\n.onboarding-popover .driver-popover-arrow-side-top {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-top: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-bottom,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-bottom,\n.onboarding-popover .driver-popover-arrow-side-bottom {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-bottom: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-left,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-left,\n.onboarding-popover .driver-popover-arrow-side-left {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-left: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-side-right,\n.ScreenityOnboardingPopover .driver-popover-arrow-side-right,\n.onboarding-popover .driver-popover-arrow-side-right {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-right: 8px solid #fff !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-start,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-start,\n.onboarding-popover .driver-popover-arrow-align-start {\n top: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-end,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-end,\n.onboarding-popover .driver-popover-arrow-align-end {\n bottom: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-left,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-left,\n.onboarding-popover .driver-popover-arrow-align-left {\n left: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-arrow-align-right,\n.ScreenityOnboardingPopover .driver-popover-arrow-align-right,\n.onboarding-popover .driver-popover-arrow-align-right {\n right: 35px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-progress-text,\n.ScreenityOnboardingPopover .driver-popover-progress-text,\n.onboarding-popover .driver-popover-progress-text {\n font-size: 0.8rem !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n color: #6e7684 !important;\n opacity: 0.7 !important;\n margin-top: 2px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer,\n.ScreenityOnboardingPopover .driver-popover-footer,\n.onboarding-popover .driver-popover-footer {\n display: flex !important;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 16px;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns {\n gap: 6px !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn {\n background-color: #3080f8 !important;\n color: white !important;\n border: none !important;\n padding: 10px 14px !important;\n border-radius: 30px !important;\n font-family: \"Satoshi-Medium\", sans-serif !important;\n font-weight: 500 !important;\n cursor: pointer !important;\n font-size: 0.875rem !important;\n text-shadow: none !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn:hover,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn:hover,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn:hover {\n background: rgb(23.3341121495, 112.8668224299, 247.1658878505) !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn {\n background-color: transparent !important;\n color: #29292f !important;\n border: 1px solid #e8e8e8 !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn:hover,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn:hover,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn:hover {\n background: #f6f7fb !important;\n}\n.driver-popover.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.ScreenityOnboardingPopover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn,\n.onboarding-popover .driver-popover-footer .driver-popover-navigation-btns .driver-popover-close-btn {\n background-color: transparent !important;\n color: #6e7684 !important;\n}\n\n.driver-overlay {\n z-index: 2147483645 !important;\n}\n\n.driver-stage {\n z-index: 2147483646 !important;\n}\n\n.driver-popover,\n.driver-popover.ScreenityOnboardingPopover {\n z-index: 2147483647 !important;\n}/*# sourceMappingURL=app.css.map */" }, { "path": "src/pages/Content/styles/app.scss", "content": "@use \"../toolbar/styles/_Page.scss\";\n@use \"../popup/styles/_Popup.scss\";\n@use \"../canvas/styles/_Canvas.scss\";\n@use \"../camera/styles/_Camera.scss\";\n@use \"../countdown/styles/_Countdown.scss\";\n@use \"../modal/styles/_Modal.scss\";\n@use \"../region/styles/_Region.scss\";\n@use \"../camera-only/styles/CameraOnly.scss\";\n@use \"../warning/styles/Warning.scss\";\n@use \"./_variables\" as *;\n@use \"sass:color\";\n\n// Reset inherited properties inside the shadow tree.\n:host {\n font-size: 16px;\n line-height: normal;\n letter-spacing: normal;\n word-spacing: normal;\n text-transform: none;\n font-style: normal;\n font-variant: normal;\n text-indent: 0;\n direction: ltr;\n white-space: normal;\n}\n\n.screenity-scrollbar::-webkit-scrollbar {\n background-color: rgba(0, 0, 0, 0);\n width: 16px;\n height: 16px;\n z-index: 999999;\n}\n.screenity-scrollbar::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0);\n}\n.screenity-scrollbar::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0);\n border-radius: 16px;\n border: 0px solid #fff;\n}\n.screenity-scrollbar::-webkit-scrollbar-button {\n display: none;\n}\n.screenity-scrollbar:hover::-webkit-scrollbar-thumb {\n background-color: #a0a0a5;\n border: 4px solid #fff;\n}\n::-webkit-scrollbar-thumb:hover {\n background-color: #a0a0a5;\n border: 4px solid #f4f4f4;\n}\n\n.ScreenityDropdownMenuContent {\n min-width: 200px;\n background-color: white;\n margin-top: 4px;\n margin-right: 8px;\n padding-top: 12px;\n padding-bottom: 12px;\n border-radius: 15px;\n z-index: 99999;\n font-family: \"Satoshi-Medium\", sans-serif;\n color: #29292f;\n box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),\n 0px 10px 20px -15px rgba(22, 23, 24, 0.2);\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n.ScreenityDropdownMenuContent[data-side=\"top\"] {\n animation-name: slideDownAndFade;\n}\n.ScreenityDropdownMenuContent[data-side=\"right\"] {\n animation-name: slideLeftAndFade;\n}\n.ScreenityDropdownMenuContent[data-side=\"bottom\"] {\n animation-name: slideUpAndFade;\n}\n.ScreenityDropdownMenuContent[data-side=\"left\"] {\n animation-name: slideRightAndFade;\n}\n.ScreenityItemIndicator {\n position: absolute;\n right: 12px;\n width: 18px;\n height: 18px;\n background: #3080f8;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.ScreenityDropdownMenuItem,\n.ScreenityDropdownMenuRadioItem {\n font-size: 14px;\n line-height: 1;\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 5px;\n position: relative;\n padding-left: 22px;\n padding-right: 22px;\n user-select: none;\n outline: none;\n}\n.ScreenityDropdownMenuItem:hover {\n background-color: #f6f7fb !important;\n cursor: pointer;\n}\n.ScreenityDropdownMenuItem[data-disabled] {\n color: #6e7684 !important;\n cursor: not-allowed;\n background-color: #f6f7fb !important;\n}\n\n// Onboarding (driver.js)\n.driver-popover.ScreenityOnboardingPopover,\n.ScreenityOnboardingPopover,\n.onboarding-popover {\n border-radius: $container-border-radius !important;\n background: $color-background !important;\n color: $color-text-primary !important;\n font-family: $font-regular !important;\n box-shadow: $container-soft-shadow !important;\n padding: 20px !important;\n max-width: 340px !important;\n font-size: $font-size-normal !important;\n z-index: $z-index-max !important;\n\n .driver-popover-title {\n font-size: 1rem !important;\n font-family: $font-medium !important;\n margin-bottom: 12px !important;\n color: $color-text-primary !important;\n }\n\n .driver-popover-description {\n font-size: $font-size-normal !important;\n font-family: $font-medium !important;\n color: $color-text-secondary !important;\n line-height: 1.5 !important;\n margin-bottom: 18px !important;\n\n a {\n color: #3b82f6 !important;\n font-family: $font-bold !important;\n text-decoration: none !important;\n }\n }\n\n .driver-popover-close-btn {\n top: 14px;\n right: 12px;\n color: $color-text-secondary !important;\n font-size: 1.5rem !important;\n }\n\n .driver-popover-arrow {\n width: 0px;\n height: 0px;\n // border: 4px solid #fff;\n background: none !important;\n box-shadow: none !important;\n box-sizing: border-box;\n }\n\n .driver-popover-arrow-side-top {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-top: 8px solid $color-background !important;\n }\n\n .driver-popover-arrow-side-bottom {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-bottom: 8px solid $color-background !important;\n }\n\n .driver-popover-arrow-side-left {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-left: 8px solid $color-background !important;\n }\n\n .driver-popover-arrow-side-right {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-right: 8px solid $color-background !important;\n }\n .driver-popover-arrow-align-start {\n top: 35px !important;\n }\n .driver-popover-arrow-align-end {\n bottom: 35px !important;\n }\n .driver-popover-arrow-align-left {\n left: 35px !important;\n }\n .driver-popover-arrow-align-right {\n right: 35px !important;\n }\n .driver-popover-progress-text {\n font-size: $font-size-detail !important;\n font-family: $font-medium !important;\n color: $color-text-secondary !important;\n opacity: 0.7 !important;\n margin-top: 2px !important;\n }\n .driver-popover-footer {\n display: flex !important;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 16px;\n\n .driver-popover-navigation-btns {\n gap: 6px !important;\n\n .driver-popover-next-btn,\n .driver-popover-prev-btn,\n .driver-popover-close-btn {\n background-color: $color-primary !important;\n color: white !important;\n border: none !important;\n padding: 10px 14px !important;\n border-radius: 30px !important;\n font-family: $font-medium !important;\n font-weight: 500 !important;\n cursor: pointer !important;\n font-size: 0.875rem !important;\n text-shadow: none !important;\n }\n .driver-popover-next-btn {\n &:hover {\n background: color.adjust($color-primary, $lightness: -5%) !important;\n }\n }\n\n .driver-popover-prev-btn {\n background-color: transparent !important;\n color: $color-text-primary !important;\n border: 1px solid $color-border !important;\n\n &:hover {\n background: $color-light-grey !important;\n }\n }\n\n .driver-popover-close-btn {\n background-color: transparent !important;\n color: $color-text-secondary !important;\n }\n }\n }\n}\n\n// Keep driver overlay/stage above extension UI layers during onboarding.\n.driver-overlay {\n z-index: 2147483645 !important;\n}\n\n.driver-stage {\n z-index: 2147483646 !important;\n}\n\n.driver-popover,\n.driver-popover.ScreenityOnboardingPopover {\n z-index: 2147483647 !important;\n}\n" }, { "path": "src/pages/Content/styles/dist/app.css", "content": "/* Colors */\n/* Font */\n/* Spacing */\n/*\n$spacing-01: 0.125rem;\n$spacing-02: 0.25rem;\n$spacing-03: 0.5rem;\n$spacing-04: 0.75rem;\n$spacing-05: 1rem;\n*/\n/* Container */\n/* Gradients */\n/* Events */\n/* Z-index */\n/* reset */\na,\nbutton {\n all: unset;\n}\n\niframe {\n width: 100%;\n height: 100%;\n position: fixed;\n overflow: scroll;\n z-index: -9999;\n top: 0px;\n left: 0px;\n border: 0px;\n pointer-events: all !important;\n}\n\n.container {\n pointer-events: none !important;\n}\n\n.ToolbarBounds {\n position: fixed;\n top: 0px;\n left: 0px;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 10px solid #3080F8;\n pointer-events: none;\n transform: scale(1.2);\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s ease-in-out;\n}\n\n.ToolbarBounds.ToolbarShake {\n transform: scale(1);\n opacity: 0.4;\n}\n\n.react-draggable {\n pointer-events: all;\n}\n\n.ToolbarShake .react-draggable {\n width: 100%;\n height: 100%;\n}\n\n.ToolbarElastic {\n transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.ToolbarShake .ToolbarRoot {\n animation: subtleshake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n animation-iteration-count: infinite !important;\n background-color: white !important;\n}\n\n.ToolbarDragging .ToolbarRoot {\n transform: scale(1.02);\n}\n.ToolbarDragging .ToolbarRoot::after {\n filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.5));\n}\n\n@keyframes shake {\n 0% {\n transform: translate(1px, 1px) rotate(0deg);\n }\n 20% {\n transform: translate(-3px, 0px) rotate(1deg);\n }\n 30% {\n transform: translate(3px, 2px) rotate(0deg);\n }\n 40% {\n transform: translate(1px, -1px) rotate(1deg);\n }\n 50% {\n transform: translate(-1px, 2px) rotate(-1deg);\n }\n 60% {\n transform: translate(-3px, 1px) rotate(0deg);\n }\n 70% {\n transform: translate(3px, 1px) rotate(-1deg);\n }\n 80% {\n transform: translate(-1px, -1px) rotate(1deg);\n }\n 90% {\n transform: translate(1px, 2px) rotate(0deg);\n }\n 100% {\n transform: translate(1px, -2px) rotate(-1deg);\n }\n}\n@keyframes subtleshake {\n 0% {\n transform: translate(0px, 0px) rotate(0deg);\n }\n 10% {\n transform: translate(-1px, 1px) rotate(1deg);\n }\n 20% {\n transform: translate(-1px, -1px) rotate(-1deg);\n }\n 30% {\n transform: translate(1px, 0px) rotate(0deg);\n }\n 40% {\n transform: translate(-1px, 1px) rotate(-1deg);\n }\n 50% {\n transform: translate(1px, -1px) rotate(1deg);\n }\n 60% {\n transform: translate(-1px, 1px) rotate(-1deg);\n }\n 70% {\n transform: translate(-1px, -1px) rotate(1deg);\n }\n 80% {\n transform: translate(1px, 1px) rotate(0deg);\n }\n 90% {\n transform: translate(0px, -1px) rotate(-1deg);\n }\n 100% {\n transform: translate(-1px, 1px) rotate(1deg);\n }\n}\n.ToolbarRoot {\n display: flex;\n align-items: center;\n padding-left: 10px;\n transition: opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), transform 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n min-width: -moz-max-content;\n min-width: max-content;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n padding-right: 10px;\n height: 48px;\n position: absolute;\n bottom: 20px;\n left: 20px;\n border-radius: 30px;\n}\n.ToolbarRoot::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: #FFF;\n z-index: -9999999;\n position: absolute;\n left: 0px;\n top: 0px;\n border-radius: 30px;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n transition: filter 0.2s ease-in-out;\n}\n\n.ToolbarRecordingControls {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #F6F7FB;\n border-radius: 30px;\n font-family: \"Satoshi-Medium\", sans-serif;\n height: calc(100% - 12px);\n padding-left: 2px;\n padding-right: 2px;\n}\n\n.ToolbarRecordingTime {\n margin-right: 4px;\n width: 42px;\n color: #29292F;\n font-size: 13px;\n}\n\n.ToolbarToggleGroup {\n display: flex;\n align-items: center;\n}\n\n.ToolbarToggleWrap {\n flex: 1 1 auto;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex: 0 0 auto;\n width: 32px;\n height: 32px;\n display: inline-flex;\n line-height: 1;\n align-items: center;\n justify-content: center;\n}\n\n.ToolbarToggleItem,\n.ToolbarModeItem,\n.ToolbarModeItemSingle,\n.ToolbarLink,\n.ToolbarButton {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #000;\n height: 32px;\n width: 32px;\n text-align: center;\n font-size: 13px;\n line-height: 1;\n border-radius: 50%;\n transition: background-color 0.25s ease-in-out;\n background-color: rgba(124, 139, 165, 0);\n}\n.ToolbarToggleItem svg,\n.ToolbarModeItem svg,\n.ToolbarModeItemSingle svg,\n.ToolbarLink svg,\n.ToolbarButton svg {\n color: #9797A4;\n}\n.ToolbarToggleItem:disabled,\n.ToolbarModeItem:disabled,\n.ToolbarModeItemSingle:disabled,\n.ToolbarLink:disabled,\n.ToolbarButton:disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n background: none !important;\n}\n\n.ToolbarToggleItem:hover,\n.ToolbarModeItem:hover,\n.ToolbarModeItemSingle:hover,\n.ToolbarLink:hover,\n.ToolbarButton:hover {\n cursor: pointer;\n background-color: rgba(124, 139, 165, 0.1) !important;\n}\n\n.ToolbarToggleItem:focus-visible,\n.ToolbarModeItemSingle:focus-visible,\n.ToolbarModeItem:focus-visible,\n.ToolbarLink:focus-visible,\n.ToolbarButton:focus-visible {\n position: relative;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.ToolbarModeItemSingle {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n}\n.ToolbarModeItemSingle:first-child {\n margin-left: 0;\n}\n.ToolbarModeItemSingle[data-state=on] {\n background: rgba(120, 192, 114, 0.1);\n}\n.ToolbarModeItemSingle[data-state=on] svg {\n color: #78C072;\n}\n.ToolbarModeItemSingle[data-state=on]::before {\n transform: translateY(0px) scale(1) !important;\n opacity: 1 !important;\n}\n\n.ToolbarModeItem {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n}\n.ToolbarModeItem:first-child {\n margin-left: 0;\n}\n.ToolbarModeItem::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 50%;\n border-radius: 5rem 5rem 0% 0%;\n box-sizing: border-box;\n position: absolute;\n top: -16px;\n left: 0;\n z-index: -999999;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s ease-in-out;\n transform: translateY(5px) scale(0) !important;\n border-right: 3px solid white;\n border-top: 9px solid white;\n border-left: 3px solid white;\n background-color: transparent;\n opacity: 0;\n}\n.ToolbarModeItem[data-state=on] {\n background: rgba(56, 126, 247, 0.1);\n}\n.ToolbarModeItem[data-state=on] svg {\n color: #3080F8;\n}\n.ToolbarModeItem[data-state=on]::before {\n transform: translateY(0px) scale(1) !important;\n opacity: 1 !important;\n}\n\n.ToolbarBottom .ToolbarModeItem::before {\n transform: translateY(-5px) scale(0.5) !important;\n bottom: -16px;\n top: unset !important;\n border-bottom: 9px solid white !important;\n border-radius: 0% 0% 5rem 5rem !important;\n border-top: none !important;\n}\n.ToolbarBottom .ToolbarModeItem[data-state=on]::before {\n transform: translateY(0px) scale(1) !important;\n}\n\n.ToolbarToggleItem {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n}\n.ToolbarToggleItem:first-child {\n margin-left: 0;\n}\n.ToolbarToggleItem[data-state=on] {\n background: radial-gradient(117.41% 117.78% at 35.44% 0%, #2BAEF8 23.13%, #3582F6 46.35%, #486DEF 74.48%, #7B9AEA 100%);\n color: #FFF;\n}\n.ToolbarToggleItem[data-state=on] svg {\n color: #FFF;\n}\n\n.ToolbarSeparator {\n width: 1px;\n height: 19px;\n background-color: #E8E8E8;\n margin: 0 8px;\n}\n\n.ToolbarLink {\n background-color: transparent;\n color: var(--mauve11);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n}\n\n.ToolbarLink:hover {\n background-color: transparent;\n cursor: pointer;\n}\n\nbody {\n background-color: white !important;\n}\n\n.DrawingToolbar.show-toolbar {\n opacity: 1 !important;\n pointer-events: all !important;\n transform: scale(1) translate(calc(-50% + 16px), 0px) !important;\n}\n\n.ToolbarBottom .DrawingToolbar {\n transform-origin: 0 -100% !important;\n}\n\n.DrawingToolbar {\n opacity: 0;\n pointer-events: none;\n align-items: center;\n display: flex;\n min-width: -moz-max-content;\n min-width: max-content;\n padding-left: 10px;\n padding-right: 10px;\n border-radius: 6px;\n box-shadow: 0 2px 10px var(--blackA7);\n position: absolute;\n height: 44px;\n left: 0px;\n transform: translate(calc(-50% + 16px));\n transform-origin: 0 100%;\n border-radius: 15px;\n z-index: 99999999;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n transform: scale(0.5) translate(calc(-50% + 16px), 10px);\n}\n.DrawingToolbar::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n filter: blur(10px);\n opacity: 0.15;\n background-color: #000;\n position: absolute;\n left: 0px;\n top: 0px;\n z-index: -999999999999999 !important;\n}\n.DrawingToolbar::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: rgba(242, 241, 242, 0.85);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n background-clip: content-box;\n -webkit-mask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);\n mask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);\n background-position: center bottom 50px;\n border-radius: 15px;\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: -2;\n}\n.DrawingToolbar .ToolbarSeparator {\n background-color: #dddcdc;\n}\n\n.ToolbarTop .DrawingToolbar {\n bottom: 49px !important;\n}\n\n.ToolbarBottom .DrawingToolbar {\n top: 48px !important;\n}\n.ToolbarBottom .DrawingToolbar::before {\n -webkit-mask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px) !important;\n mask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px);\n background-position: center bottom 50px !important;\n}\n\n.ColorPicker {\n width: 14px;\n height: 14px;\n background: #ED6C3A;\n border: 1.5px solid rgba(0, 0, 0, 0.2);\n border-radius: 50%;\n}\n\n.shapeToolbar {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 10px var(--blackA7);\n left: 165px;\n padding: 4px;\n opacity: 0;\n bottom: 45px;\n transform: translateY(calc(-50% + 16px));\n transform-origin: 0 100%;\n border-radius: 15px;\n z-index: 99999999;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n transform: scale(0.5) translatY(calc(-50% + 16px), 10px);\n}\n.shapeToolbar::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: #FFF;\n z-index: -9999999;\n position: absolute;\n left: 0px;\n top: 0px;\n border-radius: 15px;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n transition: filter 0.2s ease-in-out;\n}\n\n.shapeToolbar.show-toolbar {\n opacity: 1 !important;\n pointer-events: all !important;\n transform: scale(1) translateY(calc(-50% + 16px), 0px) !important;\n}\n\n.TooltipContent {\n border-radius: 30px;\n background-color: #29292F;\n padding: 10px 15px;\n font-size: 12px;\n margin-bottom: 10px;\n bottom: 100px;\n line-height: 1;\n font-family: \"Satoshi-Medium\", sans-serif;\n z-index: 99999999 !important;\n color: #FFF;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n transition: opacity 0.3 ease-in-out;\n will-change: transform, opacity;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n\n.hide-tooltip {\n display: none !important;\n}\n\n.tooltip-tall {\n margin-bottom: 20px;\n}\n\n.tooltip-small {\n margin-bottom: 5px;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=top] {\n animation-name: slideDownAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=right] {\n animation-name: slideLeftAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=bottom] {\n animation-name: slideUpAndFade;\n}\n\n.TooltipContent[data-state=delayed-open][data-side=left] {\n animation-name: slideRightAndFade;\n}\n\n@keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n#screenity-ui [data-radix-popper-content-wrapper] {\n z-index: 99999999999 !important;\n}\n\n.radial-menu {\n position: absolute;\n z-index: 9999999999999;\n width: 100px;\n height: 100px;\n top: -66px;\n left: -49px;\n pointer-events: none;\n opacity: 1;\n transform: scale(1);\n transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.25s ease-in-out;\n}\n.radial-menu::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n border: 28px solid #FFF;\n box-sizing: border-box;\n border-radius: 50%;\n -webkit-backdrop-filter: blur(40px);\n backdrop-filter: blur(40px);\n opacity: 0;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n transform: scale(0);\n transition: transform 0.25s cubic-bezier(0.18, -0.55, 0.265, 1.45), opacity 0.2s ease-in-out;\n transition-delay: 0.05s;\n}\n.radial-menu[data-state=open] {\n transform: scale(1);\n opacity: 1;\n pointer-events: all !important;\n}\n.radial-menu[data-state=open]::after {\n transform: scale(1);\n border: 28px solid #FFF;\n opacity: 1;\n}\n\n.color-wheel::after {\n opacity: 0 !important;\n}\n\n.eyedropper {\n position: absolute;\n left: 0px;\n top: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n width: 16px;\n height: 16px;\n padding: 8px;\n z-index: 999999999;\n background-color: #FFF;\n border-radius: 50%;\n opacity: 0;\n text-align: center;\n transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease-in-out, background-color 0.25s ease-in-out !important;\n transform: scale(0);\n overflow: hidden;\n transform-style: preserve-3d;\n}\n.eyedropper svg {\n color: #9797A4;\n}\n.eyedropper:focus-visible {\n outline: none;\n background-color: #E6E7EA !important;\n}\n.eyedropper:hover {\n cursor: pointer;\n background-color: #E6E7EA;\n}\n\n.eye-active {\n background-color: #3080F8 !important;\n}\n.eye-active svg {\n color: #FFF !important;\n fill: #FFF !important;\n}\n\n.color-wheel .eyedropper {\n opacity: 0 !important;\n pointer-events: none !important;\n transform: scale(0) !important;\n}\n\n.radial-menu[data-state=open] .eyedropper {\n transform: scale(1) !important;\n opacity: 1;\n}\n\n.radial-menu-items {\n transform: rotate(10deg);\n z-index: 99999999;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n}\n\n.radial-menu-item {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 18px;\n height: 18px;\n z-index: 999;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n line-height: 50px;\n color: white;\n border: 1px solid rgba(0, 0, 0, 0.2);\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n opacity: 0;\n}\n.radial-menu-item:hover {\n cursor: pointer;\n}\n\n.color-wheel .radial-menu-item {\n opacity: 0 !important;\n}\n\n.radial-menu-item-child {\n width: 100%;\n height: 100%;\n position: absolute;\n box-sizing: border-box;\n border: 0px;\n box-shadow: none;\n top: 0px;\n pointer-events: none;\n z-index: 9999999;\n left: 0px;\n border-radius: 50%;\n background-size: cover;\n}\n.radial-menu-item-child:focus-visible {\n outline: none;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.radial-menu[data-state=open] .radial-menu-item-child {\n pointer-events: all !important;\n}\n\n.radial-menu-item:nth-child(1), .wheel-trigger {\n transform: rotate(0deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(1), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0s);\n transform: rotate(0deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(2), .wheel-trigger {\n transform: rotate(40deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(2), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.02s);\n transform: rotate(40deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(3), .wheel-trigger {\n transform: rotate(80deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(3), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.04s);\n transform: rotate(80deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(4), .wheel-trigger {\n transform: rotate(120deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(4), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.06s);\n transform: rotate(120deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(5), .wheel-trigger {\n transform: rotate(160deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(5), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.08s);\n transform: rotate(160deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(6), .wheel-trigger {\n transform: rotate(200deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(6), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.1s);\n transform: rotate(200deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(7), .wheel-trigger {\n transform: rotate(240deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(7), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.12s);\n transform: rotate(240deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(8), .wheel-trigger {\n transform: rotate(280deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(8), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.14s);\n transform: rotate(280deg) translate(36px);\n opacity: 1;\n}\n\n.radial-menu-item:nth-child(9), .wheel-trigger {\n transform: rotate(320deg) translate(0px);\n}\n\n.radial-menu[data-state=open] .radial-menu-item:nth-child(9), .radial-menu[data-state=open] .wheel-trigger {\n transition-delay: calc(.25s - 0.16s);\n transform: rotate(320deg) translate(36px);\n opacity: 1;\n}\n\n.color-active {\n border: 1px solid #FFFFFF;\n box-shadow: 0px 0px 0px 2px #0D99FF;\n}\n\n.color-wheel .color-active {\n border: none !important;\n box-shadow: none !important;\n}\n\n.wheel-trigger {\n transition: transform 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), width 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), height 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n opacity: 0;\n margin: auto;\n width: 18px;\n box-sizing: border-box;\n height: 18px;\n z-index: 9999;\n box-sizing: border-box;\n background-blend-mode: screen;\n border-radius: 50%;\n}\n.wheel-trigger:hover {\n cursor: pointer;\n}\n\n.wheel-trigger .radial-menu-item-child {\n transform: rotate(30deg);\n}\n.wheel-trigger .radial-menu-item-child:after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n z-index: 9999999;\n border-radius: 50%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n}\n\n.color-wheel .wheel-trigger {\n width: 100px !important;\n height: 100px !important;\n transform: rotate(320deg) translate(0px) !important;\n z-index: 999999999999 !important;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n}\n\n.color-wheel-handle {\n width: 12px !important;\n height: 12px !important;\n border-radius: 50%;\n left: 20px;\n top: 20px;\n opacity: 0;\n background-color: #F17FD7;\n border: 2px solid white;\n z-index: 999999999999;\n display: none;\n transition: width 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), height 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), margin-left 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96), margin-top 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n}\n.color-wheel-handle:hover {\n width: 18px !important;\n height: 18px !important;\n margin-left: -2px;\n margin-top: -2px;\n}\n\n.color-wheel .color-wheel-handle {\n opacity: 0;\n display: block;\n animation: fadeIn 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96) forwards;\n animation-delay: 0.5s;\n}\n\n.w-color-wheel {\n pointer-events: none;\n position: absolute !important;\n width: 100% !important;\n height: 100% !important;\n z-index: 99999999 !important;\n}\n.w-color-wheel::after {\n content: \"\";\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 9999999;\n border: 1px solid rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n border-radius: 50%;\n}\n\n.color-wheel .w-color-wheel {\n pointer-events: all !important;\n}\n\n.w-color-wheel-fill {\n box-shadow: none !important;\n border: 2px solid white !important;\n width: 14px !important;\n height: 14px !important;\n transition: width 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), height 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96), margin 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96) !important;\n box-sizing: border-box !important;\n margin-left: -2px !important;\n margin-top: -2px !important;\n z-index: 9999999999 !important;\n}\n\n.w-color-wheel-pointer {\n z-index: 99999999999 !important;\n opacity: 0;\n animation: none !important;\n}\n\n.color-wheel .w-color-wheel-pointer {\n animation: fadeInScale 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;\n animation-delay: 0.28s !important;\n}\n\n.w-color-wheel-fill:hover {\n width: 18px !important;\n height: 18px !important;\n margin-left: -4px !important;\n margin-top: -4px !important;\n}\n\n/* Fade in keyframes */\n@keyframes fadeInScale {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.color-wheel, .color-wheel .wheel-trigger, .color-wheel .wheel-trigger .radial-menu-item-child, .color-wheel-handle {\n cursor: pointer !important;\n}\n\n.color-wheel-input {\n background: #000;\n border-radius: 30px;\n height: 29px;\n color: #FFF;\n text-align: center;\n line-height: 29px;\n padding-left: 8px;\n padding-right: 8px;\n position: absolute;\n margin-top: -35px;\n font-family: \"Satoshi-Medium\", sans-serif;\n left: 50%;\n transform: translate(-50%, 0);\n opacity: 0;\n}\n\n.color-wheel .color-wheel-input {\n animation: fadeIn 0.3s cubic-bezier(0.61, 0.11, 0.08, 0.96) forwards;\n animation-delay: 0.2s;\n pointer-events: all !important;\n}\n\n.color-wheel-input {\n pointer-events: none;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n margin-top: -35px;\n }\n 100% {\n opacity: 1;\n margin-top: -40px;\n }\n}\n.color-active .color-preview {\n opacity: 1;\n}\n\n.radial-menu[data-state=closed] .color-preview {\n opacity: 0 !important;\n}\n\n.color-preview {\n width: 90%;\n height: 90%;\n box-sizing: border-box;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n z-index: 9999999999;\n transform: translate(-50%, -50%);\n opacity: 0;\n animation: none;\n pointer-events: none;\n border: 1px solid #FFF;\n box-sizing: border-box;\n}\n\n.color-wheel .color-preview {\n opacity: 0 !important;\n}\n\n.wheel-trigger .color-active {\n box-shadow: none !important;\n}\n\n.color-active .w-color-wheel {\n transform: scale(1.15) !important;\n}\n.color-active .w-color-wheel::after {\n border: none !important;\n}\n\n.color-wheel .w-color-wheel {\n transform: scale(1) !important;\n}\n.color-wheel .w-color-wheel::after {\n border: 1px solid rgba(0, 0, 0, 0.2) !important;\n}\n\n.radial-menu[data-state=closed] .w-color-wheel {\n transform: scale(1) !important;\n}\n\n.stroke-width-item span {\n width: 18px;\n height: 18px;\n display: block;\n}\n.stroke-width-item div[data-state=on] {\n background: #3080F8 !important;\n}\n.stroke-width-item div[data-state=on] svg {\n color: #FFF !important;\n fill: #FFF !important;\n}\n.stroke-width-item div[data-state=off] svg {\n fill: #201F1D;\n}\n\n.stroke-icon svg {\n text-align: center;\n margin: auto;\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.ToastViewport {\n --viewport-padding: 25px;\n position: fixed;\n bottom: 0;\n right: 0;\n left: 0;\n margin: auto !important;\n display: flex;\n flex-direction: column;\n padding: var(--viewport-padding);\n gap: 14px;\n max-width: 100vw;\n width: -moz-fit-content;\n width: fit-content;\n list-style: none;\n z-index: 2147483647;\n outline: none;\n pointer-events: all !important;\n}\n\n.ToastRoot {\n background-color: #29292F;\n color: #FFF;\n border-radius: 30px;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n padding: 10px 14px;\n display: flex;\n flex-direction: row;\n gap: 8px;\n font-size: 15px;\n line-height: 1.5;\n max-width: 100%;\n overflow: hidden;\n justify-content: center;\n align-items: center;\n}\n\n.ToastRoot[data-state=open] {\n animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.ToastRoot[data-state=closed] {\n animation: hide 100ms ease-in;\n}\n\n.ToastRoot[data-swipe=move] {\n transform: translateY(var(--radix-toast-swipe-move-y));\n}\n\n.ToastRoot[data-swipe=cancel] {\n transform: translateY(0);\n transition: transform 200ms ease-out;\n}\n\n.ToastRoot[data-swipe=end] {\n animation: swipeOut 100ms ease-out;\n}\n\n@keyframes hide {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes slideIn {\n from {\n transform: translateY(calc(100% + var(--viewport-padding)));\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes swipeOut {\n from {\n transform: translateY(var(--radix-toast-swipe-end-y));\n }\n to {\n transform: translateY(calc(100% + var(--viewport-padding)));\n }\n}\n.ToastTitle {\n color: #FFF;\n font-family: \"Satoshi-Medium\", sans-serif;\n}\n\n.ToastDescription {\n color: var(--slate-11);\n font-family: \"Satoshi-Medium\", sans-serif;\n}\n\n.ToastAction {\n color: #FFF;\n font-family: \"Satoshi-Medium\", sans-serif;\n text-align: right;\n background-color: #51515F;\n padding: 0px 12px !important;\n height: 24px !important;\n cursor: pointer;\n}\n\n.toolbar-page {\n width: 100%;\n height: 100%;\n pointer-events: none !important;\n}\n\n.tempimg {\n height: 100%;\n opacity: 1;\n position: fixed;\n right: 0px;\n top: 20px;\n}\n\n.container {\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0px;\n left: 0px;\n z-index: 999999999;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 14px;\n}\n\n/* Recording popup parent */\n.popup-container {\n width: 356px;\n position: fixed;\n top: 32px;\n right: 28px;\n z-index: 99999999999;\n filter: drop-shadow(0px 4px 100px rgba(0, 0, 0, 0.35));\n pointer-events: all;\n}\n\n.popup-container::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n transition: 2s;\n background: #FFF;\n background-clip: content-box;\n -webkit-mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n background-position: center bottom 50px;\n border-radius: 30px;\n position: absolute;\n top: 0px;\n left: 0px;\n}\n\n/*\n.popup-shape {\n\twidth: 100%;\n\theight: 100%;\n\tbackground: $color-background;\n\tbackground-clip: content-box;\n -webkit-mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n mask-image: radial-gradient(circle at center top, transparent 31px, #000 31px);\n background-position: center bottom 50px;\n\tborder-radius: $container-border-radius;\n\tposition: relative;\n}\n*/\n.popup-cutout {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n text-align: center;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n top: -22px;\n left: 0px;\n right: 0px;\n margin: auto;\n}\n\n.popup-cutout img {\n text-align: center;\n margin: auto;\n display: inline-block;\n width: 100%;\n border-radius: 50%;\n}\n\n/* Recording nav area */\n.popup-nav {\n width: 100%;\n position: relative;\n}\n\n/* Recording content area */\n.popup-content {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n overflow: hidden;\n}\n\n.waveform {\n width: 100%;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.popup-content-divider {\n width: 100%;\n height: 1px;\n background: #E8E8E8;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.popup-warning {\n display: flex;\n width: calc(100% + 2rem);\n height: 80px;\n justify-content: space-between;\n align-items: center;\n position: relative;\n overflow: hidden;\n background-color: rgba(56, 126, 247, 0.1);\n margin-left: -1rem;\n margin-top: -1rem;\n margin-bottom: 0.5rem;\n}\n.popup-warning .popup-warning-right {\n color: #3080F8;\n font-family: \"Satoshi-Medium\", sans-serif;\n width: 90px;\n}\n\n.popup-warning-left, .popup-warning-right {\n width: 50px;\n display: flex;\n align-items: center;\n text-align: center;\n height: 100%;\n justify-content: center;\n}\n.popup-warning-left svg, .popup-warning-right svg {\n color: #3080F8;\n}\n\n.popup-warning-right {\n cursor: pointer;\n}\n\n.popup-warning-middle {\n flex: 1;\n}\n.popup-warning-middle .popup-warning-title {\n font-family: \"Satoshi-Bold\", sans-serif;\n color: #29292F;\n}\n.popup-warning-middle .popup-warning-description {\n font-family: \"Satoshi-Medium\", sans-serif;\n color: #6E7684;\n margin-top: 4px;\n}\n\n.permission-button {\n background: rgba(48, 128, 248, 0.1);\n border-radius: 30px;\n color: #3080F8;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 44px;\n gap: 8px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n.permission-button:first-child {\n margin-top: 4px !important;\n}\n.permission-button:last-child {\n margin-bottom: 4px !important;\n}\n.permission-button:hover {\n background: rgba(48, 128, 248, 0.15);\n cursor: pointer;\n}\n.permission-button svg {\n color: #3080F8;\n}\n\n.CollapsibleTrigger {\n margin-top: 12px;\n font-weight: \"Satoshi-Bold\", sans-serif;\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: 12px;\n padding-right: 12px;\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n display: block;\n border-radius: 30px;\n}\n\n.CollapsibleTrigger:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.CollapsibleLabel {\n color: #6E7684;\n font-weight: \"Satoshi-Bold\", sans-serif;\n text-align: center;\n display: inline-block;\n}\n\n.CollapsibleLabel img {\n margin-left: 4px;\n}\n\n.CollapsibleTrigger:hover {\n cursor: pointer;\n background: #FFF;\n}\n\n.CollapsibleRoot[data-state=open] > .CollapsibleTrigger > .CollapsibleLabel img {\n transform: scaleY(-1);\n margin-bottom: 2px;\n}\n\n.video-ui {\n position: relative;\n /* Blur the background */\n}\n/* .video-ui:before {\n content: \"\";\n position: absolute;\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.5);\n z-index: 999;\n} */\n\n.videos-list {\n padding-bottom: 10px !important;\n max-height: calc(96vh - 260px);\n overflow-y: overlay;\n padding: 16px;\n}\n\n.bottom-section {\n width: 100%;\n bottom: 0px;\n left: 0px;\n box-sizing: border-box;\n padding-top: 8px !important;\n padding-bottom: 12px !important;\n padding: 16px;\n}\n\n.ModalSoon {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: -moz-fit-content;\n height: fit-content;\n width: 70%;\n padding: 30px 16px;\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n border-radius: 30px;\n background: white;\n box-shadow: 0px 4px 100px 0px rgba(0, 0, 0, 0.15);\n z-index: 9999999;\n}\n\n.ModalSoonEmoji {\n font-size: 20px;\n margin-bottom: 8px;\n}\n\n.ModalSoonTitle {\n font-weight: 700;\n color: #29292F;\n margin-bottom: 8px;\n text-align: center;\n}\n\n.ModalSoonDescription {\n text-align: center;\n color: #6E7684;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.ModalSoonButton {\n margin-top: 8px;\n color: #FFF;\n text-align: center;\n border-radius: 30px;\n background: radial-gradient(117.41% 117.78% at 35.44% 0%, #2BAEF8 23.13%, #3582F6 46.35%, #486DEF 74.48%, #7B9AEA 100%);\n padding: 8px 16px;\n}\n.ModalSoonButton:hover {\n cursor: pointer;\n}\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.SelectTrigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 30px;\n line-height: 1;\n height: 44px;\n gap: 5px;\n background-color: #FFF;\n color: #29292F;\n width: 100%;\n box-sizing: border-box;\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.SelectTrigger:hover {\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n}\n\n.SelectTrigger:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5) !important;\n}\n\n.SelectTrigger[data-placeholder] {\n color: var(--violet9);\n}\n\n.SelectTrigger[data-state=open] {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.SelectValue {\n flex: 1;\n display: block;\n width: 100%;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n}\n.SelectValue span {\n overflow: hidden;\n text-overflow: ellipsis;\n height: 100%;\n line-height: 44px;\n}\n\n.SelectIconDrop, .SelectIconType {\n text-align: center;\n}\n\n.SelectIconType {\n padding-left: 0.4rem;\n padding-right: 0px;\n}\n\n.SelectIconDrop {\n padding-right: 16px;\n}\n\n.SelectTrigger[data-state=open] .SelectIconDrop img {\n transform: rotate(180deg);\n}\n\n.SelectContent {\n overflow: hidden;\n z-index: 99999999999;\n width: var(--radix-select-trigger-width);\n max-height: var(--radix-select-content-available-height);\n font-family: \"Satoshi-Medium\", sans-serif;\n background-color: white;\n border-radius: 15px;\n margin-top: 4px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.SelectItem {\n font-size: 14px;\n line-height: 1;\n color: var(--violet11);\n display: flex;\n align-items: center;\n height: 44px;\n padding-left: 16px;\n padding-right: 16px;\n color: #29292F;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.SelectItem[data-disabled] {\n color: #6E7684;\n pointer-events: none;\n}\n\n.SelectItem[data-highlighted] {\n background: #F6F7FB;\n outline: none !important;\n}\n\n.SelectItem:hover {\n background: #F6F7FB;\n cursor: pointer;\n}\n\n.SelectSeparator {\n height: 1px;\n background-color: #E8E8E8;\n width: calc(100% - 24px);\n margin: auto;\n border-radius: 30px;\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.SelectItemIndicator {\n position: absolute;\n right: 12px;\n width: 24px;\n height: 24px;\n background: #3080F8;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.SelectScrollButton {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 25px;\n background-color: white;\n color: var(--violet11);\n cursor: default;\n}\n\n.SelectOff {\n background: #FAF0F4;\n color: #D2234D;\n padding-left: 12px;\n padding-right: 12px;\n padding-top: 8px;\n padding-bottom: 8px;\n margin-right: 4px;\n border-radius: 30px;\n font-size: 12px;\n font-weight: 700;\n}\n\n.SelectIconButton {\n border-radius: 30px;\n position: relative;\n padding: 8px;\n}\n.SelectIconButton:hover {\n background-color: #F6F7FB;\n}\n\n/* Radix tabs navigation */\n/* reset */\nbutton,\nfieldset,\ninput {\n all: unset;\n}\n\n.TabsRoot {\n width: 100%;\n margin: auto;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n}\n\n.TabsList {\n margin: auto;\n flex-shrink: 0;\n display: flex;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.TabsTrigger {\n padding-left: 12px;\n padding-right: 12px;\n color: #6E7684;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: pointer;\n}\n\n.TabsTrigger[data-state=active] {\n color: #29292F;\n}\n\n.TabsTrigger:focus-visible {\n position: relative;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5) !important;\n}\n\n/* Content of the Radix tabs */\n.TabsContent {\n width: 100%;\n display: block;\n height: 100%;\n box-sizing: border-box;\n flex: 1 1 auto;\n}\n\n.TabsContent:focus {\n outline: none;\n}\n\n.TabsContent:focus-visible {\n box-shadow: inset 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.TabsContent[data-state=inactive] {\n display: none;\n}\n\n/* Pill animation */\n.pill-anim {\n position: absolute;\n height: 32px;\n top: 0px;\n bottom: 0px;\n margin-top: auto;\n margin-bottom: auto;\n border-radius: 30px;\n background: #FFF;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.TabsList[data-value=record] .pill-anim {\n left: 8px;\n width: 102px;\n}\n\n.TabsList[data-value=dashboard] .pill-anim {\n left: 109px;\n width: 132px;\n}\n\n/* Specific to the top level tabs */\n.TabsRoot.tl {\n height: calc(100% - 40px);\n margin-top: 40px;\n}\n\n.TabsList.tl {\n border-radius: 30px;\n background: #F6F7FB;\n padding: 6px;\n font-family: \"Satoshi-Bold\", sans-serif;\n position: relative;\n}\n\n.TabsTrigger.tl {\n border-radius: 30px;\n background: transparent;\n height: 32px;\n display: flex;\n align-items: center;\n padding-left: 16px;\n padding-right: 17px;\n z-index: 2;\n position: relative;\n}\n\n.TabsTrigger.tl[data-state=inactive]:hover :before {\n content: \"\";\n position: absolute;\n display: block;\n box-sizing: border-box;\n height: 100%;\n width: calc(100% - 10px);\n margin-left: 5px;\n background: #EDEEF3;\n z-index: -2;\n left: 0px;\n border-radius: 30px;\n}\n\n.TabsTriggerIcon {\n width: 20px;\n height: 20px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n margin-right: 4px;\n}\n\n/* Specific to recording tab context */\n.recording-ui {\n width: 100%;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.recording-ui .TabsRoot {\n margin-top: 8px;\n}\n.recording-ui .TabsList {\n width: 100%;\n border-bottom: 1px solid #E8E8E8;\n margin: auto;\n justify-content: center;\n}\n.recording-ui .TabsTrigger {\n padding-top: 8px;\n padding-bottom: 12px;\n box-sizing: border-box;\n position: relative;\n display: block;\n padding-left: 16px;\n padding-right: 16px;\n}\n.recording-ui .TabsTrigger:hover {\n background: #F6F7FB;\n border-top-right-radius: 15px;\n border-top-left-radius: 15px;\n}\n.recording-ui .TabsTrigger:focus-visible {\n border-radius: 10px 10px 0px 0px !important;\n}\n.recording-ui .TabsTrigger[data-state=active]::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 80%;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n height: 2px;\n border-radius: 30px;\n background: #3080F8;\n}\n.recording-ui .TabsTrigger[data-state=active] > .TabsTriggerLabel {\n color: #29292F !important;\n}\n.recording-ui .TabsTriggerLabel {\n text-align: center;\n}\n.recording-ui .TabsTriggerIcon {\n width: 20px;\n height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n margin: auto;\n margin-bottom: 8px;\n border-radius: 30px;\n}\n.recording-ui .TabsContent {\n background: #F6F7FB;\n padding: 16px;\n border-bottom-left-radius: 30px;\n border-bottom-right-radius: 30px;\n max-height: calc(95vh - 200px);\n overflow-y: overlay;\n}\n.recording-ui span {\n display: block;\n}\n\n.video-ui {\n width: 100%;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.video-ui .TabsRoot {\n margin-top: 8px;\n}\n.video-ui .TabsList {\n width: 100%;\n border-bottom: 1px solid #E8E8E8;\n margin: auto;\n justify-content: space-between;\n padding-left: 12px;\n padding-right: 12px;\n box-sizing: border-box;\n}\n.video-ui .TabsTriggerWrap {\n display: flex !important;\n align-items: center;\n flex-direction: row;\n justify-content: left;\n position: relative;\n display: block;\n box-sizing: border-box;\n}\n.video-ui .TabsTrigger {\n padding-top: 8px;\n padding-bottom: 12px;\n box-sizing: border-box;\n position: relative;\n display: block;\n padding-left: 20px;\n padding-right: 20px;\n}\n.video-ui .TabsTrigger:hover {\n background: #F6F7FB;\n border-top-right-radius: 15px;\n border-top-left-radius: 15px;\n}\n.video-ui .TabsTrigger:focus-visible {\n border-radius: 10px 10px 0px 0px !important;\n}\n.video-ui .TabsTrigger[data-state=active]::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 80%;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n height: 2px;\n border-radius: 30px;\n background: #3080F8;\n}\n.video-ui .TabsTrigger[data-state=active] > .TabsTriggerLabel {\n color: #29292F !important;\n}\n.video-ui .TabsTriggerLabel {\n text-align: center;\n}\n.video-ui .TabsContent {\n background: #F6F7FB;\n border-bottom-left-radius: 30px;\n border-bottom-right-radius: 30px;\n}\n.video-ui span {\n display: block;\n}\n.video-ui .TabsSort {\n margin-right: 12px;\n border-radius: 30px;\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n margin-bottom: 5px;\n}\n.video-ui .TabsSort:hover {\n cursor: pointer;\n background: #F6F7FB;\n}\n.video-ui .TabsSortLabel {\n display: flex;\n flex-direction: row;\n justify-content: right;\n align-items: center;\n color: #6E7684;\n}\n.video-ui .TabsSortLabel img {\n margin-left: 8px;\n}\n.video-ui .TabsSort:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.SwitchRow {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 40px;\n}\n\n.SwitchRoot {\n width: 34px;\n height: 22px;\n background-color: #E8E8E8;\n border-radius: 9999px;\n position: relative;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.SwitchRoot:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.SwitchRoot[data-state=checked] {\n background-color: #3080F8;\n}\n\n.SwitchRoot:hover {\n cursor: pointer;\n}\n\n.SwitchThumb {\n display: block;\n width: 14px;\n height: 14px;\n background-color: white;\n border-radius: 9999px;\n box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);\n transition: transform 100ms;\n transform: translateX(2px);\n will-change: transform;\n}\n\n.SwitchThumb[data-state=checked] {\n transform: translateX(18px);\n}\n\n.Label {\n color: #6E7684;\n display: flex;\n}\n\n.ExperimentalLabel {\n color: #FFF;\n font-size: 12px;\n background-color: #3080F8;\n border-radius: 15px;\n padding: 2px 8px;\n display: inline-block;\n margin-left: 8px;\n}\n\n.video-item-root {\n width: calc(100% - 2 * 8px);\n border-radius: 15px;\n padding: 8px;\n display: block;\n}\n.video-item-root .video-item {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.video-item-root .video-item-left {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n min-width: 0;\n justify-content: left;\n}\n.video-item-root .video-item-thumbnail {\n min-width: 48px;\n width: 48px;\n height: 38px;\n background: grey;\n border-radius: 5px;\n margin-right: 12px;\n}\n.video-item-root .video-item-info {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: 4px;\n}\n.video-item-root .video-item-info-title {\n color: #29292F;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.video-item-root .video-item-info-date {\n margin-top: 4px;\n color: #6E7684;\n font-size: 12px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.video-item-root:hover {\n cursor: pointer;\n background: #E9EAEE;\n}\n\n.video-item-root:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n\n/* Actions */\n.video-item-right {\n display: flex;\n align-items: center;\n justify-content: right;\n gap: 8px;\n min-width: -moz-max-content;\n min-width: max-content;\n opacity: 0;\n}\n.video-item-right .copy-link {\n background: #FFF;\n height: 32px;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 10px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n.video-item-right .copy-link img {\n margin-right: 4px;\n}\n.video-item-right .copy-link:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n.video-item-right .more-actions {\n height: 32px;\n width: 32px;\n background: #FFF;\n text-align: center;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.video-item-right .more-actions:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n outline: none !important;\n}\n\n.video-item-root:hover .video-item-right, .video-item-root:focus-visible .video-item-right {\n opacity: 1;\n}\n\n.video-item-right:focus-within {\n opacity: 1;\n}\n\n.main-button {\n width: 100%;\n height: 45px;\n border-radius: 30px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n}\n.main-button .main-button-label {\n color: #FFF;\n text-align: center;\n vertical-align: middle;\n align-items: center;\n}\n.main-button .main-button-shortcut {\n position: absolute;\n font-size: 12px;\n right: 16px;\n color: #FFF;\n opacity: 0.7;\n}\n.main-button:hover {\n cursor: pointer;\n}\n.main-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.main-button:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5) !important;\n}\n\n@property --x {\n syntax: \"\";\n inherits: false;\n initial-value: 35.44%;\n}\n@property --y {\n syntax: \"\";\n inherits: false;\n initial-value: 0%;\n}\n.recording-button {\n --x: 35.44%;\n --y: 0%;\n margin-top: 8px;\n filter: drop-shadow(0px 4px 20px rgba(86, 123, 218, 0.5));\n background: radial-gradient(127.41% 127.78% at var(--x) var(--y), #2BAEF8 23.13%, #3582F6 46.35%, #486DEF 74.48%, #7B9AEA 100%);\n transition: --x 0.2s ease-in-out, --y 0.2s ease-in-out;\n animation: 0;\n animation: gradient-animation 15s linear infinite;\n animation-play-state: paused;\n position: relative;\n z-index: 2;\n}\n\n.recording-button:hover {\n animation-play-state: running;\n}\n\n.recording-button:before {\n content: \"\";\n position: absolute;\n display: block;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: 30px;\n transition: all 0.25s ease-in-out;\n}\n\n.recording-button:hover:before {\n box-shadow: 0px 0px 0px 4px rgba(52, 138, 247, 0.25);\n}\n\n@keyframes pulse-animation {\n 0% {\n box-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n }\n 25% {\n box-shadow: 0px 0px 0px 6px rgba(52, 138, 247, 0.25);\n }\n 50% {\n box-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n }\n 100% {\n box-shadow: 0px 0px 0px 2px rgba(52, 138, 247, 0.25);\n }\n}\n@keyframes gradient-animation {\n 0% {\n --x: 35.44%;\n --y: 0%;\n }\n 25% {\n --x: 100%;\n --y: 30%;\n }\n 50% {\n --x: 70%;\n --y: 100%;\n }\n 75% {\n --x: 30%;\n --y: 90%;\n }\n 100% {\n --x: 35.44%;\n --y: 0%;\n }\n}\n.dashboard-button {\n background: #29292F;\n box-shadow: 0px 0px 0px 0px rgba(41, 41, 47, 0.25);\n transition: all 0.25s ease-in-out;\n}\n\n.dashboard-button:hover {\n box-shadow: 0px 0px 0px 4px rgba(41, 41, 47, 0.25);\n}\n\n.alarm-time-button {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 15px;\n padding: 4px 8px;\n position: absolute;\n color: #FFF;\n opacity: 0.7;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-size: 0.75rem;\n left: 6px;\n}\n.alarm-time-button svg {\n margin-top: 4px;\n margin-right: 4px;\n width: 14px;\n}\n\n.background-effects-toggle-group {\n display: flex;\n height: 40px;\n width: 100%;\n gap: 8px;\n margin-bottom: 8px;\n margin-top: 8px;\n}\n\n.background-effect {\n display: flex;\n width: 40px;\n height: 40px;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n position: relative;\n color: #FFF;\n}\n.background-effect span {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n z-index: 99999;\n font-weight: 500;\n}\n.background-effect[data-state=on]::after {\n content: \"\";\n border-radius: 50%;\n display: block;\n width: 46px;\n height: 46px;\n position: absolute;\n border: 2px solid #3080F8;\n box-sizing: border-box;\n}\n.background-effect img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: absolute;\n top: 0px;\n left: 0px;\n}\n.background-effect:hover:not([data-state=on]) {\n cursor: pointer;\n}\n.background-effect:hover:not([data-state=on])::after {\n content: \"\";\n border-radius: 50%;\n display: block;\n width: 46px;\n height: 46px;\n position: absolute;\n border: 2px solid #3080F8;\n opacity: 0.5;\n box-sizing: border-box;\n}\n.background-effect:focus-visible {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.region-dimensions {\n width: 100%;\n display: flex;\n gap: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.region-input {\n flex: 1;\n position: relative;\n}\n.region-input input {\n\tcolor: #29292F !important;\n border-radius: 30px;\n height: 40px;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n padding-left: 18px;\n padding-right: 40px;\n font-family: \"Satoshi-Medium\", sans-serif;\n background-color: #FFF;\n}\n.region-input input:focus-visible {\n outline: none;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n.region-input span {\n color: #6E7684;\n font-family: \"Satoshi-Medium\", sans-serif;\n position: absolute;\n right: 18px;\n bottom: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.time-set-parent {\n width: 100%;\n display: flex;\n gap: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.time-set-input {\n flex: 1;\n position: relative;\n}\n.time-set-input input {\n border-radius: 30px;\n height: 40px;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n padding-left: 18px;\n padding-right: 40px;\n font-family: \"Satoshi-Medium\", sans-serif;\n background-color: #FFF;\n -webkit-appearance: textfield;\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.time-set-input input:focus-visible {\n outline: none;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n.time-set-input span {\n color: #6E7684;\n font-family: \"Satoshi-Medium\", sans-serif;\n position: absolute;\n right: 18px;\n bottom: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.CanvasContainer {\n width: 100%;\n height: 100%;\n position: absolute;\n pointer-events: all !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999999999 !important;\n}\n\n.canvas {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999999999 !important;\n}\n\n.canvas-container {\n width: 100vw !important;\n height: 100vh !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999999999;\n position: absolute !important;\n}\n\n.camera-draggable {\n width: 100%;\n height: 100%;\n transform-origin: left top;\n border-radius: 50%;\n}\n\n.camera-grab {\n width: 100%;\n height: 100%;\n position: absolute;\n border-radius: 50%;\n z-index: 99999999 !important;\n cursor: grab;\n}\n\n.camera-flipped {\n transform: scaleX(-1);\n}\n\n.camera-toolbar {\n display: flex;\n align-items: center;\n padding-left: 4px;\n padding-right: 4px;\n transition: opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n min-width: -moz-max-content;\n min-width: max-content;\n background-color: rgba(30, 30, 30, 0.8);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n height: 28px;\n position: absolute;\n left: 10px;\n top: 10px;\n border-radius: 30px;\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(10px);\n z-index: 99999999999;\n opacity: 0;\n border: 3px solid rgba(255, 255, 255, 0.2);\n}\n\n.camera-draggable:hover .camera-toolbar, .camera-draggable:hover .camera-resize {\n opacity: 1 !important;\n}\n\n.camera-toolbar:hover, .camera-resize:hover {\n opacity: 1 !important;\n}\n\n.CameraToolbarSeparator {\n width: 1px;\n height: 18px;\n background-color: rgba(255, 255, 255, 0.3);\n margin: 0 4px;\n}\n\n.CameraToggleItem, .CameraToolbarButton {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #000;\n height: 22px;\n width: 22px;\n text-align: center;\n font-size: 13px;\n line-height: 1;\n border-radius: 50%;\n transition: background-color 0.25s ease-in-out;\n background-color: rgba(124, 139, 165, 0);\n}\n.CameraToggleItem svg, .CameraToolbarButton svg {\n color: #9797A4;\n}\n.CameraToggleItem:hover, .CameraToolbarButton:hover {\n background-color: rgba(124, 139, 165, 0.2) !important;\n cursor: pointer;\n}\n.CameraToggleItem:disabled, .CameraToolbarButton:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.CameraToggleItem[data-state=on], .CameraToolbarButton[data-state=on] {\n color: #FFF;\n}\n.CameraToggleItem[data-state=on] svg, .CameraToolbarButton[data-state=on] svg {\n color: #FFF;\n}\n\n.CameraToggleItem:hover, .CameraToggleButton:hover {\n cursor: pointer;\n}\n\n.CameraToggleItem:focus-visible, .CameraToggleButton:focus-visible {\n position: relative;\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.CameraToggleGroup {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.CameraToggleGroup, .CameraToolbarSeparator {\n display: none;\n}\n\n.camera-resize {\n position: absolute;\n bottom: 20px;\n right: 20px;\n z-index: 99999999999;\n height: 28px;\n width: 28px;\n border-radius: 50%;\n background-color: rgba(30, 30, 30, 0.8);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n border: 3px solid rgba(255, 255, 255, 0.2);\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(10px);\n align-items: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n}\n.camera-resize svg {\n color: #9797A4;\n text-align: center;\n margin: auto;\n display: block;\n}\n\n.countdown {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: 99999999999;\n}\n\n.countdown-circle {\n width: 200px;\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 999;\n text-align: center;\n}\n\n.countdown-overlay {\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: 99;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.countdown-number {\n position: absolute;\n width: 20px;\n height: 60px;\n z-index: 9999999;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n font-weight: 300;\n font-family: \"Satoshi-Light\", sans-serif;\n font-size: 3rem;\n color: #FFF;\n text-align: center;\n display: block;\n transition: all 0.6s ease-in-out;\n}\n\n.background {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0px;\n top: 0px;\n filter: url(\"#goo\");\n transform: rotate(0deg);\n transition: all 3s ease-in-out;\n}\n\n.circle {\n z-index: 9;\n position: absolute;\n transform: scale(0.8);\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n margin: auto;\n border-radius: 50%;\n background: radial-gradient(118.3% 119.01% at 35.44% 0%, #2BAEF8 23.13%, #3582F6 46.35%, #486DEF 74.48%, #7B9AEA 100%);\n width: 200px;\n height: 200px;\n transition: all 1.5s ease-in-out;\n}\n\n.c {\n width: 50px;\n height: 50px;\n z-index: 999;\n border-radius: 50%;\n position: absolute;\n top: 0px;\n right: 0px;\n left: 0px;\n bottom: 0px;\n margin: auto;\n transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;\n opacity: 1;\n}\n\n.c2 {\n background: radial-gradient(118.3% 119.01% at 35.44% 0%, #2B96F8 23.13%, #356BF6 64.58%);\n transform: translate(20px, 20px);\n}\n\n.c3 {\n background: radial-gradient(118.3% 119.01% at 35.44% 0%, #4884CA 15.3%, #2B89F8 78.83%);\n transform: translate(-30px, -40px);\n}\n\n.c3:after {\n content: \"\";\n position: absolute;\n width: 150px;\n height: 150px;\n filter: blur(50px);\n border-radius: 50%;\n top: 0px;\n right: 0px;\n left: 0px;\n bottom: 0px;\n margin: auto;\n transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;\n background: #CBE8F7;\n z-index: -1;\n}\n\n.recording-countdown .c2 {\n transform: translate(-15px, 15px);\n}\n\n.recording-countdown .c3 {\n transform: translate(-10px, -5px);\n}\n\n.countdown-info {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n bottom: 20px;\n border-radius: 30px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n text-align: center;\n display: block;\n padding: 10px 20px;\n font-family: \"Satoshi-Medium\", sans-serif;\n color: #FFF;\n z-index: 99999999999;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.AlertDialogOverlay {\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n inset: 0;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 99999999999;\n}\n\n.AlertDialogContent {\n background-color: white;\n border-radius: 30px;\n box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 90vw;\n max-width: 500px;\n max-height: 85vh;\n padding: 35px 25px;\n animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 99999999999;\n}\n\n.AlertDialogContent:focus {\n outline: none;\n}\n\n.AlertDialogTitle {\n margin: 0;\n color: #29292F;\n font-size: 14px;\n font-family: \"Satoshi-Medium\", sans-serif;\n font-weight: 700;\n}\n\n.AlertDialogDescription {\n margin-bottom: 20px;\n color: #6E7684;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.Button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n padding: 0 15px;\n font-size: 15px;\n line-height: 1;\n font-weight: 500;\n height: 35px;\n}\n\n.Button.red {\n background-color: rgba(247, 56, 90, 0.1);\n color: rgb(247, 56, 90);\n}\n\n.Button.red:hover {\n background-color: rgba(247, 56, 90, 0.15);\n cursor: pointer;\n}\n\n.Button.red:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n.Button.grey {\n background: rgba(110, 118, 132, 0.1);\n color: #6E7684;\n}\n\n.Button.grey:hover {\n background: rgba(110, 118, 132, 0.15);\n cursor: pointer;\n}\n\n.Button.grey:focus {\n box-shadow: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n}\n\n@keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes contentShow {\n from {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n.box-hole {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999999999;\n}\n\n.resize-handle {\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: white;\n border: 2px solid rgba(0, 0, 0, 0.5);\n box-sizing: border-box;\n}\n\n.resize-handle.top-left {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nwse-resize;\n}\n\n.resize-handle.top {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n cursor: ns-resize;\n}\n\n.resize-handle.top-right {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nesw-resize;\n}\n\n.resize-handle.right {\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n\n.resize-handle.bottom-right {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nwse-resize;\n}\n\n.resize-handle.bottom {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n cursor: ns-resize;\n}\n\n.resize-handle.bottom-left {\n bottom: 0;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n cursor: nesw-resize;\n}\n\n.resize-handle.left {\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n\n.region-recording * {\n pointer-events: none !important;\n}\n\nhtml {\n font-size: 16px;\n}" }, { "path": "src/pages/Content/toolbar/Toolbar.jsx", "content": "import React from \"react\";\n\nimport ToolbarWrap from \"./layout/ToolbarWrap\";\n\nconst Toolbar = () => {\n return (\n
\n \n
\n );\n};\n\nexport default Toolbar;\n" }, { "path": "src/pages/Content/toolbar/components/ColorWheel.jsx", "content": "import React, { useRef, useState, useContext } from \"react\";\n\nimport Wheel from \"@uiw/react-color-wheel\";\nimport { hsvaToHex } from \"@uiw/color-convert\";\n\n// Components\nimport TooltipWrap from \"./TooltipWrap\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst ColorWheel = (props) => {\n const [hsva, setHsva] = React.useState({ h: 200, s: 50, v: 100, a: 1 });\n const [contentState, setContentState] = useContext(contentStateContext);\n const wheelRef = useRef(null);\n const stateRef = useRef();\n\n stateRef.current = props.fullwheel;\n\n const handleClick = (e) => {\n if (!props.fullwheel) {\n props.setFullWheel(true);\n }\n };\n\n return (\n \n \n
\n {contentState.color.toUpperCase()}\n
\n
\n {\n setHsva({ ...hsva, ...color.hsva });\n setContentState((prevContentState) => ({\n ...prevContentState,\n color: hsvaToHex({ h: hsva.h, s: hsva.s, v: hsva.v, a: hsva.a }),\n swatch: 5,\n }));\n chrome.storage.local.set({\n color: hsvaToHex({ h: hsva.h, s: hsva.s, v: hsva.v, a: hsva.a }),\n swatch: 5,\n });\n }}\n />\n
\n \n );\n};\n\nexport default ColorWheel;\n" }, { "path": "src/pages/Content/toolbar/components/MicToggle.jsx", "content": "import React, { useContext } from \"react\";\nimport * as Toggle from \"@radix-ui/react-toggle\";\n\n// Components\nimport TooltipWrap from \"./TooltipWrap\";\n\nimport { MicIcon } from \"./SVG\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst MicToggle = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n return (\n \n
\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n micActive: pressed,\n }));\n\n chrome.storage.local.set({\n micActive: pressed,\n });\n\n chrome.runtime.sendMessage({\n type: \"set-mic-active-tab\",\n active: pressed,\n defaultAudioInput: contentState.defaultAudioInput,\n });\n\n // Show toast\n contentState.openToast(\n pressed\n ? chrome.i18n.getMessage(\"micOnToast\")\n : chrome.i18n.getMessage(\"micOffToast\"),\n () => {}\n );\n }}\n >\n \n \n
\n \n );\n};\n\nexport default MicToggle;\n" }, { "path": "src/pages/Content/toolbar/components/RadialMenu.jsx", "content": "import React, { useEffect, useState } from \"react\";\n\nimport * as Popover from \"@radix-ui/react-popover\";\n\n// Icons\nimport { EyeDropperIcon } from \"./SVG\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\n\n// Components\nimport TooltipWrap from \"./TooltipWrap\";\nimport ColorWheel from \"./ColorWheel\";\nimport StrokeWeight from \"./StrokeWeight\";\n\nconst RadialMenu = (props) => {\n const [contentState, setContentState] = React.useContext(contentStateContext);\n const ref = React.useRef(null);\n const buttonRef = React.useRef(null);\n const radialMenuRef = React.useRef(null);\n const [fullwheel, setFullWheel] = useState(false);\n const [open, setOpen] = useState(false);\n const [eyeDropperActive, setEyeDropperActive] = useState(false);\n const [renderColorWheel, setRenderColorWheel] = useState(false);\n\n // Colors in menu\n const [colors, setColors] = useState([\n { color: \"#FED252\", label: \"Yellow\" },\n { color: \"#4597F7\", label: \"Blue\" },\n { color: \"#F24822\", label: \"Red\" },\n { color: \"#FFFFFF\", label: \"White\" },\n { color: \"#201F1D\", label: \"Black\" },\n ]);\n\n useEffect(() => {\n if (!open) {\n setFullWheel(false);\n setRenderColorWheel(false);\n } else {\n const timeout = setTimeout(() => {\n setRenderColorWheel(true);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [open]);\n\n const selectColor = () => {\n const eyeDropper = new window.EyeDropper();\n setEyeDropperActive(true);\n\n eyeDropper\n .open()\n .then((color) => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n color: color.sRGBHex,\n swatch: 5,\n }));\n setEyeDropperActive(false);\n })\n .catch((err) => {\n setEyeDropperActive(false);\n });\n };\n\n useEffect(() => {\n if (!buttonRef.current) return;\n if (!radialMenuRef.current) return;\n\n const left =\n buttonRef.current.getBoundingClientRect().left +\n buttonRef.current.getBoundingClientRect().width / 2;\n const top =\n buttonRef.current.getBoundingClientRect().top +\n buttonRef.current.getBoundingClientRect().height / 2;\n\n radialMenuRef.current.style.left = `${left}px`;\n radialMenuRef.current.style.top = `${top}px`;\n }, [buttonRef, radialMenuRef]);\n\n return (\n setOpen(!open)}>\n \n \n
\n
\n
\n \n \n \n \n \n
\n \n {\n selectColor();\n }}\n >\n \n
\n \n
\n
\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n strokeWidth: value,\n }));\n }}\n >\n \n {colors.map((color, index) => {\n return (\n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n color: color.color,\n swatch: index,\n }));\n chrome.storage.local.set({\n color: color.color,\n swatch: index,\n });\n }}\n className={\n contentState.swatch === index\n ? \"radial-menu-item-child color-active\"\n : \"radial-menu-item-child\"\n }\n >\n {index}\n
\n \n );\n })}\n {renderColorWheel && (\n \n )}\n \n
\n \n \n \n \n );\n};\n\nexport default RadialMenu;\n" }, { "path": "src/pages/Content/toolbar/components/SVG.jsx", "content": "import React from \"react\";\nimport { ReactSVG } from \"react-svg\";\n\nconst URL =\n \"chrome-extension://\" + chrome.i18n.getMessage(\"@@extension_id\") + \"/assets/\";\n\nconst GrabIcon = (props) => {\n return (\n \n );\n};\n/*\n\n*/\n\n// Convert all to ReactSVG\n\nconst StopIcon = (props) => {\n return (\n \n );\n};\n\nconst DrawIcon = (props) => {\n return (\n \n );\n};\n\nconst PauseIcon = (props) => {\n return (\n \n );\n};\n\nconst ResumeIcon = (props) => {\n return (\n \n );\n};\n\nconst CursorIcon = (props) => {\n return (\n \n );\n};\n\nconst CommentIcon = (props) => {\n return (\n \n );\n};\n\nconst MicIcon = (props) => {\n return (\n \n );\n};\n\nconst MoreIcon = (props) => {\n return (\n \n );\n};\n\nconst RestartIcon = (props) => {\n return (\n \n );\n};\n\nconst DiscardIcon = (props) => {\n return (\n \n );\n};\n\nconst EyeDropperIcon = (props) => {\n return (\n \n );\n};\n\nconst Stroke1Icon = (props) => {\n return (\n \n );\n};\n\nconst Stroke2Icon = (props) => {\n return (\n \n );\n};\n\nconst Stroke3Icon = (props) => {\n return (\n \n );\n};\n\nconst TargetCursorIcon = (props) => {\n return (\n \n );\n};\n\nconst HighlightCursorIcon = (props) => {\n return (\n \n );\n};\n\nconst HideCursorIcon = (props) => {\n return (\n \n );\n};\n\nconst TextIcon = (props) => {\n return (\n \n );\n};\n\nconst ArrowIcon = (props) => {\n return (\n \n );\n};\n\nconst EraserIcon = (props) => {\n return (\n \n );\n};\n\nconst PenIcon = (props) => {\n return (\n \n );\n};\n\nconst ShapeIcon = (props) => {\n return (\n \n );\n};\n\nconst SelectIcon = (props) => {\n return (\n \n );\n};\n\nconst UndoIcon = (props) => {\n return (\n \n );\n};\n\nconst RedoIcon = (props) => {\n return (\n \n );\n};\n\nconst ImageIcon = (props) => {\n return (\n \n );\n};\n\nconst TransformIcon = (props) => {\n return (\n \n );\n};\n\nconst HighlighterIcon = (props) => {\n return (\n \n );\n};\n\nconst RectangleIcon = (props) => {\n return (\n \n );\n};\n\nconst CircleIcon = (props) => {\n return (\n \n );\n};\n\nconst TriangleIcon = (props) => {\n return (\n \n );\n};\n\nconst RectangleFilledIcon = (props) => {\n return (\n \n );\n};\n\nconst CircleFilledIcon = (props) => {\n return (\n \n );\n};\n\nconst TriangleFilledIcon = (props) => {\n return (\n \n );\n};\n\nconst TrashIcon = (props) => {\n return (\n \n );\n};\n\nconst VideoOffIcon = (props) => {\n return (\n \n );\n};\n\nconst CameraCloseIcon = (props) => {\n return (\n \n );\n};\n\nconst CameraMoreIcon = (props) => {\n return (\n \n );\n};\n\nconst CameraResizeIcon = (props) => {\n return (\n \n );\n};\n\nconst CameraIcon = (props) => {\n return (\n \n );\n};\n\nconst BlurIcon = (props) => {\n return (\n \n );\n};\n\nconst AlertIcon = (props) => {\n return (\n \n );\n};\n\nconst TimeIcon = (props) => {\n return (\n \n );\n};\nconst SpotlightCursorIcon = (props) => {\n return (\n \n );\n};\n\nconst Pip = (props) => {\n return (\n \n );\n};\n\nconst CloseIconPopup = (props) => {\n return (\n \n );\n};\n\nconst GrabIconPopup = (props) => {\n return (\n \n );\n};\n\nconst MoreIconPopup = (props) => {\n return (\n \n );\n};\n\nconst OnboardingArrow = (props) => {\n return (\n \n );\n};\n\nconst NoInternet = (props) => {\n return (\n \n );\n};\n\nconst CloseButtonToolbar = (props) => {\n return (\n \n );\n};\n\nconst HelpIconPopup = (props) => {\n return (\n \n );\n};\n\nconst AudioIcon = (props) => {\n return (\n \n );\n};\n\nconst NotSupportedIcon = (props) => {\n return (\n \n );\n};\n\nexport {\n GrabIcon,\n StopIcon,\n DrawIcon,\n PauseIcon,\n ResumeIcon,\n CursorIcon,\n CommentIcon,\n MicIcon,\n MoreIcon,\n RestartIcon,\n DiscardIcon,\n EyeDropperIcon,\n Stroke1Icon,\n Stroke2Icon,\n Stroke3Icon,\n TargetCursorIcon,\n HighlightCursorIcon,\n HideCursorIcon,\n TextIcon,\n ArrowIcon,\n EraserIcon,\n PenIcon,\n ShapeIcon,\n SelectIcon,\n UndoIcon,\n RedoIcon,\n ImageIcon,\n TransformIcon,\n HighlighterIcon,\n RectangleIcon,\n CircleIcon,\n TriangleIcon,\n RectangleFilledIcon,\n CircleFilledIcon,\n TriangleFilledIcon,\n TrashIcon,\n VideoOffIcon,\n CameraCloseIcon,\n CameraMoreIcon,\n CameraResizeIcon,\n CameraIcon,\n BlurIcon,\n AlertIcon,\n TimeIcon,\n SpotlightCursorIcon,\n Pip,\n CloseIconPopup,\n GrabIconPopup,\n OnboardingArrow,\n NoInternet,\n CloseButtonToolbar,\n HelpIconPopup,\n MoreIconPopup,\n AudioIcon,\n NotSupportedIcon,\n};\n" }, { "path": "src/pages/Content/toolbar/components/StrokeWeight.jsx", "content": "import React from \"react\";\n\n// Icons\nimport { Stroke1Icon, Stroke2Icon, Stroke3Icon } from \"./SVG\";\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\n// Components\nimport TooltipWrap from \"./TooltipWrap\";\n\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\n\nconst StrokeWeight = (props) => {\n const [contentState, setContentState] = React.useContext(contentStateContext);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default StrokeWeight;\n" }, { "path": "src/pages/Content/toolbar/components/Toast.jsx", "content": "import React, {\n useState,\n useEffect,\n useContext,\n useCallback,\n useRef,\n} from \"react\";\n\nimport * as ToastEl from \"@radix-ui/react-toast\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst Toast = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [open, setOpen] = useState(false);\n const [title, setTitle] = useState(\"\");\n const [trigger, setTrigger] = useState(() => {});\n const triggerRef = useRef(trigger);\n const openRef = useRef(open);\n const contentStateRef = useRef(contentState);\n const [toastDuration, setToastDuration] = useState(2000);\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n const openToast = useCallback((title, action, durationMs = 2000) => {\n if (contentStateRef.current.hideUI) return;\n setTitle(title);\n setOpen(true);\n setTrigger(() => action);\n setToastDuration(durationMs);\n });\n\n useEffect(() => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openToast: openToast,\n }));\n\n return () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openToast: null,\n }));\n };\n }, []);\n\n useEffect(() => {\n openRef.current = open;\n }, [open]);\n\n useEffect(() => {\n triggerRef.current = trigger;\n\n return () => {\n triggerRef.current = () => {};\n };\n }, [trigger]);\n\n return (\n \n {\n e.stopPropagation();\n e.preventDefault();\n triggerRef.current();\n setOpen(false);\n }}\n >\n {title}\n {\n trigger();\n }}\n >\n {\n e.stopPropagation();\n trigger();\n }}\n >\n Esc\n \n \n \n \n \n );\n};\n\nexport default Toast;\n" }, { "path": "src/pages/Content/toolbar/components/ToolTrigger.jsx", "content": "import React from \"react\";\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\n\n// Components\nimport TooltipWrap from \"./TooltipWrap\";\n\nconst ToolTrigger = (props) => {\n const grab = props.grab ? \" grab\" : \"\";\n const resume = props.resume ? \" resume\" : \"\";\n\n return (\n \n {props.type === \"button\" ? (\n \n {props.children}\n \n ) : props.type === \"mode\" ? (\n
\n \n {props.children}\n \n
\n ) : (\n
\n \n {props.children}\n \n
\n )}\n \n );\n};\n\nexport default ToolTrigger;\n" }, { "path": "src/pages/Content/toolbar/components/TooltipWrap.jsx", "content": "import React, { useEffect, useContext, useState } from \"react\";\n\nimport * as Tooltip from \"@radix-ui/react-tooltip\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst TooltipWrap = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const classname = props.name ? props.name : \"\";\n const [override, setOverride] = useState(\"\");\n const content =\n props.shortcut && props.content\n ? `${props.content} (${props.shortcut})`\n : props.content;\n\n useEffect(() => {\n // Check if hideUI is set\n if (contentState.hideUI) {\n setOverride(\"override\");\n } else {\n setOverride(\"\");\n }\n }, [contentState.hideUI]);\n\n return (\n
\n {props.content == \"\" ? (\n
{props.children}
\n ) : (\n \n \n {props.children}\n \n \n {content}\n \n \n \n \n )}\n
\n );\n};\n\nexport default TooltipWrap;\n" }, { "path": "src/pages/Content/toolbar/layout/BlurToolbar.jsx", "content": "import React from \"react\";\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\n\n// Components\nimport ToolTrigger from \"../components/ToolTrigger\";\n\n// Icons\nimport { TransformIcon, TrashIcon } from \"../components/SVG\";\n\nconst BlurToolbar = (props) => {\n return (\n \n \n
\n \n \n \n
\n \n {\n // Remove class screenity-blur from all elements\n const blurredElements =\n document.querySelectorAll(\".screenity-blur\");\n blurredElements.forEach((element) => {\n element.classList.remove(\"screenity-blur\");\n });\n }}\n >\n \n \n \n \n );\n};\n\nexport default BlurToolbar;\n" }, { "path": "src/pages/Content/toolbar/layout/CursorToolbar.jsx", "content": "import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\nimport TooltipWrap from \"../components/TooltipWrap\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\n// Icons\nimport {\n CursorIcon,\n TargetCursorIcon,\n HighlightCursorIcon,\n SpotlightCursorIcon,\n HideCursorIcon,\n} from \"../components/SVG\";\n\nconst CursorToolbar = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const lastClickedEffectRef = useRef(contentState.cursorMode || \"none\");\n\n useEffect(() => {\n if (contentState.cursorMode) {\n lastClickedEffectRef.current = contentState.cursorMode;\n }\n }, [contentState.cursorMode]);\n\n const deriveCursorMode = (effects, fallback) => {\n if (effects.length === 0) return \"none\";\n if (effects.length === 1) return effects[0];\n if (fallback && effects.includes(fallback)) return fallback;\n return effects[0] || \"none\";\n };\n\n const applyCursorSelection = (effect, shiftKey) => {\n if (effect === \"none\") {\n lastClickedEffectRef.current = \"none\";\n setContentState((prev) => ({\n ...prev,\n cursorEffects: [],\n cursorMode: \"none\",\n }));\n if (!shiftKey) {\n props.setMode(false);\n }\n chrome.storage.local.set({\n cursorEffects: [],\n cursorMode: \"none\",\n });\n return;\n }\n\n const currentEffects = Array.isArray(contentState.cursorEffects)\n ? contentState.cursorEffects\n : [];\n\n let nextEffects = [];\n if (shiftKey) {\n if (currentEffects.includes(effect)) {\n nextEffects = currentEffects.filter((item) => item !== effect);\n } else {\n nextEffects = [...currentEffects, effect];\n }\n } else {\n nextEffects = [effect];\n }\n\n lastClickedEffectRef.current = effect;\n const nextMode = deriveCursorMode(\n nextEffects,\n lastClickedEffectRef.current\n );\n\n setContentState((prev) => ({\n ...prev,\n cursorEffects: nextEffects,\n cursorMode: nextMode,\n }));\n if (!shiftKey) {\n props.setMode(false);\n }\n chrome.storage.local.set({\n cursorEffects: nextEffects,\n cursorMode: nextMode,\n });\n };\n\n const handleClick = (effect) => (event) => {\n applyCursorSelection(effect, Boolean(event.shiftKey));\n };\n\n const cursorEffects = Array.isArray(contentState.cursorEffects)\n ? contentState.cursorEffects\n : [];\n const isDefault = cursorEffects.length === 0;\n const toggleValues = isDefault ? [\"none\"] : cursorEffects;\n const isEffectActive = (effect) =>\n effect === \"none\" ? isDefault : cursorEffects.includes(effect);\n\n return (\n \n {}}\n >\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n
\n \n \n \n
\n \n \n
\n \n \n \n
\n \n \n \n );\n};\n\nexport default CursorToolbar;\n" }, { "path": "src/pages/Content/toolbar/layout/DrawingToolbar.jsx", "content": "import React, {\n useRef,\n useEffect,\n useCallback,\n useContext,\n useState,\n} from \"react\";\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\n\n// Components\nimport ToolTrigger from \"../components/ToolTrigger\";\nimport RadialMenu from \"../components/RadialMenu\";\nimport ShapeToolbar from \"./ShapeToolbar\";\n\n// Canvas utils\nimport {\n undoCanvas,\n redoCanvas,\n saveCanvas,\n} from \"../../canvas/modules/History\";\n\n// Icons\nimport {\n DrawIcon,\n EraserIcon,\n ArrowIcon,\n ImageIcon,\n UndoIcon,\n RedoIcon,\n TransformIcon,\n HighlighterIcon,\n TextIcon,\n RectangleIcon,\n TriangleIcon,\n CircleIcon,\n RectangleFilledIcon,\n CircleFilledIcon,\n TriangleFilledIcon,\n TrashIcon,\n} from \"../components/SVG\";\n\n// Rewrite imports above with the chrome-extension URL inline\n\nimport TooltipWrap from \"../components/TooltipWrap\";\nimport ImageTool from \"../../canvas/modules/ImageTool\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst DrawingToolbar = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [tool, setTool] = useState(\"\");\n const contentStateRef = useRef(contentState);\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n const imageFileInput = useRef(null);\n\n useEffect(() => {\n setTool(contentState.tool);\n }, [contentState.tool]);\n\n const handleImageChange = useCallback(\n (e) => {\n const reader = new FileReader();\n reader.onload = (e) => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n isAddingImage: true,\n }));\n\n // De-select all objects\n contentState.canvas.discardActiveObject();\n contentState.canvas.requestRenderAll();\n\n // Make all objects unselectable\n contentState.canvas.forEachObject((obj) => {\n obj.selectable = false;\n });\n\n const imgTool = ImageTool(\n contentState.canvas,\n e.target.result,\n contentState,\n setContentState,\n saveCanvas,\n contentStateRef.current\n );\n\n imageFileInput.current.value = \"\";\n\n return () => {\n imgTool.removeEventListeners();\n };\n };\n\n reader.readAsDataURL(e.target.files[0]);\n },\n [contentState, setContentState, saveCanvas]\n );\n\n return (\n \n {\n if (value)\n setContentState((prevContentState) => ({\n ...prevContentState,\n tool: value,\n }));\n }}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {contentState.shape === \"rectangle\" && contentState.shapeFill ? (\n \n ) : contentState.shape === \"circle\" && contentState.shapeFill ? (\n \n ) : contentState.shape === \"triangle\" && contentState.shapeFill ? (\n \n ) : contentState.shape === \"rectangle\" && !contentState.shapeFill ? (\n \n ) : contentState.shape === \"circle\" && !contentState.shapeFill ? (\n \n ) : contentState.shape === \"triangle\" && !contentState.shapeFill ? (\n \n ) : null}\n \n \n \n \n imageFileInput.current.click()}\n >\n \n \n \n \n \n undoCanvas(contentState, setContentState)}\n >\n \n \n redoCanvas(contentState, setContentState)}\n >\n \n \n {\n if (!contentState.canvas) return;\n\n contentState.canvas.clear();\n contentState.canvas.renderAll();\n contentState.canvas.requestRenderAll();\n saveCanvas(contentState, setContentState);\n }}\n >\n \n \n \n );\n};\n\nexport default DrawingToolbar;\n" }, { "path": "src/pages/Content/toolbar/layout/ShapeToolbar.jsx", "content": "import React, { useEffect, useState, useContext, useRef } from \"react\";\n\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\nimport ToolTrigger from \"../components/ToolTrigger\";\n\n// Icons\nimport {\n RectangleIcon,\n CircleIcon,\n TriangleIcon,\n RectangleFilledIcon,\n CircleFilledIcon,\n TriangleFilledIcon,\n} from \"../components/SVG\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\nconst ShapeToolbar = (props) => {\n const [contentState, setContentState] = useContext(contentStateContext);\n\n return (\n \n {\n if (value)\n setContentState((prevContentState) => ({\n ...prevContentState,\n shape: value,\n }));\n chrome.storage.local.set({ shape: value });\n }}\n >\n
\n \n {contentState.shapeFill ? (\n \n ) : (\n \n )}\n \n
\n
\n \n {contentState.shapeFill ? : }\n \n
\n
\n \n {contentState.shapeFill ? : }\n \n
\n \n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n shapeFill: !contentState.shapeFill,\n }));\n chrome.storage.local.set({ shapeFill: !contentState.shapeFill });\n }}\n >\n {contentState.shape === \"rectangle\" && contentState.shapeFill ? (\n \n ) : contentState.shape === \"circle\" && contentState.shapeFill ? (\n \n ) : contentState.shape === \"triangle\" && contentState.shapeFill ? (\n \n ) : contentState.shape === \"rectangle\" && !contentState.shapeFill ? (\n \n ) : contentState.shape === \"circle\" && !contentState.shapeFill ? (\n \n ) : contentState.shape === \"triangle\" && !contentState.shapeFill ? (\n \n ) : null}\n \n \n );\n};\n\nexport default ShapeToolbar;\n" }, { "path": "src/pages/Content/toolbar/layout/ToolbarWrap.jsx", "content": "import React, {\n useLayoutEffect,\n useEffect,\n useContext,\n useState,\n useRef,\n} from \"react\";\nimport * as Toolbar from \"@radix-ui/react-toolbar\";\n\nimport { Rnd } from \"react-rnd\";\n\n// Layout\nimport DrawingToolbar from \"./DrawingToolbar\";\nimport CursorToolbar from \"./CursorToolbar\";\nimport BlurToolbar from \"./BlurToolbar\";\n\n// Components\nimport ToolTrigger from \"../components/ToolTrigger\";\nimport Toast from \"../components/Toast\";\n\nimport { CloseIconPopup } from \"../components/SVG\";\n\n// Context\nimport { contentStateContext } from \"../../context/ContentState\";\n\n// Icons\nimport {\n GrabIcon,\n StopIcon,\n DrawIcon,\n PauseIcon,\n ResumeIcon,\n CursorIcon,\n TargetCursorIcon,\n HighlightCursorIcon,\n SpotlightCursorIcon,\n RestartIcon,\n DiscardIcon,\n CameraIcon,\n BlurIcon,\n OnboardingArrow,\n CloseButtonToolbar,\n} from \"../components/SVG\";\nimport MicToggle from \"../components/MicToggle\";\n\nconst ToolbarWrap = () => {\n const [contentState, setContentState, t, setT] =\n useContext(contentStateContext);\n const [mode, setMode] = React.useState(\"\");\n const modeRef = React.useRef(mode);\n const [hovering, setHovering] = React.useState(false);\n const DragRef = React.useRef(null);\n const ToolbarRef = React.useRef(null);\n const [side, setSide] = React.useState(\"ToolbarTop\");\n const [elastic, setElastic] = React.useState(\"\");\n const [shake, setShake] = React.useState(\"\");\n const [dragging, setDragging] = React.useState(\"\");\n const [timer, setTimer] = React.useState(0);\n const [timestamp, setTimestamp] = React.useState(\"00:00\");\n const [transparent, setTransparent] = React.useState(false);\n const [forceTransparent, setForceTransparent] = React.useState(\"\");\n const [visuallyHidden, setVisuallyHidden] = useState(false);\n const timeRef = React.useRef(\"\");\n\n useEffect(() => {\n modeRef.current = mode;\n }, [mode]);\n\n useEffect(() => {\n setContentState((prev) => ({\n ...prev,\n setToolbarMode: setMode,\n toolbarMode: mode,\n }));\n }, [mode, setContentState]);\n\n useEffect(() => {\n if (contentState.toolbarHover && contentState.hideUI) {\n setTransparent(\"ToolbarTransparent\");\n } else {\n setTransparent(false);\n setForceTransparent(\"\");\n }\n }, [contentState.toolbarHover, contentState.hideUI]);\n\n // If mouse is down and toolbarHover is true, set forceTransparent\n useEffect(() => {\n if (!contentState.toolbarHover) return;\n if (!contentState.shadowRef) return;\n if (!contentState.hideUI) return;\n const handleMouseDown = (e) => {\n if (contentState.toolbarHover && contentState.hideUI) {\n // check if mouse is over toolbar\n if (ToolbarRef.current && ToolbarRef.current.contains(e.target)) return;\n if (\n contentState.shadowRef &&\n (contentState.shadowRef.contains(e.target) ||\n contentState.shadowRef === e.target ||\n contentState.shadowRef === e.target.parentNode)\n )\n return;\n\n setForceTransparent(\"ForceTransparent\");\n }\n };\n\n const handleMouseUp = (e) => {\n setForceTransparent(\"\");\n };\n\n document.addEventListener(\"mousedown\", handleMouseDown);\n document.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n document.removeEventListener(\"mousedown\", handleMouseDown);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [contentState.toolbarHover, contentState.shadowRef, contentState.hideUI]);\n\n useEffect(() => {\n if (!isNaN(t)) {\n setTimer(t);\n const clampedT = Math.max(0, t); // prevent negative values\n const hours = Math.floor(clampedT / 3600);\n const minutes = Math.floor((clampedT % 3600) / 60);\n const seconds = clampedT % 60;\n\n // Determine the timestamp format based on the total duration (t)\n let newTimestamp =\n hours > 0\n ? `${hours.toString().padStart(2, \"0\")}:${minutes\n .toString()\n .padStart(2, \"0\")}:${seconds.toString().padStart(2, \"0\")}`\n : `${minutes.toString().padStart(2, \"0\")}:${seconds\n .toString()\n .padStart(2, \"0\")}`;\n\n // Adjust the width of the time display based on the duration\n if (hours > 0) {\n // Adjust for HH:MM:SS format when hours are present\n timeRef.current.style.width = \"58px\"; // You might need to adjust this value based on your actual UI\n } else {\n // Adjust for MM:SS format when there are no hours\n timeRef.current.style.width = \"42px\"; // Adjust this value as needed\n }\n\n setTimestamp(newTimestamp);\n }\n }, [t]);\n\n useLayoutEffect(() => {\n function setToolbarPosition(e) {\n let xpos = DragRef.current.getDraggablePosition().x;\n let ypos = DragRef.current.getDraggablePosition().y;\n\n // Width and height of toolbar\n const width = ToolbarRef.current.getBoundingClientRect().width;\n const height = ToolbarRef.current.getBoundingClientRect().height;\n\n // Keep toolbar positioned relative to the bottom and right of the screen, proportionally\n if (xpos + width + 30 > window.innerWidth) {\n xpos = window.innerWidth - width - 30;\n }\n if (ypos + height - 60 > window.innerHeight) {\n ypos = window.innerHeight - height + 60;\n }\n\n DragRef.current.updatePosition({ x: xpos, y: ypos });\n }\n window.addEventListener(\"resize\", setToolbarPosition);\n setToolbarPosition();\n return () => window.removeEventListener(\"resize\", setToolbarPosition);\n }, []);\n\n const handleChange = (value) => {\n setMode(value);\n };\n\n const handleDragStart = (e, d) => {\n setDragging(\"ToolbarDragging\");\n };\n\n const handleDrag = (e, d) => {\n // Width and height\n const width = ToolbarRef.current.getBoundingClientRect().width;\n const height = ToolbarRef.current.getBoundingClientRect().height;\n\n if (d.y < 130) {\n setSide(\"ToolbarBottom\");\n } else {\n setSide(\"ToolbarTop\");\n }\n\n if (\n d.x < -25 ||\n d.x + width > window.innerWidth ||\n d.y < 60 ||\n d.y + height - 80 > window.innerHeight\n ) {\n setShake(\"ToolbarShake\");\n } else {\n setShake(\"\");\n }\n };\n\n const handleDrop = (e, d) => {\n setShake(\"\");\n setDragging(\"\");\n let xpos = d.x;\n let ypos = d.y;\n\n // Width and height\n const width = ToolbarRef.current.getBoundingClientRect().width;\n const height = ToolbarRef.current.getBoundingClientRect().height;\n\n // Check if toolbar is off screen\n if (d.x < -10) {\n setElastic(\"ToolbarElastic\");\n xpos = -10;\n } else if (d.x + width + 30 > window.innerWidth) {\n setElastic(\"ToolbarElastic\");\n xpos = window.innerWidth - width - 30;\n }\n\n if (d.y < 130) {\n setSide(\"ToolbarBottom\");\n } else {\n setSide(\"ToolbarTop\");\n }\n\n if (d.y < 80) {\n setElastic(\"ToolbarElastic\");\n ypos = 80;\n } else if (d.y + height - 60 > window.innerHeight) {\n setElastic(\"ToolbarElastic\");\n ypos = window.innerHeight - height + 60;\n }\n DragRef.current.updatePosition({ x: xpos, y: ypos });\n\n setTimeout(() => {\n setElastic(\"\");\n }, 250);\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n toolbarPosition: {\n ...prevContentState.toolbarPosition,\n offsetX: xpos,\n offsetY: ypos,\n left: xpos < window.innerWidth / 2 ? true : false,\n right: xpos < window.innerWidth / 2 ? false : true,\n top: ypos < window.innerHeight / 2 ? true : false,\n bottom: ypos < window.innerHeight / 2 ? false : true,\n },\n }));\n\n // Is it on the left or right, also top or bottom\n\n let left = xpos < window.innerWidth / 2 ? true : false;\n let right = xpos < window.innerWidth / 2 ? false : true;\n let top = ypos < window.innerHeight / 2 ? true : false;\n let bottom = ypos < window.innerHeight / 2 ? false : true;\n let offsetX = xpos;\n let offsetY = ypos;\n\n if (right) {\n offsetX = window.innerWidth - xpos;\n }\n if (bottom) {\n offsetY = window.innerHeight - ypos;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n toolbarPosition: {\n ...prevContentState.toolbarPosition,\n offsetX: offsetX,\n offsetY: offsetY,\n left: left,\n right: right,\n top: top,\n bottom: bottom,\n },\n }));\n\n chrome.storage.local.set({\n toolbarPosition: {\n offsetX: offsetX,\n offsetY: offsetY,\n left: left,\n right: right,\n top: top,\n bottom: bottom,\n },\n });\n };\n\n useEffect(() => {\n let x = contentState.toolbarPosition.offsetX;\n let y = contentState.toolbarPosition.offsetY;\n\n if (contentState.toolbarPosition.bottom) {\n y = window.innerHeight - contentState.toolbarPosition.offsetY;\n }\n\n if (contentState.toolbarPosition.right) {\n x = window.innerWidth - contentState.toolbarPosition.offsetX;\n }\n\n DragRef.current.updatePosition({ x: x, y: y });\n\n handleDrop(null, { x: x, y: y });\n }, []);\n\n useEffect(() => {\n if (!contentState.openToast) return;\n if (contentState.drawingMode) {\n contentState.openToast(chrome.i18n.getMessage(\"drawingModeToast\"), () => {\n setMode(\"\");\n });\n }\n if (contentState.blurMode) {\n contentState.openToast(chrome.i18n.getMessage(\"blurModeToast\"), () => {\n setMode(\"\");\n });\n }\n }, [contentState.drawingMode, contentState.blurMode, contentState.openToast]);\n\n // useEffect(() => {\n // let nextMode = modeRef.current;\n // if (contentState.drawingMode) {\n // nextMode = \"draw\";\n // } else if (contentState.blurMode) {\n // nextMode = \"blur\";\n // } else if (modeRef.current === \"draw\" || modeRef.current === \"blur\") {\n // nextMode = \"\";\n // }\n\n // if (nextMode !== modeRef.current) {\n // setMode(nextMode);\n // }\n // }, [contentState.drawingMode, contentState.blurMode]);\n\n useEffect(() => {\n // one-time init\n if (contentState.drawingMode) setMode(\"draw\");\n else if (contentState.blurMode) setMode(\"blur\");\n else setMode(\"\");\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (mode === \"draw\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n drawingMode: true,\n showOnboardingArrow: false,\n }));\n } else {\n setContentState((prevContentState) => ({\n ...prevContentState,\n drawingMode: false,\n }));\n }\n if (mode === \"blur\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n blurMode: true,\n drawingMode: false,\n }));\n } else {\n setContentState((prevContentState) => ({\n ...prevContentState,\n blurMode: false,\n }));\n }\n }, [mode]);\n\n const enableCamera = () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n cameraActive: true,\n }));\n chrome.storage.local.set({\n cameraActive: true,\n });\n setContentState((prevContentState) => ({\n ...prevContentState,\n pipEnded: true,\n }));\n };\n\n return (\n
\n \n
\n
\n \n {\n setHovering(true);\n }}\n onMouseLeave={() => {\n setHovering(false);\n }}\n >\n \n \n \n {!contentState.recording && (\n {\n // Show the toast first\n if (contentState.openToast) {\n contentState.openToast(\n chrome.i18n.getMessage(\"reopenToolbarToast\"),\n () => {},\n );\n }\n\n // Visually hide the toolbar\n setVisuallyHidden(true);\n\n setContentState((prev) => ({\n ...prev,\n\n drawingMode: false,\n blurMode: false,\n }));\n // After toast finishes (~3s), apply real hiding logic\n setTimeout(() => {\n setContentState((prev) => ({\n ...prev,\n hideToolbar: true,\n drawingMode: false,\n blurMode: false,\n hideUIAlerts: false,\n toolbarHover: false,\n hideUI: true,\n }));\n\n chrome.storage.local.set({\n hideToolbar: true,\n hideUIAlerts: false,\n toolbarHover: false,\n hideUI: true,\n });\n }, 3000); // match your toast duration\n }}\n >\n
\n \n
\n \n )}\n \n {\n contentState.stopRecording();\n }}\n >\n \n \n \n {timestamp}\n \n {\n contentState.tryRestartRecording();\n }}\n >\n \n \n {!contentState.paused && (\n {\n contentState.pauseRecording();\n }}\n >\n \n \n )}\n {contentState.recording && contentState.paused && (\n {\n contentState.resumeRecording();\n }}\n >\n \n \n )}\n {\n if (contentState.tryDismissRecording !== undefined) {\n contentState.tryDismissRecording();\n }\n }}\n >\n \n \n \n \n \n
\n {contentState.showOnboardingArrow && (\n
\n
\n {chrome.i18n.getMessage(\"clickHereDrawOnboarding\")}\n
\n
\n \n
\n
\n )}\n \n {mode === \"draw\" && }\n {mode !== \"draw\" && }\n \n \n
\n
\n \n {mode === \"blur\" && }\n {mode !== \"blur\" && }\n \n \n
\n\n
\n \n {contentState.cursorMode === \"target\" && }\n {contentState.cursorMode === \"highlight\" && (\n \n )}\n {contentState.cursorMode === \"spotlight\" && (\n \n )}\n {contentState.cursorMode === \"none\" && }\n \n \n
\n \n \n {(!contentState.cameraActive ||\n contentState.defaultVideoInput === \"none\") &&\n (!contentState.isSubscribed || !contentState.recording) &&\n contentState.recordingType != \"camera-only\" && (\n \n \n \n )}\n \n \n \n \n );\n};\n\nexport default ToolbarWrap;\n" }, { "path": "src/pages/Content/toolbar/styles/_Page.scss", "content": "@use '../../styles/_variables' as *;\n@use './layout/Toolbar';\n@use './layout/DrawingToolbar';\n@use './layout/ShapeToolbar';\n@use './components/Tooltip';\n@use './components/RadialMenu';\n@use './components/ColorWheel';\n@use './components/StrokeWidth';\n@use './components/Toast';\n\n.toolbar-page {\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none!important;\n}" }, { "path": "src/pages/Content/toolbar/styles/components/_ColorWheel.scss", "content": "@use '../../../styles/_variables' as *;\n\n.wheel-trigger {\n\ttransition: transform .2s cubic-bezier(.61,.11,.08,.96), width .2s cubic-bezier(.61,.11,.08,.96), height .2s cubic-bezier(.61,.11,.08,.96), opacity .25s cubic-bezier(.61,.11,.08,.96);\n position: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\topacity: 0;\n\tmargin: auto;\n\twidth: 18px;\n\tbox-sizing: border-box;\n\theight: 18px;\n\tz-index: 9999;\n\n\t\tbox-sizing: border-box;\n background-blend-mode: screen;\n border-radius: 50%;\n\n\t\t\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\t\t}\n}\n.wheel-trigger .radial-menu-item-child {\n\ttransform: rotate(30deg);\n\t&:after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tz-index: 9999999;\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid rgba(0,0,0,.2);\n\t}\n}\n\n.color-wheel .wheel-trigger {\n\twidth: 100px!important;\n\theight: 100px!important;\n\ttransform: rotate(320deg) translate(0px)!important;\n\tz-index: 999999999999!important;\n\tfilter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n}\n.color-wheel-handle {\n\twidth: 12px!important;\n\theight: 12px!important;\n\tborder-radius: 50%;\n\tleft: 20px;\n\ttop: 20px;\n\topacity: 0;\n\tbackground-color: #F17FD7;\n\tborder: 2px solid white;\n\tz-index: 999999999999;\n\tdisplay: none;\n\ttransition: width .25s cubic-bezier(.61,.11,.08,.96), height .25s cubic-bezier(.61,.11,.08,.96), margin-left .25s cubic-bezier(.61,.11,.08,.96), margin-top .25s cubic-bezier(.61,.11,.08,.96);\n\n\t&:hover {\n\t\twidth: 18px!important;\n\t\theight: 18px!important;\n\t\tmargin-left: -2px;\n\t\tmargin-top: -2px;\n\t}\n}\n.color-wheel .color-wheel-handle {\n\topacity: 0;\n\tdisplay: block;\n\tanimation: fadeIn 0.25s cubic-bezier(.61,.11,.08,.96) forwards;\n\tanimation-delay: .5s;\n}\n.w-color-wheel {\n\tpointer-events: none;\n\tposition: absolute!important;\n\twidth: 100%!important;\n\theight: 100%!important;\n\tz-index: 99999999!important;\n\n\t&::after {\n\t\tcontent: \"\";\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tborder: 1px solid rgba(0,0,0,.2);\n box-sizing: border-box;\n border-radius: 50%;\n\t}\n}\n.color-wheel .w-color-wheel {\n\tpointer-events: all!important;\n}\n.w-color-wheel-fill {\n\tbox-shadow: none!important;\n\tborder: 2px solid white!important;\n\twidth: 14px!important;\n\theight: 14px!important;\n\ttransition: width .2s cubic-bezier(.61,.11,.08,.96), height .2s cubic-bezier(.61,.11,.08,.96), margin .2s cubic-bezier(.61,.11,.08,.96)!important;\n\tbox-sizing: border-box!important;\n\tmargin-left: -2px!important;\n\tmargin-top: -2px!important;\n\tz-index: 9999999999!important;\n}\n.w-color-wheel-pointer {\n\tz-index: 99999999999!important;\n\topacity: 0;\n\tanimation: none!important\n}\n.color-wheel .w-color-wheel-pointer {\n\tanimation: fadeInScale .25s cubic-bezier(0.215, 0.610, 0.355, 1) forwards!important;\n\tanimation-delay: .28s!important;\n}\n.w-color-wheel-fill:hover {\n\twidth: 18px!important;\n\theight: 18px!important;\n\tmargin-left: -4px!important;\n\tmargin-top: -4px!important;\n}\n/* Fade in keyframes */\n@keyframes fadeInScale {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n\n.color-wheel, .color-wheel .wheel-trigger, .color-wheel .wheel-trigger .radial-menu-item-child, .color-wheel-handle {\n\tcursor: pointer!important;\n}\n\n.color-wheel-input {\n\tbackground: #000;\n\tborder-radius: 30px;\n\theight: 29px;\n\tcolor: #FFF;\n\ttext-align: center;\n\tline-height: 29px;\n\tpadding-left: 8px;\n\tpadding-right: 8px;\n\tposition: absolute;\n\tmargin-top: -35px;\n\tfont-family: $font-medium;\n\tleft: 50%;\n\ttransform: translate(-50%, 0);\n\topacity: 0;\n}\n.color-wheel .color-wheel-input {\n\tanimation: fadeIn .3s cubic-bezier(.61,.11,.08,.96) forwards;\n\tanimation-delay: .2s;\n\tpointer-events: all!important;\n}\n.color-wheel-input {\n\tpointer-events: none;\n}\n\n@keyframes fadeIn {\n\t0% {\n\t\topacity: 0;\n\t\tmargin-top: -35px;\n\t}\n\t100% {\n\t\topacity: 1;\n\t\tmargin-top: -40px;\n\t}\n}\n\n.color-active .color-preview {\n\topacity: 1;\n}\n.radial-menu[data-state='closed'] .color-preview {\n\topacity: 0!important;\n}\n.color-preview {\n\twidth: 90%;\n\theight: 90%;\n\tbox-sizing: border-box;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\tz-index: 9999999999;\n\ttransform: translate(-50%, -50%);\n\topacity: 0;\n\tanimation: none;\n\tpointer-events: none;\n\tborder: 1px solid #FFF;\n\tbox-sizing: border-box;\n}\n.color-wheel .color-preview {\n\topacity: 0!important;\n}\n.wheel-trigger .color-active {\n\tbox-shadow: none!important;\n}\n.color-active .w-color-wheel {\n\ttransform: scale(1.15)!important;\n\t&::after {\n\t\tborder: none!important;\n\t}\n}\n.color-wheel .w-color-wheel {\n\ttransform: scale(1)!important;\n\t&::after {\n\t\tborder: 1px solid rgba(0,0,0,.2)!important;\n\t}\n}\n.radial-menu[data-state='closed'] .w-color-wheel\n{\n\ttransform: scale(1)!important;\n}" }, { "path": "src/pages/Content/toolbar/styles/components/_RadialMenu.scss", "content": "@use '../../../styles/_variables' as *;\n\n.radial-menu {\n\tposition: absolute;\n\tz-index: 9999999999999;\n\twidth: 100px;\n\theight: 100px;\n\ttop: -66px;\n\tleft: -49px;\n\tpointer-events: none;\n\topacity: 1;\n\ttransform: scale(1);\n\ttransition: transform .3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity .25s ease-in-out;\n\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tz-index: -1;\n\t\tborder: 28px solid #FFF;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tbackdrop-filter: blur(40px);\n\t\topacity: 0;\n\t\tfilter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n\t\ttransform: scale(0);\n\t\ttransition: transform .25s cubic-bezier(0.18, -0.55, 0.265, 1.45), opacity .2s ease-in-out;\n\t\ttransition-delay: .05s;\n\t}\n\t&[data-state='open'] {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t\tpointer-events: all!important;\n\t}\n\t&[data-state='open']::after {\n\t\ttransform: scale(1);\n\t\tborder: 28px solid #FFF;\n\t\topacity: 1;\n\t}\n}\n.color-wheel::after {\n\topacity: 0!important;\n}\n.eyedropper {\n\tposition: absolute;\n\tleft: 0px;\n\ttop: 0px;\n\tright: 0px;\n\tbottom: 0px;\n\tmargin: auto;\n\twidth: 16px;\n\theight: 16px;\n\tpadding: 8px;\n\tz-index: 999999999;\n\tbackground-color: #FFF;\n\tborder-radius: 50%;\n\topacity: 0;\n\ttext-align: center;\n\ttransition: transform .25s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity .3s ease-in-out, background-color .25s ease-in-out!important;\n\ttransform: scale(0);\n\toverflow: hidden;\n\ttransform-style: preserve-3d;\n\n\tsvg {\n\t\tcolor: $color-icon;\n\t}\n\t&:focus-visible {\n\t\toutline: none;\n\t\tbackground-color: #E6E7EA!important;\n\t}\n\t&:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: #E6E7EA;\n\t}\n}\n.eye-active {\n\tbackground-color: $color-primary!important;\n\tsvg {\n\t\tcolor: #FFF!important;\n\t\tfill: #FFF!important;\n\t}\n}\n.color-wheel .eyedropper {\n\topacity: 0!important;\n\tpointer-events: none!important;\n\ttransform: scale(0)!important;\n}\n.radial-menu[data-state='open'] {\n\t.eyedropper {\n\t\ttransform: scale(1)!important;\n\t\topacity: 1;\n\t}\n}\n\n.radial-menu-items {\n\ttransform: rotate(10deg);\n\tz-index: 99999999;\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tmargin: auto;\n}\n.radial-menu-item {\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tmargin: auto;\n\twidth: 18px;\n\theight: 18px;\n\tz-index: 999;\n\tborder-radius: 50%;\n\ttext-align: center;\n\tbox-sizing: border-box;\n\tline-height: 50px;\n\tcolor: white;\n\tborder: 1px solid rgba(0,0,0,.2);\n\ttransition: transform .25s cubic-bezier(.61,.11,.08,.96), opacity .25s cubic-bezier(.61,.11,.08,.96);\n\topacity: 0;\n\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n}\n.color-wheel .radial-menu-item {\n\topacity: 0!important;\n}\n\n.radial-menu-item-child {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\tborder: 0px;\n\tbox-shadow: none;\n\ttop: 0px;\n\tpointer-events: none;\n\tz-index: 9999999;\n\tleft: 0px;\n\tborder-radius: 50%;\n\tbackground-size: cover;\n\n\t&:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: $focus-border;\n\t}\n}\n\n.radial-menu[data-state='open'] .radial-menu-item-child {\n\tpointer-events: all!important;\n}\n\n$elements: 9;\n@for $i from 0 to $elements {\n .radial-menu-item:nth-child(#{$i + 1}), .wheel-trigger {\n\t\ttransform: rotate(#{360 / $elements * $i}deg) translate(0px)\n\t}\n\t.radial-menu[data-state='open'] .radial-menu-item:nth-child(#{$i + 1}), .radial-menu[data-state='open'] .wheel-trigger {\n\t\ttransition-delay:calc(.25s - #{.02 * $i}s);\n\t\ttransform: rotate(#{360 / $elements * $i}deg) translate(36px);\n\t\topacity: 1;\n\t}\n}\n\n$stops: ();\n$totalStops:12;\n$radius:0.9;\n\n@for $i from 0 through $totalStops{\n $stops: append($stops,hsl($i *(360deg/$totalStops),100%,50%),comma);\n}\n\n.color-active {\n\tborder: 1px solid #FFFFFF;\n\tbox-shadow: 0px 0px 0px 2px #0D99FF;\n}\n\n.color-wheel .color-active {\n\tborder: none!important;\n\tbox-shadow: none!important;\n}" }, { "path": "src/pages/Content/toolbar/styles/components/_StrokeWidth.scss", "content": "@use '../../../styles/_variables' as *;\n\n.stroke-width-item {\n\tspan {\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tdisplay: block;\n\t}\n\tdiv[data-state='on'] {\n\n\t\t\tbackground: $color-primary!important;\n\n\t\tsvg {\n\t\t\tcolor: #FFF!important;\n\t\t\tfill: #FFF!important;\n\t\t}\n\t}\n\tdiv[data-state='off'] {\n\t\tsvg {\n\t\t\tfill: #201F1D;\n\t\t}\n\t}\n}\n\n.stroke-icon svg {\n\ttext-align: center;\n\tmargin: auto;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n}" }, { "path": "src/pages/Content/toolbar/styles/components/_Toast.scss", "content": "@use '../../../styles/_variables' as *;\n\n\n.ToastViewport {\n --viewport-padding: 25px;\n position: fixed;\n bottom: 0;\n right: 0;\n\tleft: 0;\n\tmargin: auto!important;\n display: flex;\n flex-direction: column;\n padding: var(--viewport-padding);\n gap: 14px;\n max-width: 100vw;\n\twidth: fit-content;\n list-style: none;\n z-index: 2147483647;\n outline: none;\n\tpointer-events: all!important;\n}\n\n.ToastRoot {\n background-color: $color-text-primary;\n\tcolor: $color-text-contrast;\n border-radius: $container-border-radius;\n box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n padding: 10px 14px;\n display: flex;\n\tflex-direction: row;\n\tgap: 8px;\n\tfont-size: 15px;\n\tline-height: 1.5;\n\tmax-width: 100%;\n\toverflow: hidden;\n\tjustify-content: center;\n\talign-items: center;\n}\n.ToastRoot[data-state='open'] {\n animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n.ToastRoot[data-state='closed'] {\n animation: hide 100ms ease-in;\n}\n.ToastRoot[data-swipe='move'] {\n transform: translateY(var(--radix-toast-swipe-move-y));\n}\n.ToastRoot[data-swipe='cancel'] {\n transform: translateY(0);\n transition: transform 200ms ease-out;\n}\n.ToastRoot[data-swipe='end'] {\n animation: swipeOut 100ms ease-out;\n}\n\n@keyframes hide {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@keyframes slideIn {\n from {\n transform: translateY(calc(100% + var(--viewport-padding)));\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes swipeOut {\n from {\n transform: translateY(var(--radix-toast-swipe-end-y));\n }\n to {\n transform: translateY(calc(100% + var(--viewport-padding)));\n }\n}\n\n.ToastTitle {\n color: $color-text-contrast;\n\tfont-family: $font-medium;\n}\n\n.ToastDescription {\n color: var(--slate-11);\n\tfont-family: $font-medium;\n}\n\n.ToastAction {\n\tcolor: $color-text-contrast;\n font-family: $font-medium;\n\ttext-align: right;\n\tbackground-color: #51515F;\n\tpadding: 0px 12px!important;\n\theight: 24px!important;\n\tcursor: pointer;\n}" }, { "path": "src/pages/Content/toolbar/styles/components/_Tooltip.scss", "content": "@use \"../../../styles/_variables\" as *;\n\n.TooltipContent {\n border-radius: $container-border-radius;\n background-color: $color-text-primary;\n padding: 10px 15px;\n font-size: 12px;\n margin-bottom: 10px;\n bottom: 100px;\n line-height: 1;\n font-family: $font-medium;\n z-index: 99999999 !important;\n color: $color-text-contrast;\n box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n user-select: none;\n transition: opacity 0.3 ease-in-out !important;\n will-change: transform, opacity;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n}\n\n.hide-tooltip {\n display: none !important;\n}\n\n.tooltip-tall {\n margin-bottom: 20px;\n}\n\n.tooltip-small {\n margin-bottom: 5px;\n}\n\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"top\"] {\n animation-name: slideDownAndFade;\n}\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"right\"] {\n animation-name: slideLeftAndFade;\n}\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"bottom\"] {\n animation-name: slideUpAndFade;\n}\n.TooltipContent[data-state=\"delayed-open\"][data-side=\"left\"] {\n animation-name: slideRightAndFade;\n}\n\n@keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n#screenity-ui [data-radix-popper-content-wrapper] {\n z-index: $z-index-max !important;\n}\n\n.override {\n display: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n}\n" }, { "path": "src/pages/Content/toolbar/styles/layout/_DrawingToolbar.scss", "content": "@use '../../../styles/_variables' as *;\n\nbody {\n\tbackground-color: white!important;\n}\n.DrawingToolbar.show-toolbar {\n\topacity: 1!important;\n\tpointer-events: all!important;\n\ttransform: scale(1) translate(calc(-50% + 16px), 0px)!important;\n}\n.ToolbarBottom .DrawingToolbar {\n\ttransform-origin: 0 -100%!important;\n}\n\n.DrawingToolbar {\n\topacity: 0;\n\tpointer-events: none;\n\talign-items: center;\n\tdisplay: flex;\n min-width: max-content;\n\tpadding-left: 10px;\n\tpadding-right: 10px;\n border-radius: 6px;\n box-shadow: 0 2px 10px var(--blackA7);\n\tposition: absolute;\n\theight: 44px;\n\tleft: 0px;\n\ttransform: translate(calc(-50% + 16px));\n\ttransform-origin: 0 100%;\n\tborder-radius: 15px;\n\tz-index: 99999999;\n\ttransition: transform 0.25s cubic-bezier(.61,.11,.08,.96), opacity 0.25s cubic-bezier(.61,.11,.08,.96);\n\ttransform: scale(0.5) translate(calc(-50% + 16px), 10px);\n\n\t&::after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfilter: blur(10px);\n\t\topacity: .15;\n\t\tbackground-color: #000;\n\t\tposition: absolute;\n\t\tleft: 0px;\n\t\ttop: 0px;\n\t\tz-index: -999999999999999!important;\n\t}\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: rgba(242, 241, 242, 0.85);\n\t\tbackdrop-filter: blur(5px);\n\t\tbackground-clip: content-box;\n\t\t-webkit-mask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);\n\t\tmask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);\n\t\tbackground-position: center bottom 50px;\n\t\tborder-radius: 15px;\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\tz-index: -2;\n\t}\n\t.ToolbarSeparator {\n\t\tbackground-color: #dddcdc;\n\t}\n}\n\n.ToolbarTop .DrawingToolbar {\n\tbottom: 49px!important;\n}\n.ToolbarBottom .DrawingToolbar {\n\ttop: 48px!important;\n\n\t&::before {\n\t\t-webkit-mask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px)!important;\n\t\tmask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px);\n\t\tbackground-position: center bottom 50px!important;\n\t}\n}\n\n.ColorPicker {\n\twidth: 14px;\n\theight: 14px;\n\tbackground: #ED6C3A;\n\tborder: 1.5px solid rgba(0, 0, 0, 0.2);\n\tborder-radius: 50%;\n}" }, { "path": "src/pages/Content/toolbar/styles/layout/_ShapeToolbar.scss", "content": "@use '../../../styles/_variables' as *;\n\n.shapeToolbar {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n box-shadow: 0 2px 10px var(--blackA7);\n\tleft: 165px;\n\tpadding: $spacing-02;\n\topacity: 0;\n\tbottom: 45px;\n\ttransform: translateY(calc(-50% + 16px));\n\ttransform-origin: 0 100%;\n\tborder-radius: 15px;\n\tz-index: 99999999;\n\ttransition: transform 0.25s cubic-bezier(.61,.11,.08,.96), opacity 0.25s cubic-bezier(.61,.11,.08,.96);\n\ttransform: scale(0.5) translatY(calc(-50% + 16px), 10px);\n\tpointer-events: none;\n\n\t&::after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: #FFF;\n\t\tz-index: -9999999;\n\t\tposition: absolute;\n\t\tleft: 0px;\n\t\ttop: 0px;\n\t\tborder-radius: 15px;\n\t\tfilter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n\t\ttransition: filter .2s ease-in-out;\n\t}\n}\n.shapeToolbar.show-toolbar {\n\topacity: 1!important;\n\tpointer-events: all!important;\n\ttransform: scale(1) translateY(calc(-50% + 16px), 0px)!important;\n}" }, { "path": "src/pages/Content/toolbar/styles/layout/_Toolbar.scss", "content": "@use \"../../../styles/_variables\" as *;\n@use \"sass:color\";\n\n/* reset */\na,\nbutton {\n all: unset;\n}\n\niframe {\n width: 100%;\n height: 100%;\n position: fixed;\n overflow: scroll;\n z-index: -9999;\n top: 0px;\n left: 0px;\n border: 0px;\n pointer-events: all !important;\n}\n.container {\n pointer-events: none !important;\n}\n.visually-hidden-toolbar {\n opacity: 0 !important;\n visibility: hidden !important;\n pointer-events: none !important;\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n}\n.toolbar-controls {\n opacity: 0;\n cursor: pointer;\n position: absolute;\n top: -10px;\n right: -10px;\n box-sizing: border-box;\n border-radius: $container-border-radius;\n border: 1px solid $color-border;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n z-index: 99999999999999;\n background: rgba(240, 238, 238, 1);\n backdrop-filter: blur(10px);\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 6px;\n padding-bottom: 6px;\n transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n\n &.open {\n opacity: 1 !important;\n pointer-events: auto;\n }\n\n .popup-control {\n svg {\n color: $color-icon;\n margin-bottom: -2px;\n }\n }\n}\n.ToolbarBounds {\n position: fixed;\n top: 0px;\n left: 0px;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 10px solid $color-primary;\n pointer-events: none;\n transform: scale(1.2);\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96),\n opacity 0.25s ease-in-out;\n}\n.ToolbarBounds.ToolbarShake {\n transform: scale(1);\n opacity: 0.4;\n}\n\n.react-draggable {\n pointer-events: all;\n}\n.ToolbarShake .react-draggable {\n width: 100%;\n height: 100%;\n}\n.ToolbarElastic {\n transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n.ToolbarShake .ToolbarRoot {\n animation: subtleshake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n animation-iteration-count: infinite !important;\n background-color: white !important;\n}\n.ToolbarDragging .ToolbarRoot {\n transform: scale(1.02);\n\n &::after {\n filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.5));\n }\n}\n\n// Shake animation for the toolbar\n@keyframes shake {\n 0% {\n transform: translate(1px, 1px) rotate(0deg);\n }\n 20% {\n transform: translate(-3px, 0px) rotate(1deg);\n }\n 30% {\n transform: translate(3px, 2px) rotate(0deg);\n }\n 40% {\n transform: translate(1px, -1px) rotate(1deg);\n }\n 50% {\n transform: translate(-1px, 2px) rotate(-1deg);\n }\n 60% {\n transform: translate(-3px, 1px) rotate(0deg);\n }\n 70% {\n transform: translate(3px, 1px) rotate(-1deg);\n }\n 80% {\n transform: translate(-1px, -1px) rotate(1deg);\n }\n 90% {\n transform: translate(1px, 2px) rotate(0deg);\n }\n 100% {\n transform: translate(1px, -2px) rotate(-1deg);\n }\n}\n\n// Subtle shake animation, smooth\n@keyframes subtleshake {\n 0% {\n transform: translate(0px, 0px) rotate(0deg);\n }\n 10% {\n transform: translate(-1px, 1px) rotate(1deg);\n }\n 20% {\n transform: translate(-1px, -1px) rotate(-1deg);\n }\n 30% {\n transform: translate(1px, 0px) rotate(0deg);\n }\n 40% {\n transform: translate(-1px, 1px) rotate(-1deg);\n }\n 50% {\n transform: translate(1px, -1px) rotate(1deg);\n }\n 60% {\n transform: translate(-1px, 1px) rotate(-1deg);\n }\n 70% {\n transform: translate(-1px, -1px) rotate(1deg);\n }\n 80% {\n transform: translate(1px, 1px) rotate(0deg);\n }\n 90% {\n transform: translate(0px, -1px) rotate(-1deg);\n }\n 100% {\n transform: translate(-1px, 1px) rotate(1deg);\n }\n}\n\n.ToolbarTransparent {\n opacity: 0;\n\n &:hover {\n opacity: 1;\n }\n}\n.ToolbarHoverZone {\n display: inline-block;\n position: relative;\n\n // optional: give it a bit of invisible hover padding\n padding: 4px;\n\n // if you want to *visually* match the toolbar area only:\n width: fit-content;\n height: fit-content;\n}\n\n.ToolbarRoot {\n display: flex;\n align-items: center;\n padding-left: 10px;\n transition: opacity 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96),\n transform 0.2s cubic-bezier(0.61, 0.11, 0.08, 0.96);\n min-width: max-content;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n padding-right: 10px;\n height: 48px;\n position: absolute;\n bottom: 20px;\n left: 20px;\n border-radius: $container-border-radius;\n\n &::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: #fff;\n z-index: -9999999;\n position: absolute;\n left: 0px;\n top: 0px;\n border-radius: $container-border-radius;\n filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));\n transition: filter 0.2s ease-in-out;\n }\n}\n\n.ForceTransparent {\n opacity: 0 !important;\n}\n.ToolbarRecordingControls {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #f6f7fb;\n border-radius: $container-border-radius;\n font-family: $font-medium;\n height: calc(100% - 12px);\n padding-left: 2px;\n padding-right: 2px;\n}\n.ToolbarRecordingTime {\n margin-right: 4px;\n width: 42px;\n color: $color-text-primary;\n font-size: 13px;\n line-height: 1;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n}\n.TimerWarning {\n color: #ff4c4c; /* or add a pulsing effect */\n font-weight: bold;\n animation: pulse 1s infinite alternate;\n}\n@keyframes pulse {\n from {\n opacity: 1;\n }\n to {\n opacity: 0.6;\n }\n}\n.ToolbarToggleGroup {\n display: flex;\n align-items: center;\n}\n.ToolbarToggleWrap {\n flex: 1 1 auto;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex: 0 0 auto;\n width: 32px;\n height: 32px;\n display: inline-flex;\n line-height: 1;\n align-items: center;\n justify-content: center;\n}\n.ToolbarToggleItem,\n.ToolbarModeItem,\n.ToolbarModeItemSingle,\n.ToolbarLink,\n.ToolbarButton {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #000;\n height: 32px;\n width: 32px;\n text-align: center;\n font-size: 13px;\n line-height: 1;\n border-radius: 50%;\n transition: background-color 0.25s ease-in-out;\n background-color: rgba(124, 139, 165, 0);\n\n svg {\n color: $color-icon;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n background: none !important;\n }\n\n &.resume {\n svg {\n color: #f7387d !important;\n }\n }\n}\n.ToolbarToggleItem:hover,\n.ToolbarModeItem:hover,\n.ToolbarModeItemSingle:hover,\n.ToolbarLink:hover,\n.ToolbarButton:hover {\n cursor: pointer;\n background-color: rgba(124, 139, 165, 0.1) !important;\n}\n.ToolbarToggleItem:focus-visible,\n.ToolbarModeItemSingle:focus-visible,\n.ToolbarModeItem:focus-visible,\n.ToolbarLink:focus-visible,\n.ToolbarButton:focus-visible {\n position: relative;\n box-shadow: $focus-border;\n}\n\n.ToolbarModeItemSingle {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n\n &:first-child {\n margin-left: 0;\n }\n &[data-state=\"on\"] {\n background: rgba(120, 192, 114, 0.1);\n\n svg {\n color: #78c072;\n }\n\n &::before {\n transform: translateY(0px) scale(1) !important;\n opacity: 1 !important;\n }\n }\n}\n\n.ToolbarModeItem {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n\n &:first-child {\n margin-left: 0;\n }\n &::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 50%;\n border-radius: 80px 80px 0% 0%;\n box-sizing: border-box;\n position: absolute;\n top: -16px;\n left: 0;\n z-index: -999999;\n transition: transform 0.25s cubic-bezier(0.61, 0.11, 0.08, 0.96),\n opacity 0.25s ease-in-out;\n transform: translateY(5px) scale(0) !important;\n border-right: 3px solid white;\n border-top: 9px solid white;\n border-left: 3px solid white;\n background-color: transparent;\n opacity: 0;\n }\n &[data-state=\"on\"] {\n background: rgba(56, 126, 247, 0.1);\n\n svg {\n color: $color-primary;\n }\n\n &::before {\n transform: translateY(0px) scale(1) !important;\n opacity: 1 !important;\n }\n }\n}\n\n.ToolbarBottom .ToolbarModeItem {\n &::before {\n transform: translateY(-5px) scale(0.5) !important;\n bottom: -16px;\n top: unset !important;\n border-bottom: 9px solid white !important;\n border-radius: 0% 0% 80px 80px !important;\n border-top: none !important;\n }\n &[data-state=\"on\"] {\n &::before {\n transform: translateY(0px) scale(1) !important;\n }\n }\n}\n\n.ToolbarToggleItem {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 99999;\n position: relative;\n\n &:first-child {\n margin-left: 0;\n }\n &[data-state=\"on\"] {\n background: $gradient-primary;\n color: #fff;\n\n svg {\n color: #fff;\n }\n }\n}\n\n.ToolbarSeparator {\n width: 1px;\n height: 19px;\n background-color: $color-border;\n margin: 0 8px;\n}\n\n.ToolbarLink {\n background-color: transparent;\n color: var(--mauve11);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n}\n.ToolbarLink:hover {\n background-color: transparent;\n cursor: pointer;\n}\n\n.ToolbarPaused {\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 10px solid #f7387d;\n pointer-events: none;\n opacity: 0.5;\n\n &.hidden {\n display: none;\n }\n}\n\n.OnboardingArrow {\n position: absolute;\n z-index: $z-index-max;\n width: max-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n left: -69px;\n bottom: 23px;\n transform: rotate(12deg);\n pointer-events: none !important;\n}\n\n// Hide legacy \"click here to draw\" hint while Driver.js onboarding is active.\nbody.driver-active .OnboardingArrow {\n display: none !important;\n}\n\n.OnboardingText {\n font-size: 32px;\n color: $color-icon;\n font-family: \"Gloria-Hallelujah\", sans-serif !important;\n}\n.ArrowShape {\n margin-left: -15px;\n}\n\n// Onboarding (driver.js)\n.driver-popover.ScreenityOnboardingPopover,\n.ScreenityOnboardingPopover,\n.onboarding-popover {\n border-radius: $container-border-radius !important;\n background: $color-background !important;\n color: $color-text-primary !important;\n font-family: $font-regular !important;\n box-shadow: $container-soft-shadow !important;\n padding: 20px !important;\n max-width: 340px !important;\n font-size: $font-size-normal !important;\n z-index: $z-index-max !important;\n\n .driver-popover-title {\n font-size: 1rem !important;\n font-family: $font-bold !important;\n margin-bottom: 12px !important;\n color: $color-text-primary !important;\n }\n\n .driver-popover-description {\n font-size: $font-size-normal !important;\n font-family: $font-medium !important;\n color: $color-text-secondary !important;\n line-height: 1.5 !important;\n margin-bottom: 18px !important;\n\n a {\n color: $color-primary !important;\n font-family: $font-bold !important;\n text-decoration: none !important;\n cursor: pointer !important;\n }\n }\n\n .driver-popover-close-btn {\n display: none !important;\n top: 14px;\n right: 12px;\n color: $color-text-secondary !important;\n font-size: 1.5rem !important;\n }\n\n .driver-popover-arrow {\n width: 0px;\n height: 0px;\n // border: 4px solid #fff;\n background: none !important;\n box-shadow: none !important;\n box-sizing: border-box;\n }\n\n .driver-popover-arrow-side-top {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-top: 8px solid $color-background !important;\n }\n\n .driver-popover-arrow-side-bottom {\n border-left: 8px solid transparent !important;\n border-right: 8px solid transparent !important;\n border-bottom: 8px solid $color-background !important;\n }\n\n .driver-popover-arrow-side-left {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-left: 8px solid $color-background !important;\n }\n\n .driver-popover-arrow-side-right {\n border-top: 8px solid transparent !important;\n border-bottom: 8px solid transparent !important;\n border-right: 8px solid $color-background !important;\n }\n .driver-popover-arrow-align-start {\n top: 35px !important;\n }\n .driver-popover-arrow-align-end {\n bottom: 35px !important;\n }\n .driver-popover-arrow-align-left {\n left: 35px !important;\n }\n .driver-popover-arrow-align-right {\n right: 35px !important;\n }\n .driver-popover-progress-text {\n font-size: $font-size-detail !important;\n font-family: $font-medium !important;\n color: $color-text-secondary !important;\n opacity: 0.7 !important;\n margin-top: 2px !important;\n }\n .driver-popover-footer {\n display: flex !important;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 16px;\n\n .driver-popover-navigation-btns {\n gap: 6px !important;\n\n .driver-popover-next-btn,\n .driver-popover-prev-btn,\n .driver-popover-close-btn {\n background-color: $color-primary !important;\n color: white !important;\n border: none !important;\n padding: 10px 14px !important;\n border-radius: 30px !important;\n font-family: $font-medium !important;\n font-weight: 500 !important;\n cursor: pointer !important;\n font-size: 0.875rem !important;\n text-shadow: none !important;\n }\n .driver-popover-next-btn {\n &:hover {\n background: color.adjust($color-primary, $lightness: -5%) !important;\n }\n }\n\n .driver-popover-prev-btn {\n background-color: transparent !important;\n color: $color-text-primary !important;\n border: 1px solid $color-border !important;\n\n &:hover {\n background: $color-light-grey !important;\n }\n }\n\n .driver-popover-close-btn {\n background-color: transparent !important;\n color: $color-text-secondary !important;\n }\n }\n }\n}\n" }, { "path": "src/pages/Content/utils/BlurTool.jsx", "content": "import React, {\n useLayoutEffect,\n useState,\n useRef,\n useContext,\n useEffect,\n} from \"react\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst BlurTool = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const hoveredElementRef = useRef(null);\n const blurModeRef = useRef(null);\n const [showOutline, setShowOutline] = useState(false);\n const [outlineRect, setOutlineRect] = useState(null);\n\n useEffect(() => {\n blurModeRef.current = contentState.blurMode;\n }, [contentState.blurMode]);\n\n useEffect(() => {\n if (!contentState.showExtension) {\n setShowOutline(false);\n // Remove blur from all elements\n const elements = document.querySelectorAll(\".screenity-blur\");\n elements.forEach((element) => {\n element.classList.remove(\"screenity-blur\");\n });\n }\n }, [contentState.showExtension]);\n\n useLayoutEffect(() => {\n const updateOutline = (target) => {\n if (!target) return;\n hoveredElementRef.current = target;\n const rect = target.getBoundingClientRect();\n setOutlineRect({\n top: rect.top + window.scrollY,\n left: rect.left + window.scrollX,\n width: target.offsetWidth,\n height: target.offsetHeight,\n });\n setShowOutline(true);\n };\n\n const handleMouseMove = (event) => {\n if (!blurModeRef.current) {\n setShowOutline(false);\n setOutlineRect(null);\n return;\n }\n const target = event.target;\n if (\n !target.classList.contains(\"screenity-outline\") &&\n !target.closest(\"#screenity-ui #screenity-ui *\")\n ) {\n updateOutline(target);\n document.body.style.cursor = \"pointer\";\n } else {\n document.body.style.cursor = \"auto\";\n setShowOutline(false);\n setOutlineRect(null);\n }\n };\n\n const handleMouseOut = () => {\n setShowOutline(false);\n setOutlineRect(null);\n };\n\n const handleMouseDown = (event) => {\n if (!blurModeRef.current) {\n setShowOutline(false);\n return;\n }\n\n const target = event.target;\n if (target.closest(\"#screenity-ui, #screenity-ui *\")) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n };\n\n const handleElementClick = (event) => {\n if (!blurModeRef.current) {\n setShowOutline(false);\n return;\n }\n\n const target = event.target;\n if (target.closest(\"#screenity-ui, #screenity-ui *\")) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n target.classList.toggle(\"screenity-blur\");\n };\n\n const handleMouseUp = (event) => {\n if (!blurModeRef.current) {\n setShowOutline(false);\n setOutlineRect(null);\n return;\n }\n\n const target = event.target;\n if (target.closest(\"#screenity-ui, #screenity-ui *\")) {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n };\n\n const handleScroll = () => {\n if (!blurModeRef.current || !hoveredElementRef.current) return;\n updateOutline(hoveredElementRef.current);\n };\n\n document.body.addEventListener(\"mousemove\", handleMouseMove, true);\n document.body.addEventListener(\"mousedown\", handleMouseDown, true);\n document.body.addEventListener(\"mouseout\", handleMouseOut, true);\n document.body.addEventListener(\"mouseup\", handleMouseUp, true);\n document.body.addEventListener(\"click\", handleElementClick, true);\n document.addEventListener(\"scroll\", handleScroll, true);\n\n return () => {\n document.body.removeEventListener(\"mousemove\", handleMouseMove, true);\n document.body.removeEventListener(\"mousedown\", handleMouseDown, true);\n document.body.removeEventListener(\"mouseout\", handleMouseOut, true);\n document.body.removeEventListener(\"mouseup\", handleMouseUp, true);\n document.body.removeEventListener(\"click\", handleElementClick, true);\n document.removeEventListener(\"scroll\", handleScroll, true);\n };\n }, []);\n\n return (\n
\n {showOutline && outlineRect && (\n
\n )}\n \n );\n};\n\nexport default BlurTool;\n" }, { "path": "src/pages/Content/utils/CursorModes.jsx", "content": "import React, { useState, useEffect, useContext, useRef } from \"react\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst CursorModes = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const effectsRef = useRef(new Set());\n\n useEffect(() => {\n const nextEffects = Array.isArray(contentState.cursorEffects)\n ? contentState.cursorEffects\n : [];\n effectsRef.current = new Set(nextEffects);\n }, [contentState.cursorEffects]);\n\n const mouseDownHandler = (e) => {\n if (effectsRef.current.has(\"target\")) {\n const target = document.querySelector(\".cursor-click-target\");\n if (!target) return;\n target.style.transform =\n \"translate(-50%, -50%) scale(1)\";\n target.style.opacity = \"1\";\n }\n };\n\n const mouseUpHandler = (e) => {\n if (effectsRef.current.has(\"target\")) {\n const target = document.querySelector(\".cursor-click-target\");\n if (!target) return;\n target.style.transform =\n \"translate(-50%, -50%) scale(0)\";\n target.style.opacity = \"0\";\n\n window.setTimeout(() => {\n const targetReset = document.querySelector(\".cursor-click-target\");\n if (!targetReset) return;\n targetReset.style.transform =\n \"translate(-50%, -50%) scale(1)\";\n }, 350);\n }\n };\n\n const [lastMousePosition, setLastMousePosition] = useState({ x: 0, y: 0 });\n const lastMouseRef = useRef(lastMousePosition);\n\n useEffect(() => {\n lastMouseRef.current = lastMousePosition;\n }, [lastMousePosition]);\n\n const updateCursorPosition = () => {\n const scrollTop = window.scrollY;\n const scrollLeft = window.scrollX;\n\n if (effectsRef.current.has(\"target\")) {\n const target = document.querySelector(\".cursor-click-target\");\n if (target) {\n target.style.top = lastMouseRef.current.y + scrollTop + \"px\";\n target.style.left = lastMouseRef.current.x + scrollLeft + \"px\";\n }\n }\n\n if (effectsRef.current.has(\"highlight\")) {\n const highlight = document.querySelector(\".cursor-highlight\");\n if (highlight) {\n highlight.style.top = lastMouseRef.current.y + scrollTop + \"px\";\n highlight.style.left = lastMouseRef.current.x + scrollLeft + \"px\";\n }\n }\n\n if (effectsRef.current.has(\"spotlight\")) {\n const spotlight = document.querySelector(\".spotlight\");\n if (spotlight) {\n spotlight.style.top = lastMouseRef.current.y + scrollTop + \"px\";\n spotlight.style.left = lastMouseRef.current.x + scrollLeft + \"px\";\n }\n }\n };\n\n const mouseMoveHandler = (e) => {\n const next = { x: e.clientX, y: e.clientY };\n lastMouseRef.current = next;\n setLastMousePosition(next);\n updateCursorPosition();\n };\n\n const scrollHandler = () => {\n updateCursorPosition();\n };\n\n // Show click target when user clicks anywhere for 1 second, animate scale up and fade out\n useEffect(() => {\n document.addEventListener(\"mousedown\", mouseDownHandler);\n document.addEventListener(\"mousemove\", mouseMoveHandler);\n document.addEventListener(\"mouseup\", mouseUpHandler);\n document.addEventListener(\"scroll\", scrollHandler);\n\n return () => {\n document.removeEventListener(\"mousedown\", mouseDownHandler);\n document.removeEventListener(\"mousemove\", mouseMoveHandler);\n document.removeEventListener(\"mouseup\", mouseUpHandler);\n document.removeEventListener(\"scroll\", scrollHandler);\n };\n }, []);\n\n return (\n
\n
\n \n \n \n \n );\n};\n\nexport default CursorModes;\n" }, { "path": "src/pages/Content/utils/ZoomContainer.jsx", "content": "import React, { useState, useEffect, useRef, useContext } from \"react\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst ZoomContainer = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [zoomLevel, setZoomLevel] = useState(1);\n const scaleRef = useRef(1);\n const translateXRef = useRef(0);\n const translateYRef = useRef(0);\n const cursorXRef = useRef(0);\n const cursorYRef = useRef(0);\n const isKeyDownRef = useRef(false);\n const isKeyUpRef = useRef(false);\n const zoomSelector = useRef(null);\n const oldPosition = useRef(null);\n const oldWidth = useRef(null);\n const oldHeight = useRef(null);\n const oldOverflow = useRef(null);\n const oldTop = useRef(null);\n const oldLeft = useRef(null);\n const contentStateRef = useRef(contentState);\n const observer = useRef(null);\n\n useEffect(() => {\n oldPosition.current = document.body.style.position;\n oldWidth.current = document.body.style.width;\n oldHeight.current = document.body.style.height;\n oldOverflow.current = document.body.style.overflow;\n oldTop.current = document.body.style.top;\n oldLeft.current = document.body.style.left;\n }, []);\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n const handleKeyDown = (e) => {\n // Alt / Option + Shift + Z\n if (e.code === \"KeyE\" && e.altKey && e.shiftKey) {\n //if (!contentStateRef.current.recording) return;\n if (!contentStateRef.current.zoomEnabled) return;\n if (isKeyDownRef.current) return;\n isKeyDownRef.current = true;\n zoomIn();\n }\n };\n\n const handleKeyUp = (e) => {\n if (e.code === \"KeyE\" || e.altKey || e.shiftKey) {\n isKeyDownRef.current = false;\n isKeyUpRef.current = true;\n zoomOut();\n\n setTimeout(() => {\n isKeyUpRef.current = false;\n setTimeout(() => {\n enableScrolling();\n }, 500);\n }, 500);\n }\n };\n\n const handleMouseMove = (e) => {\n //if (!contentStateRef.current.recording) return;\n if (!contentStateRef.current.zoomEnabled) return;\n\n const { top, left } = document.documentElement.getBoundingClientRect();\n\n cursorXRef.current = e.clientX - left;\n cursorYRef.current = e.clientY - top;\n applyTransform();\n };\n\n const zoomIn = () => {\n scaleRef.current *= 1.5;\n setZoomLevel(scaleRef.current);\n applyTransformWithTransition();\n preventScrolling();\n };\n\n const zoomOut = () => {\n scaleRef.current = 1;\n translateXRef.current = 0;\n translateYRef.current = 0;\n setZoomLevel(scaleRef.current);\n //applyTransformWithTransition();\n //enableScrolling();\n };\n\n const applyTransform = () => {\n if (!zoomSelector.current) return;\n //if (!contentStateRef.current.recording) return;\n const { current: scale } = scaleRef;\n const { current: translateX } = translateXRef;\n const { current: translateY } = translateYRef;\n\n const originX = cursorXRef.current - translateX;\n const originY = cursorYRef.current - translateY;\n\n zoomSelector.current.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;\n zoomSelector.current.style.transformOrigin = `${originX}px ${originY}px`;\n\n // I also need to apply the transform to the #canvas-wrapper, if it exists\n const canvasWrapper = document.querySelector(\"#canvas-wrapper-screenity\");\n\n // Substract scroll position\n const fixedOriginX = originX - window.scrollX;\n const fixedOriginY = originY - window.scrollY;\n if (canvasWrapper) {\n canvasWrapper.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;\n canvasWrapper.style.transformOrigin = `${fixedOriginX}px ${fixedOriginY}px`;\n }\n\n // Also to #mockup-wrapper\n //const mockupWrapper = document.querySelector(\"#mockup-wrapper\");\n //if (mockupWrapper) {\n // mockupWrapper.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;\n // mockupWrapper.style.transformOrigin = `${originX}px ${originY}px`;\n //}\n };\n\n const applyTransformWithTransition = () => {\n if (!zoomSelector.current) return;\n\n zoomSelector.current.style.transition = \"transform 0.5s\";\n if (document.querySelector(\"#canvas-wrapper-screenity\")) {\n document.querySelector(\"#canvas-wrapper-screenity\").style.transition =\n \"transform 0.5s\";\n }\n //if (document.querySelector(\"#mockup-wrapper\")) {\n // document.querySelector(\"#mockup-wrapper\").style.transition =\n // \"transform 0.5s\";\n //}\n applyTransform();\n };\n\n const preventScrolling = () => {\n /*\n zoomSelector.current.style.position = \"fixed\";\n zoomSelector.current.style.top = \"0\";\n zoomSelector.current.style.left = \"0\";\n zoomSelector.current.style.overflow = \"hidden\";\n zoomSelector.current.style.width = \"100vw\";\n zoomSelector.current.style.height = \"100vh\";\n\t\t*/\n };\n\n const enableScrolling = () => {\n if (!zoomSelector.current) return;\n zoomSelector.current.style.position = oldPosition.current;\n zoomSelector.current.style.top = oldTop.current;\n zoomSelector.current.style.left = oldLeft.current;\n zoomSelector.current.style.overflow = oldOverflow.current;\n zoomSelector.current.style.width = oldWidth.current;\n zoomSelector.current.style.height = oldHeight.current;\n };\n\n useEffect(() => {\n window.addEventListener(\"keydown\", handleKeyDown);\n window.addEventListener(\"keyup\", handleKeyUp);\n window.addEventListener(\"mousemove\", handleMouseMove);\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n window.removeEventListener(\"keyup\", handleKeyUp);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n };\n }, [contentState.zoomEnabled, contentState.showExtension]);\n\n useEffect(() => {\n if (!contentState.zoomEnabled) return;\n if (!contentState.showPopup) return;\n\n setTimeout(() => {\n //if (!contentState.recording) return;\n if (document.querySelector(\"#screenity-zoom-wrap\")) return;\n const div = document.createElement(\"div\");\n div.id = \"screenity-zoom-wrap\";\n div.style.width = \"100vw\";\n div.style.height = \"100vh\";\n\n // Move the body's children into this wrapper\n while (\n document.body.firstChild &&\n document.body.firstChild.id !== \"screenity-ui\"\n ) {\n if (document.body.firstChild.id !== \"screenity-ui\") {\n div.appendChild(document.body.firstChild);\n }\n }\n\n // Append the wrapper to the body\n document.body.prepend(div);\n\n document.body.appendChild(document.getElementById(\"screenity-ui\"));\n zoomSelector.current = document.querySelector(\"#screenity-zoom-wrap\");\n\n observer.current = new MutationObserver((mutations) => {\n if (!contentState.showExtension) {\n mutations.forEach((mutation) => {\n if (mutation.addedNodes.length > 0) {\n const screenityUi = document.querySelector(\"#screenity-ui\");\n if (screenityUi) {\n // Disconnect the observer\n observer.current.disconnect();\n }\n }\n });\n }\n });\n\n observer.current.observe(document.body, {\n childList: true,\n subtree: true,\n });\n }, 500);\n\n return () => {\n setTimeout(() => {\n if (observer.current && typeof observer.current === \"object\") {\n observer.current.disconnect();\n }\n const zoomWrap = document.querySelector(\"#screenity-zoom-wrap\");\n if (zoomWrap) {\n while (zoomWrap.firstChild) {\n document.body.prepend(zoomWrap.firstChild);\n }\n\n if (document.body.contains(zoomWrap)) {\n document.body.removeChild(zoomWrap);\n }\n }\n // reset\n scaleRef.current = 1;\n translateXRef.current = 0;\n translateYRef.current = 0;\n setZoomLevel(scaleRef.current);\n }, 500);\n };\n }, [contentState.zoomEnabled, contentState.showExtension]);\n\n useEffect(() => {\n setTimeout(() => {\n if (!contentState.zoomEnabled || !contentState.showExtension) {\n const zoomWrap = document.querySelector(\"#screenity-zoom-wrap\");\n if (zoomWrap) {\n while (zoomWrap.firstChild) {\n document.body.prepend(zoomWrap.firstChild);\n }\n\n if (document.body.contains(zoomWrap)) {\n document.body.removeChild(zoomWrap);\n }\n }\n // reset\n scaleRef.current = 1;\n translateXRef.current = 0;\n translateYRef.current = 0;\n setZoomLevel(scaleRef.current);\n }\n }, 500);\n }, [contentState.zoomEnabled, contentState.showExtension]);\n\n useEffect(() => {\n if (!zoomSelector.current) return;\n //if (!contentStateRef.current.recording) return;\n if (!contentStateRef.current.zoomEnabled) return;\n if (isKeyDownRef.current || isKeyUpRef.current) {\n //preventScrolling();\n applyTransform();\n }\n }, [zoomLevel]);\n\n return null;\n};\n\nexport default ZoomContainer;\n" }, { "path": "src/pages/Content/warning/Warning.jsx", "content": "import React, {\n useState,\n useEffect,\n useContext,\n useCallback,\n useRef,\n} from \"react\";\n\nimport {\n AudioIcon,\n CameraCloseIcon,\n NotSupportedIcon,\n CameraIcon,\n} from \"../toolbar/components/SVG\";\n\nimport * as ToastEl from \"@radix-ui/react-toast\";\n\n// Context\nimport { contentStateContext } from \"../context/ContentState\";\n\nconst Warning = () => {\n const [contentState, setContentState] = useContext(contentStateContext);\n const [open, setOpen] = useState(false);\n const [title, setTitle] = useState(\"Record computer audio\");\n const [description, setDescription] = useState(\"\");\n const [icon, setIcon] = useState(\"AudioIcon\");\n const [duration, setDuration] = useState(10000);\n\n const openWarning = useCallback((title, description, icon, duration) => {\n setTitle(title);\n setDescription(description);\n setIcon(icon);\n setDuration(duration);\n setOpen(true);\n }, []);\n\n useEffect(() => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openWarning: openWarning,\n }));\n\n return () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openWarning: null,\n }));\n };\n }, []);\n\n useEffect(() => {\n if (icon === \"AudioIcon\") {\n if (contentState.recordingType === \"region\") {\n setOpen(false);\n }\n }\n }, [contentState.recordingType]);\n\n useEffect(() => {\n if (contentState.recording) {\n setOpen(false);\n }\n }, [contentState.recording]);\n\n return (\n \n {\n setOpen(false);\n }}\n >\n
\n {icon === \"AudioIcon\" && }\n {icon === \"NotSupportedIcon\" && }\n {icon === \"CameraIcon\" && }\n
\n
\n {title}\n \n {description}\n \n
\n {\n setOpen(false);\n }}\n >\n \n \n \n \n \n );\n};\n\nexport default Warning;\n" }, { "path": "src/pages/Content/warning/styles/_Warning.scss", "content": "@use \"../../styles/_variables\" as *;\n\n.WarningViewport {\n --viewport-padding: 25px;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n margin: auto !important;\n display: flex;\n flex-direction: column;\n padding: var(--viewport-padding);\n gap: 14px;\n max-width: 100vw;\n width: fit-content;\n list-style: none;\n z-index: 2147483647;\n outline: none;\n pointer-events: all !important;\n}\n\n.warning-root {\n background-color: $color-text-primary;\n color: $color-text-contrast;\n border-radius: $container-border-radius;\n box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n padding: 14px 20px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 8px;\n font-size: 15px;\n line-height: 1.5;\n max-width: 350px;\n overflow: hidden;\n align-items: center;\n text-align: left;\n align-items: flex-start;\n}\n.warning-content {\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n.warning-root[data-state=\"open\"] {\n animation: slideIn2 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n.warning-root[data-state=\"closed\"] {\n animation: hide 100ms ease-in;\n}\n.warning-root[data-swipe=\"move\"] {\n transform: translateY(var(--radix-toast-swipe-move-y));\n}\n.warning-root[data-swipe=\"cancel\"] {\n transform: translateY(0);\n transition: transform 200ms ease-out;\n}\n.warning-root[data-swipe=\"end\"] {\n animation: swipeOut2 100ms ease-out;\n}\n\n@keyframes hide {\n from {\n opacity: 1;\n }\n to {\n opacity: 0 !important;\n }\n}\n\n@keyframes slideIn2 {\n from {\n transform: translateY(calc(-100% - var(--viewport-padding)));\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes swipeOut2 {\n from {\n transform: translateY(var(--radix-toast-swipe-end-y));\n }\n to {\n transform: translateY(calc(-100% - var(--viewport-padding)));\n }\n}\n\n.warning-title {\n color: $color-text-contrast;\n font-family: $font-medium;\n line-height: 1.4;\n}\n\n.warning-description {\n color: $color-text-contrast;\n opacity: 0.8;\n font-family: $font-medium;\n line-height: 1.5;\n}\n\n.ToastAction {\n color: $color-text-contrast;\n font-family: $font-medium;\n text-align: right;\n background-color: #51515f;\n padding: 0px 12px !important;\n height: 24px !important;\n cursor: pointer;\n}\n.warning-close {\n z-index: 999999;\n}\n.warning-close:hover {\n cursor: pointer;\n}\n" }, { "path": "src/pages/Download/Download.jsx", "content": "import React, { useState, useCallback, useEffect } from \"react\";\n\nimport localforage from \"localforage\";\n\nlocalforage.config({\n driver: localforage.INDEXEDDB,\n name: \"screenity\",\n version: 1,\n});\n\n// Get chunks store\nconst chunksStore = localforage.createInstance({ name: \"chunks\" });\nconst cameraChunksStore = localforage.createInstance({ name: \"cameraChunks\" });\nconst audioChunksStore = localforage.createInstance({ name: \"audioChunks\" });\n\nconst Download = () => {\n const base64ToUint8Array = (base64) => {\n const dataUrlRegex = /^data:(.*?);base64,/;\n const matches = base64.match(dataUrlRegex);\n if (matches !== null) {\n // Base64 is a data URL\n const mimeType = matches[1];\n const binaryString = atob(base64.slice(matches[0].length));\n const bytes = new Uint8Array(binaryString.length);\n for (let i = 0; i < binaryString.length; i++) {\n bytes[i] = binaryString.charCodeAt(i);\n }\n return new Blob([bytes], { type: mimeType });\n } else {\n // Base64 is a regular string\n const binaryString = atob(base64);\n const bytes = new Uint8Array(binaryString.length);\n for (let i = 0; i < binaryString.length; i++) {\n bytes[i] = binaryString.charCodeAt(i);\n }\n return new Blob([bytes], { type: \"video/webm\" });\n }\n };\n\n const handleMessage = useCallback((message, sender, sendResponse) => {\n if (message.type === \"download-video\") {\n const base64 = message.base64;\n const blob = base64ToUint8Array(base64);\n const title = message.title.replace(/[\\/\\\\:?~<>|*\"]/g, \"_\");\n const url = URL.createObjectURL(blob);\n\n chrome.downloads\n .download({\n url: url,\n filename: title,\n saveAs: true,\n })\n .then(() => {\n URL.revokeObjectURL(url);\n // Close this tab\n window.close();\n });\n } else if (message.type === \"recover-indexed-db\") {\n // Rewrite in localforage\n const chunkArray = [];\n chunksStore\n .iterate((value, key, iterationNumber) => {\n chunkArray.push(value.chunk);\n })\n .then(() => {\n const blob = new Blob(chunkArray, { type: \"video/webm\" });\n const url = URL.createObjectURL(blob);\n chrome.downloads\n .download({\n url: url,\n filename: \"recovered-video.webm\",\n saveAs: true,\n })\n .then(() => {\n URL.revokeObjectURL(url);\n // Close this tab\n window.close();\n });\n });\n } else if (message.type === \"recover-cloud-indexed-db\") {\n (async () => {\n const ts = new Date().toISOString().replace(/[:.]/g, \"-\");\n let downloaded = 0;\n\n const downloadTrack = async (store, label, mimeType) => {\n const entries = [];\n await store.iterate((value) => {\n if (value?.chunk) entries.push(value);\n });\n entries.sort((a, b) => (a.index || 0) - (b.index || 0));\n if (!entries.length) return;\n const blob = new Blob(entries.map((e) => e.chunk), { type: mimeType });\n const url = URL.createObjectURL(blob);\n await chrome.downloads.download({\n url,\n filename: `Screenity-Recovery-${label}-${ts}.webm`,\n saveAs: false,\n });\n URL.revokeObjectURL(url);\n downloaded++;\n };\n\n await downloadTrack(chunksStore, \"Screen\", \"video/webm\");\n await downloadTrack(cameraChunksStore, \"Camera\", \"video/webm\");\n await downloadTrack(audioChunksStore, \"Audio\", \"audio/webm\");\n\n // Clear all three stores after download is initiated\n await Promise.allSettled([\n chunksStore.clear(),\n cameraChunksStore.clear(),\n audioChunksStore.clear(),\n ]);\n\n const { recorderSession } = await chrome.storage.local.get([\n \"recorderSession\",\n ]);\n\n // Remove stale TUS journal + scene keys so the next recording cannot\n // accidentally resume the crashed upload or reuse the old scene.\n // Mirrors clearStaleUploadJournals() in CloudRecorder.jsx.\n const journalKeysToRemove = [\"sceneId\", \"sceneIdStatus\"];\n const tracks = recorderSession?.tracks || {};\n for (const trackData of Object.values(tracks)) {\n const upl = trackData?.uploader;\n if (!upl) continue;\n if (upl.journalKey) journalKeysToRemove.push(upl.journalKey);\n if (upl.journalLookupKey)\n journalKeysToRemove.push(upl.journalLookupKey);\n const pid = upl.projectId || recorderSession?.projectId || null;\n const sid = upl.sceneId || null;\n const t = upl.type || upl.trackType || null;\n if (pid && t) {\n journalKeysToRemove.push(\n `bunnyVideoMap-${pid}-${sid || \"none\"}-${t || \"none\"}`,\n );\n }\n }\n try {\n await chrome.storage.local.remove([...new Set(journalKeysToRemove)]);\n } catch (err) {\n console.warn(\"[CloudRestore] failed to remove stale journal keys\", err);\n }\n\n // Mark session as recovered so the popup button disables on next open\n if (recorderSession) {\n await chrome.storage.local.set({\n recorderSession: {\n ...recorderSession,\n status: \"recovered\",\n recoveredAt: Date.now(),\n },\n });\n }\n\n if (downloaded > 0) window.close();\n })();\n } else if (message.type === \"recover-indexed-db-mp4\") {\n const chunkArray = [];\n chunksStore\n .iterate((value) => {\n if (value && typeof value.index === \"number\" && value.chunk) {\n chunkArray.push({ index: value.index, chunk: value.chunk });\n }\n })\n .then(() => {\n chunkArray.sort((a, b) => a.index - b.index);\n const blob = new Blob(\n chunkArray.map((entry) => entry.chunk),\n { type: \"video/mp4\" }\n );\n const url = URL.createObjectURL(blob);\n const filename = `screenity-recording-${Date.now()}.mp4`;\n chrome.downloads\n .download({\n url: url,\n filename,\n saveAs: true,\n })\n .then(() => {\n URL.revokeObjectURL(url);\n window.close();\n });\n });\n }\n });\n\n useEffect(() => {\n // chrome on message\n chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n handleMessage(message);\n });\n\n return () => {\n chrome.runtime.onMessage.removeListener(\n (message, sender, sendResponse) => {\n handleMessage(message);\n }\n );\n };\n }, []);\n\n return
;\n};\n\nexport default Download;\n" }, { "path": "src/pages/Download/index.html", "content": "\n\n \n \n Screenity - Video editor\n \n \n\n \n
\n \n \n\n" }, { "path": "src/pages/Download/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Download from \"./Download\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Editor/Sandbox.jsx", "content": "import React, { useEffect, useRef } from \"react\";\n\n// Import all the utils\nimport addAudioToVideo from \"./utils/addAudioToVideo\";\nimport base64ToBlob from \"./utils/base64toBlob\";\nimport blobToArrayBuffer from \"./utils/blobToArrayBuffer\";\nimport cropVideo from \"./utils/cropVideo\";\nimport cutVideo from \"./utils/cutVideo\";\nimport getFrame from \"./utils/getFrame\";\nimport hasAudio from \"./utils/hasAudio\";\nimport muteVideo from \"./utils/muteVideo\";\nimport reencodeVideo from \"./utils/reencodeVideo\";\nimport toGIF from \"./utils/toGIF\";\nimport toWebM from \"./utils/toWebM\";\n\nconst Sandbox = () => {\n const iframeRef = useRef(null);\n const scriptLoaded = useRef(false);\n const triggerLoad = useRef(false);\n const ffmpegInstance = useRef(null);\n\n const sendMessage = (message) => {\n iframeRef.current.contentWindow.postMessage(message, \"*\");\n };\n\n const loadFfmpeg = async () => {\n if (!scriptLoaded.current) return;\n if (!triggerLoad.current) return;\n if (ffmpegInstance.current) return;\n\n try {\n const { createFFmpeg } = FFmpeg;\n // Initialize ffmpeg.js\n ffmpegInstance.current = createFFmpeg({\n log: false,\n progress: (params) => {\n // Send progress updates to parent window\n if (params.ratio && params.ratio >= 0) {\n const percentage = Math.min(Math.round(params.ratio * 100), 100);\n sendMessage({\n type: \"ffmpeg-progress\",\n progress: percentage,\n });\n }\n },\n corePath: \"assets/vendor/ffmpeg-core.js\",\n });\n await ffmpegInstance.current.load();\n sendMessage({ type: \"ffmpeg-loaded\" });\n } catch (error) {\n sendMessage({\n type: \"ffmpeg-load-error\",\n error: JSON.stringify(error),\n fallback: false,\n });\n }\n };\n\n useEffect(() => {\n const script = document.createElement(\"script\");\n\n script.src = \"assets/vendor/ffmpeg.min.js\";\n script.async = true;\n\n // On load, set scriptLoaded to true\n script.onload = () => {\n scriptLoaded.current = true;\n loadFfmpeg();\n };\n\n document.body.appendChild(script);\n\n return () => {\n document.body.removeChild(script);\n };\n }, []);\n\n const toBase64 = (blob) => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => {\n resolve(reader.result);\n };\n reader.onerror = reject;\n });\n };\n\n const onMessage = async (message) => {\n if (message.type === \"load-ffmpeg\") {\n triggerLoad.current = true;\n loadFfmpeg();\n } else if (message.type === \"add-audio-to-video\") {\n try {\n const blob = await addAudioToVideo(\n ffmpegInstance.current,\n message.blob,\n message.audio,\n message.duration,\n message.volume,\n message.replaceAudio,\n );\n const base64 = await toBase64(blob);\n sendMessage({ type: \"updated-blob\", base64: base64, topLevel: true });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"base64-to-blob\") {\n try {\n const blob = await base64ToBlob(ffmpegInstance.current, message.base64);\n const base64 = await toBase64(blob);\n sendMessage({\n type: \"updated-blob\",\n base64: base64,\n topLevel: true,\n edited: false,\n });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"blob-to-array-buffer\") {\n try {\n const arrayBuffer = await blobToArrayBuffer(\n ffmpegInstance.current,\n message.blob,\n );\n sendMessage({ type: \"updated-array-buffer\", arrayBuffer: arrayBuffer });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"crop-video\") {\n try {\n const blob = await cropVideo(ffmpegInstance.current, message.blob, {\n x: message.x,\n y: message.y,\n width: message.width,\n height: message.height,\n });\n const base64 = await toBase64(blob);\n sendMessage({ type: \"updated-blob\", base64: base64, topLevel: true });\n //sendMessage({ type: \"crop-update\" });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"cut-video\") {\n try {\n const blob = await cutVideo(\n ffmpegInstance.current,\n message.blob,\n message.startTime,\n message.endTime,\n message.cut,\n message.duration,\n message.encode,\n );\n const base64 = await toBase64(blob);\n sendMessage({\n type: \"updated-blob\",\n base64: base64,\n addToHistory: true,\n });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"get-frame\") {\n try {\n const blob = await getFrame(\n ffmpegInstance.current,\n message.blob,\n message.time,\n );\n sendMessage({ type: \"new-frame\", frame: blob });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"has-audio\") {\n try {\n const audio = await hasAudio(ffmpegInstance.current, message.video);\n sendMessage({ type: \"updated-has-audio\", hasAudio: audio });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"mute-video\") {\n try {\n const blob = await muteVideo(\n ffmpegInstance.current,\n message.blob,\n message.startTime,\n message.endTime,\n message.duration,\n );\n const base64 = await toBase64(blob);\n sendMessage({\n type: \"updated-blob\",\n base64: base64,\n addToHistory: true,\n });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"reencode-video\") {\n try {\n const blob = await reencodeVideo(\n ffmpegInstance.current,\n message.blob,\n message.duration,\n );\n const base64 = await toBase64(blob);\n sendMessage({ type: \"updated-blob\", base64: base64, topLevel: true });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"to-gif\") {\n try {\n const blob = await toGIF(ffmpegInstance.current, message.blob);\n const base64 = await toBase64(blob);\n sendMessage({ type: \"download-gif\", base64: base64 });\n } catch (error) {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error) });\n }\n } else if (message.type === \"to-webm\") {\n try {\n const blob = await toWebM(\n ffmpegInstance.current,\n message.blob,\n message.duration,\n );\n const base64 = await toBase64(blob);\n\n sendMessage({\n type: \"download-webm\",\n base64,\n topLevel: true,\n });\n } catch (error) {\n sendMessage({\n type: \"ffmpeg-error\",\n error: JSON.stringify(error),\n });\n }\n }\n };\n\n useEffect(() => {\n const handler = (event) => onMessage(event.data);\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n
\n \n
\n );\n};\n\nexport default Sandbox;\n" }, { "path": "src/pages/Editor/index.html", "content": "\n\n \n \n Screenity - Video editor\n\n \n \n\n \n
\n \n \n\n" }, { "path": "src/pages/Editor/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Sandbox from \"./Sandbox\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Editor/utils/addAudioToVideo.js", "content": "async function addAudioToVideo(\n ffmpeg,\n videoBlob,\n audioBlob,\n videoDuration,\n audioVolume = 1.0,\n replaceAudio = false\n) {\n const videoData = new Uint8Array(await videoBlob.arrayBuffer());\n const audioData = new Uint8Array(await audioBlob.arrayBuffer());\n\n // Set the input video and audio file names\n ffmpeg.FS(\"writeFile\", \"input-video.mp4\", videoData);\n ffmpeg.FS(\"writeFile\", \"input-audio.mp3\", audioData);\n\n // Set the output video file name\n const outputFileName = \"output-with-audio.mp4\";\n\n // Build FFmpeg command for merging video and audio with volume adjustment\n let ffmpegCommand = [\n \"-i\",\n \"input-video.mp4\",\n \"-i\",\n \"input-audio.mp3\",\n \"-filter_complex\",\n `[0:a]volume=1[a];[1:a]volume=${audioVolume}[b];[a][b]amix=inputs=2:duration=first:dropout_transition=2[v]`,\n \"-map\",\n \"0:v\", // Map the original video stream\n \"-map\",\n \"[v]\", // Map the merged audio\n \"-c:v\",\n \"copy\",\n \"-c:a\",\n \"aac\",\n \"-strict\",\n \"experimental\",\n \"-shortest\",\n outputFileName,\n ];\n\n if (replaceAudio) {\n // Remove the original audio stream and replace it with the audio from the audio blob\n ffmpegCommand = [\n \"-i\",\n \"input-video.mp4\",\n \"-i\",\n \"input-audio.mp3\",\n \"-filter_complex\",\n \"[0:a]volume=0[a];[1:a]volume=1[b];[a][b]amix=inputs=2:duration=first:dropout_transition=2[v]\",\n \"-map\",\n \"0:v\", // Map the original video stream\n \"-map\",\n \"[v]\", // Map the merged audio\n \"-c:v\",\n \"copy\",\n \"-c:a\",\n \"aac\",\n \"-strict\",\n \"experimental\",\n \"-shortest\",\n outputFileName,\n ];\n }\n\n // Run FFmpeg to merge video and audio with volume adjustment\n await ffmpeg.run(...ffmpegCommand);\n\n // Get the merged video data\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the merged video data\n const videoWithAudioBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n // Return the video with merged audio Blob\n return videoWithAudioBlob;\n}\n\nexport default addAudioToVideo;\n" }, { "path": "src/pages/Editor/utils/base64toBlob.js", "content": "function base64ToUint8Array(base64) {\n const dataURLRegex = /^data:.+;base64,/;\n if (dataURLRegex.test(base64)) {\n base64 = base64.replace(dataURLRegex, \"\");\n }\n\n const binary_string = window.atob(base64);\n const len = binary_string.length;\n const bytes = new Uint8Array(len);\n\n for (let i = 0; i < len; i++) {\n bytes[i] = binary_string.charCodeAt(i);\n }\n\n return bytes;\n}\n\nasync function base64ToBlob(ffmpeg, base64) {\n const input = base64ToUint8Array(base64);\n ffmpeg.FS(\"writeFile\", \"input.webm\", input);\n\n await ffmpeg.run(\n \"-i\",\n \"input.webm\",\n \"-max_muxing_queue_size\",\n \"512\",\n \"-preset\",\n \"superfast\",\n \"-threads\",\n \"0\",\n \"-r\",\n \"30\",\n \"-tune\",\n \"fastdecode\",\n \"output.mp4\"\n );\n\n const data = ffmpeg.FS(\"readFile\", \"output.mp4\");\n const videoBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n return videoBlob;\n}\n\nexport default base64ToBlob;\n" }, { "path": "src/pages/Editor/utils/blobToArrayBuffer.js", "content": "async function blobToArrayBuffer(blob) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n if (reader.result instanceof ArrayBuffer) {\n resolve(reader.result);\n } else {\n reject(new Error(\"Failed to convert Blob to ArrayBuffer\"));\n }\n };\n reader.onerror = reject;\n reader.readAsArrayBuffer(blob);\n });\n}\n\nexport default blobToArrayBuffer;\n" }, { "path": "src/pages/Editor/utils/cropVideo.js", "content": "async function cropVideo(ffmpeg, videoBlob, cropParameters) {\n const videoData = new Uint8Array(await videoBlob.arrayBuffer());\n\n // Set the input video file name\n ffmpeg.FS(\"writeFile\", \"input.mp4\", videoData);\n\n // Set the output video file name\n const outputFileName = \"output-cropped.mp4\";\n\n // Build FFmpeg command for cropping\n const ffmpegCommand = [\n \"-i\",\n \"input.mp4\",\n \"-vf\",\n `crop=${cropParameters.width}:${cropParameters.height}:${cropParameters.x}:${cropParameters.y}`,\n \"-c:a\",\n \"copy\",\n \"-preset\",\n \"superfast\",\n \"-threads\",\n \"0\",\n \"-r\",\n \"30\",\n \"-tune\",\n \"fastdecode\",\n outputFileName,\n ];\n\n // Run FFmpeg to crop the video\n await ffmpeg.run(...ffmpegCommand);\n\n // Get the cropped video data\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the cropped video data\n const croppedVideoBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n // Return the cropped video Blob\n return croppedVideoBlob;\n}\n\nexport default cropVideo;\n" }, { "path": "src/pages/Editor/utils/cutVideo.js", "content": "async function cutVideo(ffmpeg, videoBlob, start, end, cut, duration, encode) {\n const videoData = new Uint8Array(await videoBlob.arrayBuffer());\n\n // Set the input video file name\n ffmpeg.FS(\"writeFile\", \"input.mp4\", videoData);\n\n // Set the output video file name\n const outputFileName = cut ? \"output-cut.mp4\" : \"output-trimmed.mp4\";\n let encodeOptions = [\n \"-c:v\",\n \"copy\",\n \"-c:a\",\n \"copy\",\n \"-reset_timestamps\",\n \"1\",\n ];\n if (encode) {\n encodeOptions = [\n \"-preset\",\n \"superfast\",\n \"-threads\",\n \"0\",\n \"-r\",\n \"30\",\n \"-tune\",\n \"fastdecode\",\n ];\n }\n\n if (cut) {\n if (start > 0 && end < duration) {\n await ffmpeg.run(\n \"-ss\",\n \"0\",\n \"-i\",\n \"input.mp4\",\n \"-to\",\n start.toString(),\n ...encodeOptions,\n \"part1.mp4\"\n );\n\n // Then, cut the video from the end time to the end\n await ffmpeg.run(\n \"-ss\",\n end.toString(),\n \"-i\",\n \"input.mp4\",\n \"-to\",\n duration.toString(),\n ...encodeOptions,\n \"part2.mp4\"\n );\n\n // Create a text file with the list of input videos\n ffmpeg.FS(\"writeFile\", \"input.txt\", \"file 'part1.mp4'\\nfile 'part2.mp4'\");\n\n // Concatenate the two remaining parts\n await ffmpeg.run(\n \"-f\",\n \"concat\",\n \"-safe\",\n \"0\",\n \"-i\",\n \"input.txt\",\n \"-c\",\n \"copy\",\n outputFileName\n );\n\n // Get the edited video data\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the edited video data\n const editedVideoBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n // Return the edited video Blob\n return editedVideoBlob;\n } else if (start == 0 && end < duration) {\n await ffmpeg.run(\n \"-ss\",\n end.toString(),\n \"-i\",\n \"input.mp4\",\n \"-to\",\n duration.toString(),\n ...encodeOptions,\n outputFileName\n );\n\n // Get the edited video data\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the edited video data\n const editedVideoBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n // Return the edited video Blob\n return editedVideoBlob;\n } else if (start > 0 && end == duration) {\n await ffmpeg.run(\n \"-ss\",\n \"0\",\n \"-i\",\n \"input.mp4\",\n \"-to\",\n start.toString(),\n ...encodeOptions,\n outputFileName\n );\n\n // Get the edited video data\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the edited video data\n const editedVideoBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n // Return the edited video Blob\n return editedVideoBlob;\n }\n } else {\n await ffmpeg.run(\n \"-ss\",\n start.toString(),\n \"-i\",\n \"input.mp4\",\n \"-t\",\n (end - start).toString(),\n ...encodeOptions,\n outputFileName\n );\n\n // Get the edited video data\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the edited video data\n const editedVideoBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n // Return the edited video Blob\n return editedVideoBlob;\n }\n}\n\nexport default cutVideo;\n" }, { "path": "src/pages/Editor/utils/getFrame.js", "content": "/* getFrame.js */\nasync function getFrame(ffmpeg, videoBlob, time = 0) {\n const videoData = new Uint8Array(await videoBlob.arrayBuffer());\n // Write video data to a file\n ffmpeg.FS(\"writeFile\", \"input.mp4\", videoData);\n\n const outputFileName = \"output.jpg\";\n\n // Use FFmpeg to extract a frame as a JPEG image\n await ffmpeg.run(\n \"-i\",\n \"input.mp4\",\n \"-ss\",\n time.toString(),\n \"-frames:v\",\n \"1\",\n \"-preset\",\n \"superfast\",\n \"-threads\",\n \"0\",\n \"-r\",\n \"30\",\n \"-tune\",\n \"fastdecode\",\n outputFileName\n );\n\n // Read the generated frame image\n const frameData = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the frame data\n const frameBlob = new Blob([frameData.buffer], {\n type: \"image/jpeg\",\n });\n\n // Clean up\n ffmpeg.FS(\"unlink\", \"input.mp4\");\n ffmpeg.FS(\"unlink\", outputFileName);\n\n return frameBlob;\n}\n\nexport default getFrame;\n" }, { "path": "src/pages/Editor/utils/hasAudio.js", "content": "const hasAudio = async (videoBlob) => {\n const videoElement = document.createElement(\"video\");\n videoElement.src = URL.createObjectURL(videoBlob);\n\n return new Promise(async (resolve, reject) => {\n try {\n videoElement.addEventListener(\"loadedmetadata\", async () => {\n try {\n const mediaSource = new MediaSource();\n videoElement.src = URL.createObjectURL(mediaSource);\n await mediaSource.addSourceBuffer(videoBlob.type);\n\n mediaSource.onsourceopen = () => {\n const audioContext = new AudioContext();\n const source = audioContext.createMediaElementSource(videoElement);\n\n source.connect(audioContext.destination);\n source.onended = () => {\n // If audio plays and ends, it has audio tracks\n resolve(true);\n };\n source.onerror = () => {\n // If there's an error, it doesn't have audio tracks\n resolve(false);\n };\n\n // Start playing the video\n videoElement.play();\n };\n } catch (error) {\n resolve(false); // MediaSource or AudioContext not supported\n }\n });\n\n videoElement.addEventListener(\"error\", (error) => {\n reject(error);\n });\n\n videoElement.load();\n } catch (error) {\n reject(error);\n } finally {\n URL.revokeObjectURL(videoElement.src);\n }\n });\n};\n\nexport default hasAudio;\n" }, { "path": "src/pages/Editor/utils/muteVideo.js", "content": "async function muteVideo(ffmpeg, videoBlob, start, end) {\n try {\n const videoData = new Uint8Array(await videoBlob.arrayBuffer());\n\n // Set the input video file name\n ffmpeg.FS(\"writeFile\", \"input.mp4\", videoData);\n\n // Set the output video file name\n const outputFileName = \"output.mp4\";\n\n // Mute the audio in the specified time range\n await ffmpeg.run(\n \"-i\",\n \"input.mp4\",\n \"-af\",\n `volume='if(between(t,${start},${end}),0,1)':eval=frame`,\n \"-c:v\",\n \"copy\",\n \"-c:a\",\n \"aac\",\n outputFileName\n );\n\n // Get the edited video data\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n\n // Create a Blob from the edited video data\n const editedVideoBlob = new Blob([data.buffer], { type: \"video/mp4\" });\n\n // Return the edited video Blob\n return editedVideoBlob;\n } catch (error) {\n console.error(\"Error muting video:\", error);\n return null;\n }\n}\n\nexport default muteVideo;\n" }, { "path": "src/pages/Editor/utils/reencodeVideo.js", "content": "async function reencodeVideo(ffmpeg, blob) {\n const videoData = new Uint8Array(await blob.arrayBuffer());\n const outputFileName = \"output.mp4\";\n ffmpeg.FS(\"writeFile\", \"input.mp4\", videoData);\n await ffmpeg.run(\n \"-i\",\n \"input.mp4\",\n \"-preset\",\n \"superfast\",\n \"-threads\",\n \"0\",\n \"-r\",\n \"30\",\n \"-tune\",\n \"fastdecode\",\n outputFileName\n );\n\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n const editedVideoBlob = new Blob([data.buffer], {\n type: \"video/mp4\",\n });\n return editedVideoBlob;\n}\n\nexport default reencodeVideo;\n" }, { "path": "src/pages/Editor/utils/toGIF.js", "content": "async function toGIF(ffmpeg, blob) {\n const videoData = new Uint8Array(await blob.arrayBuffer());\n const outputFileName = \"output.gif\";\n ffmpeg.FS(\"writeFile\", \"input.mp4\", videoData);\n await ffmpeg.run(\n \"-i\",\n \"input.mp4\",\n \"-preset\",\n \"superfast\",\n \"-threads\",\n \"0\",\n \"-r\",\n \"30\",\n \"-tune\",\n \"fastdecode\",\n outputFileName\n );\n const data = ffmpeg.FS(\"readFile\", outputFileName);\n const editedVideoBlob = new Blob([data.buffer], {\n type: \"image/gif\",\n });\n return editedVideoBlob;\n}\n\nexport default toGIF;\n" }, { "path": "src/pages/Editor/utils/toWebM.js", "content": "async function toWebM(ffmpeg, blob) {\n const inputData = new Uint8Array(await blob.arrayBuffer());\n ffmpeg.FS(\"writeFile\", \"input.mp4\", inputData);\n\n const output = \"output.webm\";\n\n await ffmpeg.run(\n \"-i\",\n \"input.mp4\",\n \"-c:v\",\n \"libvpx\", // VP8 (much faster)\n \"-b:v\",\n \"2M\", // higher bitrate = fewer CPU cycles\n \"-crf\",\n \"10\", // low compression work\n \"-speed\",\n \"8\", // EXTREMELY important for WASM\n \"-threads\",\n \"0\",\n \"-auto-alt-ref\",\n \"0\", // turn off slow filtering\n output\n );\n\n const data = ffmpeg.FS(\"readFile\", output);\n return new Blob([data.buffer], { type: \"video/webm\" });\n}\n" }, { "path": "src/pages/EditorViewer/Sandbox.jsx", "content": "import React, { useEffect, useRef } from \"react\";\n\nconst Sandbox = () => {\n const iframeRef = useRef(null);\n\n const sendMessage = (message) => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage(message, \"*\");\n }\n };\n\n const onMessage = async (message) => {\n if (message.type === \"load-ffmpeg\") {\n sendMessage({ type: \"ffmpeg-load-error\", fallback: true });\n } else if (\n message.type === \"add-audio-to-video\" ||\n message.type === \"base64-to-blob\" ||\n message.type === \"crop-video\" ||\n message.type === \"cut-video\" ||\n message.type === \"mute-video\" ||\n message.type === \"reencode-video\" ||\n message.type === \"to-gif\"\n ) {\n sendMessage({\n type: \"ffmpeg-error\",\n error:\n \"Processing not available in viewer mode. Please use a modern browser (Chrome 94+) for editing features.\",\n });\n }\n };\n\n useEffect(() => {\n const handler = (event) => onMessage(event.data);\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n
\n \n
\n );\n};\n\nexport default Sandbox;\n" }, { "path": "src/pages/EditorViewer/index.css", "content": "/* EditorViewer shares styles with Editor */\nbody {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n\n* {\n box-sizing: border-box;\n}\n\n" }, { "path": "src/pages/EditorViewer/index.html", "content": "\n\n \n \n Screenity - Viewer\n\n \n \n\n \n
\n \n\n" }, { "path": "src/pages/EditorViewer/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Sandbox from \"./Sandbox\";\nimport \"./index.css\";\n\nconst container = document.querySelector(\"#app-container\");\nconst root = createRoot(container);\nroot.render();\n" }, { "path": "src/pages/EditorWebCodecs/Sandbox.jsx", "content": "import React, { useEffect, useRef } from \"react\";\n\nimport addAudioToVideo from \"./utils/addAudioToVideo\";\nimport convertWebmToMp4 from \"./utils/convertWebmToMp4\";\nimport cropVideo from \"./utils/cropVideo\";\nimport cutVideo from \"./utils/cutVideo\";\nimport muteVideo from \"./utils/muteVideo\";\nimport reencodeVideo from \"./utils/reencodeVideo\";\nimport toGIF from \"./utils/toGIF\";\nimport getFrame from \"./utils/getFrame\";\nimport hasAudio from \"./utils/hasAudio\";\nimport convertMp4ToWebm from \"./utils/convertMp4ToWebm\";\nimport blobToArrayBuffer from \"./utils/blobToArrayBuffer\";\n\nconst Sandbox = () => {\n const iframeRef = useRef(null);\n const triggerLoad = useRef(false);\n const ffmpegInstance = useRef(null);\n const mediabunnyLoaded = useRef(false);\n\n const sendMessage = (message) => {\n iframeRef.current?.contentWindow?.postMessage(message, \"*\");\n };\n\n const loadFfmpeg = async () => {\n if (mediabunnyLoaded.current || !triggerLoad.current) return;\n try {\n mediabunnyLoaded.current = true;\n sendMessage({ type: \"ffmpeg-loaded\" });\n } catch (error) {\n sendMessage({\n type: \"ffmpeg-load-error\",\n error: JSON.stringify(error),\n fallback: true,\n });\n }\n };\n\n function isMp4Blob(blob) {\n return blob\n .slice(4, 8)\n .text()\n .then((t) => t === \"ftyp\");\n }\n\n const toBase64 = (blob) =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => resolve(reader.result);\n reader.onerror = reject;\n });\n\n const base64ToWebmBlob = (base64) => {\n const dataURLRegex = /^data:.+;base64,/;\n if (dataURLRegex.test(base64)) base64 = base64.replace(dataURLRegex, \"\");\n const binary = window.atob(base64);\n const len = binary.length;\n const bytes = new Uint8Array(len);\n for (let i = 0; i < len; i++) bytes[i] = binary.charCodeAt(i);\n return new Blob([bytes], { type: \"video/webm\" });\n };\n\n const onMessage = async (message) => {\n try {\n switch (message.type) {\n case \"load-ffmpeg\":\n triggerLoad.current = true;\n await loadFfmpeg();\n break;\n\n case \"add-audio-to-video\": {\n const blob = await addAudioToVideo(\n ffmpegInstance.current,\n message.blob,\n message.audio,\n message.duration,\n message.volume,\n message.replaceAudio,\n (progress) =>\n sendMessage({\n type: \"ffmpeg-progress\",\n progress: Math.round(progress * 100),\n })\n );\n const base64 = await toBase64(blob);\n sendMessage({\n type: \"updated-blob\",\n base64,\n topLevel: true,\n fromAudio: true,\n _opId: message._opId,\n });\n break;\n }\n\n case \"compress-video\": {\n const rawBlob = await fetch(message.base64).then((r) => r.blob());\n\n const compressed = await reencodeVideo(\n ffmpegInstance.current,\n rawBlob,\n null,\n (progress) =>\n sendMessage({\n type: \"compression-progress\",\n progress: Math.round(progress * 100),\n })\n );\n const base64 = await toBase64(compressed);\n sendMessage({\n type: \"updated-blob\",\n base64,\n topLevel: true,\n _opId: message._opId,\n });\n break;\n }\n\n case \"base64-to-blob\": {\n const rawBlob = await fetch(message.base64).then((r) => r.blob());\n\n const header = await rawBlob.slice(4, 8).text();\n const looksMp4 = header === \"ftyp\";\n\n if (looksMp4) {\n sendMessage({\n type: \"updated-blob\",\n base64: message.base64,\n topLevel: true,\n });\n break;\n }\n\n const webmBlob = base64ToWebmBlob(message.base64);\n const mp4Blob = await convertWebmToMp4(webmBlob, (progress) =>\n sendMessage({\n type: \"ffmpeg-progress\",\n progress: Math.round(progress * 100),\n })\n );\n\n const base64 = await toBase64(mp4Blob);\n sendMessage({ type: \"updated-blob\", base64, topLevel: true });\n break;\n }\n\n case \"blob-to-array-buffer\": {\n const arrayBuffer = await blobToArrayBuffer(\n ffmpegInstance.current,\n message.blob\n );\n sendMessage({ type: \"updated-array-buffer\", arrayBuffer });\n break;\n }\n\n case \"crop-video\": {\n const blob = await cropVideo(\n ffmpegInstance.current,\n message.blob,\n {\n x: message.x,\n y: message.y,\n width: message.width,\n height: message.height,\n },\n (progress) => sendMessage({ type: \"ffmpeg-progress\", progress })\n );\n const base64 = await toBase64(blob);\n sendMessage({ type: \"updated-blob\", base64, topLevel: true, _opId: message._opId });\n break;\n }\n\n case \"cut-video\": {\n const blob = await cutVideo(\n ffmpegInstance.current,\n message.blob,\n message.startTime,\n message.endTime,\n message.cut,\n message.duration,\n message.encode,\n (progress) => sendMessage({ type: \"ffmpeg-progress\", progress })\n );\n const base64 = await toBase64(blob);\n sendMessage({\n type: \"updated-blob\",\n base64,\n addToHistory: true,\n topLevel: true,\n _opId: message._opId,\n });\n break;\n }\n\n case \"get-frame\": {\n const blob = await getFrame(\n ffmpegInstance.current,\n message.blob,\n message.time\n );\n sendMessage({ type: \"new-frame\", frame: blob });\n break;\n }\n\n case \"has-audio\": {\n const audio = await hasAudio(ffmpegInstance.current, message.video);\n sendMessage({ type: \"updated-has-audio\", hasAudio: audio });\n break;\n }\n\n case \"mute-video\": {\n const blob = await muteVideo(\n ffmpegInstance.current,\n message.blob,\n message.startTime,\n message.endTime,\n message.duration,\n (progress) => sendMessage({ type: \"ffmpeg-progress\", progress })\n );\n const base64 = await toBase64(blob);\n sendMessage({\n type: \"updated-blob\",\n base64,\n addToHistory: true,\n topLevel: true,\n _opId: message._opId,\n });\n break;\n }\n\n case \"reencode-video\": {\n const blob = await reencodeVideo(\n ffmpegInstance.current,\n message.blob,\n message.duration,\n (progress) =>\n sendMessage({\n type: \"ffmpeg-progress\",\n progress: Math.round(progress * 100),\n })\n );\n const base64 = await toBase64(blob);\n sendMessage({ type: \"updated-blob\", base64, topLevel: true, _opId: message._opId });\n break;\n }\n\n case \"to-gif\": {\n const blob = await toGIF(ffmpegInstance.current, message.blob);\n const base64 = await toBase64(blob);\n sendMessage({ type: \"download-gif\", base64 });\n break;\n }\n\n case \"to-webm\": {\n if (message.blob?.type === \"video/webm\") {\n const base64 = await toBase64(message.blob);\n sendMessage({ type: \"download-webm\", base64 });\n return;\n }\n\n const result = await convertMp4ToWebm(message.blob, (progress) =>\n sendMessage({\n type: \"ffmpeg-progress\",\n progress: Math.round(progress * 100),\n })\n );\n\n const base64 = await toBase64(result);\n sendMessage({ type: \"download-webm\", base64 });\n break;\n }\n\n default:\n break;\n }\n } catch (error) {\n const errMsg = error instanceof Error ? error.message : String(error);\n if (errMsg.includes(\"too long\")) {\n sendMessage({ type: \"edit-too-long\", _opId: message._opId });\n } else {\n sendMessage({ type: \"ffmpeg-error\", error: JSON.stringify(error), _opId: message._opId });\n }\n }\n };\n\n useEffect(() => {\n const handler = (event) => onMessage(event.data);\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n
\n \n
\n );\n};\n\nexport default Sandbox;\n" }, { "path": "src/pages/EditorWebCodecs/index.html", "content": "\n\n \n \n Screenity - Video editor\n\n \n \n\n \n
\n \n \n\n" }, { "path": "src/pages/EditorWebCodecs/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Sandbox from \"./Sandbox\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/EditorWebCodecs/mediabunny/lib/videoAudioMixer.ts", "content": "// @ts-nocheck\nimport {\n Input,\n BlobSource,\n Output,\n BufferTarget,\n Mp4OutputFormat,\n VideoSampleSource,\n AudioSampleSource,\n VideoSampleSink,\n AudioSample,\n ALL_FORMATS,\n QUALITY_HIGH,\n} from \"mediabunny\";\nimport { videoConverter } from \"./videoConverter\";\n\nexport class VideoAudioMixer {\n async addAudio(\n videoBlob,\n audioBlob,\n {\n mode = \"mix\",\n videoVolume = 0.7,\n audioVolume = 0.3,\n loop = false,\n verbose = false,\n onProgress,\n } = {}\n ) {\n const input = new Input({\n source: new BlobSource(videoBlob),\n formats: ALL_FORMATS,\n });\n\n const outputTarget = new BufferTarget();\n const output = new Output({\n format: new Mp4OutputFormat({ fastStart: \"in-memory\" }),\n target: outputTarget,\n });\n\n const videoTrack = await input.getPrimaryVideoTrack();\n const videoSink = new VideoSampleSink(videoTrack);\n const codecInfo = await videoConverter.detectBestCodec(\"mp4\");\n const videoCodec = codecInfo?.codec ?? \"avc\";\n const videoSource = new VideoSampleSource({\n codec: videoCodec,\n bitrate: QUALITY_HIGH,\n });\n output.addVideoTrack(videoSource);\n\n const videoDuration = await this._getDuration(videoBlob);\n\n // Mixing decodes the full audio track + allocates a mixBuffer — cap at\n // 15 min to avoid OOM in the renderer process.\n if (videoDuration > 900) {\n throw new Error(\n `Video is too long for in-browser audio mixing (${Math.round(videoDuration / 60)} min). ` +\n `Maximum supported length is 15 minutes.`\n );\n }\n\n const hasVideoAudio = await input\n .getPrimaryAudioTrack()\n .then((t) => !!t)\n .catch(() => false);\n\n const audioSource = new AudioSampleSource({\n codec: \"aac\",\n bitrate: 128000,\n });\n output.addAudioTrack(audioSource);\n\n let bgArrayBuffer = await audioBlob.arrayBuffer();\n const audioCtx = new AudioContext();\n let decodedAudio;\n try {\n decodedAudio = await audioCtx.decodeAudioData(bgArrayBuffer);\n bgArrayBuffer = null; // release compressed audio bytes; PCM is now in decodedAudio\n } finally {\n audioCtx.close().catch(() => {});\n }\n const sr = decodedAudio.sampleRate;\n const audioDur = decodedAudio.duration;\n\n await output.start();\n\n for await (const frame of videoSink.samples(0, videoDuration)) {\n await videoSource.add(frame);\n frame.close();\n if (onProgress && videoDuration > 0)\n onProgress(frame.timestamp / videoDuration);\n }\n\n const mixBuffer = new Float32Array(Math.ceil(sr * videoDuration));\n const writeMix = (data, offset, vol) => {\n for (let i = 0; i < data.length && offset + i < mixBuffer.length; i++) {\n mixBuffer[offset + i] += data[i] * vol;\n }\n };\n\n if (hasVideoAudio && mode === \"mix\") {\n const videoAudioCtx = new AudioContext();\n try {\n const videoArrayBuffer = await videoBlob.arrayBuffer();\n const decodedVideoAudio = await videoAudioCtx.decodeAudioData(\n videoArrayBuffer\n );\n const videoSamples = decodedVideoAudio.getChannelData(0);\n writeMix(videoSamples, 0, videoVolume);\n } catch {\n } finally {\n videoAudioCtx.close().catch(() => {});\n }\n }\n\n const loopCount = loop\n ? Math.ceil(videoDuration / audioDur)\n : Math.min(1, Math.ceil(videoDuration / audioDur));\n\n for (let i = 0; i < loopCount; i++) {\n const offset = Math.floor(i * audioDur * sr);\n writeMix(decodedAudio.getChannelData(0), offset, audioVolume);\n }\n\n const totalSamples = Math.floor(videoDuration * sr);\n const chunkSize = sr * 2;\n let written = 0;\n\n while (written < totalSamples) {\n const slice = mixBuffer.slice(written, written + chunkSize);\n const dur = slice.length / sr;\n const sample = new AudioSample({\n data: slice,\n format: \"f32-planar\",\n numberOfChannels: 1,\n sampleRate: sr,\n timestamp: written / sr,\n duration: dur,\n });\n await audioSource.add(sample);\n sample.close();\n written += chunkSize;\n }\n\n await output.finalize();\n return new Blob([outputTarget.buffer], { type: \"video/mp4\" });\n }\n\n async _getDuration(blob) {\n return new Promise((resolve, reject) => {\n const v = document.createElement(\"video\");\n v.src = URL.createObjectURL(blob);\n v.onloadedmetadata = () => {\n resolve(v.duration);\n URL.revokeObjectURL(v.src);\n };\n v.onerror = reject;\n });\n }\n}" }, { "path": "src/pages/EditorWebCodecs/mediabunny/lib/videoConverter.ts", "content": "// @ts-nocheck\nimport {\n Input,\n Output,\n BlobSource,\n BufferTarget,\n Mp4OutputFormat,\n WebMOutputFormat,\n ALL_FORMATS,\n Conversion,\n type VideoCodec,\n type AudioCodec,\n} from \"mediabunny\";\n\nexport type SupportedFormat = \"mp4\" | \"webm\";\n\nexport interface ConversionOptions {\n videoBitrate?: number;\n audioBitrate?: number;\n preferredVideoCodec?: VideoCodec;\n audioCodec?: AudioCodec;\n onProgress?: (progress: number) => void;\n verbose?: boolean;\n}\n\nexport interface CodecInfo {\n codec: VideoCodec;\n displayName: string;\n isPreferred: boolean;\n}\n\nconst CODEC_DISPLAY_NAMES: Record = {\n avc: \"H.264\",\n hevc: \"H.265 (HEVC)\",\n vp9: \"VP9\",\n av1: \"AV1\",\n vp8: \"VP8\",\n};\n\nexport class VideoConverter {\n private cachedMP4Codec: VideoCodec | null = null;\n private cachedWebMCodec: VideoCodec | null = null;\n\n async convertToMP4(sourceBlob: Blob, options: ConversionOptions = {}): Promise {\n return this.convert(sourceBlob, \"mp4\", options);\n }\n\n async convertToWebM(sourceBlob: Blob, options: ConversionOptions = {}): Promise {\n return this.convert(sourceBlob, \"webm\", options);\n }\n\n async detectBestCodec(format: SupportedFormat): Promise {\n const outputFormat =\n format === \"mp4\"\n ? new Mp4OutputFormat({ fastStart: \"in-memory\" })\n : new WebMOutputFormat();\n const supportedCodecs = outputFormat.getSupportedVideoCodecs();\n\n for (const codec of supportedCodecs) {\n if (await this.canEncodeCodec(codec)) {\n return {\n codec,\n displayName:\n CODEC_DISPLAY_NAMES[codec as keyof typeof CODEC_DISPLAY_NAMES] ||\n codec.toUpperCase(),\n isPreferred: codec === \"avc\" || codec === \"vp9\",\n };\n }\n }\n return null;\n }\n\n async canEncodeCodec(codec: VideoCodec): Promise {\n if (typeof VideoEncoder === \"undefined\") return false;\n try {\n const testConfig = this.getEncoderConfig(codec);\n const support = await VideoEncoder.isConfigSupported(testConfig);\n return support.supported ?? false;\n } catch {\n return false;\n }\n }\n\n clearCache(): void {\n this.cachedMP4Codec = null;\n this.cachedWebMCodec = null;\n }\n\n private async convert(\n sourceBlob: Blob,\n targetFormat: SupportedFormat,\n options: ConversionOptions\n ): Promise {\n const {\n videoBitrate = 5_000_000,\n audioBitrate = 128_000,\n preferredVideoCodec,\n audioCodec,\n onProgress,\n } = options;\n\n const cache = targetFormat === \"mp4\" ? this.cachedMP4Codec : this.cachedWebMCodec;\n let videoCodec: VideoCodec | null = cache;\n\n if (!videoCodec) {\n if (preferredVideoCodec && (await this.canEncodeCodec(preferredVideoCodec))) {\n videoCodec = preferredVideoCodec;\n } else {\n const codecInfo = await this.detectBestCodec(targetFormat);\n if (!codecInfo) {\n throw new Error(\n `Cannot convert to ${targetFormat.toUpperCase()}: no supported video codec.`\n );\n }\n videoCodec = codecInfo.codec;\n }\n if (targetFormat === \"mp4\") this.cachedMP4Codec = videoCodec;\n else this.cachedWebMCodec = videoCodec;\n }\n\n const finalAudioCodec = audioCodec || (targetFormat === \"mp4\" ? \"aac\" : \"opus\");\n\n const input = new Input({\n formats: ALL_FORMATS,\n source: new BlobSource(sourceBlob),\n });\n\n const outputFormat =\n targetFormat === \"mp4\"\n ? new Mp4OutputFormat({ fastStart: \"in-memory\" })\n : new WebMOutputFormat();\n\n const target = new BufferTarget();\n const output = new Output({ format: outputFormat, target });\n\n const conversion = await Conversion.init({\n input,\n output,\n video: { codec: videoCodec, bitrate: videoBitrate },\n audio: { codec: finalAudioCodec, bitrate: audioBitrate },\n });\n\n if (!conversion.isValid) {\n const reasons = conversion.discardedTracks\n .map((t) => `${t.track.type}: ${t.reason}`)\n .join(\", \");\n throw new Error(`Conversion failed - ${reasons}`);\n }\n\n if (onProgress) conversion.onProgress = onProgress;\n\n await conversion.execute();\n\n if (!target.buffer) throw new Error(\"Conversion failed - no output buffer\");\n\n return new Blob([target.buffer], {\n type: targetFormat === \"mp4\" ? \"video/mp4\" : \"video/webm\",\n });\n }\n\n private getEncoderConfig(codec: VideoCodec): VideoEncoderConfig {\n const baseConfig = { width: 1920, height: 1080, bitrate: 5_000_000 };\n switch (codec) {\n case \"avc\":\n return { ...baseConfig, codec: \"avc1.42E01E\" };\n case \"hevc\":\n return { ...baseConfig, codec: \"hev1.1.6.L93.B0\" };\n default:\n return { ...baseConfig, codec };\n }\n }\n}\n\nexport const videoConverter = new VideoConverter();\n\nexport async function convertToMP4(blob: Blob, options?: ConversionOptions): Promise {\n return videoConverter.convertToMP4(blob, options);\n}\n\nexport async function convertToWebM(blob: Blob, options?: ConversionOptions): Promise {\n return videoConverter.convertToWebM(blob, options);\n}" }, { "path": "src/pages/EditorWebCodecs/mediabunny/lib/videoCropper.ts", "content": "// @ts-nocheck\nimport {\n Input,\n Output,\n BlobSource,\n BufferTarget,\n Mp4OutputFormat,\n WebMOutputFormat,\n ALL_FORMATS,\n Conversion,\n type OutputFormat,\n} from \"mediabunny\";\n\nexport interface CropOptions {\n left: number;\n top: number;\n width: number;\n height: number;\n outputFormat?: \"mp4\" | \"webm\";\n videoBitrate?: number;\n audioBitrate?: number;\n onProgress?: (progress: number) => void;\n verbose?: boolean;\n}\n\nexport interface CropInfo {\n originalWidth: number;\n originalHeight: number;\n croppedWidth: number;\n croppedHeight: number;\n cropRegion: {\n left: number;\n top: number;\n width: number;\n height: number;\n };\n}\n\nexport class VideoCropper {\n async crop(sourceBlob: Blob, options: CropOptions): Promise {\n const {\n left,\n top,\n width,\n height,\n outputFormat,\n videoBitrate,\n audioBitrate,\n onProgress,\n } = options;\n\n if (left < 0 || top < 0) throw new Error(\"Crop position cannot be negative\");\n if (width <= 0 || height <= 0) throw new Error(\"Crop dimensions must be positive\");\n\n const input = new Input({\n formats: ALL_FORMATS,\n source: new BlobSource(sourceBlob),\n });\n\n const inputFormat = await input.getFormat();\n const tracks = await input.getTracks();\n const videoTrack = tracks.find((t) => t.type === \"video\");\n\n if (!videoTrack || !videoTrack.isVideoTrack()) throw new Error(\"No video track found in input\");\n\n const originalWidth = videoTrack.displayWidth;\n const originalHeight = videoTrack.displayHeight;\n\n if (left + width > originalWidth || top + height > originalHeight) {\n const clampedWidth = Math.min(width, originalWidth - left);\n const clampedHeight = Math.min(height, originalHeight - top);\n options.width = clampedWidth;\n options.height = clampedHeight;\n }\n\n let format: OutputFormat;\n const targetFormat =\n outputFormat ||\n (inputFormat.name.toLowerCase().includes(\"mp4\") ? \"mp4\" : \"webm\");\n\n format =\n targetFormat === \"mp4\"\n ? new Mp4OutputFormat({ fastStart: \"in-memory\" })\n : new WebMOutputFormat();\n\n const target = new BufferTarget();\n const output = new Output({ format, target });\n\n const conversion = await Conversion.init({\n input,\n output,\n video: {\n crop: { left, top, width, height },\n ...(videoBitrate && { bitrate: videoBitrate }),\n },\n ...(audioBitrate && { audio: { bitrate: audioBitrate } }),\n });\n\n if (!conversion.isValid) {\n const reasons = conversion.discardedTracks\n .map((t) => `${t.track.type}: ${t.reason}`)\n .join(\", \");\n throw new Error(`Cropping failed - ${reasons}`);\n }\n\n if (onProgress) conversion.onProgress = onProgress;\n\n await conversion.execute();\n\n if (!target.buffer) throw new Error(\"Cropping failed - no output buffer\");\n\n return new Blob([target.buffer], {\n type: targetFormat === \"mp4\" ? \"video/mp4\" : \"video/webm\",\n });\n }\n\n async getDimensions(blob: Blob): Promise<{\n width: number;\n height: number;\n codedWidth: number;\n codedHeight: number;\n }> {\n const input = new Input({\n formats: ALL_FORMATS,\n source: new BlobSource(blob),\n });\n\n const tracks = await input.getTracks();\n const videoTrack = tracks.find((t) => t.type === \"video\");\n\n if (!videoTrack || !videoTrack.isVideoTrack()) throw new Error(\"No video track found\");\n\n return {\n width: videoTrack.displayWidth,\n height: videoTrack.displayHeight,\n codedWidth: videoTrack.codedWidth,\n codedHeight: videoTrack.codedHeight,\n };\n }\n}\n\nexport const videoCropper = new VideoCropper();\n\nexport async function cropVideo(\n blob: Blob,\n left: number,\n top: number,\n width: number,\n height: number,\n options?: Omit\n): Promise {\n return videoCropper.crop(blob, { left, top, width, height, ...options });\n}" }, { "path": "src/pages/EditorWebCodecs/mediabunny/lib/videoCutter.ts", "content": "// @ts-nocheck\nimport {\n Input,\n BlobSource,\n ALL_FORMATS,\n Output,\n BufferTarget,\n Mp4OutputFormat,\n QUALITY_HIGH,\n VideoSampleSource,\n AudioSampleSource,\n VideoSampleSink,\n AudioSampleSink,\n} from \"mediabunny\";\nimport { videoConverter } from \"./videoConverter\";\n\nexport class VideoCutter {\n async cut(sourceBlob, { cutStart, cutEnd, onProgress }) {\n const total = await this.getDuration(sourceBlob);\n\n const input = new Input({\n source: new BlobSource(sourceBlob),\n formats: ALL_FORMATS,\n });\n\n const outputTarget = new BufferTarget();\n const output = new Output({\n format: new Mp4OutputFormat({ fastStart: \"in-memory\" }),\n target: outputTarget,\n });\n\n const videoTrack = await input.getPrimaryVideoTrack();\n const audioTrack = await input.getPrimaryAudioTrack().catch(() => null);\n\n const codecInfo = await videoConverter.detectBestCodec(\"mp4\");\n const videoCodec = codecInfo?.codec ?? \"avc\";\n const videoSource = new VideoSampleSource({\n codec: videoCodec,\n bitrate: QUALITY_HIGH,\n sizeChangeBehavior: \"passThrough\",\n });\n output.addVideoTrack(videoSource);\n\n let audioSource = null;\n if (audioTrack) {\n audioSource = new AudioSampleSource({\n codec: \"aac\",\n bitrate: QUALITY_HIGH,\n });\n output.addAudioTrack(audioSource);\n }\n\n await output.start();\n\n let outPts = 0;\n const totalSegments = [\n [0, cutStart],\n [cutEnd, total],\n ];\n let processedTime = 0;\n\n const addSegment = async (start, end) => {\n const segDur = end - start;\n const baseTimestamp = outPts / 1_000_000;\n\n const videoSink = new VideoSampleSink(videoTrack);\n for await (const sample of videoSink.samples(start, end)) {\n const adjusted = Math.max(0, baseTimestamp + (sample.timestamp - start));\n sample.setTimestamp(adjusted);\n await videoSource.add(sample);\n sample.close();\n processedTime += sample.duration ?? 1 / 30;\n if (onProgress) onProgress(processedTime / total);\n }\n\n if (audioTrack && audioSource) {\n const audioSink = new AudioSampleSink(audioTrack);\n for await (const sample of audioSink.samples(start, end)) {\n const adjusted = Math.max(0, baseTimestamp + (sample.timestamp - start));\n sample.setTimestamp(adjusted);\n await audioSource.add(sample);\n sample.close();\n processedTime += sample.duration ?? 0;\n if (onProgress) onProgress(processedTime / total);\n }\n }\n\n outPts += segDur * 1_000_000;\n };\n\n for (let i = 0; i < totalSegments.length; i++) {\n const [start, end] = totalSegments[i];\n await addSegment(start, end);\n }\n\n await output.finalize();\n\n const blob = new Blob([outputTarget.buffer], { type: \"video/mp4\" });\n if (onProgress) onProgress(1);\n return blob;\n }\n\n getDuration(blob) {\n return new Promise((res, rej) => {\n const v = document.createElement(\"video\");\n v.src = URL.createObjectURL(blob);\n v.onloadedmetadata = () => {\n URL.revokeObjectURL(v.src);\n res(v.duration);\n };\n v.onerror = () => rej(new Error(\"Failed to load video\"));\n });\n }\n}" }, { "path": "src/pages/EditorWebCodecs/mediabunny/lib/videoMuter.ts", "content": "// @ts-nocheck\nimport {\n Input,\n BlobSource,\n Output,\n BufferTarget,\n Mp4OutputFormat,\n VideoSampleSource,\n VideoSampleSink,\n AudioSampleSource,\n AudioSample,\n ALL_FORMATS,\n QUALITY_HIGH,\n} from \"mediabunny\";\nimport { videoConverter } from \"./videoConverter\";\n\nexport class VideoMuter {\n async mute(\n videoBlob,\n {\n muteStart = 0,\n muteEnd = 0,\n videoVolume = 1.0,\n outputFormat = \"mp4\",\n onProgress,\n } = {}\n ) {\n const videoDuration = await this._getDuration(videoBlob);\n\n // Cap at 15 min to avoid OOM — re-encoding needs several copies in memory.\n if (videoDuration > 900) {\n throw new Error(\n `Video is too long for in-browser audio muting (${Math.round(videoDuration / 60)} min). ` +\n `Maximum supported length is 15 minutes.`\n );\n }\n\n const input = new Input({\n source: new BlobSource(videoBlob),\n formats: ALL_FORMATS,\n });\n\n const outputTarget = new BufferTarget();\n const output = new Output({\n format: new Mp4OutputFormat({ fastStart: \"in-memory\" }),\n target: outputTarget,\n });\n\n const videoTrack = await input.getPrimaryVideoTrack();\n const videoSink = new VideoSampleSink(videoTrack);\n const codecInfo = await videoConverter.detectBestCodec(\"mp4\");\n const videoCodec = codecInfo?.codec ?? \"avc\";\n const videoSource = new VideoSampleSource({\n codec: videoCodec,\n bitrate: QUALITY_HIGH,\n });\n output.addVideoTrack(videoSource);\n\n let decodedAudio = null;\n const ctx = new AudioContext();\n try {\n let buf = await videoBlob.arrayBuffer();\n decodedAudio = await ctx.decodeAudioData(buf);\n buf = null; // release compressed bytes; PCM is now in decodedAudio\n } catch {\n // decode failed; mute returns original blob below\n } finally {\n ctx.close().catch(() => {});\n }\n\n const sr = decodedAudio?.sampleRate || 48000;\n const mixBuffer = new Float32Array(Math.ceil(sr * videoDuration));\n\n if (decodedAudio) {\n const channelData = decodedAudio.getChannelData(0);\n const muteStartSample = Math.floor(muteStart * sr);\n const muteEndSample = Math.floor(muteEnd * sr);\n\n for (let i = 0; i < channelData.length; i++) {\n mixBuffer[i] =\n i >= muteStartSample && i < muteEndSample ? 0 : channelData[i] * videoVolume;\n }\n } else {\n return videoBlob;\n }\n\n const audioSource = new AudioSampleSource({\n codec: \"aac\",\n bitrate: 128000,\n });\n output.addAudioTrack(audioSource);\n\n await output.start();\n for await (const frame of videoSink.samples(0, videoDuration)) {\n await videoSource.add(frame);\n frame.close();\n if (onProgress) onProgress(frame.timestamp / videoDuration);\n }\n\n const totalSamples = Math.floor(videoDuration * sr);\n const chunkSize = sr * 2;\n let written = 0;\n\n while (written < totalSamples) {\n const slice = mixBuffer.slice(written, written + chunkSize);\n const dur = slice.length / sr;\n const sample = new AudioSample({\n data: slice,\n format: \"f32-planar\",\n numberOfChannels: 1,\n sampleRate: sr,\n timestamp: written / sr,\n duration: dur,\n });\n await audioSource.add(sample);\n sample.close();\n written += chunkSize;\n }\n\n await output.finalize();\n // Always MP4 container — use correct MIME type.\n return new Blob([outputTarget.buffer], { type: \"video/mp4\" });\n }\n\n async _getDuration(blob) {\n return new Promise((resolve, reject) => {\n const v = document.createElement(\"video\");\n v.src = URL.createObjectURL(blob);\n v.onloadedmetadata = () => {\n resolve(v.duration);\n URL.revokeObjectURL(v.src);\n };\n v.onerror = reject;\n });\n }\n}" }, { "path": "src/pages/EditorWebCodecs/mediabunny/lib/videoTrimmer.ts", "content": "// @ts-nocheck\nimport {\n Input,\n Output,\n BlobSource,\n BufferTarget,\n Mp4OutputFormat,\n WebMOutputFormat,\n ALL_FORMATS,\n Conversion,\n type OutputFormat,\n} from \"mediabunny\";\n\nexport interface TrimOptions {\n startTime: number;\n endTime: number;\n outputFormat?: \"mp4\" | \"webm\";\n videoBitrate?: number;\n audioBitrate?: number;\n onProgress?: (progress: number) => void;\n}\n\nexport interface TrimInfo {\n originalDuration: number;\n trimmedDuration: number;\n startTime: number;\n endTime: number;\n format: string;\n}\n\nexport class VideoTrimmer {\n async trim(sourceBlob: Blob, options: TrimOptions): Promise {\n const { startTime, endTime, outputFormat, videoBitrate, audioBitrate, onProgress } = options;\n\n if (startTime < 0) throw new Error(\"Start time cannot be negative\");\n if (endTime <= startTime) throw new Error(\"End time must be greater than start time\");\n\n const input = new Input({\n formats: ALL_FORMATS,\n source: new BlobSource(sourceBlob),\n });\n\n const inputFormat = await input.getFormat();\n const targetFormat =\n outputFormat ||\n (inputFormat.name.toLowerCase().includes(\"mp4\") ? \"mp4\" : \"webm\");\n\n const format: OutputFormat =\n targetFormat === \"mp4\"\n ? new Mp4OutputFormat({ fastStart: \"in-memory\" })\n : new WebMOutputFormat();\n\n const target = new BufferTarget();\n const output = new Output({ format, target });\n\n const conversion = await Conversion.init({\n input,\n output,\n trim: { start: startTime, end: endTime },\n ...(videoBitrate && { video: { bitrate: videoBitrate } }),\n ...(audioBitrate && { audio: { bitrate: audioBitrate } }),\n });\n\n if (!conversion.isValid) {\n const reasons = conversion.discardedTracks\n .map((t) => `${t.track.type}: ${t.reason}`)\n .join(\", \");\n throw new Error(`Trimming failed - ${reasons}`);\n }\n\n if (onProgress) conversion.onProgress = onProgress;\n\n await conversion.execute();\n\n if (!target.buffer) throw new Error(\"Trimming failed - no output buffer\");\n\n return new Blob([target.buffer], {\n type: targetFormat === \"mp4\" ? \"video/mp4\" : \"video/webm\",\n });\n }\n\n async getInfo(blob: Blob): Promise<{\n format: string;\n hasVideo: boolean;\n hasAudio: boolean;\n videoCodec?: string | null;\n audioCodec?: string | null;\n codedWidth?: number;\n codedHeight?: number;\n }> {\n const input = new Input({\n formats: ALL_FORMATS,\n source: new BlobSource(blob),\n });\n\n const format = await input.getFormat();\n const tracks = await input.getTracks();\n const videoTrack = tracks.find((t) => t.type === \"video\");\n const audioTrack = tracks.find((t) => t.type === \"audio\");\n\n return {\n format: format.name,\n hasVideo: !!videoTrack,\n hasAudio: !!audioTrack,\n videoCodec: videoTrack?.codec || null,\n audioCodec: audioTrack?.codec || null,\n ...(videoTrack?.isVideoTrack() && {\n codedWidth: videoTrack.codedWidth,\n codedHeight: videoTrack.codedHeight,\n }),\n };\n }\n}\n\nexport const videoTrimmer = new VideoTrimmer();\n\nexport async function trimVideo(\n blob: Blob,\n startTime: number,\n endTime: number,\n options?: Omit\n): Promise {\n return videoTrimmer.trim(blob, { startTime, endTime, ...options });\n}" }, { "path": "src/pages/EditorWebCodecs/utils/addAudioToVideo.js", "content": "import { VideoAudioMixer } from \"../mediabunny/lib/videoAudioMixer.ts\";\n\nasync function ensureBlob(input, mimeType = \"video/webm\") {\n if (input instanceof Blob) return input;\n\n if (input && typeof input === \"object\" && typeof input.size === \"number\") {\n if (typeof input.arrayBuffer === \"function\") {\n try {\n const buffer = await input.arrayBuffer();\n return new Blob([buffer], { type: input.type || mimeType });\n } catch {}\n }\n\n if (typeof input.slice === \"function\") {\n try {\n const sliced = input.slice(0, input.size, input.type || mimeType);\n if (sliced instanceof Blob) return sliced;\n } catch {}\n }\n }\n\n throw new Error(\n `Cannot convert to Blob: ${typeof input}, constructor: ${\n input?.constructor?.name\n }`\n );\n}\n\nasync function addAudioToVideo(\n ffmpeg,\n videoBlob,\n audioBlob,\n videoDuration,\n audioVolume = 1.0,\n replaceAudio = false,\n onProgress\n) {\n const video = await ensureBlob(videoBlob, \"video/webm\");\n const audio = await ensureBlob(audioBlob, \"audio/webm\");\n\n const mixer = new VideoAudioMixer();\n return mixer.addAudio(video, audio, {\n mode: replaceAudio ? \"replace\" : \"mix\",\n videoVolume: replaceAudio ? 0 : 0.7,\n audioVolume,\n loop: false,\n outputFormat: \"webm\",\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n}\n\nexport default addAudioToVideo;\n" }, { "path": "src/pages/EditorWebCodecs/utils/blobToArrayBuffer.js", "content": "async function blobToArrayBuffer(blob) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n if (reader.result instanceof ArrayBuffer) {\n resolve(reader.result);\n } else {\n reject(new Error(\"Failed to convert Blob to ArrayBuffer\"));\n }\n };\n reader.onerror = reject;\n reader.readAsArrayBuffer(blob);\n });\n}\n\nexport default blobToArrayBuffer;\n" }, { "path": "src/pages/EditorWebCodecs/utils/convertMp4ToWebm.js", "content": "import { VideoConverter } from \"../mediabunny/lib/videoConverter.ts\";\n\nasync function convertMp4ToWebm(mp4Blob, onProgress = () => {}) {\n const converter = new VideoConverter();\n\n return converter.convertToWebM(mp4Blob, {\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n}\n\nexport default convertMp4ToWebm;\n" }, { "path": "src/pages/EditorWebCodecs/utils/convertWebmToMp4.js", "content": "import { VideoConverter } from \"../mediabunny/lib/videoConverter.ts\";\n\nasync function convertWebmToMp4(webmBlob, onProgress = () => {}) {\n const converter = new VideoConverter();\n\n return converter.convertToMP4(webmBlob, {\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n}\n\nexport default convertWebmToMp4;\n" }, { "path": "src/pages/EditorWebCodecs/utils/cropVideo.js", "content": "import { VideoCropper } from \"../mediabunny/lib/videoCropper.ts\";\n\nasync function cropVideo(\n ffmpeg,\n videoBlob,\n cropOptions,\n onProgress = () => {}\n) {\n const cropper = new VideoCropper();\n\n return cropper.crop(videoBlob, {\n left: cropOptions.x,\n top: cropOptions.y,\n width: cropOptions.width,\n height: cropOptions.height,\n outputFormat: \"webm\",\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n}\n\nexport default cropVideo;\n" }, { "path": "src/pages/EditorWebCodecs/utils/cutVideo.js", "content": "import { VideoTrimmer } from \"../mediabunny/lib/videoTrimmer.ts\";\nimport { VideoCutter } from \"../mediabunny/lib/videoCutter.ts\";\n\nexport default async function cutVideo(\n ffmpeg,\n videoBlob,\n startTime,\n endTime,\n cut,\n duration,\n encode,\n onProgress = () => {}\n) {\n let result;\n\n if (cut) {\n const cutter = new VideoCutter();\n result = await cutter.cut(videoBlob, {\n cutStart: startTime,\n cutEnd: endTime,\n outputFormat: \"mp4\",\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n } else {\n const trimmer = new VideoTrimmer();\n result = await trimmer.trim(videoBlob, {\n startTime,\n endTime,\n outputFormat: \"mp4\",\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n }\n\n return result;\n}\n" }, { "path": "src/pages/EditorWebCodecs/utils/getFrame.js", "content": "async function getFrame(ffmpeg, videoBlob, time) {\n return new Promise((resolve, reject) => {\n const video = document.createElement(\"video\");\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n video.addEventListener(\"loadedmetadata\", () => {\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n video.currentTime = time;\n });\n\n video.addEventListener(\"seeked\", () => {\n try {\n ctx.drawImage(video, 0, 0);\n canvas.toBlob((blob) => {\n URL.revokeObjectURL(video.src);\n if (blob) resolve(blob);\n else reject(new Error(\"Failed to create blob from canvas\"));\n }, \"image/png\");\n } catch (error) {\n URL.revokeObjectURL(video.src);\n reject(error);\n }\n });\n\n video.addEventListener(\"error\", (e) => {\n URL.revokeObjectURL(video.src);\n reject(new Error(`Video error: ${e.message || \"Unknown error\"}`));\n });\n\n video.src = URL.createObjectURL(videoBlob);\n });\n}\n\nexport default getFrame;\n" }, { "path": "src/pages/EditorWebCodecs/utils/hasAudio.js", "content": "async function hasAudio(ffmpeg, videoBlob) {\n return new Promise((resolve, reject) => {\n const video = document.createElement(\"video\");\n video.muted = true;\n\n video.addEventListener(\"loadedmetadata\", () => {\n if (typeof video.mozHasAudio !== \"undefined\") {\n const result = video.mozHasAudio;\n URL.revokeObjectURL(video.src);\n resolve(result);\n return;\n }\n\n if (typeof video.webkitAudioDecodedByteCount !== \"undefined\") {\n const result = video.webkitAudioDecodedByteCount > 0;\n URL.revokeObjectURL(video.src);\n resolve(result);\n return;\n }\n\n const audioContext = new (window.AudioContext ||\n window.webkitAudioContext)();\n\n video\n .play()\n .then(() => {\n const source = audioContext.createMediaElementSource(video);\n const analyser = audioContext.createAnalyser();\n source.connect(analyser);\n\n const dataArray = new Uint8Array(analyser.frequencyBinCount);\n analyser.getByteFrequencyData(dataArray);\n\n const hasAudioData = dataArray.some((v) => v > 0);\n\n video.pause();\n URL.revokeObjectURL(video.src);\n audioContext.close();\n\n resolve(hasAudioData);\n })\n .catch(() => {\n URL.revokeObjectURL(video.src);\n audioContext.close();\n resolve(true);\n });\n });\n\n video.addEventListener(\"error\", (e) => {\n URL.revokeObjectURL(video.src);\n reject(new Error(`Video error: ${e.message || \"Unknown error\"}`));\n });\n\n video.src = URL.createObjectURL(videoBlob);\n video.load();\n });\n}\n\nexport default hasAudio;\n" }, { "path": "src/pages/EditorWebCodecs/utils/muteVideo.js", "content": "import { VideoMuter } from \"../mediabunny/lib/videoMuter.ts\";\n\nasync function muteVideo(\n ffmpeg,\n videoBlob,\n startTime,\n endTime,\n duration,\n onProgress = () => {}\n) {\n const muter = new VideoMuter();\n\n return muter.mute(videoBlob, {\n muteStart: startTime,\n muteEnd: endTime,\n outputFormat: \"webm\",\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n}\n\nexport default muteVideo;\n" }, { "path": "src/pages/EditorWebCodecs/utils/reencodeVideo.js", "content": "import { VideoConverter } from \"../mediabunny/lib/videoConverter.ts\";\n\nasync function reencodeVideo(\n ffmpeg,\n videoBlob,\n duration,\n onProgress = () => {}\n) {\n const converter = new VideoConverter();\n\n return converter.convertToMP4(videoBlob, {\n videoBitrate: 5_000_000,\n audioBitrate: 128_000,\n onProgress,\n });\n}\n\nexport default reencodeVideo;\n" }, { "path": "src/pages/EditorWebCodecs/utils/toGIF.js", "content": "import GIF from \"gif.js\";\n\nasync function toGIF(ffmpeg, videoBlob, onProgress = () => {}) {\n return new Promise((resolve, reject) => {\n const video = document.createElement(\"video\");\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n video.addEventListener(\"loadedmetadata\", async () => {\n try {\n const duration = video.duration;\n const width = 540;\n const height = Math.round(\n (video.videoHeight / video.videoWidth) * width\n );\n const fps = 12;\n const quality = 5;\n\n canvas.width = width;\n canvas.height = height;\n\n const gif = new GIF({\n workers: 2,\n quality,\n width,\n height,\n workerScript: \"/assets/vendor/gif.js/gif.worker.js\",\n });\n\n const frameInterval = 1 / fps;\n const totalFrames = Math.floor(duration * fps);\n let frameCount = 0;\n\n const captureFrame = (time) =>\n new Promise((resolveFrame) => {\n const seekHandler = () => {\n video.removeEventListener(\"seeked\", seekHandler);\n ctx.drawImage(video, 0, 0, width, height);\n gif.addFrame(canvas, {\n copy: true,\n delay: Math.round(1000 / fps),\n });\n frameCount++;\n onProgress(frameCount / totalFrames);\n resolveFrame();\n };\n video.addEventListener(\"seeked\", seekHandler);\n video.currentTime = time;\n });\n\n for (let i = 0; i < totalFrames; i++) {\n const time = Math.min(i * frameInterval, duration - 0.001);\n await captureFrame(time);\n }\n\n gif.on(\"finished\", (blob) => {\n URL.revokeObjectURL(video.src);\n video.remove();\n onProgress(1);\n resolve(blob);\n });\n\n gif.on(\"progress\", (progress) => onProgress(progress));\n\n gif.render();\n } catch (error) {\n URL.revokeObjectURL(video.src);\n video.remove();\n reject(error);\n }\n });\n\n video.addEventListener(\"error\", (e) => {\n URL.revokeObjectURL(video.src);\n reject(new Error(`Video error: ${e.message || \"Unknown error\"}`));\n });\n\n video.src = URL.createObjectURL(videoBlob);\n video.load();\n });\n}\n\nexport default toGIF;\n" }, { "path": "src/pages/Permissions/Permissions.jsx", "content": "import React, { useEffect, useState, useRef, useCallback } from \"react\";\n\nconst Recorder = () => {\n useEffect(() => {\n window.parent.postMessage(\n {\n type: \"screenity-permissions-loaded\",\n },\n \"*\"\n );\n }, []);\n\n useEffect(() => {\n const handleDeviceChange = () => {\n // Recheck permissions and enumerate devices\n checkPermissions();\n };\n\n navigator.mediaDevices.addEventListener(\"devicechange\", handleDeviceChange);\n\n return () => {\n navigator.mediaDevices.removeEventListener(\n \"devicechange\",\n handleDeviceChange\n );\n };\n }, []);\n\n const checkPermissions = async () => {\n // Individually check the camera and microphone permissions using the Permissions API. Then enumerate devices respectively.\n try {\n const cameraPermission = await navigator.permissions.query({\n name: \"camera\",\n });\n const microphonePermission = await navigator.permissions.query({\n name: \"microphone\",\n });\n\n cameraPermission.onchange = () => {\n checkPermissions();\n };\n\n microphonePermission.onchange = () => {\n checkPermissions();\n };\n\n // If the permissions are granted, enumerate devices\n if (\n cameraPermission.state === \"granted\" ||\n microphonePermission.state === \"granted\"\n ) {\n enumerateDevices(\n cameraPermission.state === \"granted\",\n microphonePermission.state === \"granted\"\n );\n } else {\n // Post message to parent window\n window.parent.postMessage(\n {\n type: \"screenity-permissions\",\n success: false,\n error: err.name,\n },\n \"*\"\n );\n // sendResponse({ success: false, error: err.name });\n }\n } catch (err) {\n enumerateDevices();\n }\n };\n\n const enumerateDevices = async (camGranted = true, micGranted = true) => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n audio: micGranted,\n video: camGranted,\n });\n\n const devicesInfo = await navigator.mediaDevices.enumerateDevices();\n\n let audioinput = [];\n let audiooutput = [];\n let videoinput = [];\n\n if (micGranted) {\n // Filter by audio input\n audioinput = devicesInfo\n .filter((device) => device.kind === \"audioinput\")\n .map((device) => ({\n deviceId: device.deviceId,\n label: device.label,\n }));\n\n // Filter by audio output and extract relevant properties\n audiooutput = devicesInfo\n .filter((device) => device.kind === \"audiooutput\")\n .map((device) => ({\n deviceId: device.deviceId,\n label: device.label,\n }));\n }\n\n if (camGranted) {\n // Filter by video input and extract relevant properties\n videoinput = devicesInfo\n .filter((device) => device.kind === \"videoinput\")\n .map((device) => ({\n deviceId: device.deviceId,\n label: device.label,\n }));\n }\n\n // Save in Chrome local storage\n chrome.storage.local.set({\n // Set available devices\n audioinput: audioinput,\n audiooutput: audiooutput,\n videoinput: videoinput,\n cameraPermission: camGranted,\n microphonePermission: micGranted,\n });\n\n // Post message to parent window\n window.parent.postMessage(\n {\n type: \"screenity-permissions\",\n success: true,\n audioinput: audioinput,\n audiooutput: audiooutput,\n videoinput: videoinput,\n cameraPermission: camGranted,\n microphonePermission: micGranted,\n },\n \"*\"\n );\n\n //sendResponse({ success: true, audioinput, audiooutput, videoinput });\n\n // End the stream\n stream.getTracks().forEach(function (track) {\n track.stop();\n });\n } catch (err) {\n // Post message to parent window\n window.parent.postMessage(\n {\n type: \"screenity-permissions\",\n success: false,\n error: err.name,\n },\n \"*\"\n );\n //sendResponse({ success: false, error: err.name });\n }\n };\n\n const onMessage = (message) => {\n if (message.type === \"screenity-get-permissions\") {\n checkPermissions();\n }\n };\n\n // Post message listener\n useEffect(() => {\n window.addEventListener(\"message\", (event) => {\n onMessage(event.data);\n });\n }, []);\n\n return
;\n};\n\nexport default Recorder;\n" }, { "path": "src/pages/Permissions/index.html", "content": "\n\n \n \n \n \n\n \n
\n \n\n" }, { "path": "src/pages/Permissions/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Recorder from \"./Permissions\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Playground/Setup.jsx", "content": "import React, { useEffect, useState } from \"react\";\n\nconst Setup = () => {\n useEffect(() => {\n // Inject content script\n const script = document.createElement(\"script\");\n script.src = chrome.runtime.getURL(\"contentScript.bundle.js\");\n script.async = true;\n document.body.appendChild(script);\n\n // Also inject CSS\n const style = document.createElement(\"link\");\n style.rel = \"stylesheet\";\n style.type = \"text/css\";\n style.href = chrome.runtime.getURL(\"assets/fonts/fonts.css\");\n document.body.appendChild(style);\n\n // Return\n return () => {\n document.body.removeChild(script);\n document.body.removeChild(style);\n };\n }, []);\n\n return (\n
\n \n
\n \n
\n );\n};\n\nexport default Setup;\n" }, { "path": "src/pages/Playground/index.html", "content": "\n\n \n \n Screenity - Playground\n\n \n \n\n \n
\n \n\n" }, { "path": "src/pages/Playground/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Setup from \"./Setup\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Recorder/Recorder.jsx", "content": "import React, { useEffect, useState, useRef } from \"react\";\nimport localforage from \"localforage\";\nimport RecorderUI from \"./RecorderUI\";\nimport { createMediaRecorder } from \"./mediaRecorderUtils\";\nimport { sendRecordingError, sendStopRecording } from \"./messaging\";\nimport { getBitrates, getResolutionForQuality } from \"./recorderConfig\";\nimport { WebCodecsRecorder } from \"./webcodecs/WebCodecsRecorder\";\nimport { getUserMediaWithFallback } from \"../utils/mediaDeviceFallback\";\nimport {\n debugRecordingEvent,\n resetRecordingDebugSession,\n isRecordingDebugEnabled,\n hydrateRecordingDebugFlag,\n} from \"../utils/recordingDebug\";\nimport {\n probeFastRecorderSupport,\n shouldUseFastRecorder,\n getFastRecorderStickyState,\n markFastRecorderFailure,\n validateFastRecorderOutputBlob,\n} from \"../../media/fastRecorderGate\";\n\nlocalforage.config({\n driver: localforage.INDEXEDDB,\n name: \"screenity\",\n version: 1,\n});\n\nconst chunksStore = localforage.createInstance({\n name: \"chunks\",\n});\n\ndocument.body.style.willChange = \"contents\";\n\n// Debug flag for logging\n// window.SCREENITY_DEBUG_RECORDER = true;\nconst DEBUG_RECORDER =\n typeof window !== \"undefined\" ? !!window.SCREENITY_DEBUG_RECORDER : false;\nconst FORCE_MEDIARECORDER =\n typeof window !== \"undefined\"\n ? !!window.SCREENITY_FORCE_MEDIARECORDER\n : false;\nconst logPrefix = \"[Screenity Recorder]\";\n\nfunction debug(...args) {\n if (!DEBUG_RECORDER) return;\n // eslint-disable-next-line no-console\n console.log(logPrefix, ...args);\n}\n\nfunction debugWarn(...args) {\n if (!DEBUG_RECORDER) return;\n // eslint-disable-next-line no-console\n console.warn(logPrefix, ...args);\n}\n\nfunction debugError(...args) {\n if (!DEBUG_RECORDER) return;\n // eslint-disable-next-line no-console\n console.error(logPrefix, ...args);\n}\n\n// Stream lifecycle ring-buffer — persisted to storage, survives tab discards.\nconst SL_KEY = \"streamLifecycleLog\";\nconst SL_MAX = 40; // keep last N entries\nconst _slBuffer = [];\n\nfunction slLog(tag, extra = {}) {\n const entry = { t: Date.now(), tag, ...extra };\n if (DEBUG_RECORDER) {\n // eslint-disable-next-line no-console\n console.log(\"[Screenity:SL]\", tag, entry);\n }\n _slBuffer.push(entry);\n if (_slBuffer.length > SL_MAX) _slBuffer.splice(0, _slBuffer.length - SL_MAX);\n // Fire-and-forget persist.\n try {\n chrome.storage.local.set({ [SL_KEY]: [..._slBuffer] });\n } catch { /* storage unavailable — tab possibly being torn down */ }\n}\n\nfunction logCaptureContext(label, stream) {\n if (!DEBUG_RECORDER && !isRecordingDebugEnabled()) return;\n const videoTracks =\n stream && typeof stream.getVideoTracks === \"function\"\n ? stream.getVideoTracks()\n : [];\n\n debug(`${label} environment`, {\n devicePixelRatio: window.devicePixelRatio,\n screen: { width: window.screen?.width, height: window.screen?.height },\n inner: { width: window.innerWidth, height: window.innerHeight },\n });\n\n videoTracks.forEach((track, index) => {\n const settings =\n typeof track.getSettings === \"function\" ? track.getSettings() : {};\n const constraints =\n typeof track.getConstraints === \"function\" ? track.getConstraints() : {};\n const capabilities =\n typeof track.getCapabilities === \"function\"\n ? track.getCapabilities()\n : {};\n debug(`${label} videoTrack[${index}]`, {\n label: track.label,\n settings,\n constraints,\n capabilities,\n });\n });\n}\n\nfunction buildTrackSnapshot(track) {\n if (!track) return null;\n const settings =\n typeof track.getSettings === \"function\" ? track.getSettings() : {};\n const constraints =\n typeof track.getConstraints === \"function\" ? track.getConstraints() : {};\n const capabilities =\n typeof track.getCapabilities === \"function\" ? track.getCapabilities() : {};\n return {\n label: track.label,\n settings,\n constraints,\n capabilities,\n };\n}\n\nfunction logRecordingSnapshot(label, data) {\n if (!DEBUG_RECORDER && !isRecordingDebugEnabled()) return;\n debug(`Recording snapshot: ${label}`, data);\n}\n\nconst clamp = (value, min, max) => Math.max(min, Math.min(max, value));\n\nconst QUALITY_ORDER = [\"240p\", \"360p\", \"480p\", \"720p\", \"1080p\", \"4k\"];\n\nconst clampQualityValue = (value, maxValue) => {\n const current = QUALITY_ORDER.includes(value) ? value : \"1080p\";\n const max = QUALITY_ORDER.includes(maxValue) ? maxValue : \"1080p\";\n return QUALITY_ORDER.indexOf(current) <= QUALITY_ORDER.indexOf(max)\n ? current\n : max;\n};\n\nconst getFreeCaptureCaps = async () => {\n try {\n const { isLoggedIn, isSubscribed } = await chrome.storage.local.get([\n \"isLoggedIn\",\n \"isSubscribed\",\n ]);\n const isPro = Boolean(isLoggedIn && isSubscribed);\n return {\n isPro,\n maxQuality: \"1080p\",\n maxFps: 60,\n };\n } catch {\n return {\n isPro: false,\n maxQuality: \"1080p\",\n maxFps: 60,\n };\n }\n};\n\nconst computeTargetVideoBps = (width, height, fps) => {\n const pixels = Number(width) * Number(height);\n const rate = Number.isFinite(fps) && fps > 0 ? fps : 30;\n const target = Math.round(pixels * rate * 0.1);\n return clamp(target, 6_000_000, 24_000_000);\n};\n\nconst selectMimeType = (preferredCodec) => {\n const preferred = (preferredCodec || \"\").toLowerCase();\n const mimeTypes = [\n \"video/webm;codecs=vp9,opus\",\n \"video/webm;codecs=vp9\",\n \"video/webm;codecs=vp8,opus\",\n \"video/webm;codecs=vp8\",\n \"video/webm;codecs=avc1\",\n \"video/webm;codecs=h264\",\n \"video/webm\",\n ];\n const ordered = preferred\n ? mimeTypes\n .filter((type) => type.includes(preferred))\n .concat(mimeTypes.filter((type) => !type.includes(preferred)))\n : mimeTypes;\n return ordered.find((type) => MediaRecorder.isTypeSupported(type)) || null;\n};\n\nconst getCodecLabel = (mimeType) => {\n if (!mimeType) return \"unknown\";\n if (mimeType.includes(\"vp9\")) return \"vp9\";\n if (mimeType.includes(\"vp8\")) return \"vp8\";\n if (mimeType.includes(\"avc1\") || mimeType.includes(\"h264\")) return \"h264\";\n return \"unknown\";\n};\n\nconst Recorder = () => {\n const isRestarting = useRef(false);\n const pendingStartAfterRestart = useRef(false);\n const recordingGeneration = useRef(0);\n const isFinishing = useRef(false);\n const sentLast = useRef(false);\n const lastTimecode = useRef(0);\n const hasChunks = useRef(false);\n\n const recdbgSessionRef = useRef(null);\n\n const lastSize = useRef(0);\n const index = useRef(0);\n\n const [started, setStarted] = useState(false);\n const streamReadyAt = useRef(null);\n\n // Start gate: defers startRecording() until the stream is ready.\n const startRequested = useRef(false);\n const startRequestedAt = useRef(null);\n // Timeout if the stream never arrives\n const startGateTimeout = useRef(null);\n const START_GATE_TIMEOUT_MS = 8000; // max wait for stream after start request\n\n const liveStream = useRef(null);\n\n const helperVideoStream = useRef(null);\n const helperAudioStream = useRef(null);\n\n const aCtx = useRef(null);\n const destination = useRef(null);\n const audioInputSource = useRef(null);\n const audioOutputSource = useRef(null);\n const audioInputGain = useRef(null);\n const audioOutputGain = useRef(null);\n\n const recorder = useRef(null);\n const useWebCodecs = useRef(false);\n\n const isTab = useRef(false);\n const tabID = useRef(null);\n const tabPreferred = useRef(false);\n\n const backupRef = useRef(false);\n\n const pending = useRef([]);\n const draining = useRef(false);\n const lowStorageAbort = useRef(false);\n const savedCount = useRef(0);\n\n const lastEstimateAt = useRef(0);\n const ESTIMATE_INTERVAL_MS = 5000;\n const MIN_HEADROOM = 25 * 1024 * 1024;\n const WARN_HEADROOM = 100 * 1024 * 1024; // early warning before hard abort\n const MAX_PENDING_BYTES = 8 * 1024 * 1024;\n const pendingBytes = useRef(0);\n const lowStorageWarned = useRef(false);\n\n const uiClosing = useRef(false);\n\n const isRecording = useRef(false);\n const isStarting = useRef(false);\n const pausedStateRef = useRef(false);\n const stopSignalSent = useRef(false);\n\n // Keep-alive mechanism to prevent Chrome from freezing this background tab\n const keepAliveAudioCtx = useRef(null);\n const keepAliveOscillator = useRef(null);\n\n const recordingStartTime = useRef(null);\n const sessionHeartbeat = useRef(null);\n const recordingTick = useRef(null);\n\n debug(\"Recorder component mounted\");\n slLog(\"component-mount\");\n\n const setRecordingTimingState = async (nextState) => {\n try {\n await chrome.storage.local.set(nextState);\n } catch (err) {\n debugWarn(\"Failed to persist recording timing state\", err);\n }\n };\n\n async function canFitChunk(byteLength) {\n const now = performance.now();\n if (now - lastEstimateAt.current < ESTIMATE_INTERVAL_MS) {\n return !lowStorageAbort.current;\n }\n lastEstimateAt.current = now;\n\n try {\n const { usage = 0, quota = 0 } = await navigator.storage.estimate();\n const remaining = quota - usage;\n const ok = remaining > MIN_HEADROOM + (byteLength || 0);\n if (DEBUG_RECORDER) {\n debug(\"Storage estimate\", {\n usage,\n quota,\n remaining,\n byteLength,\n ok,\n });\n }\n // Early warning before hard abort\n if (!lowStorageWarned.current && remaining < WARN_HEADROOM) {\n lowStorageWarned.current = true;\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageLow\"),\n timeout: 8000,\n }).catch(() => {});\n }\n return ok;\n } catch (err) {\n debugWarn(\"navigator.storage.estimate() failed, assuming OK\", err);\n return !lowStorageAbort.current;\n }\n }\n\n /**\n * Start silent audio playback to prevent Chrome from freezing this tab.\n * Chrome throttles/freezes background tabs after ~5 minutes of inactivity,\n * which would stop our recording. Playing silent audio keeps the tab active.\n */\n const startTabKeepAlive = () => {\n try {\n if (keepAliveAudioCtx.current) return; // Already running\n\n const ctx = new (window.AudioContext || window.webkitAudioContext)();\n keepAliveAudioCtx.current = ctx;\n\n // Create a silent oscillator (inaudible frequency at zero gain)\n const oscillator = ctx.createOscillator();\n const gainNode = ctx.createGain();\n\n oscillator.frequency.value = 0; // DC signal (no audible tone)\n gainNode.gain.value = 0; // Completely silent\n\n oscillator.connect(gainNode);\n gainNode.connect(ctx.destination);\n oscillator.start();\n\n keepAliveOscillator.current = oscillator;\n\n // Request Chrome not to discard this tab\n chrome.runtime\n .sendMessage({ type: \"set-tab-auto-discardable\", discardable: false })\n .catch(() => {});\n\n debug(\"Tab keep-alive started\");\n } catch (err) {\n debugWarn(\"Failed to start tab keep-alive:\", err);\n }\n };\n\n /**\n * Stop the silent audio playback when recording ends.\n */\n const stopTabKeepAlive = () => {\n try {\n if (keepAliveOscillator.current) {\n keepAliveOscillator.current.stop();\n keepAliveOscillator.current.disconnect();\n keepAliveOscillator.current = null;\n }\n if (keepAliveAudioCtx.current) {\n keepAliveAudioCtx.current.close();\n keepAliveAudioCtx.current = null;\n }\n\n // Allow Chrome to discard this tab again if needed\n chrome.runtime\n .sendMessage({ type: \"set-tab-auto-discardable\", discardable: true })\n .catch(() => {});\n\n debug(\"Tab keep-alive stopped\");\n } catch (err) {\n debugWarn(\"Failed to stop tab keep-alive:\", err);\n }\n };\n\n /**\n * Persist recording session state for recovery and diagnostics.\n */\n const persistSessionState = async (status = \"recording\") => {\n try {\n await chrome.storage.local.set({\n freeRecorderSession: {\n status,\n chunkCount: savedCount.current,\n lastChunkTime: lastTimecode.current,\n startedAt: recordingStartTime.current,\n updatedAt: Date.now(),\n },\n });\n } catch (err) {\n debugWarn(\"Failed to persist session state:\", err);\n }\n };\n\n /**\n * Start a heartbeat to periodically persist session state.\n */\n const startSessionHeartbeat = () => {\n if (sessionHeartbeat.current) clearInterval(sessionHeartbeat.current);\n sessionHeartbeat.current = setInterval(() => {\n if (isRecording.current) {\n persistSessionState(\"recording\");\n }\n }, 10000); // Every 10 seconds\n };\n\n /**\n * Stop the session heartbeat.\n */\n const stopSessionHeartbeat = () => {\n if (sessionHeartbeat.current) {\n clearInterval(sessionHeartbeat.current);\n sessionHeartbeat.current = null;\n }\n };\n\n /**\n * Keep timer UI responsive in content scripts by updating a tick in storage.\n * This runs in the recorder tab, which is kept alive during recording.\n */\n const startRecordingTick = () => {\n if (recordingTick.current) clearInterval(recordingTick.current);\n recordingTick.current = setInterval(async () => {\n if (!isRecording.current || !recordingStartTime.current) return;\n const { totalPausedMs, pausedAt, paused } =\n await chrome.storage.local.get([\"totalPausedMs\", \"pausedAt\", \"paused\"]);\n const now = Date.now();\n const basePaused = Number(totalPausedMs) || 0;\n const extraPaused =\n paused && pausedAt ? Math.max(0, now - Number(pausedAt)) : 0;\n const elapsed = Math.max(\n 0,\n now - recordingStartTime.current - basePaused - extraPaused,\n );\n chrome.storage.local.set({ recordingNow: now, recordingDuration: elapsed });\n }, 1000);\n };\n\n const stopRecordingTick = () => {\n if (recordingTick.current) {\n clearInterval(recordingTick.current);\n recordingTick.current = null;\n }\n };\n\n // Emit stop to background at most once per recording session.\n const requestStop = (reason = \"generic\", extra = {}) => {\n if (stopSignalSent.current) {\n debugWarn(\"requestStop() ignored; already sent\", { reason });\n return false;\n }\n if (isFinishing.current || !isRecording.current) {\n debug(\"requestStop() ignored; recorder not active\", {\n reason,\n isFinishing: isFinishing.current,\n isRecording: isRecording.current,\n });\n return false;\n }\n stopSignalSent.current = true;\n sendStopRecording(reason, extra);\n return true;\n };\n\n async function saveChunk(e, i) {\n const ts = e.timecode ?? 0;\n\n if (!(await canFitChunk(e.data.size))) {\n debugWarn(\"Low storage, aborting recording\");\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n lowStorageAbortAt: Date.now(),\n lowStorageAbortChunks: index.current,\n });\n requestStop(\"low-storage\", { memoryError: true, savedChunks: savedCount.current });\n return false;\n }\n\n try {\n await chunksStore.setItem(`chunk_${i}`, {\n index: i,\n chunk: e.data,\n timestamp: ts,\n });\n if (DEBUG_RECORDER) {\n debug(\"Saved chunk to IndexedDB\", {\n key: `chunk_${i}`,\n size: e.data.size,\n ts,\n });\n }\n } catch (err) {\n debugError(\"Failed to save chunk, aborting recording\", err);\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n lowStorageAbortAt: Date.now(),\n lowStorageAbortChunks: index.current,\n });\n requestStop(\"chunk-save-failed\", { memoryError: true, savedChunks: savedCount.current });\n return false;\n }\n\n lastTimecode.current = ts;\n lastSize.current = e.data.size;\n savedCount.current += 1;\n\n if (backupRef.current) {\n chrome.runtime.sendMessage({ type: \"write-file\", index: i });\n }\n return true;\n }\n\n async function drainQueue() {\n if (draining.current) return;\n draining.current = true;\n\n try {\n if (DEBUG_RECORDER) {\n debug(\"Draining queue start\", {\n pending: pending.current.length,\n pendingBytes: pendingBytes.current,\n });\n }\n while (pending.current.length) {\n if (lowStorageAbort.current) {\n debugWarn(\"Low storage while draining, clearing queue\");\n pending.current.length = 0;\n pendingBytes.current = 0;\n break;\n }\n\n const e = pending.current.shift();\n pendingBytes.current -= e.data.size;\n\n if (!(await canFitChunk(e.data.size))) {\n debugWarn(\"Low storage during drain, stopping recording\");\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n lowStorageAbortAt: Date.now(),\n lowStorageAbortChunks: index.current,\n });\n requestStop(\"low-storage\", { memoryError: true, savedChunks: savedCount.current });\n pending.current.length = 0;\n pendingBytes.current = 0;\n break;\n }\n\n const i = index.current;\n const saved = await saveChunk(e, i);\n if (saved) index.current = i + 1;\n }\n } finally {\n if (DEBUG_RECORDER) {\n debug(\"Draining queue finished\", {\n pending: pending.current.length,\n pendingBytes: pendingBytes.current,\n });\n }\n draining.current = false;\n }\n }\n\n async function waitForDrain() {\n if (DEBUG_RECORDER) {\n debug(\"waitForDrain() called\");\n }\n while (draining.current || pending.current.length) {\n await new Promise((r) => setTimeout(r, 10));\n }\n if (DEBUG_RECORDER) {\n debug(\"waitForDrain() resolved\");\n }\n }\n\n useEffect(() => {\n chrome.storage.local.get([\"backup\"], (result) => {\n backupRef.current = !!result.backup;\n debug(\"Loaded backup flag from storage\", backupRef.current);\n });\n }, []);\n\n // Check whether the stream is in a startable state.\n function getStreamReadiness() {\n if (!helperVideoStream.current) return { ready: false, reason: \"stream-ref-null\" };\n const vt = helperVideoStream.current.getVideoTracks();\n if (vt.length === 0) return { ready: false, reason: \"zero-video-tracks\" };\n if (vt[0].readyState !== \"live\") return { ready: false, reason: \"track-not-live\", trackState: vt[0].readyState };\n return { ready: true };\n }\n\n function buildStreamDiagInfo(bucket) {\n const stream = helperVideoStream.current;\n const vt = stream?.getVideoTracks?.() ?? [];\n return {\n bucket,\n started,\n streamReadyAt: streamReadyAt.current,\n msSinceReady: streamReadyAt.current ? Date.now() - streamReadyAt.current : null,\n msSinceStartRequested: startRequestedAt.current ? Date.now() - startRequestedAt.current : null,\n streamExists: !!stream,\n streamActive: stream?.active ?? null,\n streamId: stream?.id ?? null,\n videoTrackCount: vt.length,\n audioTrackCount: stream?.getAudioTracks?.()?.length ?? null,\n trackReadyState: vt[0]?.readyState ?? null,\n trackEnabled: vt[0]?.enabled ?? null,\n trackMuted: vt[0]?.muted ?? null,\n docHidden: document.hidden,\n docVisibility: document.visibilityState,\n };\n }\n\n /** Arm a timeout that errors if the stream never shows up. */\n function armStartGateTimeout() {\n clearStartGateTimeout();\n startGateTimeout.current = setTimeout(() => {\n if (!startRequested.current) return; // request was fulfilled or cancelled\n const readiness = getStreamReadiness();\n if (readiness.ready) {\n // Race: stream arrived just before timeout\n slLog(\"start-gate-timeout-race-ok\");\n tryStartIfReady();\n return;\n }\n const diagInfo = buildStreamDiagInfo(\"start-gate-timeout\");\n console.warn(\"[Screenity:startRec] stream never became ready\", diagInfo);\n slLog(\"start-gate-timeout\", diagInfo);\n chrome.storage.local.set({ lastStreamCheckFail: diagInfo });\n // Full reset so no gate state leaks into a future session.\n resetGateState();\n sendRecordingError(\n \"Recording not ready: screen stream is missing (tab may have been suspended)\",\n );\n }, START_GATE_TIMEOUT_MS);\n }\n\n function clearStartGateTimeout() {\n if (startGateTimeout.current) {\n clearTimeout(startGateTimeout.current);\n startGateTimeout.current = null;\n }\n }\n\n /** Reset gate state on stop/dismiss/restart. */\n function resetGateState() {\n startRequested.current = false;\n startRequestedAt.current = null;\n isStarting.current = false;\n clearStartGateTimeout();\n }\n\n /** Request recording start — immediate if stream is ready, deferred otherwise. */\n function requestStart() {\n if (recorder.current !== null || isStarting.current) {\n debugWarn(\"requestStart() called but recorder already exists or start in flight\");\n slLog(\"requestStart-bail-already-active\", {\n hasRecorder: recorder.current !== null,\n isStarting: isStarting.current,\n });\n return;\n }\n if (isRestarting.current) {\n pendingStartAfterRestart.current = true;\n slLog(\"requestStart-queued-restart\");\n debug(\"Queued start request while restarting\");\n return;\n }\n if (startRequested.current) {\n // Already waiting — ignore duplicate.\n slLog(\"requestStart-bail-already-requested\");\n return;\n }\n\n startRequested.current = true;\n startRequestedAt.current = Date.now();\n slLog(\"requestStart\", {\n hasStream: !!helperVideoStream.current,\n started,\n docHidden: document.hidden,\n docVisibility: document.visibilityState,\n });\n\n const readiness = getStreamReadiness();\n if (readiness.ready) {\n slLog(\"requestStart-immediate\", readiness);\n startRecording();\n } else {\n slLog(\"requestStart-deferred\", readiness);\n armStartGateTimeout();\n }\n }\n\n /** If a start was requested and the stream is ready, fire startRecording(). */\n function tryStartIfReady() {\n if (!startRequested.current) return;\n const readiness = getStreamReadiness();\n slLog(\"tryStartIfReady\", readiness);\n if (readiness.ready) {\n clearStartGateTimeout();\n startRecording();\n }\n // Otherwise the gate timeout handles it.\n }\n\n // startRecording — stream must be ready (verified by the gate above).\n async function startRecording() {\n slLog(\"startRecording-enter\", {\n hasRecorder: recorder.current !== null,\n hasStream: !!helperVideoStream.current,\n started,\n streamReadyAt: streamReadyAt.current,\n docHidden: document.hidden,\n });\n\n // Acting on the request now — reset gate state.\n resetGateState();\n\n if (recorder.current !== null || isStarting.current) {\n debugWarn(\"startRecording() called but recorder already exists or start in flight\");\n slLog(\"startRecording-bail-already-active\", {\n hasRecorder: recorder.current !== null,\n isStarting: isStarting.current,\n });\n return;\n }\n\n isStarting.current = true;\n debug(\"startRecording()\");\n recordingGeneration.current += 1;\n const runGeneration = recordingGeneration.current;\n\n // Start silent audio to prevent Chrome from freezing this background tab\n startTabKeepAlive();\n\n // Record the start time for session tracking\n recordingStartTime.current = Date.now();\n\n // Final preflight — edge-case guard in case state changed since the gate.\n navigator.storage.persist();\n if (!helperVideoStream.current) {\n const diagInfo = buildStreamDiagInfo(\"stream-ref-null\");\n console.warn(\"[Screenity:startRec] helperVideoStream is null\", diagInfo);\n slLog(\"startRecording-fail-stream-null\", diagInfo);\n chrome.storage.local.set({ lastStreamCheckFail: diagInfo });\n sendRecordingError(\n \"Recording not ready: screen stream is missing (tab may have been suspended)\",\n );\n stopTabKeepAlive();\n isStarting.current = false;\n return;\n }\n const videoTracks = helperVideoStream.current.getVideoTracks();\n if (videoTracks.length === 0) {\n const diagInfo = buildStreamDiagInfo(\"stream-zero-video-tracks\");\n console.warn(\"[Screenity:startRec] helperVideoStream has 0 video tracks\", diagInfo);\n slLog(\"startRecording-fail-zero-tracks\", diagInfo);\n chrome.storage.local.set({ lastStreamCheckFail: diagInfo });\n sendRecordingError(\"No video tracks available\");\n stopTabKeepAlive();\n isStarting.current = false;\n return;\n }\n {\n const vt = videoTracks[0];\n const diagInfo = {\n bucket: \"stream-ok\",\n trackReadyState: vt.readyState,\n trackEnabled: vt.enabled,\n trackMuted: vt.muted,\n msSinceReady: streamReadyAt.current\n ? Date.now() - streamReadyAt.current\n : null,\n };\n slLog(\"startRecording-preflight-ok\", diagInfo);\n if (vt.readyState === \"ended\") {\n console.warn(\"[Screenity:startRec] video track present but ended\", diagInfo);\n slLog(\"startRecording-fail-track-ended\", diagInfo);\n chrome.storage.local.set({ lastStreamCheckFail: diagInfo });\n sendRecordingError(\n \"Recording not ready: screen stream ended (tab may have been suspended)\",\n );\n stopTabKeepAlive();\n isStarting.current = false;\n return;\n }\n }\n\n await chunksStore.clear();\n debug(\"Cleared chunksStore\");\n\n lastTimecode.current = 0;\n lastSize.current = 0;\n hasChunks.current = false;\n savedCount.current = 0;\n pending.current = [];\n draining.current = false;\n lowStorageAbort.current = false;\n pendingBytes.current = 0;\n sentLast.current = false;\n isFinishing.current = false;\n stopSignalSent.current = false;\n\n const { qualityValue } = await chrome.storage.local.get([\"qualityValue\"]);\n const { isPro, maxQuality, maxFps } = await getFreeCaptureCaps();\n const effectiveQualityValue = isPro\n ? qualityValue\n : clampQualityValue(qualityValue, maxQuality);\n const { audioBitsPerSecond, videoBitsPerSecond: bitratePreset } =\n getBitrates(effectiveQualityValue);\n let videoBitsPerSecond = bitratePreset;\n\n debug(\"Bitrates resolved\", {\n qualityValue: effectiveQualityValue,\n audioBitsPerSecond,\n videoBitsPerSecond,\n });\n\n const recordingId = `${Date.now()}-${Math.random()\n .toString(16)\n .slice(2, 8)}`;\n await chrome.storage.local.set({\n fastRecorderActiveRecordingId: recordingId,\n fastRecorderInUse: false,\n fastRecorderValidationFailed: false,\n fastRecorderValidation: null,\n });\n\n const { useWebCodecsRecorder } = await chrome.storage.local.get([\n \"useWebCodecsRecorder\",\n ]);\n const userSetting = useWebCodecsRecorder === true ? true : false;\n const stickyState = await getFastRecorderStickyState();\n const probeResult = await probeFastRecorderSupport();\n const shouldUseFast = shouldUseFastRecorder(\n userSetting,\n probeResult,\n stickyState,\n );\n const selectedVideoConfig =\n probeResult?.details?.selectedVideoConfig || null;\n\n await chrome.storage.local.set({\n fastRecorderDecision: {\n shouldUseFast,\n reasons: probeResult.reasons,\n stickyDisabled: stickyState.disabled,\n },\n fastRecorderStatus: {\n userSetting,\n probe: {\n ok: probeResult.ok,\n reasons: probeResult.reasons,\n details: probeResult.details,\n at: probeResult.at || Date.now(),\n },\n decision: {\n useFast: shouldUseFast,\n why:\n userSetting === false\n ? \"user_disabled\"\n : stickyState?.disabled && userSetting !== true\n ? \"sticky_disabled\"\n : probeResult.ok\n ? \"probe_ok\"\n : \"probe_failed\",\n at: Date.now(),\n },\n disabled: Boolean(stickyState?.disabled),\n disabledReason: stickyState?.reason || null,\n disabledDetails: stickyState?.details || null,\n disabledAt: null,\n updatedAt: Date.now(),\n },\n fastRecorderSelectedVideoConfig: selectedVideoConfig,\n });\n\n debugRecordingEvent(recdbgSessionRef, \"fast-recorder-probe\", {\n probe: probeResult,\n stickyState,\n userSetting,\n shouldUseFast,\n });\n\n const canUseWebCodecs = shouldUseFast;\n\n const videoTrack = liveStream.current?.getVideoTracks()[0] ?? null;\n const settings = videoTrack?.getSettings() || {};\n const { width: qualityWidth, height: qualityHeight } =\n getResolutionForQuality(effectiveQualityValue);\n const trackWidth = settings.width ?? qualityWidth ?? 1920;\n const trackHeight = settings.height ?? qualityHeight ?? 1080;\n const width = Math.min(trackWidth, qualityWidth ?? trackWidth);\n const height = Math.min(trackHeight, qualityHeight ?? trackHeight);\n\n const { fpsValue } = await chrome.storage.local.get([\"fpsValue\"]);\n let fps = parseInt(fpsValue);\n if (Number.isNaN(fps)) fps = 30;\n\n if (!isPro) {\n fps = Math.min(fps, maxFps);\n }\n const computedBps = computeTargetVideoBps(width, height, fps);\n videoBitsPerSecond = !isPro\n ? Math.min(computedBps, bitratePreset)\n : computedBps;\n debug(\"Video bitrate target\", {\n bitratePreset,\n videoBitsPerSecond,\n });\n\n debug(\"Recorder capabilities\", {\n canUseWebCodecs,\n FORCE_MEDIARECORDER,\n width,\n height,\n fps,\n });\n\n // Reset pre-recording state. Recording-committed state (isRecording,\n // heartbeat, timing) is set after the recorder is created successfully.\n pausedStateRef.current = false;\n chrome.storage.local.set({ restarting: false });\n isRestarting.current = false;\n index.current = 0;\n\n const handleChunk = async (data, timestampMs) => {\n if (runGeneration !== recordingGeneration.current) {\n return;\n }\n if (useWebCodecs.current) {\n const blob =\n data instanceof Blob ? data : new Blob([data], { type: \"video/mp4\" });\n\n const ts = timestampMs ?? 0;\n const i = index.current;\n\n try {\n await chunksStore.setItem(`chunk_${i}`, {\n index: i,\n chunk: blob,\n timestamp: ts,\n });\n index.current = i + 1;\n hasChunks.current = true;\n savedCount.current += 1;\n\n if (DEBUG_RECORDER) {\n debug(\"WebCodecs chunk saved\", {\n i,\n ts,\n size: blob.size,\n savedCount: savedCount.current,\n });\n }\n\n if (backupRef.current) {\n chrome.runtime.sendMessage({ type: \"write-file\", index: i });\n }\n } catch (err) {\n debugError(\"Failed to save WebCodecs chunk\", err);\n }\n\n return;\n }\n\n if (lowStorageAbort.current) return;\n\n const blob =\n data instanceof Blob ? data : new Blob([data], { type: \"video/mp4\" });\n\n const e = {\n data: blob,\n timecode: timestampMs ?? 0,\n };\n\n if (!hasChunks.current) {\n hasChunks.current = true;\n lastTimecode.current = e.timecode;\n lastSize.current = e.data.size;\n }\n\n pending.current.push(e);\n pendingBytes.current += e.data.size;\n\n if (DEBUG_RECORDER) {\n debug(\"Queued MediaRecorder chunk\", {\n size: blob.size,\n timecode: e.timecode,\n pending: pending.current.length,\n pendingBytes: pendingBytes.current,\n });\n }\n\n if (pendingBytes.current > MAX_PENDING_BYTES) {\n debugWarn(\n \"Pending bytes exceeded threshold, pausing MediaRecorder and draining queue\",\n );\n try {\n if (\n recorder.current instanceof MediaRecorder &&\n recorder.current.state !== \"paused\"\n ) {\n recorder.current.pause();\n }\n await drainQueue();\n if (\n recorder.current instanceof MediaRecorder &&\n recorder.current.state === \"paused\"\n ) {\n recorder.current.resume();\n }\n } catch (err) {\n debugError(\n \"Error while draining queue with MediaRecorder paused\",\n err,\n );\n await drainQueue();\n }\n }\n\n void drainQueue();\n };\n\n // Abort if stop/dismiss was requested during async setup.\n if (isFinishing.current || uiClosing.current) {\n slLog(\"startRecording-abort-interrupted\", {\n isFinishing: isFinishing.current,\n uiClosing: uiClosing.current,\n });\n isStarting.current = false;\n stopTabKeepAlive();\n return;\n }\n\n try {\n if (canUseWebCodecs) {\n useWebCodecs.current = true;\n\n const hasAudioTrack =\n !!liveStream.current &&\n typeof liveStream.current.getAudioTracks === \"function\" &&\n liveStream.current.getAudioTracks().length > 0;\n\n debug(\"Initializing WebCodecsRecorder\", {\n hasAudioTrack,\n videoBitsPerSecond,\n audioBitsPerSecond,\n });\n\n recorder.current = new WebCodecsRecorder(liveStream.current, {\n width,\n height,\n fps,\n videoBitrate: videoBitsPerSecond,\n audioBitrate: hasAudioTrack ? audioBitsPerSecond : undefined,\n enableAudio: hasAudioTrack,\n videoEncoderConfig: selectedVideoConfig,\n debug: DEBUG_RECORDER,\n onFinalized: async () => {\n debug(\"WebCodecsRecorder onFinalized()\");\n await waitForDrain();\n await updateFreeFinalizeStatus(\"chunks_ready\", 95);\n let validation = null;\n try {\n const blob = await rebuildBlobFromChunks();\n validation = await validateFastRecorderOutputBlob(blob, {\n minBytes: 64 * 1024,\n timeoutMs: 4000,\n videoCodec: recorder.current?.selectedVideoCodec || undefined,\n audioCodec: hasAudioTrack ? \"mp4a.40.2\" : null,\n recordingId,\n });\n debugRecordingEvent(recdbgSessionRef, \"fast-recorder-validate\", {\n validation,\n });\n } catch (err) {\n validation = {\n ok: false,\n hardFail: true,\n reasons: [\"validation-exception\"],\n details: { error: String(err) },\n };\n }\n\n if (validation && !validation.ok) {\n await markFastRecorderFailure(\"validation-failed\", validation);\n await chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"validation-failed\",\n });\n const hardFail = Boolean(validation.hardFail);\n await chrome.storage.local.set({\n fastRecorderValidationFailed: hardFail,\n fastRecorderValidation: validation,\n });\n await updateFreeFinalizeStatus(\n \"failed\",\n 100,\n validation.reasons || \"validation-failed\",\n );\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n if (hardFail) {\n chrome.runtime.sendMessage({\n type: \"fast-recorder-hard-fail\",\n recordingId,\n });\n if (!sentLast.current) {\n sentLast.current = true;\n isFinishing.current = false;\n chrome.runtime.sendMessage({ type: \"video-ready\" });\n }\n return;\n }\n } else {\n await chrome.storage.local.set({\n fastRecorderValidationFailed: false,\n fastRecorderValidation: validation,\n });\n }\n await updateFreeFinalizeStatus(\"ready\", 100);\n if (!sentLast.current) {\n sentLast.current = true;\n isFinishing.current = false;\n chrome.runtime.sendMessage({ type: \"video-ready\" });\n }\n },\n onChunk: (chunkData, timestampUs) => {\n const blob = new Blob([chunkData], { type: \"video/mp4\" });\n const timestampMs = timestampUs\n ? Math.floor(timestampUs / 1000)\n : 0;\n if (DEBUG_RECORDER) {\n debug(\"WebCodecsRecorder onChunk\", {\n size: blob.size,\n timestampUs,\n timestampMs,\n });\n }\n handleChunk(blob, timestampMs);\n },\n onError: (err) => {\n debugError(\"WebCodecsRecorder error\", err);\n markFastRecorderFailure(\"webcodecs-error\", {\n error: String(err),\n });\n chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"webcodecs-error\",\n });\n updateFreeFinalizeStatus(\"failed\", 100, String(err));\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n sendRecordingError(String(err));\n },\n onStop: async () => {\n debug(\"WebCodecsRecorder onStop()\");\n await waitForDrain();\n },\n });\n\n const ok = await recorder.current.start();\n\n debug(\"WebCodecsRecorder.start() result\", ok);\n\n if (!ok) {\n debugWarn(\n \"Falling back to MediaRecorder because WebCodecsRecorder failed\",\n );\n useWebCodecs.current = false;\n await chrome.storage.local.set({ fastRecorderInUse: false });\n await chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"start-failed\",\n });\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n recorder.current = null;\n return await startRecording();\n }\n await chrome.storage.local.set({ fastRecorderInUse: true });\n\n debugRecordingEvent(recdbgSessionRef, \"recorder-start\", {\n encoder: \"webcodecs\",\n codec: \"webcodecs\",\n width,\n height,\n fps,\n videoBitrate: videoBitsPerSecond,\n audioBitrate: hasAudioTrack ? audioBitsPerSecond : undefined,\n });\n\n setTimeout(() => {\n const afterTrack = liveStream.current?.getVideoTracks?.()[0] ?? null;\n logRecordingSnapshot(\"after-start-500ms\", {\n capture: buildTrackSnapshot(afterTrack),\n });\n debugRecordingEvent(recdbgSessionRef, \"after-start-500ms\", {\n capture: buildTrackSnapshot(afterTrack),\n });\n }, 500);\n\n setTimeout(() => {\n const afterTrack = liveStream.current?.getVideoTracks?.()[0] ?? null;\n debugRecordingEvent(recdbgSessionRef, \"after-start-1500ms\", {\n capture: buildTrackSnapshot(afterTrack),\n });\n }, 1500);\n } else {\n debug(\"Using MediaRecorder fallback\");\n useWebCodecs.current = false;\n await chrome.storage.local.set({ fastRecorderInUse: false });\n let recorderToken = 0;\n let codecFallbackTriggered = false;\n let mediaRecorderStartAt = Date.now();\n let recdbgChunkCount = 0;\n let recdbgTotalBytes = 0;\n let activeCodec = \"vp9\";\n let activeMimeType = null;\n\n try {\n // Ensure recorder.current is initialized (createMediaRecorder may\n // be used elsewhere; create a MediaRecorder here if missing).\n if (!recorder.current) {\n try {\n recorder.current = createMediaRecorder(liveStream.current, {\n audioBitsPerSecond,\n videoBitsPerSecond: videoBitsPerSecond,\n });\n debug(\"Created MediaRecorder instance for fallback\");\n } catch (initErr) {\n debugError(\"Failed to create MediaRecorder\", initErr);\n sendRecordingError(\n \"Failed to start recording: \" + String(initErr),\n );\n isStarting.current = false;\n stopTabKeepAlive();\n return;\n }\n }\n\n recorder.current.start(1000);\n debug(\"MediaRecorder.start(1000) called\");\n } catch (err) {\n debugError(\"Failed to start MediaRecorder\", err);\n sendRecordingError(\"Failed to start recording: \" + String(err));\n recorder.current = null;\n isStarting.current = false;\n stopTabKeepAlive();\n return;\n }\n\n recorder.current.onerror = (ev) => {\n debugError(\"MediaRecorder.onerror\", ev);\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"mediarecorder\",\n why: String(ev?.error || \"unknown\"),\n });\n };\n\n recorder.current.onstop = async () => {\n debug(\"MediaRecorder.onstop\");\n try {\n recorder.current.requestData();\n } catch {}\n if (isRestarting.current) return;\n await waitForDrain();\n if (!sentLast.current) {\n sentLast.current = true;\n isFinishing.current = false;\n chrome.runtime.sendMessage({ type: \"video-ready\" });\n }\n };\n\n recorder.current.ondataavailable = async (e) => {\n if (runGeneration !== recordingGeneration.current) {\n return;\n }\n if (!e || !e.data || !e.data.size) {\n debugWarn(\"MediaRecorder.ondataavailable with empty data\", e);\n if (\n recorder.current instanceof MediaRecorder &&\n recorder.current.state === \"inactive\"\n ) {\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n });\n requestStop(\"mediarecorder-empty-inactive\");\n }\n return;\n }\n\n if (DEBUG_RECORDER) {\n debug(\"MediaRecorder.ondataavailable\", {\n size: e.data.size,\n timecode: e.timecode ?? 0,\n });\n }\n\n await handleChunk(e.data, e.timecode ?? 0);\n };\n }\n } catch (err) {\n debugError(\"startRecording() top-level error\", err);\n if (useWebCodecs.current) {\n await chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"start-exception\",\n });\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n }\n sendRecordingError(String(err));\n isStarting.current = false;\n stopTabKeepAlive();\n return;\n }\n\n // Recorder created successfully — now advertise \"recording\" to the system.\n await setRecordingTimingState({\n recording: true,\n paused: false,\n recordingStartTime: recordingStartTime.current,\n pausedAt: null,\n totalPausedMs: 0,\n });\n isStarting.current = false;\n isRecording.current = true;\n startSessionHeartbeat();\n startRecordingTick();\n persistSessionState(\"recording\");\n\n if (helperAudioStream.current) {\n const track = helperAudioStream.current.getAudioTracks()[0];\n if (track) {\n track.onended = () => {\n if (isFinishing.current || !isRecording.current) return;\n // Log detailed diagnostics for debugging\n const diagnosticInfo = {\n reason: \"audio-track-ended\",\n savedChunks: savedCount.current,\n lastTimecode: lastTimecode.current,\n recordingDuration: recordingStartTime.current\n ? Date.now() - recordingStartTime.current\n : null,\n trackLabel: track?.label || null,\n trackReadyState: track?.readyState || null,\n };\n console.warn(\n \"[Recorder] Audio track ended unexpectedly\",\n diagnosticInfo,\n );\n // Notify via stream-ended-warning toast\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-ended\",\n why: chrome.i18n.getMessage(\"audioTrackEndedToast\"),\n }).catch(() => {});\n chrome.storage.local.set({\n recording: false,\n lastTrackEndEvent: diagnosticInfo,\n });\n requestStop(\"audio-track-ended\");\n };\n }\n }\n\n const liveVideoTrack = liveStream.current?.getVideoTracks?.()[0] || null;\n if (liveVideoTrack) {\n liveVideoTrack.onended = () => {\n if (isFinishing.current || !isRecording.current) return;\n const track = liveStream.current?.getVideoTracks?.()[0] || null;\n // Log detailed diagnostics for debugging\n const diagnosticInfo = {\n reason: \"liveStream-video-track-ended\",\n savedChunks: savedCount.current,\n lastTimecode: lastTimecode.current,\n recordingDuration: recordingStartTime.current\n ? Date.now() - recordingStartTime.current\n : null,\n trackLabel: track?.label || null,\n trackReadyState: track?.readyState || null,\n };\n console.warn(\"[Recorder] liveStream video track ended\", diagnosticInfo);\n // Notify via stream-ended-warning toast\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-ended\",\n why: chrome.i18n.getMessage(\"videoTrackEndedToast\"),\n }).catch(() => {});\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n lastTrackEndEvent: diagnosticInfo,\n });\n requestStop(\"live-video-track-ended\");\n };\n }\n\n const helperVideoTrack =\n helperVideoStream.current?.getVideoTracks?.()[0] || null;\n if (helperVideoTrack) {\n helperVideoTrack.onended = () => {\n if (isFinishing.current || !isRecording.current) return;\n const track = helperVideoStream.current?.getVideoTracks?.()[0] || null;\n // Log detailed diagnostics for debugging\n const diagnosticInfo = {\n reason: \"helperVideoStream-video-track-ended\",\n savedChunks: savedCount.current,\n lastTimecode: lastTimecode.current,\n recordingDuration: recordingStartTime.current\n ? Date.now() - recordingStartTime.current\n : null,\n trackLabel: track?.label || null,\n trackReadyState: track?.readyState || null,\n };\n console.warn(\n \"[Recorder] helperVideoStream video track ended\",\n diagnosticInfo,\n );\n // Notify via stream-ended-warning toast\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-ended\",\n why: chrome.i18n.getMessage(\"videoTrackEndedToast\"),\n }).catch(() => {});\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n lastTrackEndEvent: diagnosticInfo,\n });\n requestStop(\"helper-video-track-ended\");\n };\n }\n }\n\n async function warmUpStream(liveStream) {\n debug(\"warmUpStream() start\", {\n hasVideo: liveStream.getVideoTracks().length,\n hasAudio: liveStream.getAudioTracks().length,\n });\n\n const videoTrack = liveStream.getVideoTracks()[0];\n const audioTrack = liveStream.getAudioTracks()[0];\n\n await new Promise(async (resolve) => {\n const proc = new MediaStreamTrackProcessor({ track: videoTrack });\n const reader = proc.readable.getReader();\n\n while (true) {\n const { value: frame } = await reader.read();\n if (frame) {\n if (frame.codedWidth > 0 && frame.codedHeight > 0) {\n debug(\"warmUpStream() video frame OK\", {\n codedWidth: frame.codedWidth,\n codedHeight: frame.codedHeight,\n });\n frame.close();\n reader.releaseLock();\n resolve();\n break;\n }\n frame.close();\n }\n }\n });\n\n if (audioTrack) {\n await new Promise(async (resolve) => {\n const proc = new MediaStreamTrackProcessor({ track: audioTrack });\n const reader = proc.readable.getReader();\n\n while (true) {\n const { value: audio } = await reader.read();\n if (audio && audio.numberOfFrames > 0) {\n debug(\"warmUpStream() audio OK\", {\n numberOfFrames: audio.numberOfFrames,\n });\n audio.close?.();\n reader.releaseLock();\n resolve();\n break;\n }\n audio?.close?.();\n }\n });\n }\n\n debug(\"warmUpStream() done\");\n }\n\n const rebuildBlobFromChunks = async () => {\n const items = [];\n await chunksStore.ready();\n await chunksStore.iterate((value) => (items.push(value), undefined));\n items.sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0));\n const parts = items.map((c) =>\n c.chunk instanceof Blob ? c.chunk : new Blob([c.chunk]),\n );\n if (!parts.length) return null;\n const first = parts[0];\n const inferredType = first?.type || \"video/mp4\";\n return new Blob(parts, { type: inferredType });\n };\n\n const updateFreeFinalizeStatus = async (stage, percent = 0, error = null) => {\n try {\n const { fastRecorderActiveRecordingId } = await chrome.storage.local.get([\n \"fastRecorderActiveRecordingId\",\n ]);\n if (!fastRecorderActiveRecordingId) return;\n const key = `freeFinalizeStatus:${fastRecorderActiveRecordingId}`;\n const existing = await chrome.storage.local.get([key]);\n const current = existing[key];\n if (\n current &&\n (current.stage === \"ready\" || current.stage === \"chunks_ready\") &&\n (stage === \"stopping\" || stage === \"finalizing\")\n ) {\n return;\n }\n debugRecordingEvent(recdbgSessionRef, \"free-finalize-status\", {\n recordingId: fastRecorderActiveRecordingId,\n stage,\n percent,\n error: error || undefined,\n });\n await chrome.storage.local.set({\n [key]: {\n recordingId: fastRecorderActiveRecordingId,\n stage,\n percent,\n updatedAt: Date.now(),\n error: error || undefined,\n },\n });\n } catch {}\n };\n\n async function stopRecording() {\n if (isFinishing.current) {\n debugWarn(\"stopRecording() called while already finishing\");\n return;\n }\n debug(\"stopRecording()\");\n // Stop takes priority over any pending start gate.\n resetGateState();\n isFinishing.current = true;\n isRecording.current = false;\n await updateFreeFinalizeStatus(\"stopping\", 0);\n\n // Stop the session heartbeat and persist final state\n stopSessionHeartbeat();\n stopRecordingTick();\n persistSessionState(\"stopping\");\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n\n try {\n if (\n useWebCodecs.current &&\n recorder.current instanceof WebCodecsRecorder\n ) {\n debug(\"Stopping WebCodecsRecorder\");\n await updateFreeFinalizeStatus(\"finalizing\", 20);\n await recorder.current.stop();\n } else if (recorder.current instanceof MediaRecorder) {\n debug(\"Stopping MediaRecorder\");\n await updateFreeFinalizeStatus(\"finalizing\", 20);\n try {\n recorder.current.requestData();\n } catch {}\n if (recorder.current.state !== \"inactive\") {\n recorder.current.stop();\n }\n }\n } catch (err) {\n debugError(\"stopRecording() error while stopping recorder\", err);\n }\n\n await waitForDrain();\n if (!useWebCodecs.current) {\n await updateFreeFinalizeStatus(\"chunks_ready\", 100);\n }\n recorder.current = null;\n\n // Stop the silent audio keep-alive\n stopTabKeepAlive();\n\n // Clear session state after successful stop\n persistSessionState(\"completed\");\n\n if (!isRestarting.current) {\n debug(\"Stopping tracks and clearing streams\");\n slLog(\"helperVideoStream-nulling\", { path: \"stopRecording\" });\n liveStream.current?.getTracks().forEach((t) => t.stop());\n helperVideoStream.current?.getTracks().forEach((t) => t.stop());\n helperAudioStream.current?.getTracks().forEach((t) => t.stop());\n\n liveStream.current = null;\n helperVideoStream.current = null;\n helperAudioStream.current = null;\n }\n if (!useWebCodecs.current) {\n await updateFreeFinalizeStatus(\"ready\", 100);\n }\n }\n\n const dismissRecording = async () => {\n debug(\"dismissRecording()\");\n resetGateState();\n uiClosing.current = true;\n isRecording.current = false;\n\n // Clean up keep-alive and session tracking\n stopTabKeepAlive();\n stopSessionHeartbeat();\n persistSessionState(\"dismissed\");\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n\n window.close();\n };\n\n const restartRecording = async () => {\n if (isRestarting.current) {\n debugWarn(\"restartRecording() called while already restarting\");\n return false;\n }\n\n debug(\"restartRecording()\");\n recordingGeneration.current += 1;\n\n // Kill any stale start-gate timeout from the previous session.\n resetGateState();\n\n isRestarting.current = true;\n isRecording.current = false;\n sentLast.current = false;\n isFinishing.current = false;\n stopSignalSent.current = false;\n pausedStateRef.current = false;\n\n try {\n if (\n useWebCodecs.current &&\n recorder.current instanceof WebCodecsRecorder\n ) {\n debug(\"Cleaning up WebCodecsRecorder for restart\");\n recorder.current.running = false;\n recorder.current.paused = false;\n await recorder.current.cleanup();\n } else if (recorder.current instanceof MediaRecorder) {\n debug(\"Stopping MediaRecorder for restart\");\n const mediaRecorder = recorder.current;\n mediaRecorder.ondataavailable = null;\n mediaRecorder.onstop = null;\n mediaRecorder.onerror = null;\n try {\n mediaRecorder.requestData();\n } catch {}\n if (mediaRecorder.state !== \"inactive\") {\n await new Promise((resolve) => {\n let done = false;\n const finish = () => {\n if (done) return;\n done = true;\n clearTimeout(timeoutId);\n resolve();\n };\n const timeoutId = setTimeout(finish, 1600);\n try {\n mediaRecorder.addEventListener(\"stop\", finish, { once: true });\n } catch {}\n try {\n mediaRecorder.stop();\n } catch {\n finish();\n }\n });\n }\n }\n } catch (err) {\n debugError(\"Error while restarting recorder\", err);\n isRestarting.current = false;\n return false;\n }\n\n recorder.current = null;\n\n pending.current = [];\n pendingBytes.current = 0;\n draining.current = false;\n hasChunks.current = false;\n savedCount.current = 0;\n lastSize.current = 0;\n lastTimecode.current = 0;\n await chunksStore.clear();\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n\n useWebCodecs.current = false;\n\n isRestarting.current = false;\n debug(\"restartRecording() done, ready to start again\");\n slLog(\"restart-done\", {\n hasStream: !!helperVideoStream.current,\n hasPendingStart: pendingStartAfterRestart.current,\n });\n if (pendingStartAfterRestart.current) {\n pendingStartAfterRestart.current = false;\n debug(\"Processing queued start after restart\");\n requestStart();\n }\n return true;\n };\n\n async function startAudioStream(id) {\n debug(\"startAudioStream()\", { id });\n const useExact = id && id !== \"none\";\n const audioStreamOptions = {\n mimeType: \"video/webm;codecs=vp8,opus\",\n audio: useExact\n ? {\n deviceId: {\n exact: id,\n },\n }\n : true,\n };\n\n const { defaultAudioInputLabel, audioinput } =\n await chrome.storage.local.get([\"defaultAudioInputLabel\", \"audioinput\"]);\n const desiredLabel =\n defaultAudioInputLabel ||\n audioinput?.find((device) => device.deviceId === id)?.label ||\n \"\";\n\n const result = await getUserMediaWithFallback({\n constraints: audioStreamOptions,\n fallbacks:\n useExact && desiredLabel\n ? [\n {\n kind: \"audioinput\",\n desiredDeviceId: id,\n desiredLabel,\n onResolved: (resolvedId) => {\n chrome.storage.local.set({\n defaultAudioInput: resolvedId,\n defaultAudioInputLabel: desiredLabel,\n });\n },\n },\n ]\n : [],\n })\n .then((stream) => {\n debug(\"startAudioStream() got stream with exact device\", {\n hasAudio: stream.getAudioTracks().length,\n });\n return stream;\n })\n .catch((err) => {\n debugWarn(\n \"startAudioStream() exact device failed, retrying generic\",\n err,\n );\n const audioStreamOptions = {\n mimeType: \"video/webm;codecs=vp8,opus\",\n audio: true,\n };\n\n return navigator.mediaDevices\n .getUserMedia(audioStreamOptions)\n .then((stream) => {\n debug(\"startAudioStream() got generic stream\", {\n hasAudio: stream.getAudioTracks().length,\n });\n return stream;\n })\n .catch((err2) => {\n debugError(\"startAudioStream() failed completely\", err2);\n return null;\n });\n });\n\n return result;\n }\n\n function setAudioInputVolume(volume) {\n if (!audioInputGain.current) {\n debugWarn(\"setAudioInputVolume() called but audioInputGain is null\");\n return;\n }\n debug(\"setAudioInputVolume()\", volume);\n audioInputGain.current.gain.value = volume;\n }\n\n function setAudioOutputVolume(volume) {\n if (!audioOutputGain.current) {\n debugWarn(\"setAudioOutputVolume() called but audioOutputGain is null\");\n return;\n }\n debug(\"setAudioOutputVolume()\", volume);\n audioOutputGain.current.gain.value = volume;\n }\n\n const setMic = async (result) => {\n debug(\"setMic()\", result);\n if (helperAudioStream.current != null) {\n if (result.active) {\n setAudioInputVolume(1);\n } else {\n setAudioInputVolume(0);\n }\n }\n };\n\n async function startStream(data, id, options, permissions, permissions2) {\n slLog(\"startStream-enter\", {\n recordingType: data.recordingType,\n hasId: !!id,\n isTab: isTab.current,\n });\n debug(\"startStream()\", {\n recordingType: data.recordingType,\n id,\n isTab: isTab.current,\n options,\n permissions: permissions?.state,\n micPermissions: permissions2?.state,\n });\n\n const { qualityValue } = await chrome.storage.local.get([\"qualityValue\"]);\n const { isPro, maxQuality, maxFps } = await getFreeCaptureCaps();\n const effectiveQualityValue = isPro\n ? qualityValue\n : clampQualityValue(qualityValue, maxQuality);\n const { width, height } = getResolutionForQuality(effectiveQualityValue);\n\n const { fpsValue } = await chrome.storage.local.get([\"fpsValue\"]);\n let fps = parseInt(fpsValue);\n\n if (isNaN(fps)) {\n fps = 30;\n }\n if (!isPro) {\n fps = Math.min(fps, maxFps);\n }\n\n let userConstraints = {\n audio: {\n deviceId: data.defaultAudioInput,\n },\n video: {\n deviceId: data.defaultVideoInput,\n width: {\n ideal: width,\n },\n height: {\n ideal: height,\n },\n frameRate: {\n ideal: fps,\n },\n },\n };\n if (!isPro && userConstraints.video) {\n userConstraints.video = {\n ...userConstraints.video,\n width: {\n ideal: width,\n max: width,\n },\n height: {\n ideal: height,\n max: height,\n },\n };\n }\n if (permissions.state === \"denied\") {\n userConstraints.video = false;\n }\n if (permissions2.state === \"denied\") {\n userConstraints.audio = false;\n }\n\n debug(\"User media constraints\", {\n userConstraints,\n qualityValue: effectiveQualityValue,\n fps,\n });\n\n let userStream;\n if (\n permissions.state != \"denied\" &&\n permissions2.state != \"denied\" &&\n data.recordingType === \"camera\"\n ) {\n debug(\"Requesting camera userStream\");\n const {\n defaultAudioInputLabel,\n defaultVideoInputLabel,\n audioinput,\n videoinput,\n } = await chrome.storage.local.get([\n \"defaultAudioInputLabel\",\n \"defaultVideoInputLabel\",\n \"audioinput\",\n \"videoinput\",\n ]);\n const desiredAudioLabel =\n defaultAudioInputLabel ||\n audioinput?.find((device) => device.deviceId === data.defaultAudioInput)\n ?.label ||\n \"\";\n const desiredVideoLabel =\n defaultVideoInputLabel ||\n videoinput?.find((device) => device.deviceId === data.defaultVideoInput)\n ?.label ||\n \"\";\n\n const hasAudioDevice =\n data.defaultAudioInput && data.defaultAudioInput !== \"none\";\n const hasVideoDevice =\n data.defaultVideoInput && data.defaultVideoInput !== \"none\";\n const cameraConstraints = {\n ...userConstraints,\n audio:\n userConstraints.audio && hasAudioDevice\n ? {\n ...userConstraints.audio,\n deviceId: { exact: data.defaultAudioInput },\n }\n : userConstraints.audio,\n video:\n userConstraints.video && hasVideoDevice\n ? {\n ...userConstraints.video,\n deviceId: { exact: data.defaultVideoInput },\n }\n : userConstraints.video,\n };\n\n userStream = await getUserMediaWithFallback({\n constraints: cameraConstraints,\n fallbacks: [\n hasVideoDevice && desiredVideoLabel\n ? {\n kind: \"videoinput\",\n desiredDeviceId: data.defaultVideoInput,\n desiredLabel: desiredVideoLabel,\n onResolved: (resolvedId) => {\n chrome.storage.local.set({\n defaultVideoInput: resolvedId,\n defaultVideoInputLabel: desiredVideoLabel,\n });\n },\n }\n : null,\n hasAudioDevice && desiredAudioLabel\n ? {\n kind: \"audioinput\",\n desiredDeviceId: data.defaultAudioInput,\n desiredLabel: desiredAudioLabel,\n onResolved: (resolvedId) => {\n chrome.storage.local.set({\n defaultAudioInput: resolvedId,\n defaultAudioInputLabel: desiredAudioLabel,\n });\n },\n }\n : null,\n ].filter(Boolean),\n });\n debug(\"Camera userStream acquired\", {\n videoTracks: userStream.getVideoTracks().length,\n audioTracks: userStream.getAudioTracks().length,\n });\n }\n\n if (data.recordingType === \"camera\") {\n if (!userStream || typeof userStream.getVideoTracks !== \"function\") {\n debugWarn(\"Camera stream unavailable\");\n resetGateState();\n sendRecordingError(\"Camera stream unavailable\");\n return;\n }\n if (!userStream.getVideoTracks().length) {\n debugWarn(\"Camera stream has no video track\");\n resetGateState();\n sendRecordingError(\"Camera stream has no video track\");\n return;\n }\n helperVideoStream.current = userStream;\n slLog(\"helperVideoStream-assigned\", { path: \"camera\", streamId: userStream.id });\n } else {\n const constraints = {\n audio: {\n mandatory: {\n chromeMediaSource: isTab.current ? \"tab\" : \"desktop\",\n chromeMediaSourceId: id,\n },\n },\n video: {\n mandatory: {\n chromeMediaSource: isTab.current ? \"tab\" : \"desktop\",\n chromeMediaSourceId: id,\n maxWidth: width,\n maxHeight: height,\n width: { ideal: width, max: width },\n height: { ideal: height, max: height },\n maxFrameRate: fps,\n },\n },\n };\n\n debug(\"desktopCapture getUserMedia constraints\", constraints);\n slLog(\"getUserMedia-start\", { isTab: isTab.current });\n\n let stream;\n\n try {\n stream = await navigator.mediaDevices.getUserMedia(constraints);\n\n if (stream.getVideoTracks().length === 0) {\n debugError(\"No video tracks returned from getUserMedia\");\n resetGateState();\n sendRecordingError(\"No video tracks available\");\n return;\n }\n } catch (err) {\n debugError(\"Failed to get user media for desktop/tab capture\", err);\n resetGateState();\n sendRecordingError(\"Failed to get user media: \" + String(err));\n return;\n }\n\n debug(\"desktop/tab stream acquired\", {\n videoTracks: stream.getVideoTracks().length,\n audioTracks: stream.getAudioTracks().length,\n });\n slLog(\"getUserMedia-resolved\", {\n videoTracks: stream.getVideoTracks().length,\n audioTracks: stream.getAudioTracks().length,\n streamId: stream.id,\n trackState: stream.getVideoTracks()[0]?.readyState,\n });\n\n if (isTab.current) {\n const output = new AudioContext();\n const source = output.createMediaStreamSource(stream);\n source.connect(output.destination);\n debug(\"Created playback AudioContext for tab preview\");\n }\n\n helperVideoStream.current = stream;\n slLog(\"helperVideoStream-assigned\", { path: \"desktop/tab\", streamId: stream.id });\n\n const surface = stream.getVideoTracks()[0].getSettings().displaySurface;\n debug(\"Display surface\", surface);\n chrome.runtime.sendMessage({ type: \"set-surface\", surface: surface });\n }\n\n aCtx.current = new AudioContext();\n destination.current = aCtx.current.createMediaStreamDestination();\n liveStream.current = new MediaStream();\n\n const micstream = await startAudioStream(data.defaultAudioInput);\n helperAudioStream.current = micstream;\n\n if (helperAudioStream.current != null && !data.micActive) {\n setAudioInputVolume(0);\n }\n\n // System/Tab audio\n const sysTracks = helperVideoStream.current.getAudioTracks();\n debug(\"System/tab audio tracks\", sysTracks.length);\n if (sysTracks.length > 0) {\n const sysSource = aCtx.current.createMediaStreamSource(\n new MediaStream([sysTracks[0]]),\n );\n audioOutputGain.current = aCtx.current.createGain();\n sysSource.connect(audioOutputGain.current).connect(destination.current);\n }\n\n // Mic audio\n const micTracks = helperAudioStream.current?.getAudioTracks() ?? [];\n debug(\"Mic audio tracks\", micTracks.length);\n if (micTracks.length > 0) {\n const micSource = aCtx.current.createMediaStreamSource(\n new MediaStream([micTracks[0]]),\n );\n audioInputGain.current = aCtx.current.createGain();\n micSource.connect(audioInputGain.current).connect(destination.current);\n\n if (!data.micActive) {\n audioInputGain.current.gain.value = 0;\n }\n }\n\n const helperVideoTrack = helperVideoStream.current.getVideoTracks()[0];\n if (!helperVideoTrack) {\n resetGateState();\n sendRecordingError(\"Display stream missing video track\");\n return;\n }\n liveStream.current.addTrack(helperVideoTrack);\n\n const mainVideoTrack = liveStream.current?.getVideoTracks()[0];\n if (mainVideoTrack) {\n mainVideoTrack.onmute = () => {\n debugWarn(\"mainVideoTrack muted\");\n };\n mainVideoTrack.oninactive = () => {\n if (isFinishing.current || !isRecording.current) return;\n debugWarn(\"mainVideoTrack inactive → stopping recording\");\n requestStop(\"main-video-track-inactive\");\n stopRecording();\n };\n }\n if (\n (helperAudioStream.current != null &&\n helperAudioStream.current.getAudioTracks().length > 0) ||\n helperVideoStream.current.getAudioTracks().length > 0\n ) {\n const mixedAudioTrack = destination.current.stream.getAudioTracks()[0];\n if (mixedAudioTrack) {\n liveStream.current.addTrack(mixedAudioTrack);\n }\n }\n\n debug(\"liveStream ready\", {\n videoTracks: liveStream.current.getVideoTracks().length,\n audioTracks: liveStream.current.getAudioTracks().length,\n });\n\n setStarted(true);\n streamReadyAt.current = Date.now();\n slLog(\"stream-ready\", {\n streamId: helperVideoStream.current?.id,\n videoTracks: helperVideoStream.current?.getVideoTracks().length,\n trackState: helperVideoStream.current?.getVideoTracks()[0]?.readyState,\n startRequested: startRequested.current,\n });\n\n await warmUpStream(liveStream.current);\n\n slLog(\"warmUp-done\");\n chrome.runtime.sendMessage({ type: \"reset-active-tab\" });\n slLog(\"reset-active-tab-sent\");\n\n // If a start was already requested, honour it now that the stream is live.\n tryStartIfReady();\n }\n\n async function startStreaming(data) {\n debug(\"startStreaming()\", { data });\n slLog(\"startStreaming-enter\", { recordingType: data?.recordingType });\n const permissions = await navigator.permissions.query({\n name: \"camera\",\n });\n const permissions2 = await navigator.permissions.query({\n name: \"microphone\",\n });\n\n debug(\"Permissions\", {\n camera: permissions.state,\n microphone: permissions2.state,\n });\n\n try {\n if (data.recordingType === \"camera\") {\n debug(\"Streaming camera recording\");\n startStream(data, null, null, permissions, permissions2);\n } else if (!isTab.current) {\n let captureTypes = [\"screen\", \"window\", \"tab\", \"audio\"];\n if (tabPreferred.current) {\n captureTypes = [\"tab\", \"screen\", \"window\", \"audio\"];\n }\n debug(\"desktopCapture.chooseDesktopMedia\", {\n captureTypes,\n tabPreferred: tabPreferred.current,\n });\n slLog(\"chooseDesktopMedia-show\");\n chrome.desktopCapture.chooseDesktopMedia(\n captureTypes,\n null,\n (streamId, options) => {\n slLog(\"chooseDesktopMedia-picked\", { hasStreamId: !!streamId });\n debug(\"chooseDesktopMedia callback\", { streamId, options });\n if (\n streamId === undefined ||\n streamId === null ||\n streamId === \"\"\n ) {\n debugWarn(\"User cancelled the desktop capture modal\");\n resetGateState();\n sendRecordingError(\"User cancelled the modal\", true);\n return;\n } else {\n startStream(data, streamId, options, permissions, permissions2);\n }\n },\n );\n } else {\n const tabStreamId = await waitForTabStreamId();\n debug(\"Streaming with pre-resolved tabID\", tabStreamId);\n if (!tabStreamId) {\n resetGateState();\n sendRecordingError(\"Unable to resolve tab stream id\", true);\n return;\n }\n startStream(data, tabStreamId, null, permissions, permissions2);\n }\n } catch (err) {\n debugError(\"startStreaming() error\", err);\n resetGateState();\n sendRecordingError(\"Failed to start streaming: \" + String(err), true);\n }\n }\n\n useEffect(() => {\n chrome.storage.local.get([\"tabPreferred\"], (result) => {\n tabPreferred.current = result.tabPreferred;\n debug(\"Loaded tabPreferred\", tabPreferred.current);\n });\n }, []);\n\n const getStreamID = async (id) => {\n debug(\"getStreamID()\", id);\n const streamId = await chrome.tabCapture.getMediaStreamId({\n targetTabId: id,\n });\n debug(\"Resolved tabCapture streamId\", streamId);\n tabID.current = streamId;\n };\n\n const waitForTabStreamId = async () => {\n if (tabID.current) return tabID.current;\n for (let i = 0; i < 30; i += 1) {\n await new Promise((resolve) => setTimeout(resolve, 100));\n if (tabID.current) return tabID.current;\n }\n return null;\n };\n\n // Cleanup on component unmount\n useEffect(() => {\n return () => {\n debug(\"Component unmounting - cleaning up\");\n slLog(\"component-unmount\", {\n hadStream: !!helperVideoStream.current,\n started,\n startRequested: startRequested.current,\n });\n resetGateState();\n stopTabKeepAlive();\n stopSessionHeartbeat();\n };\n }, []);\n\n useEffect(() => {\n const handleClose = (e) => {\n debug(\"beforeunload event\", {\n uiClosing: uiClosing.current,\n isRecording: isRecording.current,\n });\n if (uiClosing.current || !isRecording.current) return;\n\n // Stop recording - note: beforeunload can't reliably wait for async\n // The keep-alive and session state will help with recovery if needed\n stopRecording();\n\n e.preventDefault();\n e.returnValue = \"\";\n };\n\n window.addEventListener(\"beforeunload\", handleClose);\n return () => {\n debug(\"Removing beforeunload handler\");\n window.removeEventListener(\"beforeunload\", handleClose);\n };\n }, []);\n\n // Message handler — registered once on mount; uses refs so closure stays fresh.\n const onMessageRef = useRef(null);\n onMessageRef.current = (request, sender, sendResponse) => {\n if (DEBUG_RECORDER) {\n debug(\"onMessage()\", request.type, { request, sender });\n }\n\n if (request.type === \"loaded\") {\n slLog(\"msg-loaded\");\n backupRef.current = request.backup;\n if (!tabPreferred.current) {\n isTab.current = request.isTab;\n if (request.isTab) {\n getStreamID(request.tabID);\n }\n } else {\n isTab.current = false;\n }\n chrome.runtime.sendMessage({ type: \"get-streaming-data\" });\n } else if (request.type === \"streaming-data\") {\n slLog(\"msg-streaming-data\");\n startStreaming(JSON.parse(request.data));\n } else if (request.type === \"start-recording-tab\") {\n slLog(\"msg-start-recording-tab\", {\n hasStream: !!helperVideoStream.current,\n streamReady: getStreamReadiness(),\n isRestarting: isRestarting.current,\n docHidden: document.hidden,\n docVisibility: document.visibilityState,\n });\n // Request start via the readiness gate.\n requestStart();\n } else if (request.type === \"restart-recording-tab\") {\n if (isRestarting.current) {\n sendResponse?.({ ok: false, error: \"restart-in-progress\" });\n return true;\n }\n pendingStartAfterRestart.current = false;\n Promise.resolve(restartRecording())\n .then((restarted) => {\n if (!restarted) {\n sendResponse?.({ ok: false, error: \"restart-teardown-failed\" });\n return;\n }\n sendResponse?.({ ok: true, restarted: true });\n })\n .catch((error) => {\n sendResponse?.({\n ok: false,\n error: error?.message || String(error),\n });\n });\n return true;\n } else if (request.type === \"stop-recording-tab\") {\n stopRecording();\n sendResponse?.({ ok: true });\n return true;\n } else if (request.type === \"set-mic-active-tab\") {\n setMic(request);\n } else if (request.type === \"set-audio-output-volume\") {\n setAudioOutputVolume(request.volume);\n } else if (request.type === \"pause-recording-tab\") {\n if (!recorder.current) return;\n if (pausedStateRef.current) return;\n if (\n useWebCodecs.current &&\n recorder.current instanceof WebCodecsRecorder\n ) {\n debug(\"Pausing WebCodecsRecorder\");\n recorder.current.pause();\n } else if (recorder.current instanceof MediaRecorder) {\n debug(\"Pausing MediaRecorder\");\n recorder.current.pause();\n }\n const now = Date.now();\n pausedStateRef.current = true;\n void setRecordingTimingState({\n paused: true,\n pausedAt: now,\n });\n } else if (request.type === \"resume-recording-tab\") {\n if (!recorder.current) return;\n if (!pausedStateRef.current) return;\n if (\n useWebCodecs.current &&\n recorder.current instanceof WebCodecsRecorder\n ) {\n debug(\"Resuming WebCodecsRecorder\");\n recorder.current.resume();\n } else if (recorder.current instanceof MediaRecorder) {\n debug(\"Resuming MediaRecorder\");\n recorder.current.resume();\n }\n const now = Date.now();\n pausedStateRef.current = false;\n void (async () => {\n try {\n const { pausedAt, totalPausedMs } = await chrome.storage.local.get([\n \"pausedAt\",\n \"totalPausedMs\",\n ]);\n const additional = pausedAt ? Math.max(0, now - pausedAt) : 0;\n await setRecordingTimingState({\n paused: false,\n pausedAt: null,\n totalPausedMs: (totalPausedMs || 0) + additional,\n });\n } catch (err) {\n debugWarn(\"Failed to update resume timing state\", err);\n }\n })();\n } else if (request.type === \"dismiss-recording\") {\n dismissRecording();\n }\n };\n\n // Stable wrapper — delegates to the ref so the listener never changes.\n useEffect(() => {\n const stableHandler = (request, sender, sendResponse) => {\n return onMessageRef.current?.(request, sender, sendResponse);\n };\n debug(\"Adding chrome.runtime.onMessage listener (stable)\");\n slLog(\"listener-add\");\n chrome.runtime.onMessage.addListener(stableHandler);\n\n return () => {\n debug(\"Removing chrome.runtime.onMessage listener (stable)\");\n slLog(\"listener-remove\");\n chrome.runtime.onMessage.removeListener(stableHandler);\n };\n }, []);\n\n return (\n <>\n \n {process.env.SCREENITY_DEV_MODE === \"true\" && (\n \n DEV\n \n )}\n \n );\n};\n\nexport default Recorder;\n" }, { "path": "src/pages/Recorder/RecorderUI.jsx", "content": "// RecorderUI.jsx\nimport React from \"react\";\nimport Warning from \"./warning/Warning\";\n\nconst RecorderUI = ({ started, isTab }) => {\n return (\n
\n \n
\n \n
\n {!started\n ? chrome.i18n.getMessage(\"recorderSelectTitle\")\n : chrome.i18n.getMessage(\"recorderSelectProgressTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"recorderSelectDescription\")}\n
\n
\n\n {!isTab && !started && }\n\n
\n\n \n
\n );\n};\n\nexport default RecorderUI;\n" }, { "path": "src/pages/Recorder/index.html", "content": "\n\n \n \n \n\n Screenity - Recorder\n \n \n\n \n
\n \n\n" }, { "path": "src/pages/Recorder/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Recorder from \"./Recorder\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Recorder/mediaRecorderUtils.js", "content": "import { MIME_TYPES } from \"./recorderConfig\";\n\nexport function createMediaRecorder(\n stream,\n { audioBitsPerSecond, videoBitsPerSecond }\n) {\n const mimeType = MIME_TYPES.find((type) =>\n MediaRecorder.isTypeSupported(type)\n );\n\n if (!mimeType) {\n throw new Error(\"❌ No supported MIME types found\");\n }\n\n return new MediaRecorder(stream, {\n mimeType,\n audioBitsPerSecond,\n videoBitsPerSecond,\n });\n}\n" }, { "path": "src/pages/Recorder/messaging.js", "content": "import { classifyError } from \"../utils/errorCodes\";\n\nexport function sendRecordingError(why, cancel = false) {\n const errorType = !cancel ? \"stream-error\" : \"cancel-modal\";\n const whyStr = typeof why === \"string\" ? why : JSON.stringify(why);\n const errorCode = classifyError(whyStr, errorType);\n\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: errorType,\n why: whyStr,\n errorCode,\n });\n}\n\nexport function sendStopRecording(reason = \"generic\", extra = {}) {\n chrome.runtime.sendMessage({\n type: \"stop-recording-tab\",\n reason,\n ...extra,\n });\n}\n" }, { "path": "src/pages/Recorder/recorderConfig.js", "content": "export const MIME_TYPES = [\n \"video/webm;codecs=vp9,opus\",\n \"video/webm;codecs=vp8,opus\",\n \"video/webm;codecs=h264\",\n \"video/webm\",\n \"video/mp4\",\n \"video/webm;codecs=avc1\",\n];\n\nexport function getBitrates(quality) {\n switch (quality) {\n case \"4k\":\n return { audio: 192000, video: 20000000 };\n case \"1080p\":\n return { audio: 128000, video: 8000000 };\n case \"720p\":\n return { audio: 128000, video: 5000000 };\n case \"480p\":\n return { audio: 96000, video: 3000000 };\n case \"360p\":\n return { audio: 96000, video: 1500000 };\n case \"240p\":\n return { audio: 64000, video: 1000000 };\n default:\n return { audio: 128000, video: 8000000 };\n }\n}\nexport const VIDEO_QUALITIES = {\n \"4k\": { width: 4096, height: 2160 },\n \"1080p\": { width: 1920, height: 1080 },\n \"720p\": { width: 1280, height: 720 },\n \"480p\": { width: 854, height: 480 },\n \"360p\": { width: 640, height: 360 },\n \"240p\": { width: 426, height: 240 },\n default: { width: 1920, height: 1080 },\n};\n\nexport function getResolutionForQuality(qualityValue = \"default\") {\n return VIDEO_QUALITIES[qualityValue] || VIDEO_QUALITIES.default;\n}\n" }, { "path": "src/pages/Recorder/warning/Warning.jsx", "content": "import React, {\n useState,\n useEffect,\n useContext,\n useCallback,\n useRef,\n} from \"react\";\n\nimport { ReactSVG } from \"react-svg\";\n\nimport * as ToastEl from \"@radix-ui/react-toast\";\n\nconst Warning = () => {\n const [open, setOpen] = useState(false);\n const [title, setTitle] = useState(\"Record computer audio\");\n const [description, setDescription] = useState(\"\");\n const [duration, setDuration] = useState(10000);\n\n const openWarning = useCallback((title, description, duration) => {\n setTitle(title);\n setDescription(description);\n setDuration(duration);\n setOpen(true);\n }, []);\n\n useEffect(() => {\n // Check if macOS\n const isMac = navigator.userAgent.indexOf(\"Mac\") !== -1;\n if (isMac) {\n openWarning(\n chrome.i18n.getMessage(\"recordAudioWarningMacTitle\"),\n chrome.i18n.getMessage(\"recordAudioWarningMacDescription\"),\n 10000\n );\n } else {\n openWarning(\n chrome.i18n.getMessage(\"recordAudioWarningOtherTitle\"),\n chrome.i18n.getMessage(\"recordAudioWarningOtherDescription\"),\n 10000\n );\n }\n }, []);\n\n return (\n \n {\n setOpen(false);\n }}\n >\n
\n \n
\n
\n {title}\n \n {description}\n \n
\n {\n setOpen(false);\n }}\n >\n \n \n \n \n \n \n );\n};\n\nexport default Warning;\n" }, { "path": "src/pages/Recorder/webcodecs/Mp4MuxerWrapper.ts", "content": "/*!\n * Screenity WebCodecs Recorder - MP4 Muxer Wrapper\n * Licensed under the GNU GPLv3.\n */\n// @ts-nocheck\n\nimport {\n Output,\n Mp4OutputFormat,\n BufferTarget,\n EncodedVideoPacketSource,\n EncodedAudioPacketSource,\n EncodedPacket,\n} from \"mediabunny\";\n\ninterface Mp4MuxerWrapperOptions {\n width: number;\n height: number;\n fps: number;\n videoBitrate: number;\n audioBitrate: number;\n videoCodec?: string;\n audioCodec?: string;\n onChunk: (chunk: Uint8Array, timestampUs: number | null) => void | Promise;\n debug?: boolean;\n}\n\nexport class Mp4MuxerWrapper {\n private output: Output;\n private target: BufferTarget;\n\n private videoSource: EncodedVideoPacketSource;\n private audioSource: EncodedAudioPacketSource | null = null;\n\n private videoCodec: string;\n private audioCodec: string;\n private pausedOffsetUs = 0;\n private started = false;\n\n private videoTimestampOffsetUs: number | null = null;\n private audioTimestampOffsetUs: number | null = null;\n private lastVideoTimestampUs = 0;\n private lastAudioTimestampUs = 0;\n\n private _lastDecoderConfig: any = null;\n\n private debug: boolean;\n private log: (...args: any[]) => void;\n private warn: (...args: any[]) => void;\n private err: (...args: any[]) => void;\n\n constructor(private options: Mp4MuxerWrapperOptions) {\n this.debug = options.debug ?? false;\n\n this.log = (...args) => this.debug && console.log(...args);\n this.warn = (...args) => this.debug && console.warn(...args);\n this.err = (...args) => this.debug && console.error(...args);\n\n this.videoCodec = options.videoCodec || \"avc\";\n this.audioCodec = options.audioCodec || \"aac\";\n\n this.target = new BufferTarget();\n this.output = new Output({\n format: new Mp4OutputFormat({\n fastStart: false, // metadata at end, more compatible\n }),\n target: this.target,\n });\n\n this.videoSource = new EncodedVideoPacketSource(this.videoCodec);\n this.output.addVideoTrack(this.videoSource, {\n frameRate: this.options.fps,\n });\n }\n\n enableAudio() {\n if (!this.audioSource) {\n this.log(\"[MUXER] enableAudio\");\n this.audioSource = new EncodedAudioPacketSource(this.audioCodec);\n this.output.addAudioTrack(this.audioSource);\n }\n }\n\n addVideoChunk(chunk: EncodedVideoChunk, meta: any) {\n if (meta?.decoderConfig) {\n this._lastDecoderConfig = meta.decoderConfig;\n }\n\n // Meta is read-only — supply cached decoderConfig when the chunk lacks one.\n const effectiveMeta =\n !meta?.decoderConfig && this._lastDecoderConfig\n ? { ...meta, decoderConfig: this._lastDecoderConfig }\n : meta;\n\n const packet = this.buildPacket(chunk, effectiveMeta, \"video\");\n return this.videoSource.add(packet, effectiveMeta);\n }\n\n addAudioChunk(chunk: EncodedAudioChunk, meta: any) {\n if (!this.audioSource) return;\n\n const packet = this.buildPacket(chunk, meta, \"audio\");\n return this.audioSource.add(packet, meta);\n }\n\n async start() {\n if (this.started) return;\n this.log(\"[MUXER] start\");\n await this.output.start();\n this.started = true;\n }\n\n async finalize() {\n this.log(\"[MUXER] finalize\");\n await this.output.finalize();\n\n const data = this.target.buffer;\n if (data?.byteLength) {\n this.log(\"[MUXER] emitting final file\", data.byteLength, \"bytes\");\n this.emitChunk(new Uint8Array(data), null);\n }\n }\n\n // No-op: WebCodecsRecorder already subtracts paused time from timestamps,\n // so a second subtraction here would break monotonicity. Kept for API compat.\n setPausedOffset(_offsetUs: number) {}\n\n setAudioOffset(offsetUs: number) {\n this.audioTimestampOffsetUs = offsetUs;\n }\n\n private emitChunk(chunk: Uint8Array, timestampUs: number | null) {\n try {\n const res = this.options.onChunk?.(chunk, timestampUs ?? null);\n if (res instanceof Promise) {\n res.catch((err) => this.err(\"[MUXER] onChunk rejected\", err));\n }\n } catch (err) {\n this.err(\"[MUXER] onChunk error\", err);\n }\n }\n\n private buildPacket(\n chunk: EncodedVideoChunk | EncodedAudioChunk,\n meta: any,\n type: \"video\" | \"audio\"\n ) {\n const data = new Uint8Array(chunk.byteLength);\n chunk.copyTo(data);\n\n const tsUs = this.normalizeTimestamp(type, chunk.timestamp, chunk.duration || 0);\n const durSec = (chunk.duration || 0) / 1e6;\n\n return new EncodedPacket(data, chunk.type, tsUs / 1e6, durSec);\n }\n\n private normalizeTimestamp(\n type: \"video\" | \"audio\",\n timestampUs?: number,\n durationUs = 0\n ) {\n const key = type === \"video\" ? \"lastVideoTimestampUs\" : \"lastAudioTimestampUs\";\n const last = (this as any)[key] ?? 0;\n\n if (type === \"audio\") {\n // Audio ts is already monotonic from WebCodecsRecorder's sample counter.\n // Just accumulate for logging.\n const next = last + durationUs;\n (this as any)[key] = next;\n this.log(`[MUX] audio ts +${durationUs} => ${next}`);\n return next;\n }\n\n if (typeof timestampUs !== \"number\") {\n const fallback = last + durationUs;\n (this as any)[key] = fallback;\n this.warn(\"[MUX] video missing ts, fallback:\", fallback);\n return fallback;\n }\n\n // Pin offset to the first frame so output starts at 0.\n // Don't subtract pausedOffsetUs — WebCodecsRecorder already excludes\n // paused time, and double-subtracting breaks monotonicity.\n if (this.videoTimestampOffsetUs == null) {\n this.videoTimestampOffsetUs = timestampUs;\n }\n\n const relative = Math.max(\n 0,\n timestampUs - this.videoTimestampOffsetUs\n );\n\n (this as any)[key] = relative;\n this.log(`[MUX] video ts => ${relative}`);\n\n return relative;\n }\n}" }, { "path": "src/pages/Recorder/webcodecs/WebCodecsRecorder.js", "content": "/*!\n * Screenity WebCodecs Recorder\n * Copyright (c) 2025 Serial Labs Ltd.\n *\n * Licensed under the GNU GPLv3.\n * See the LICENSE file for full details.\n *\n * MP4 recording using WebCodecs + MediaBunny.\n * Handles H.264 video, AAC audio, timestamp safety,\n * canvas resizing, pause/resume, and chunked output.\n */\nimport { Mp4MuxerWrapper } from \"./Mp4MuxerWrapper\";\n\nexport class WebCodecsRecorder {\n constructor(stream, options) {\n this.stream = stream;\n this.options = options;\n\n this.debug = options.debug ?? false;\n this.log = (...args) => this.debug && console.log(...args);\n this.warn = (...args) => this.debug && console.warn(...args);\n this.err = (...args) => this.debug && console.error(...args);\n\n this.videoTrack = null;\n this.audioTrack = null;\n\n this.videoProcessor = null;\n this.audioProcessor = null;\n\n this.videoReader = null;\n this.audioReader = null;\n\n this.videoEncoder = null;\n this.audioEncoder = null;\n\n this.muxer = null;\n\n this.running = false;\n\n this.actualWidth = 0;\n this.actualHeight = 0;\n\n this.targetWidth = 0;\n this.targetHeight = 0;\n\n this.videoTimestampOffsetUs = null;\n this.videoFallbackStartMs = null;\n this.selectedVideoCodec = null;\n this.firstVideoFrame = undefined;\n this.frameCount = 0;\n // Monotonic video frame index for safe timestamps\n this._videoFrameIndex = 0;\n this._videoStartUs = null;\n this._frameDurationUs = null;\n\n this.audioSamplesWritten = 0;\n this.audioSampleRate = null;\n\n this.resizeCanvas = null;\n this.resizeCtx = null;\n\n this.justResumed = false;\n this.paused = false;\n this.pauseStartUs = null;\n this.totalPausedDurationUs = 0;\n\n this._startPromise = null;\n this._startResolve = null;\n\n this._prebufferedAudio = [];\n this._audioReady = false;\n\n this._stopping = false;\n this._videoLoopPromise = null;\n this._audioLoopPromise = null;\n }\n\n async _probeRealResolution() {\n const processor = new MediaStreamTrackProcessor({ track: this.videoTrack });\n const reader = processor.readable.getReader();\n\n const { value: frame } = await reader.read();\n if (!frame) throw new Error(\"Cannot probe frame resolution\");\n\n const width = frame.codedWidth;\n const height = frame.codedHeight;\n\n this.log(\"[WCR] Probed resolution:\", width, \"x\", height);\n frame.close();\n reader.releaseLock();\n\n return { width, height };\n }\n\n async start() {\n this.videoTimestampOffsetUs = null;\n this.firstVideoFrame = undefined;\n this._stopping = false;\n this._videoFrameIndex = 0;\n this._videoStartUs = null;\n this._frameDurationUs = null;\n this.audioSamplesWritten = 0;\n\n if (this.running) return this._startPromise;\n\n this._startPromise = new Promise((resolve) => {\n this._startResolve = resolve;\n });\n\n this.running = true;\n try {\n this.videoTrack = this.stream.getVideoTracks()[0] || null;\n this.audioTrack = this.stream.getAudioTracks()[0] || null;\n\n this.log(\n \"[WCR] videoTrack\",\n this.videoTrack,\n \"state=\",\n this.videoTrack?.readyState\n );\n this.log(\n \"[WCR] audioTrack\",\n this.audioTrack,\n \"state=\",\n this.audioTrack?.readyState\n );\n\n if (!this.videoTrack) {\n const err = new Error(\"WebCodecsRecorder: No video track\");\n this.options.onError?.(err);\n this.running = false;\n\n if (this._startResolve) {\n this._startResolve(false);\n this._startResolve = null;\n }\n\n this._startPromise = null;\n return false;\n }\n\n try {\n const { width, height } = await this._probeRealResolution();\n this.actualWidth = width;\n this.actualHeight = height;\n\n let targetWidth = Math.min(width, 1920);\n let targetHeight = Math.round((height / width) * targetWidth);\n if (targetHeight > 1080) {\n targetHeight = 1080;\n targetWidth = Math.round((width / height) * targetHeight);\n }\n this.targetWidth = targetWidth;\n this.targetHeight = targetHeight;\n\n this.log(\"[WCR] Target:\", this.targetWidth, \"x\", this.targetHeight);\n\n const fps = this.options.fps || 30;\n this._frameDurationUs = Math.round(1_000_000 / fps);\n const safeBitrate = this.options.videoBitrate || 10_000_000;\n\n const overrideConfig =\n this.options.videoEncoderConfig && typeof this.options.videoEncoderConfig === \"object\"\n ? this.options.videoEncoderConfig\n : null;\n\n let videoConfig = null;\n if (overrideConfig) {\n const config = {\n ...overrideConfig,\n width: this.targetWidth,\n height: this.targetHeight,\n };\n this.log(\"[WCR] Using override encoder config\", config);\n try {\n // Verify override is still supported at runtime\n const support = await VideoEncoder.isConfigSupported(config);\n if (support?.supported) {\n videoConfig = {\n config: support.config || config,\n codec: (support.config || config).codec || overrideConfig.codec,\n containerCodec: \"avc\",\n };\n }\n } catch (err) {\n this.warn(\"[WCR] Override config unsupported\", err);\n }\n }\n\n if (!videoConfig) {\n videoConfig = await this.chooseVideoEncoderConfig({\n width: this.targetWidth,\n height: this.targetHeight,\n fps,\n bitrate: safeBitrate,\n });\n }\n this.selectedVideoCodec = videoConfig.codec;\n\n const audioConfig = await this.prepareAudioEncoderConfig();\n this._pendingAudioConfig = audioConfig;\n\n this.log(\"[WCR] Audio config:\", audioConfig);\n\n if (!audioConfig) {\n this.warn(\"[WCR] No audio available\");\n this.options.audioBitrate = undefined;\n this.options.enableAudio = false;\n this._audioReady = false;\n }\n\n if (audioConfig && this.audioTrack) {\n this.audioProcessor = new MediaStreamTrackProcessor({\n track: this.audioTrack,\n });\n this.audioReader = this.audioProcessor.readable.getReader();\n }\n\n // Init audio encoder first so _audioReady=true when both loops\n // launch together — avoids audio prebuffering before video starts.\n if (this._pendingAudioConfig) {\n await this.initAudioEncoder(this._pendingAudioConfig);\n this._audioReady = true;\n }\n\n this.videoProcessor = new MediaStreamTrackProcessor({\n track: this.videoTrack,\n });\n this.videoReader = this.videoProcessor.readable.getReader();\n\n this.log(\"[WCR] creating muxer...\");\n this.muxer = new Mp4MuxerWrapper({\n width: this.targetWidth,\n height: this.targetHeight,\n fps,\n videoBitrate: this.options.videoBitrate,\n audioBitrate: this.options.audioBitrate,\n videoCodec: videoConfig.containerCodec,\n audioCodec: this.options.enableAudio ? \"aac\" : undefined,\n onChunk: this.options.onChunk,\n });\n\n if (this.options.enableAudio) {\n this.muxer.enableAudio();\n }\n\n await this.muxer.start();\n this.log(\"[WCR] muxer started\");\n\n await this.initVideoEncoder(videoConfig.config, videoConfig.codec);\n\n await Promise.resolve();\n\n setTimeout(() => {\n // Start both loops together so t=0 is aligned.\n this._videoLoopPromise = this.readVideoLoop();\n if (this.audioReader && this.options.enableAudio) {\n this.log(\"[WCR] start audio loop (aligned with video)\");\n this._audioLoopPromise = this.readAudioLoop();\n }\n\n if (this._startResolve) {\n this._startResolve(true);\n this._startResolve = null;\n }\n }, 30);\n\n this.log(\"[WCR] start() done\");\n } catch (err) {\n this.err(\"[WCR] start() failed:\", err);\n this.options.onError?.(err);\n this.running = false;\n this.cleanup();\n\n if (this._startResolve) {\n this._startResolve(false);\n this._startResolve = null;\n }\n }\n } catch (err) {\n this.err(\"[WCR] start() outer error:\", err);\n this.options.onError?.(err);\n this.running = false;\n this.cleanup();\n\n if (this._startResolve) {\n this._startResolve(false);\n this._startResolve = null;\n }\n }\n\n return this._startPromise;\n }\n\n async stop() {\n this.log(\"[WCR] stop()\", this.frameCount);\n\n if (this._stopping) {\n this.log(\"[WCR] stop() already in progress\");\n return;\n }\n this._stopping = true;\n\n if (!this.running) {\n this.log(\"[WCR] stop() called but recorder not running\");\n this._stopping = false;\n return;\n }\n\n // Soft stop: let loops finish current work\n this.running = false;\n this.paused = true;\n\n try {\n const loopPromises = [];\n if (this._videoLoopPromise) loopPromises.push(this._videoLoopPromise);\n if (this._audioLoopPromise) loopPromises.push(this._audioLoopPromise);\n\n if (loopPromises.length) {\n this.log(\"[WCR] Waiting for read loops to finish before flush...\");\n await Promise.race([\n Promise.allSettled(loopPromises),\n new Promise((res) => setTimeout(res, 500)), // safety timeout\n ]);\n }\n } catch (err) {\n this.err(\"[WCR] Error while waiting for loops:\", err);\n }\n\n try {\n if (this.videoEncoder && this.videoEncoder.state !== \"closed\") {\n await this.videoEncoder.flush();\n }\n if (this.audioEncoder && this.audioEncoder.state !== \"closed\") {\n await this.audioEncoder.flush();\n }\n } catch (err) {\n this.err(\"[WCR] flush error:\", err);\n this.options.onError?.(err);\n }\n\n try {\n if (this.muxer) {\n await this.muxer.finalize();\n if (this.options.onFinalized) {\n await this.options.onFinalized();\n }\n }\n } catch (err) {\n this.err(\"[WCR] muxer.finalize:\", err);\n this.options.onError?.(err);\n }\n\n this.cleanup();\n\n if (this.options.onStop) {\n await this.options.onStop();\n }\n\n this._stopping = false;\n }\n\n pause() {\n if (!this.running || this.paused) return;\n this.paused = true;\n this.pauseStartUs = performance.now() * 1000;\n }\n\n resume() {\n if (!this.running || !this.paused) return;\n\n const nowUs = performance.now() * 1000;\n this.totalPausedDurationUs += nowUs - this.pauseStartUs;\n\n this.paused = false;\n this.justResumed = true;\n this.muxer?.setPausedOffset(this.totalPausedDurationUs);\n }\n\n cleanup() {\n this.log(\"[WCR] cleanup\");\n\n try {\n this.videoReader?.releaseLock();\n } catch {}\n try {\n this.audioReader?.releaseLock();\n } catch {}\n\n try {\n this.videoEncoder?.close();\n } catch {}\n try {\n this.audioEncoder?.close();\n } catch {}\n\n // Release any AudioData objects that were queued before the audio encoder\n // was ready. If encoder init failed, these would otherwise be held in\n // memory indefinitely because readAudioLoop never drained the buffer.\n for (const item of this._prebufferedAudio) {\n try { item.close?.(); } catch {}\n }\n this._prebufferedAudio = [];\n\n this.videoProcessor = null;\n this.audioProcessor = null;\n this.videoReader = null;\n this.audioReader = null;\n this.videoEncoder = null;\n this.audioEncoder = null;\n this.videoTrack = null;\n this.audioTrack = null;\n\n this.videoTimestampOffsetUs = null;\n this.videoFallbackStartMs = null;\n this.firstVideoFrame = undefined;\n this.selectedVideoCodec = null;\n this._videoFrameIndex = 0;\n this._videoStartUs = null;\n this._frameDurationUs = null;\n this.audioSamplesWritten = 0;\n this.audioSampleRate = null;\n\n this.resizeCanvas = null;\n this.resizeCtx = null;\n this._startPromise = null;\n this._startResolve = null;\n\n this._videoLoopPromise = null;\n this._audioLoopPromise = null;\n }\n\n async initVideoEncoder(config, codecLabel) {\n this.log(\"[WCR] initVideoEncoder()\", codecLabel);\n\n this.videoEncoder = new VideoEncoder({\n output: (chunk, meta) => {\n this.muxer.addVideoChunk(chunk, meta);\n },\n error: (err) => {\n this.err(\"[WCR] VideoEncoder error:\", err);\n this.options.onError?.(err);\n },\n });\n\n this.videoEncoder.configure(config);\n this.log(\"[WCR] VideoEncoder configured\");\n }\n\n async initAudioEncoder(config) {\n if (!config) return;\n\n this.audioEncoder = new AudioEncoder({\n output: (chunk, meta) => {\n if (this.debug) this.log(\"[WCR] AUDIO\");\n this.muxer.addAudioChunk(chunk, meta);\n },\n error: (err) => {\n this.err(\"[WCR] AudioEncoder error:\", err);\n this.options.onError?.(err);\n },\n });\n\n this.audioEncoder.configure(config);\n }\n\n async prepareAudioEncoderConfig() {\n if (!this.audioTrack) return null;\n\n const settings = this.audioTrack.getSettings();\n const sampleRate = settings.sampleRate || 48000;\n const numberOfChannels = settings.channelCount || 2;\n\n const candidateConfig = {\n codec: \"mp4a.40.2\",\n sampleRate,\n numberOfChannels,\n bitrate: this.options.audioBitrate || 128000,\n };\n\n try {\n const support = await AudioEncoder.isConfigSupported(candidateConfig);\n if (!support.supported) {\n this.warn(\"[WCR] AAC unsupported\");\n return null;\n }\n this.audioSampleRate = support.config?.sampleRate || candidateConfig.sampleRate;\n return support.config || candidateConfig;\n } catch {\n this.warn(\"[WCR] AAC probe failed\");\n return null;\n }\n }\n\n async chooseVideoEncoderConfig({ width, height, fps, bitrate }) {\n const base = {\n width,\n height,\n framerate: fps,\n bitrate,\n bitrateMode: \"constant\",\n latencyMode: \"realtime\",\n };\n\n const candidates = [\n { codec: \"avc1.64002A\", containerCodec: \"avc\", hw: \"prefer-hardware\" },\n { codec: \"avc1.4D401F\", containerCodec: \"avc\", hw: \"prefer-hardware\" },\n { codec: \"avc1.42E01E\", containerCodec: \"avc\", hw: \"prefer-hardware\" },\n { codec: \"avc1.64002A\", containerCodec: \"avc\", hw: \"prefer-software\" },\n { codec: \"avc1.4D401F\", containerCodec: \"avc\", hw: \"prefer-software\" },\n { codec: \"avc1.42E01E\", containerCodec: \"avc\", hw: \"prefer-software\" },\n ];\n\n for (const c of candidates) {\n const config = { ...base, codec: c.codec, hardwareAcceleration: c.hw };\n try {\n const test = new VideoEncoder({\n output() {},\n error() {},\n });\n test.configure(config);\n test.close();\n this.log(\"[WCR] Selected encoder:\", c.codec, c.hw);\n return {\n config,\n codec: c.codec,\n containerCodec: c.containerCodec,\n };\n } catch (e) {}\n }\n throw new Error(\"WebCodecsRecorder: No supported H.264 encoder\");\n }\n\n async readVideoLoop() {\n this.log(\"[WCR] video loop start\");\n if (!this.videoReader || !this.videoEncoder) return;\n\n const ensureResizeCanvas = () => {\n if (!this.resizeCanvas) {\n this.resizeCanvas = document.createElement(\"canvas\");\n this.resizeCanvas.width = this.targetWidth;\n this.resizeCanvas.height = this.targetHeight;\n this.resizeCtx = this.resizeCanvas.getContext(\"2d\");\n this.log(\"[WCR] resize canvas created\");\n }\n };\n\n try {\n while (this.running) {\n if (this.paused) {\n await new Promise((r) => setTimeout(r, 10));\n continue;\n }\n\n const { value: frame, done } = await this.videoReader\n .read()\n .catch(() => ({ done: true }));\n\n if (done || !frame) break;\n\n if (frame.codedWidth === 0 || frame.codedHeight === 0) {\n this.warn(\"[WCR] zero-size frame\");\n this.options.onError?.({ type: \"video-lost\" });\n }\n\n ensureResizeCanvas();\n\n this.resizeCtx.drawImage(\n frame,\n 0,\n 0,\n this.targetWidth,\n this.targetHeight\n );\n\n if (!this._videoStartUs) this._videoStartUs = performance.now() * 1000;\n\n const nowUs = performance.now() * 1000;\n const elapsedUs = Math.max(\n 0,\n nowUs - this._videoStartUs - (this.totalPausedDurationUs || 0)\n );\n const frameDurationUs = this._frameDurationUs || Math.round(1_000_000 / 30);\n const targetIndex = Math.max(0, Math.floor(elapsedUs / frameDurationUs));\n\n // If we're ahead of wall-clock, drop this frame.\n if (targetIndex < this._videoFrameIndex) {\n frame.close();\n continue;\n }\n\n // If the tab was hidden or the system was heavily loaded, we can end\n // up many frames behind wall-clock. Filling the entire gap in one\n // iteration would create hundreds of VideoFrames synchronously and\n // overflow the encoder's internal queue. Instead, skip ahead to at\n // most MAX_GAP_FRAMES behind the target so the burst is bounded.\n // The skipped indices advance _videoFrameIndex, preventing repeated\n // catch-up attempts on the next iteration.\n const MAX_GAP_FRAMES = 8; // ≈ 267 ms at 30 fps\n const gap = targetIndex - this._videoFrameIndex;\n if (gap > MAX_GAP_FRAMES) {\n this.warn(`[WCR] skipping ${gap - MAX_GAP_FRAMES} frames (tab gap)`);\n this._videoFrameIndex = targetIndex - MAX_GAP_FRAMES;\n }\n\n const startIndex = this._videoFrameIndex;\n const endIndex = targetIndex;\n for (let i = startIndex; i <= endIndex; i += 1) {\n const tsUs = i * frameDurationUs;\n const resized = new VideoFrame(this.resizeCanvas, {\n timestamp: tsUs,\n duration: frameDurationUs,\n });\n\n const keyFrame = i === 0 || (this.justResumed && i === startIndex);\n if (this.justResumed && i === startIndex) {\n this.justResumed = false;\n }\n\n this.videoEncoder.encode(resized, {\n timestamp: tsUs,\n keyFrame,\n });\n if (this.debug && (this.frameCount < 5 || this.frameCount % 300 === 0)) {\n this.log(\"[WCR] video pts\", {\n frame: this.frameCount,\n tsUs,\n durUs: frameDurationUs,\n targetIndex,\n });\n }\n this.frameCount++;\n this._videoFrameIndex = i + 1;\n resized.close();\n }\n\n frame.close();\n }\n } catch (err) {\n this.err(\"[WCR] video loop error:\", err);\n }\n\n this.log(\"[WCR] video loop exit\", this.frameCount);\n }\n\n async readAudioLoop() {\n while (this.paused && this.running) {\n await new Promise((r) => setTimeout(r, 10));\n }\n if (!this.audioReader) return;\n this.log(\"[WCR] audio loop start\");\n\n const encodeAudioData = (audioData) => {\n const sampleRate =\n audioData.sampleRate || this.audioSampleRate || 48000;\n const frames =\n typeof audioData.numberOfFrames === \"number\"\n ? audioData.numberOfFrames\n : 0;\n const tsUs = Math.round(\n (this.audioSamplesWritten * 1_000_000) / sampleRate\n );\n const durUs = Math.round((frames * 1_000_000) / sampleRate);\n\n this.audioEncoder.encode(audioData, {\n timestamp: tsUs,\n });\n this.audioSamplesWritten += frames;\n\n if (this.debug && (this.audioSamplesWritten === frames || this.audioSamplesWritten % (sampleRate * 10) < frames)) {\n this.log(\"[WCR] audio pts\", {\n samples: this.audioSamplesWritten,\n tsUs,\n durUs,\n sampleRate,\n });\n }\n };\n\n try {\n while (this.running) {\n const { value: audioData, done } = await this.audioReader\n .read()\n .catch(() => ({ done: true }));\n\n if (done || !audioData) break;\n if (!this.audioTrack || this.audioTrack.readyState === \"ended\") {\n this.warn(\"[WCR] audio lost\");\n this.options.onError?.({ type: \"audio-lost\" });\n break;\n }\n\n if (!this._audioReady) {\n this._prebufferedAudio.push(audioData);\n continue;\n }\n\n // Drop audio data while the recording is paused. The sample counter\n // is not advanced, so audio timestamps resume from the correct\n // active-recording position when resume() is called — keeping audio\n // and video aligned across any number of pause/resume cycles.\n if (this.paused) {\n audioData.close?.();\n continue;\n }\n\n try {\n if (this._prebufferedAudio.length) {\n while (this._prebufferedAudio.length) {\n const buffered = this._prebufferedAudio.shift();\n try {\n encodeAudioData(buffered);\n } finally {\n buffered.close?.();\n }\n }\n }\n encodeAudioData(audioData);\n } catch (err) {\n audioData.close?.();\n this.options.onError?.(err);\n break;\n }\n\n audioData.close?.();\n }\n } catch (err) {\n this.err(\"[WCR] audio loop error:\", err);\n }\n\n this.log(\"[WCR] audio loop exit\");\n }\n}\n" }, { "path": "src/pages/RecorderOffscreen/RecorderOffscreen.jsx", "content": "import React, { useEffect, useState, useRef, useCallback } from \"react\";\nimport localforage from \"localforage\";\nimport { getUserMediaWithFallback } from \"../utils/mediaDeviceFallback\";\n\nlocalforage.config({\n driver: localforage.INDEXEDDB,\n name: \"screenity\",\n version: 1,\n});\n\n// Get chunks store\nconst chunksStore = localforage.createInstance({\n name: \"chunks\",\n});\n\nconst RecorderOffscreen = () => {\n const isRestarting = useRef(false);\n const isFinishing = useRef(false);\n const sentLast = useRef(false);\n const lastSize = useRef(0);\n const index = useRef(0);\n const lastTimecode = useRef(0);\n const hasChunks = useRef(false);\n const pausedStateRef = useRef(false);\n\n const [started, setStarted] = useState(false);\n\n // Main stream (recording)\n const liveStream = useRef(null);\n\n // Helper streams\n const helperVideoStream = useRef(null);\n const helperAudioStream = useRef(null);\n\n // Audio controls, with refs to persist across renders\n const aCtx = useRef(null);\n const destination = useRef(null);\n const audioInputSource = useRef(null);\n const audioOutputSource = useRef(null);\n const audioInputGain = useRef(null);\n const audioOutputGain = useRef(null);\n\n const recorder = useRef(null);\n\n const isTab = useRef(false);\n const tabID = useRef(null);\n const quality = useRef(\"1080p\");\n const fps = useRef(30);\n const backupRef = useRef(false);\n\n const pending = useRef([]);\n const draining = useRef(false);\n const lowStorageAbort = useRef(false);\n const savedCount = useRef(0);\n\n const lastEstimateAt = useRef(0);\n const ESTIMATE_INTERVAL_MS = 5000;\n const MIN_HEADROOM = 25 * 1024 * 1024;\n const MAX_PENDING_BYTES = 8 * 1024 * 1024;\n const pendingBytes = useRef(0);\n\n const setRecordingTimingState = async (nextState) => {\n try {\n await chrome.storage.local.set(nextState);\n } catch (err) {\n console.warn(\n \"[RecorderOffscreen] Failed to persist recording timing state\",\n err,\n );\n }\n };\n\n async function canFitChunk(byteLength) {\n const now = performance.now();\n if (now - lastEstimateAt.current < ESTIMATE_INTERVAL_MS) {\n return !lowStorageAbort.current;\n }\n lastEstimateAt.current = now;\n\n try {\n const { usage = 0, quota = 0 } = await navigator.storage.estimate();\n const remaining = quota - usage;\n return remaining > MIN_HEADROOM + (byteLength || 0);\n } catch {\n return !lowStorageAbort.current;\n }\n }\n\n async function saveChunk(e, i) {\n const ts = e.timecode ?? 0;\n\n if (\n savedCount.current > 0 &&\n ts === lastTimecode.current &&\n e.data.size === lastSize.current\n ) {\n return false;\n }\n\n if (!(await canFitChunk(e.data.size))) {\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n });\n chrome.runtime.sendMessage({ type: \"stop-recording-tab\" });\n return false;\n }\n\n try {\n await chunksStore.setItem(`chunk_${i}`, {\n index: i,\n chunk: e.data,\n timestamp: ts,\n });\n } catch (err) {\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n });\n chrome.runtime.sendMessage({ type: \"stop-recording-tab\" });\n return false;\n }\n\n lastTimecode.current = ts;\n lastSize.current = e.data.size;\n savedCount.current += 1;\n\n if (backupRef.current) {\n chrome.runtime.sendMessage({ type: \"write-file\", index: i });\n }\n return true;\n }\n\n async function drainQueue() {\n if (draining.current) return;\n draining.current = true;\n\n try {\n while (pending.current.length) {\n if (lowStorageAbort.current) {\n pending.current.length = 0;\n pendingBytes.current = 0;\n break;\n }\n\n const e = pending.current.shift();\n pendingBytes.current -= e.data.size;\n\n if (!(await canFitChunk(e.data.size))) {\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n });\n chrome.runtime.sendMessage({ type: \"stop-recording-tab\" });\n pending.current.length = 0;\n pendingBytes.current = 0;\n break;\n }\n\n const i = index.current;\n const saved = await saveChunk(e, i);\n if (saved) index.current = i + 1;\n }\n } finally {\n draining.current = false;\n }\n }\n\n async function waitForDrain() {\n while (draining.current || pending.current.length) {\n await new Promise((r) => setTimeout(r, 10));\n }\n }\n // End FLAG\n\n async function startRecording() {\n // Check that a recording is not already in progress\n if (recorder.current !== null) return;\n navigator.storage.persist();\n // Check if the stream actually has data in it\n if (helperVideoStream.current.getVideoTracks().length === 0) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"No video tracks available\",\n });\n return;\n }\n\n chunksStore.clear();\n\n lastTimecode.current = 0;\n lastSize.current = 0;\n hasChunks.current = false;\n savedCount.current = 0;\n pending.current = [];\n draining.current = false;\n lowStorageAbort.current = false;\n pendingBytes.current = 0;\n\n try {\n const qualityValue = quality.current;\n\n let audioBitsPerSecond = 128000;\n let videoBitsPerSecond = 5000000;\n\n if (qualityValue === \"4k\") {\n audioBitsPerSecond = 192000;\n videoBitsPerSecond = 40000000;\n } else if (qualityValue === \"1080p\") {\n audioBitsPerSecond = 192000;\n videoBitsPerSecond = 8000000;\n } else if (qualityValue === \"720p\") {\n audioBitsPerSecond = 128000;\n videoBitsPerSecond = 5000000;\n } else if (qualityValue === \"480p\") {\n audioBitsPerSecond = 96000;\n videoBitsPerSecond = 2500000;\n } else if (qualityValue === \"360p\") {\n audioBitsPerSecond = 96000;\n videoBitsPerSecond = 1000000;\n } else if (qualityValue === \"240p\") {\n audioBitsPerSecond = 64000;\n videoBitsPerSecond = 500000;\n }\n\n // List all mimeTypes\n const mimeTypes = [\n \"video/webm;codecs=avc1\",\n \"video/webm;codecs=vp8,opus\",\n \"video/webm;codecs=vp9,opus\",\n \"video/webm;codecs=vp9\",\n \"video/webm;codecs=vp8\",\n \"video/webm;codecs=h264\",\n \"video/webm\",\n ];\n\n // Check if the browser supports any of the mimeTypes, make sure to select the first one that is supported from the list\n let mimeType = mimeTypes.find((mimeType) =>\n MediaRecorder.isTypeSupported(mimeType),\n );\n\n // If no mimeType is supported, throw an error\n if (!mimeType) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"No supported mimeTypes available\",\n });\n return;\n }\n\n recorder.current = new MediaRecorder(liveStream.current, {\n mimeType: mimeType,\n audioBitsPerSecond: audioBitsPerSecond,\n videoBitsPerSecond: videoBitsPerSecond,\n });\n } catch (err) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: String(err),\n });\n return;\n }\n\n isRestarting.current = false;\n index.current = 0;\n\n try {\n recorder.current.start(1000);\n } catch (err) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: String(err),\n });\n return;\n }\n\n const recordingStartTime = Date.now();\n await setRecordingTimingState({\n recording: true,\n paused: false,\n recordingStartTime,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n chrome.storage.local.set({\n recording: true,\n restarting: false,\n });\n\n recorder.current.onerror = (ev) => {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"mediarecorder\",\n why: String(ev?.error || \"unknown\"),\n });\n };\n\n recorder.current.onstop = async () => {\n if (isRestarting.current) return;\n await waitForDrain();\n if (!sentLast.current) {\n sentLast.current = true;\n isFinishing.current = false;\n chrome.runtime.sendMessage({ type: \"video-ready\" });\n }\n };\n\n recorder.current.ondataavailable = (e) => {\n if (!e || !e.data || !e.data.size) {\n if (recorder.current && recorder.current.state === \"inactive\") {\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n });\n chrome.runtime.sendMessage({ type: \"stop-recording-tab\" });\n }\n return;\n }\n\n if (lowStorageAbort.current) {\n return;\n }\n\n if (!hasChunks.current) {\n hasChunks.current = true;\n lastTimecode.current = e.timecode ?? 0;\n lastSize.current = e.data.size;\n }\n\n pending.current.push(e);\n pendingBytes.current += e.data.size;\n void drainQueue();\n };\n\n recorder.current.onpause = () => {\n lastTimecode.current = 0;\n lastSize.current = 0;\n };\n\n recorder.current.onresume = () => {\n lastTimecode.current = 0;\n lastSize.current = 0;\n };\n\n liveStream.current.getVideoTracks()[0].onended = () => {\n const track = liveStream.current?.getVideoTracks()[0];\n // Log detailed diagnostics for debugging\n const diagnosticInfo = {\n reason: \"liveStream-video-track-ended-offscreen\",\n savedChunks: savedCount.current,\n lastTimecode: lastTimecode.current,\n trackLabel: track?.label || null,\n trackReadyState: track?.readyState || null,\n };\n console.warn(\n \"[RecorderOffscreen] liveStream video track ended\",\n diagnosticInfo,\n );\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n lastTrackEndEvent: diagnosticInfo,\n });\n chrome.runtime.sendMessage({\n type: \"stop-recording-tab\",\n reason: \"video-track-ended\",\n });\n };\n\n helperVideoStream.current.getVideoTracks()[0].onended = () => {\n const track = helperVideoStream.current?.getVideoTracks()[0];\n // Log detailed diagnostics for debugging\n const diagnosticInfo = {\n reason: \"helperVideoStream-video-track-ended-offscreen\",\n savedChunks: savedCount.current,\n lastTimecode: lastTimecode.current,\n trackLabel: track?.label || null,\n trackReadyState: track?.readyState || null,\n };\n console.warn(\n \"[RecorderOffscreen] helperVideoStream video track ended\",\n diagnosticInfo,\n );\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n lastTrackEndEvent: diagnosticInfo,\n });\n chrome.runtime.sendMessage({\n type: \"stop-recording-tab\",\n reason: \"video-track-ended\",\n });\n };\n }\n\n async function stopRecording() {\n isFinishing.current = true;\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n if (recorder.current) {\n try {\n recorder.current.requestData();\n } catch {}\n recorder.current.stop();\n await waitForDrain();\n recorder.current = null;\n }\n\n if (liveStream.current) {\n liveStream.current.getTracks().forEach((t) => t.stop());\n liveStream.current = null;\n }\n\n if (helperVideoStream.current) {\n helperVideoStream.current.getTracks().forEach((t) => t.stop());\n helperVideoStream.current = null;\n }\n\n if (helperAudioStream.current) {\n helperAudioStream.current.getTracks().forEach((t) => t.stop());\n helperAudioStream.current = null;\n }\n }\n\n const dismissRecording = async () => {\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n isRestarting.current = true;\n if (recorder.current !== null) {\n recorder.current.stop();\n recorder.current = null;\n }\n window.close();\n };\n\n const restartRecording = async () => {\n if (isRestarting.current) return false;\n isRestarting.current = true;\n pausedStateRef.current = false;\n if (recorder.current !== null && recorder.current.state !== \"inactive\") {\n await new Promise((resolve) => {\n let done = false;\n const finish = () => {\n if (done) return;\n done = true;\n clearTimeout(timeoutId);\n resolve();\n };\n const timeoutId = setTimeout(finish, 1600);\n try {\n recorder.current.addEventListener(\"stop\", finish, { once: true });\n } catch {}\n try {\n recorder.current.stop();\n } catch {\n finish();\n }\n });\n }\n recorder.current = null;\n pending.current = [];\n pendingBytes.current = 0;\n await chunksStore.clear();\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n isRestarting.current = false;\n return true;\n };\n\n async function startAudioStream(id) {\n const useExact = id && id !== \"none\";\n const audioStreamOptions = {\n mimeType: \"video/webm;codecs=vp8,opus\",\n audio: useExact\n ? {\n deviceId: {\n exact: id,\n },\n }\n : true,\n };\n\n const { defaultAudioInputLabel, audioinput } =\n await chrome.storage.local.get([\"defaultAudioInputLabel\", \"audioinput\"]);\n const desiredLabel =\n defaultAudioInputLabel ||\n audioinput?.find((device) => device.deviceId === id)?.label ||\n \"\";\n\n const result = await getUserMediaWithFallback({\n constraints: audioStreamOptions,\n fallbacks:\n useExact && desiredLabel\n ? [\n {\n kind: \"audioinput\",\n desiredDeviceId: id,\n desiredLabel,\n onResolved: (resolvedId) => {\n chrome.storage.local.set({\n defaultAudioInput: resolvedId,\n defaultAudioInputLabel: desiredLabel,\n });\n },\n },\n ]\n : [],\n })\n .then((stream) => {\n return stream;\n })\n .catch((err) => {\n // Try again without the device ID\n const audioStreamOptions = {\n mimeType: \"video/webm;codecs=vp8,opus\",\n audio: true,\n };\n\n return navigator.mediaDevices\n .getUserMedia(audioStreamOptions)\n .then((stream) => {\n return stream;\n })\n .catch((err) => {\n return null;\n });\n });\n\n return result;\n }\n // Set audio input volume\n function setAudioInputVolume(volume) {\n audioInputGain.current.gain.value = volume;\n }\n\n // Set audio output volume\n function setAudioOutputVolume(volume) {\n audioOutputGain.current.gain.value = volume;\n }\n\n async function startStreaming(data) {\n // Get quality value\n const qualityValue = quality.current;\n\n let width = 1920;\n let height = 1080;\n\n if (qualityValue === \"4k\") {\n width = 4096;\n height = 2160;\n } else if (qualityValue === \"1080p\") {\n width = 1920;\n height = 1080;\n } else if (qualityValue === \"720p\") {\n width = 1280;\n height = 720;\n } else if (qualityValue === \"480p\") {\n width = 854;\n height = 480;\n } else if (qualityValue === \"360p\") {\n width = 640;\n height = 360;\n } else if (qualityValue === \"240p\") {\n width = 426;\n height = 240;\n }\n\n const fpsValue = fps.current;\n let fpsVal = parseInt(fpsValue);\n\n // Check if fps is a number\n if (isNaN(fpsVal)) {\n fpsVal = 30;\n }\n // Check user permissions for camera and microphone individually\n const permissions = await navigator.permissions.query({\n name: \"camera\",\n });\n const permissions2 = await navigator.permissions.query({\n name: \"microphone\",\n });\n\n try {\n let userConstraints = {\n audio: {\n deviceId: data.defaultAudioInput,\n },\n video: {\n deviceId: data.defaultVideoInput,\n width: {\n ideal: width,\n },\n height: {\n ideal: height,\n },\n frameRate: {\n ideal: fpsVal,\n },\n },\n };\n if (permissions.state === \"denied\") {\n userConstraints.video = false;\n }\n if (permissions2.state === \"denied\") {\n userConstraints.audio = false;\n }\n\n let userStream;\n\n if (\n permissions.state != \"denied\" &&\n permissions2.state != \"denied\" &&\n data.recordingType === \"camera\"\n ) {\n const {\n defaultAudioInputLabel,\n defaultVideoInputLabel,\n audioinput,\n videoinput,\n } = await chrome.storage.local.get([\n \"defaultAudioInputLabel\",\n \"defaultVideoInputLabel\",\n \"audioinput\",\n \"videoinput\",\n ]);\n const desiredAudioLabel =\n defaultAudioInputLabel ||\n audioinput?.find(\n (device) => device.deviceId === data.defaultAudioInput,\n )?.label ||\n \"\";\n const desiredVideoLabel =\n defaultVideoInputLabel ||\n videoinput?.find(\n (device) => device.deviceId === data.defaultVideoInput,\n )?.label ||\n \"\";\n\n const hasAudioDevice =\n data.defaultAudioInput && data.defaultAudioInput !== \"none\";\n const hasVideoDevice =\n data.defaultVideoInput && data.defaultVideoInput !== \"none\";\n const cameraConstraints = {\n ...userConstraints,\n audio:\n userConstraints.audio && hasAudioDevice\n ? {\n ...userConstraints.audio,\n deviceId: { exact: data.defaultAudioInput },\n }\n : userConstraints.audio,\n video:\n userConstraints.video && hasVideoDevice\n ? {\n ...userConstraints.video,\n deviceId: { exact: data.defaultVideoInput },\n }\n : userConstraints.video,\n };\n\n userStream = await getUserMediaWithFallback({\n constraints: cameraConstraints,\n fallbacks: [\n hasVideoDevice && desiredVideoLabel\n ? {\n kind: \"videoinput\",\n desiredDeviceId: data.defaultVideoInput,\n desiredLabel: desiredVideoLabel,\n onResolved: (resolvedId) => {\n chrome.storage.local.set({\n defaultVideoInput: resolvedId,\n defaultVideoInputLabel: desiredVideoLabel,\n });\n },\n }\n : null,\n hasAudioDevice && desiredAudioLabel\n ? {\n kind: \"audioinput\",\n desiredDeviceId: data.defaultAudioInput,\n desiredLabel: desiredAudioLabel,\n onResolved: (resolvedId) => {\n chrome.storage.local.set({\n defaultAudioInput: resolvedId,\n defaultAudioInputLabel: desiredAudioLabel,\n });\n },\n }\n : null,\n ].filter(Boolean),\n });\n }\n\n // Create an audio context, destination, and stream\n aCtx.current = new AudioContext();\n destination.current = aCtx.current.createMediaStreamDestination();\n liveStream.current = new MediaStream();\n\n const micstream = await startAudioStream(data.defaultAudioInput);\n\n // Save the helper streams\n if (data.recordingType === \"camera\") {\n helperVideoStream.current = userStream;\n } else {\n let stream;\n if (isTab.current === true) {\n stream = await navigator.mediaDevices.getUserMedia({\n audio: {\n mandatory: {\n chromeMediaSource: \"tab\",\n chromeMediaSourceId: tabID.current,\n },\n },\n video: {\n mandatory: {\n chromeMediaSource: \"tab\",\n chromeMediaSourceId: tabID.current,\n maxWidth: width,\n maxHeight: height,\n maxFrameRate: fpsVal,\n },\n },\n });\n\n // Check if the stream actually has data in it\n if (stream.getVideoTracks().length === 0) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"No video tracks available\",\n });\n return;\n }\n } else {\n stream = await navigator.mediaDevices.getDisplayMedia({\n audio: data.systemAudio,\n video: {\n frameRate: fpsVal,\n displaySurface: \"monitor\",\n },\n selfBrowserSurface: \"exclude\",\n systemAudio: \"include\",\n });\n\n // Check if the stream actually has data in it\n if (stream.getVideoTracks().length === 0) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"No video tracks available\",\n });\n return;\n }\n }\n helperVideoStream.current = stream;\n\n const surface = stream.getVideoTracks()[0].getSettings().displaySurface;\n chrome.runtime.sendMessage({ type: \"set-surface\", surface: surface });\n }\n helperAudioStream.current = micstream;\n\n // Check if micstream has an audio track\n if (\n helperAudioStream.current != null &&\n helperAudioStream.current.getAudioTracks().length > 0\n ) {\n audioInputGain.current = aCtx.current.createGain();\n audioInputSource.current = aCtx.current.createMediaStreamSource(\n helperAudioStream.current,\n );\n audioInputSource.current\n .connect(audioInputGain.current)\n .connect(destination.current);\n } else {\n // No microphone available\n }\n\n if (helperAudioStream.current != null && !data.micActive) {\n setAudioInputVolume(0);\n }\n\n // Check if stream has an audio track\n if (helperVideoStream.current.getAudioTracks().length > 0) {\n audioOutputGain.current = aCtx.current.createGain();\n audioOutputSource.current = aCtx.current.createMediaStreamSource(\n helperVideoStream.current,\n );\n audioOutputSource.current\n .connect(audioOutputGain.current)\n .connect(destination.current);\n } else {\n // No system audio available\n }\n\n // Add the tracks to the stream\n liveStream.current.addTrack(\n helperVideoStream.current.getVideoTracks()[0],\n );\n if (\n (helperAudioStream.current != null &&\n helperAudioStream.current.getAudioTracks().length > 0) ||\n helperVideoStream.current.getAudioTracks().length > 0\n ) {\n liveStream.current.addTrack(\n destination.current.stream.getAudioTracks()[0],\n );\n }\n\n // Send message to go back to the previously active tab\n setStarted(true);\n chrome.runtime.sendMessage({ type: \"reset-active-tab\" });\n } catch (err) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"cancel-modal\",\n why: String(err),\n });\n }\n }\n\n const setMic = async (result) => {\n if (helperAudioStream.current != null) {\n if (result.active) {\n setAudioInputVolume(1);\n } else {\n setAudioInputVolume(0);\n }\n } else {\n // No microphone available\n }\n };\n\n const onMessage = useCallback(\n (request, sender, sendResponse) => {\n if (request.type === \"loaded\") {\n backupRef.current = request.backup;\n isTab.current = request.isTab;\n quality.current = request.quality;\n fps.current = request.fps;\n if (request.isTab) {\n tabID.current = request.tabID;\n }\n chrome.runtime.sendMessage({ type: \"get-streaming-data\" });\n }\n if (request.type === \"streaming-data\") {\n startStreaming(JSON.parse(request.data));\n } else if (request.type === \"start-recording-tab\") {\n startRecording();\n } else if (request.type === \"restart-recording-tab\") {\n Promise.resolve(restartRecording())\n .then((restarted) => {\n if (!restarted) {\n sendResponse?.({ ok: false, error: \"restart-teardown-failed\" });\n return;\n }\n sendResponse?.({ ok: true, restarted: true });\n })\n .catch((error) => {\n sendResponse?.({\n ok: false,\n error: error?.message || String(error),\n });\n });\n return true;\n } else if (request.type === \"stop-recording-tab\") {\n stopRecording();\n sendResponse?.({ ok: true });\n return true;\n } else if (request.type === \"set-mic-active-tab\") {\n setMic(request);\n } else if (request.type === \"set-audio-output-volume\") {\n setAudioOutputVolume(request.volume);\n } else if (request.type === \"pause-recording-tab\") {\n if (!recorder.current) return;\n if (pausedStateRef.current) return;\n const now = Date.now();\n recorder.current.pause();\n pausedStateRef.current = true;\n void setRecordingTimingState({\n paused: true,\n pausedAt: now,\n });\n } else if (request.type === \"resume-recording-tab\") {\n if (!recorder.current) return;\n if (!pausedStateRef.current) return;\n recorder.current.resume();\n const now = Date.now();\n pausedStateRef.current = false;\n void (async () => {\n try {\n const { pausedAt, totalPausedMs } = await chrome.storage.local.get([\n \"pausedAt\",\n \"totalPausedMs\",\n ]);\n const additional = pausedAt ? Math.max(0, now - pausedAt) : 0;\n await setRecordingTimingState({\n paused: false,\n pausedAt: null,\n totalPausedMs: (totalPausedMs || 0) + additional,\n });\n } catch (err) {\n console.warn(\n \"[RecorderOffscreen] Failed to update resume timing state\",\n err,\n );\n }\n })();\n } else if (request.type === \"play-beep-offscreen\") {\n // Reuse this offscreen document for beep sounds so Chrome doesn't\n // need to create a second offscreen document (only one is allowed).\n try {\n const audioUrl = chrome.runtime.getURL(\"assets/sounds/beep.mp3\");\n const audio = new Audio(audioUrl);\n audio.volume = 0.5;\n audio.play().catch(() => {});\n } catch {}\n sendResponse?.({ ok: true });\n return true;\n } else if (request.type === \"dismiss-recording\") {\n dismissRecording();\n }\n },\n [recorder.current],\n );\n\n useEffect(() => {\n // Event listener (extension messaging)\n chrome.runtime.onMessage.addListener(onMessage);\n\n return () => {\n chrome.runtime.onMessage.removeListener(onMessage);\n };\n }, []);\n\n return
;\n};\n\nexport default RecorderOffscreen;\n" }, { "path": "src/pages/RecorderOffscreen/index.html", "content": "\n\n \n \n \n \n\n \n
\n \n\n" }, { "path": "src/pages/RecorderOffscreen/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport RecorderOffscreen from \"./RecorderOffscreen\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Region/Recorder.jsx", "content": "import React, { useEffect, useRef, useCallback } from \"react\";\nimport { getUserMediaWithFallback } from \"../utils/mediaDeviceFallback\";\nimport { WebCodecsRecorder } from \"../Recorder/webcodecs/WebCodecsRecorder\";\nimport {\n debugRecordingEvent,\n resetRecordingDebugSession,\n isRecordingDebugEnabled,\n hydrateRecordingDebugFlag,\n} from \"../utils/recordingDebug\";\nimport {\n probeFastRecorderSupport,\n shouldUseFastRecorder,\n getFastRecorderStickyState,\n markFastRecorderFailure,\n validateFastRecorderOutputBlob,\n} from \"../../media/fastRecorderGate\";\n\nimport localforage from \"localforage\";\n\nlocalforage.config({\n driver: localforage.INDEXEDDB,\n name: \"screenity\",\n version: 1,\n});\n\n// Get chunks store\nconst chunksStore = localforage.createInstance({\n name: \"chunks\",\n});\n\n// Debug flag for logging\n// window.SCREENITY_DEBUG_RECORDER = true;\nconst DEBUG_RECORDER =\n typeof window !== \"undefined\" ? !!window.SCREENITY_DEBUG_RECORDER : false;\nconst logPrefix = \"[Screenity Region Recorder]\";\n\nfunction debug(...args) {\n if (!DEBUG_RECORDER) return;\n // eslint-disable-next-line no-console\n console.log(logPrefix, ...args);\n}\n\nfunction debugWarn(...args) {\n if (!DEBUG_RECORDER) return;\n // eslint-disable-next-line no-console\n console.warn(logPrefix, ...args);\n}\n\nfunction debugError(...args) {\n if (!DEBUG_RECORDER) return;\n // eslint-disable-next-line no-console\n console.error(logPrefix, ...args);\n}\n\nfunction buildTrackSnapshot(track) {\n if (!track) return null;\n const settings =\n typeof track.getSettings === \"function\" ? track.getSettings() : {};\n const constraints =\n typeof track.getConstraints === \"function\" ? track.getConstraints() : {};\n const capabilities =\n typeof track.getCapabilities === \"function\" ? track.getCapabilities() : {};\n return {\n label: track.label,\n settings,\n constraints,\n capabilities,\n };\n}\n\nfunction logRecordingSnapshot(label, data) {\n if (!DEBUG_RECORDER && !isRecordingDebugEnabled()) return;\n debug(`Recording snapshot: ${label}`, data);\n}\n\nconst selectMimeType = (preferredCodec) => {\n const preferred = (preferredCodec || \"\").toLowerCase();\n const mimeTypes = [\n \"video/webm;codecs=vp9,opus\",\n \"video/webm;codecs=vp9\",\n \"video/webm;codecs=vp8,opus\",\n \"video/webm;codecs=vp8\",\n \"video/webm;codecs=avc1\",\n \"video/webm;codecs=h264\",\n \"video/webm\",\n ];\n const ordered = preferred\n ? mimeTypes\n .filter((type) => type.includes(preferred))\n .concat(mimeTypes.filter((type) => !type.includes(preferred)))\n : mimeTypes;\n return ordered.find((type) => MediaRecorder.isTypeSupported(type)) || null;\n};\n\nconst getCodecLabel = (mimeType) => {\n if (!mimeType) return \"unknown\";\n if (mimeType.includes(\"vp9\")) return \"vp9\";\n if (mimeType.includes(\"vp8\")) return \"vp8\";\n if (mimeType.includes(\"avc1\") || mimeType.includes(\"h264\")) return \"h264\";\n return \"unknown\";\n};\n\nconst Recorder = () => {\n const isRestarting = useRef(false);\n const isDismissing = useRef(false);\n const isFinishing = useRef(false);\n const isFinished = useRef(false);\n const sentLast = useRef(false);\n const index = useRef(0);\n const lastTimecode = useRef(0);\n const hasChunks = useRef(false);\n const lastSize = useRef(0);\n const pausedStateRef = useRef(false);\n const recordingStartTimeRef = useRef(null);\n const recordingTick = useRef(null);\n\n // Main stream (recording)\n const liveStream = useRef(null);\n\n // Helper streams\n const helperVideoStream = useRef(null);\n const helperAudioStream = useRef(null);\n const startRetryTimer = useRef(null);\n const startRetryAttempts = useRef(0);\n\n // Audio controls, with refs to persist across renders\n const aCtx = useRef(null);\n const destination = useRef(null);\n const audioInputSource = useRef(null);\n const audioOutputSource = useRef(null);\n const audioInputGain = useRef(null);\n const audioOutputGain = useRef(null);\n\n const recorder = useRef(null);\n const useWebCodecs = useRef(false);\n const recdbgSessionRef = useRef(null);\n\n // Target\n const target = useRef(null);\n\n // Recording ref\n const recordingRef = useRef();\n const regionRef = useRef();\n const backupRef = useRef(false);\n\n const pending = useRef([]);\n const draining = useRef(false);\n const lowStorageAbort = useRef(false);\n const savedCount = useRef(0);\n\n const lastEstimateAt = useRef(0);\n const ESTIMATE_INTERVAL_MS = 5000;\n const MIN_HEADROOM = 25 * 1024 * 1024;\n const MAX_PENDING_BYTES = 8 * 1024 * 1024;\n const pendingBytes = useRef(0);\n const recordingIdRef = useRef(null);\n\n const clearStartRetry = () => {\n if (startRetryTimer.current) {\n clearTimeout(startRetryTimer.current);\n startRetryTimer.current = null;\n }\n startRetryAttempts.current = 0;\n };\n\n const persistRegionStartDebug = (payload) => {\n try {\n chrome.storage.local.set({\n lastRegionStartFailure: {\n ts: Date.now(),\n ...payload,\n },\n });\n } catch {}\n };\n\n const setRegionRestartPhase = async (phase, details = {}) => {\n try {\n await chrome.storage.local.set({\n lastRegionRestartPhase: {\n phase,\n ts: Date.now(),\n ...details,\n },\n });\n } catch {}\n };\n\n const sendStopWithReason = (reason) => {\n chrome.runtime.sendMessage({ type: \"stop-recording-tab\", reason });\n };\n\n const setRecordingTimingState = async (nextState) => {\n try {\n await chrome.storage.local.set(nextState);\n } catch (err) {\n console.warn(\n \"[Region Recorder] Failed to persist recording timing state\",\n err,\n );\n }\n };\n\n const startRecordingTick = () => {\n if (recordingTick.current) clearInterval(recordingTick.current);\n recordingTick.current = setInterval(async () => {\n if (!recordingStartTimeRef.current) return;\n const { totalPausedMs, pausedAt, paused } =\n await chrome.storage.local.get([\"totalPausedMs\", \"pausedAt\", \"paused\"]);\n const now = Date.now();\n const basePaused = Number(totalPausedMs) || 0;\n const extraPaused =\n paused && pausedAt ? Math.max(0, now - Number(pausedAt)) : 0;\n const elapsed = Math.max(\n 0,\n now - recordingStartTimeRef.current - basePaused - extraPaused,\n );\n chrome.storage.local.set({ recordingNow: now, recordingDuration: elapsed });\n }, 1000);\n };\n\n const stopRecordingTick = () => {\n if (recordingTick.current) {\n clearInterval(recordingTick.current);\n recordingTick.current = null;\n }\n };\n\n async function canFitChunk(byteLength) {\n const now = performance.now();\n if (now - lastEstimateAt.current < ESTIMATE_INTERVAL_MS) {\n return !lowStorageAbort.current;\n }\n lastEstimateAt.current = now;\n\n try {\n const { usage = 0, quota = 0 } = await navigator.storage.estimate();\n const remaining = quota - usage;\n return remaining > MIN_HEADROOM + (byteLength || 0);\n } catch {\n return !lowStorageAbort.current;\n }\n }\n\n async function saveChunk(e, i) {\n const ts = e.timecode ?? 0;\n\n // FLAG: disabled duplicate chunk check due to issues with some devices\n // if (\n // savedCount.current > 0 &&\n // ts === lastTimecode.current &&\n // e.data.size === lastSize.current\n // ) {\n // return false;\n // }\n\n if (!(await canFitChunk(e.data.size))) {\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n });\n sendStopWithReason(\"region-low-storage-headroom\");\n // Reload this iframe\n window.location.reload();\n return false;\n }\n\n try {\n await chunksStore.setItem(`chunk_${i}`, {\n index: i,\n chunk: e.data,\n timestamp: ts,\n });\n } catch (err) {\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n });\n sendStopWithReason(\"region-save-chunk-failed\");\n // Reload this iframe\n window.location.reload();\n return false;\n }\n\n lastTimecode.current = ts;\n lastSize.current = e.data.size;\n savedCount.current += 1;\n\n if (backupRef.current) {\n chrome.runtime.sendMessage({ type: \"write-file\", index: i });\n }\n return true;\n }\n\n const rebuildBlobFromChunks = async () => {\n const items = [];\n await chunksStore.ready();\n await chunksStore.iterate((value) => (items.push(value), undefined));\n items.sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0));\n const parts = items.map((c) =>\n c.chunk instanceof Blob ? c.chunk : new Blob([c.chunk]),\n );\n if (!parts.length) return null;\n const first = parts[0];\n const inferredType = first?.type || \"video/mp4\";\n return new Blob(parts, { type: inferredType });\n };\n\n const updateFreeFinalizeStatus = async (stage, percent = 0, error = null) => {\n try {\n const recordingId =\n recordingIdRef.current ||\n (await chrome.storage.local.get([\"fastRecorderActiveRecordingId\"]))\n .fastRecorderActiveRecordingId;\n if (!recordingId) return;\n const key = `freeFinalizeStatus:${recordingId}`;\n const existing = await chrome.storage.local.get([key]);\n const current = existing[key];\n if (\n current &&\n (current.stage === \"ready\" || current.stage === \"chunks_ready\") &&\n (stage === \"stopping\" || stage === \"finalizing\")\n ) {\n return;\n }\n await chrome.storage.local.set({\n [key]: {\n recordingId,\n stage,\n percent,\n updatedAt: Date.now(),\n error: error || undefined,\n },\n });\n } catch {}\n };\n\n async function drainQueue() {\n if (draining.current) return;\n draining.current = true;\n\n try {\n while (pending.current.length) {\n if (lowStorageAbort.current) {\n pending.current.length = 0;\n pendingBytes.current = 0;\n break;\n }\n\n const e = pending.current.shift();\n pendingBytes.current -= e.data.size;\n\n if (!(await canFitChunk(e.data.size))) {\n if (!lowStorageAbort.current) {\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"toastStorageCritical\"),\n timeout: 8000,\n });\n }\n lowStorageAbort.current = true;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n });\n sendStopWithReason(\"region-drainqueue-low-storage\");\n pending.current.length = 0;\n pendingBytes.current = 0;\n // Reload this iframe\n window.location.reload();\n break;\n }\n\n const i = index.current;\n const saved = await saveChunk(e, i);\n if (saved) index.current = i + 1;\n }\n } finally {\n draining.current = false;\n }\n }\n\n async function waitForDrain() {\n while (draining.current || pending.current.length) {\n await new Promise((r) => setTimeout(r, 10));\n }\n }\n\n useEffect(() => {\n window.parent.postMessage(\n {\n type: \"screenity-region-capture-loaded\",\n },\n \"*\",\n );\n }, []);\n\n // Receive post message from parent (this is an iframe)\n useEffect(() => {\n const onMessage = (event) => {\n if (event.data.type === \"crop-target\") {\n target.current = event.data.target;\n regionRef.current = true;\n } else if (event.data.type === \"restart-recording\") {\n restartRecording();\n }\n };\n window.addEventListener(\"message\", onMessage);\n\n return () => {\n window.removeEventListener(\"message\", onMessage);\n };\n }, []);\n\n async function startRecording() {\n // Check that a recording is not already in progress\n if (recorder.current !== null) return;\n persistRegionStartDebug({ stage: \"start-recording-enter\" });\n\n const hasHelperVideoTrack =\n !!helperVideoStream.current &&\n typeof helperVideoStream.current.getVideoTracks === \"function\" &&\n helperVideoStream.current.getVideoTracks().length > 0;\n const hasLiveVideoTrack =\n !!liveStream.current &&\n typeof liveStream.current.getVideoTracks === \"function\" &&\n liveStream.current.getVideoTracks().length > 0;\n\n if (!hasHelperVideoTrack || !hasLiveVideoTrack) {\n if (startRetryAttempts.current < 50) {\n startRetryAttempts.current += 1;\n if (startRetryTimer.current) {\n clearTimeout(startRetryTimer.current);\n }\n startRetryTimer.current = setTimeout(() => {\n startRetryTimer.current = null;\n startRecording();\n }, 100);\n return;\n }\n\n clearStartRetry();\n persistRegionStartDebug({\n stage: \"preflight-stream-ready-timeout\",\n why: \"Capture stream is not ready yet\",\n hasHelperVideoTrack,\n hasLiveVideoTrack,\n });\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"Capture stream is not ready yet\",\n });\n window.location.reload();\n return;\n }\n\n clearStartRetry();\n navigator.storage.persist();\n isFinishing.current = false;\n sentLast.current = false;\n lastTimecode.current = 0;\n lastSize.current = 0;\n hasChunks.current = false;\n isFinished.current = false;\n savedCount.current = 0;\n pending.current = [];\n draining.current = false;\n lowStorageAbort.current = false;\n pendingBytes.current = 0;\n // Check if the stream actually has data in it\n try {\n if (helperVideoStream.current.getVideoTracks().length === 0) {\n persistRegionStartDebug({\n stage: \"preflight-helper-video-empty\",\n why: \"No video tracks available\",\n helperVideo: buildTrackSnapshot(\n helperVideoStream.current?.getVideoTracks?.()[0] || null,\n ),\n liveVideo: buildTrackSnapshot(\n liveStream.current?.getVideoTracks?.()[0] || null,\n ),\n });\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"No video tracks available\",\n });\n\n // Reload this iframe\n window.location.reload();\n return;\n }\n } catch (err) {\n persistRegionStartDebug({\n stage: \"preflight-helper-video-throw\",\n why: String(err),\n helperVideo: buildTrackSnapshot(\n helperVideoStream.current?.getVideoTracks?.()[0] || null,\n ),\n liveVideo: buildTrackSnapshot(\n liveStream.current?.getVideoTracks?.()[0] || null,\n ),\n });\n if (useWebCodecs.current) {\n await chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"start-exception\",\n });\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n }\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: String(err),\n });\n\n // Reload this iframe\n window.location.reload();\n return;\n }\n\n await chunksStore.clear();\n\n try {\n const { qualityValue } = await chrome.storage.local.get([\"qualityValue\"]);\n const { fpsValue } = await chrome.storage.local.get([\"fpsValue\"]);\n const activeVideoTrack =\n liveStream.current?.getVideoTracks?.()[0] ||\n helperVideoStream.current?.getVideoTracks?.()[0] ||\n null;\n const trackSettings =\n activeVideoTrack && typeof activeVideoTrack.getSettings === \"function\"\n ? activeVideoTrack.getSettings()\n : {};\n const width =\n Number.isFinite(trackSettings.width) && trackSettings.width > 0\n ? Math.floor(trackSettings.width)\n : 1920;\n const height =\n Number.isFinite(trackSettings.height) && trackSettings.height > 0\n ? Math.floor(trackSettings.height)\n : 1080;\n let fps = Number.parseInt(fpsValue, 10);\n if (!Number.isFinite(fps) || fps <= 0) {\n fps =\n Number.isFinite(trackSettings.frameRate) && trackSettings.frameRate > 0\n ? Math.round(trackSettings.frameRate)\n : 30;\n }\n\n let audioBitsPerSecond = 128000;\n let videoBitsPerSecond = 5000000;\n\n if (qualityValue === \"4k\") {\n audioBitsPerSecond = 192000;\n videoBitsPerSecond = 40000000;\n } else if (qualityValue === \"1080p\") {\n audioBitsPerSecond = 192000;\n videoBitsPerSecond = 8000000;\n } else if (qualityValue === \"720p\") {\n audioBitsPerSecond = 128000;\n videoBitsPerSecond = 5000000;\n } else if (qualityValue === \"480p\") {\n audioBitsPerSecond = 96000;\n videoBitsPerSecond = 2500000;\n } else if (qualityValue === \"360p\") {\n audioBitsPerSecond = 96000;\n videoBitsPerSecond = 1000000;\n } else if (qualityValue === \"240p\") {\n audioBitsPerSecond = 64000;\n videoBitsPerSecond = 500000;\n }\n\n // List all mimeTypes\n const mimeTypes = [\n \"video/webm;codecs=avc1\",\n \"video/webm;codecs=vp8,opus\",\n \"video/webm;codecs=vp9,opus\",\n \"video/webm;codecs=vp9\",\n \"video/webm;codecs=vp8\",\n \"video/webm;codecs=h264\",\n \"video/webm\",\n ];\n\n // Check if the browser supports any of the mimeTypes, make sure to select the first one that is supported from the list\n let mimeType = mimeTypes.find((mimeType) =>\n MediaRecorder.isTypeSupported(mimeType),\n );\n\n const recordingId = `${Date.now()}-${Math.random()\n .toString(16)\n .slice(2, 8)}`;\n recordingIdRef.current = recordingId;\n\n await chrome.storage.local.set({\n fastRecorderActiveRecordingId: recordingId,\n fastRecorderInUse: false,\n fastRecorderValidationFailed: false,\n fastRecorderValidation: null,\n });\n\n const { useWebCodecsRecorder } = await chrome.storage.local.get([\n \"useWebCodecsRecorder\",\n ]);\n const userSetting = useWebCodecsRecorder === true ? true : false;\n const stickyState = await getFastRecorderStickyState();\n const probeResult = await probeFastRecorderSupport();\n const shouldUseFast = shouldUseFastRecorder(\n userSetting,\n probeResult,\n stickyState,\n );\n const selectedVideoConfig =\n probeResult?.details?.selectedVideoConfig || null;\n let recorderToken = 0;\n let codecFallbackTriggered = false;\n let mediaRecorderStartAt = Date.now();\n let recdbgChunkCount = 0;\n let recdbgTotalBytes = 0;\n\n await chrome.storage.local.set({\n fastRecorderDecision: {\n shouldUseFast,\n reasons: probeResult.reasons,\n stickyDisabled: stickyState.disabled,\n },\n fastRecorderStatus: {\n userSetting,\n probe: {\n ok: probeResult.ok,\n reasons: probeResult.reasons,\n details: probeResult.details,\n at: probeResult.at || Date.now(),\n },\n decision: {\n useFast: shouldUseFast,\n why:\n userSetting === false\n ? \"user_disabled\"\n : stickyState?.disabled && userSetting !== true\n ? \"sticky_disabled\"\n : probeResult.ok\n ? \"probe_ok\"\n : \"probe_failed\",\n at: Date.now(),\n },\n disabled: stickyState.disabled,\n disabledReason: stickyState.reason || null,\n disabledDetails: stickyState.details || null,\n disabledAt: stickyState.disabledAt || null,\n updatedAt: Date.now(),\n },\n });\n\n const resetChunkState = async () => {\n await chunksStore.clear();\n index.current = 0;\n pending.current = [];\n pendingBytes.current = 0;\n savedCount.current = 0;\n hasChunks.current = false;\n lastTimecode.current = 0;\n lastSize.current = 0;\n sentLast.current = false;\n };\n\n const waitForSavedChunks = async (timeoutMs = 4000) => {\n if (savedCount.current > 0) return true;\n const deadline = Date.now() + timeoutMs;\n while (Date.now() < deadline) {\n await new Promise((resolve) => setTimeout(resolve, 100));\n if (savedCount.current > 0) return true;\n }\n return savedCount.current > 0;\n };\n\n const waitForTrailingChunks = async (timeoutMs = 1600) => {\n const deadline = Date.now() + timeoutMs;\n let stableRounds = 0;\n let lastSaved = savedCount.current;\n while (Date.now() < deadline) {\n await waitForDrain();\n await new Promise((resolve) => setTimeout(resolve, 120));\n await waitForDrain();\n const currentSaved = savedCount.current;\n if (currentSaved === lastSaved) {\n stableRounds += 1;\n if (stableRounds >= 2) break;\n } else {\n stableRounds = 0;\n lastSaved = currentSaved;\n }\n }\n };\n\n const handleWebCodecsChunk = async (blob, timestampUs) => {\n if (lowStorageAbort.current) return;\n const timecodeMs = timestampUs ? Math.floor(timestampUs / 1000) : 0;\n recdbgChunkCount += 1;\n recdbgTotalBytes += blob.size || 0;\n if (recdbgChunkCount <= 3) {\n debugRecordingEvent(recdbgSessionRef, \"chunk\", {\n index: recdbgChunkCount,\n size: blob.size,\n timecode: timecodeMs,\n });\n } else if (recdbgChunkCount % 10 === 0) {\n debugRecordingEvent(recdbgSessionRef, \"chunk-progress\", {\n count: recdbgChunkCount,\n totalBytes: recdbgTotalBytes,\n });\n }\n\n pending.current.push({ data: blob, timecode: timecodeMs });\n pendingBytes.current += blob.size;\n\n if (pendingBytes.current > MAX_PENDING_BYTES) {\n try {\n await drainQueue();\n } catch {}\n }\n void drainQueue();\n };\n\n const startWebCodecsRecorder = async () => {\n const hasAudioTrack =\n !!liveStream.current &&\n typeof liveStream.current.getAudioTracks === \"function\" &&\n liveStream.current.getAudioTracks().length > 0;\n\n useWebCodecs.current = true;\n await chrome.storage.local.set({ fastRecorderInUse: true });\n\n recorder.current = new WebCodecsRecorder(liveStream.current, {\n width,\n height,\n fps,\n videoBitrate: videoBitsPerSecond,\n audioBitrate: hasAudioTrack ? audioBitsPerSecond : undefined,\n enableAudio: hasAudioTrack,\n videoEncoderConfig: selectedVideoConfig,\n debug: DEBUG_RECORDER,\n onFinalized: async () => {\n await waitForDrain();\n const hasSavedChunks = await waitForSavedChunks();\n if (!hasSavedChunks) {\n persistRegionStartDebug({\n stage: \"finalize-no-chunks\",\n recorderType: \"WebCodecsRecorder\",\n savedCount: savedCount.current,\n pending: pending.current.length,\n });\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"No recording data was generated\",\n });\n return;\n }\n await updateFreeFinalizeStatus(\"chunks_ready\", 95);\n let validation = null;\n try {\n const blob = await rebuildBlobFromChunks();\n validation = await validateFastRecorderOutputBlob(blob, {\n minBytes: 64 * 1024,\n timeoutMs: 4000,\n videoCodec: recorder.current?.selectedVideoCodec || undefined,\n audioCodec: hasAudioTrack ? \"mp4a.40.2\" : null,\n recordingId,\n });\n debugRecordingEvent(recdbgSessionRef, \"fast-recorder-validate\", {\n validation,\n });\n } catch (err) {\n validation = {\n ok: false,\n hardFail: true,\n reasons: [\"validation-exception\"],\n details: { error: String(err) },\n };\n }\n\n if (validation && !validation.ok) {\n await markFastRecorderFailure(\"validation-failed\", validation);\n await chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"validation-failed\",\n });\n const hardFail = Boolean(validation.hardFail);\n await chrome.storage.local.set({\n fastRecorderValidationFailed: hardFail,\n fastRecorderValidation: validation,\n });\n await updateFreeFinalizeStatus(\n \"failed\",\n 100,\n validation.reasons || \"validation-failed\",\n );\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n if (hardFail) {\n chrome.runtime.sendMessage({\n type: \"fast-recorder-hard-fail\",\n recordingId,\n });\n if (!sentLast.current) {\n sentLast.current = true;\n isFinished.current = true;\n isFinishing.current = false;\n if (!isRestarting.current) {\n chrome.runtime.sendMessage({ type: \"video-ready\" });\n }\n }\n return;\n }\n } else {\n await chrome.storage.local.set({\n fastRecorderValidationFailed: false,\n fastRecorderValidation: validation,\n });\n }\n\n await updateFreeFinalizeStatus(\"ready\", 100);\n if (!sentLast.current) {\n sentLast.current = true;\n isFinished.current = true;\n isFinishing.current = false;\n if (!isRestarting.current) {\n chrome.runtime.sendMessage({ type: \"video-ready\" });\n }\n }\n },\n onChunk: (chunkData, timestampUs) => {\n const blob = new Blob([chunkData], { type: \"video/mp4\" });\n handleWebCodecsChunk(blob, timestampUs);\n },\n onError: (err) => {\n markFastRecorderFailure(\"webcodecs-error\", {\n error: String(err),\n });\n chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"webcodecs-error\",\n });\n updateFreeFinalizeStatus(\"failed\", 100, String(err));\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"Fast recorder failed. Please try compatibility mode.\",\n });\n },\n onStop: async () => {\n debugRecordingEvent(recdbgSessionRef, \"recorder-stop\", {\n count: recdbgChunkCount,\n totalBytes: recdbgTotalBytes,\n encoder: \"webcodecs\",\n });\n },\n });\n\n const started = await recorder.current.start();\n if (!started) {\n useWebCodecs.current = false;\n await chrome.storage.local.set({ fastRecorderInUse: false });\n await chrome.storage.local.set({\n useWebCodecsRecorder: false,\n lastWebCodecsFailureAt: Date.now(),\n lastWebCodecsFailureCode: \"start-failed\",\n });\n chrome.runtime.sendMessage({\n type: \"show-toast\",\n message: chrome.i18n.getMessage(\"webcodecsFailedOffToast\"),\n });\n return false;\n }\n\n debugRecordingEvent(recdbgSessionRef, \"recorder-start\", {\n encoder: \"webcodecs\",\n codec: \"webcodecs\",\n width,\n height,\n fps,\n timesliceMs: 1000,\n });\n\n return true;\n };\n\n const startMediaRecorderWithCodec = async (codec) => {\n const mimeType = selectMimeType(codec);\n if (!mimeType) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: `No supported mimeTypes available for ${codec}`,\n });\n\n // Reload this iframe\n window.location.reload();\n return false;\n }\n\n recorderToken += 1;\n const token = recorderToken;\n recdbgChunkCount = 0;\n recdbgTotalBytes = 0;\n mediaRecorderStartAt = Date.now();\n\n recorder.current = new MediaRecorder(liveStream.current, {\n mimeType: mimeType,\n audioBitsPerSecond: audioBitsPerSecond,\n videoBitsPerSecond: videoBitsPerSecond,\n });\n debug(\"MediaRecorder config\", {\n mimeType: recorder.current?.mimeType,\n audioBitsPerSecond,\n videoBitsPerSecond,\n });\n debugRecordingEvent(recdbgSessionRef, \"recorder-start\", {\n encoder: \"mediarecorder\",\n codec: getCodecLabel(mimeType),\n mimeType: recorder.current?.mimeType,\n audioBitsPerSecond,\n videoBitsPerSecond,\n width,\n height,\n fps,\n timesliceMs: 1000,\n });\n\n setTimeout(() => {\n if (token !== recorderToken) return;\n const afterTrack = liveStream.current?.getVideoTracks?.()[0] ?? null;\n logRecordingSnapshot(\"after-start-500ms\", {\n capture: buildTrackSnapshot(afterTrack),\n });\n debugRecordingEvent(recdbgSessionRef, \"after-start-500ms\", {\n capture: buildTrackSnapshot(afterTrack),\n });\n }, 500);\n\n setTimeout(() => {\n if (token !== recorderToken) return;\n const afterTrack = liveStream.current?.getVideoTracks?.()[0] ?? null;\n debugRecordingEvent(recdbgSessionRef, \"after-start-1500ms\", {\n capture: buildTrackSnapshot(afterTrack),\n });\n }, 1500);\n\n recorder.current.onerror = (ev) => {\n if (token !== recorderToken) return;\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"mediarecorder\",\n why: String(ev?.error || \"unknown\"),\n });\n };\n\n recorder.current.onstop = async () => {\n if (token !== recorderToken) return;\n try {\n recorder.current.requestData();\n } catch {}\n\n if (isRestarting.current) return;\n\n regionRef.current = false;\n recordingRef.current = false;\n\n await waitForTrailingChunks();\n try {\n await chrome.storage.local.set({\n lastRegionChunkStats: {\n ts: Date.now(),\n savedCount: savedCount.current,\n pendingCount: pending.current.length,\n pendingBytes: pendingBytes.current,\n hasChunks: hasChunks.current,\n },\n });\n } catch {}\n const hasSavedChunks = await waitForSavedChunks();\n if (!hasSavedChunks) {\n persistRegionStartDebug({\n stage: \"stop-no-chunks\",\n recorderType: \"MediaRecorder\",\n savedCount: savedCount.current,\n pending: pending.current.length,\n });\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"No recording data was generated\",\n });\n return;\n }\n\n if (!sentLast.current) {\n sentLast.current = true;\n isFinished.current = true;\n chrome.runtime.sendMessage({ type: \"video-ready\" });\n isFinishing.current = false;\n }\n };\n\n recorder.current.ondataavailable = async (e) => {\n if (token !== recorderToken) return;\n if (!e || !e.data || !e.data.size) {\n if (recorder.current && recorder.current.state === \"inactive\") {\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n });\n sendStopWithReason(\"region-empty-mediarecorder-data\");\n }\n return;\n }\n\n if (lowStorageAbort.current) {\n return;\n }\n\n recdbgChunkCount += 1;\n recdbgTotalBytes += e.data.size || 0;\n const elapsedSec = Math.max(\n 0.001,\n (Date.now() - mediaRecorderStartAt) / 1000,\n );\n const derivedMbps = (recdbgTotalBytes * 8) / elapsedSec / 1e6;\n\n if (recdbgChunkCount <= 3) {\n debugRecordingEvent(recdbgSessionRef, \"chunk\", {\n index: recdbgChunkCount,\n size: e.data.size,\n timecode: e.timecode ?? 0,\n });\n }\n\n if (recdbgChunkCount % 3 === 0) {\n debugRecordingEvent(recdbgSessionRef, \"bitrate\", {\n codec: getCodecLabel(mimeType),\n elapsedSec,\n derivedMbps,\n bytes: recdbgTotalBytes,\n targetVideoBps: videoBitsPerSecond,\n });\n }\n\n if (\n !codecFallbackTriggered &&\n (recdbgChunkCount >= 3 || elapsedSec >= 3)\n ) {\n if (derivedMbps < 5 && getCodecLabel(mimeType) !== \"vp8\") {\n codecFallbackTriggered = true;\n debugRecordingEvent(recdbgSessionRef, \"codec-fallback\", {\n from: getCodecLabel(mimeType),\n to: \"vp8\",\n derivedMbps,\n });\n recorderToken += 1;\n await resetChunkState();\n try {\n recorder.current.stop();\n } catch {}\n const switched = await startMediaRecorderWithCodec(\"vp8\");\n if (switched && recorder.current instanceof MediaRecorder) {\n try {\n recorder.current.start(1000);\n setTimeout(() => {\n try { recorder.current?.requestData?.(); } catch (_) {}\n }, 250);\n } catch (startErr) {\n persistRegionStartDebug({\n stage: \"codec-fallback-start-failed\",\n why: String(startErr),\n });\n }\n }\n return;\n }\n }\n\n if (!hasChunks.current) {\n hasChunks.current = true;\n lastTimecode.current = e.timecode ?? 0;\n lastSize.current = e.data.size;\n }\n\n pending.current.push(e);\n pendingBytes.current += e.data.size;\n\n if (pendingBytes.current > MAX_PENDING_BYTES) {\n try {\n recorder.current.pause();\n await drainQueue();\n recorder.current.resume();\n } catch {}\n }\n\n void drainQueue();\n };\n\n recorder.current.addEventListener(\"stop\", () => {\n if (token !== recorderToken) return;\n debugRecordingEvent(recdbgSessionRef, \"recorder-stop\", {\n count: recdbgChunkCount,\n totalBytes: recdbgTotalBytes,\n encoder: \"mediarecorder\",\n codec: getCodecLabel(mimeType),\n });\n });\n\n return true;\n };\n\n if (shouldUseFast) {\n const ok = await startWebCodecsRecorder();\n if (!ok) {\n useWebCodecs.current = false;\n await chrome.storage.local.set({ fastRecorderInUse: false });\n await startMediaRecorderWithCodec(\"vp9\");\n persistRegionStartDebug({ stage: \"start-recorder-fallback-vp9\" });\n } else {\n persistRegionStartDebug({ stage: \"start-recorder-webcodecs-ok\" });\n }\n } else {\n useWebCodecs.current = false;\n await chrome.storage.local.set({ fastRecorderInUse: false });\n await startMediaRecorderWithCodec(\"vp9\");\n persistRegionStartDebug({ stage: \"start-recorder-mediarecorder-vp9\" });\n }\n } catch (err) {\n persistRegionStartDebug({\n stage: \"start-pipeline-exception\",\n why: String(err),\n helperVideo: buildTrackSnapshot(\n helperVideoStream.current?.getVideoTracks?.()[0] || null,\n ),\n liveVideo: buildTrackSnapshot(\n liveStream.current?.getVideoTracks?.()[0] || null,\n ),\n });\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: String(err),\n });\n\n // Reload this iframe\n window.location.reload();\n return;\n }\n\n isRestarting.current = false;\n index.current = 0;\n recordingRef.current = true;\n isDismissing.current = false;\n\n const isMediaRecorder = recorder.current instanceof MediaRecorder;\n if (isMediaRecorder) {\n try {\n recorder.current.start(1000);\n // Force an early first chunk so even very short recordings have\n // data in IndexedDB before the user can navigate away.\n setTimeout(() => {\n try { recorder.current?.requestData?.(); } catch (_) {}\n }, 250);\n } catch (err) {\n persistRegionStartDebug({\n stage: \"mediarecorder-start-throw\",\n why: String(err),\n recorderType: recorder.current?.constructor?.name || null,\n helperVideo: buildTrackSnapshot(\n helperVideoStream.current?.getVideoTracks?.()[0] || null,\n ),\n liveVideo: buildTrackSnapshot(\n liveStream.current?.getVideoTracks?.()[0] || null,\n ),\n });\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n memoryError: true,\n });\n sendStopWithReason(\"region-mediarecorder-start-throw\");\n\n // Reload this iframe\n window.location.reload();\n return;\n }\n }\n\n const recordingStartTime = Date.now();\n recordingStartTimeRef.current = recordingStartTime;\n await setRecordingTimingState({\n recording: true,\n paused: false,\n recordingStartTime,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n startRecordingTick();\n chrome.storage.local.set({\n recording: true,\n restarting: false,\n });\n persistRegionStartDebug({\n stage: \"recording-started\",\n recorderType: recorder.current?.constructor?.name || null,\n });\n\n if (isMediaRecorder && recorder.current) {\n recorder.current.onpause = () => {\n lastTimecode.current = 0;\n };\n\n recorder.current.onresume = () => {\n lastTimecode.current = 0;\n lastSize.current = 0;\n };\n }\n\n const liveVideoTrack = liveStream.current?.getVideoTracks?.()[0] || null;\n if (liveVideoTrack) {\n liveVideoTrack.onended = () => {\n regionRef.current = false;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n });\n sendStopWithReason(\"region-live-video-ended\");\n };\n }\n\n const vTrack = liveVideoTrack;\n if (vTrack) {\n vTrack.oninactive = () => {\n persistRegionStartDebug({\n stage: \"live-video-inactive\",\n why: \"Video track became inactive\",\n liveVideo: buildTrackSnapshot(vTrack),\n });\n };\n }\n\n const aTrack = helperAudioStream.current?.getAudioTracks()[0];\n if (aTrack) {\n aTrack.oninactive = () => {\n persistRegionStartDebug({\n stage: \"audio-inactive\",\n why: \"Audio track became inactive\",\n });\n };\n }\n\n const helperVideoTrack =\n helperVideoStream.current?.getVideoTracks?.()[0] || null;\n if (helperVideoTrack) {\n helperVideoTrack.onended = () => {\n regionRef.current = false;\n chrome.storage.local.set({\n recording: false,\n restarting: false,\n tabRecordedID: null,\n });\n sendStopWithReason(\"region-helper-video-ended\");\n };\n }\n }\n\n async function stopRecording() {\n clearStartRetry();\n stopRecordingTick();\n recordingStartTimeRef.current = null;\n isFinishing.current = true;\n regionRef.current = false;\n await updateFreeFinalizeStatus(\"stopping\", 0);\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n\n if (recorder.current) {\n if (\n useWebCodecs.current &&\n recorder.current instanceof WebCodecsRecorder\n ) {\n try {\n await updateFreeFinalizeStatus(\"finalizing\", 20);\n await recorder.current.stop();\n } catch {}\n await waitForDrain();\n recorder.current = null;\n } else {\n try {\n recorder.current.requestData();\n } catch {}\n\n try {\n if (recorder.current.state !== \"inactive\") {\n recorder.current.stop();\n }\n } catch {}\n\n await waitForDrain();\n recorder.current = null;\n await updateFreeFinalizeStatus(\"chunks_ready\", 100);\n }\n }\n\n useWebCodecs.current = false;\n\n if (liveStream.current !== null) {\n liveStream.current.getTracks().forEach(function (track) {\n track.stop();\n });\n liveStream.current = null;\n }\n\n if (helperVideoStream.current !== null) {\n helperVideoStream.current.getTracks().forEach(function (track) {\n track.stop();\n });\n helperVideoStream.current = null;\n }\n\n if (helperAudioStream.current !== null) {\n helperAudioStream.current.getTracks().forEach(function (track) {\n track.stop();\n });\n helperAudioStream.current = null;\n }\n }\n\n const dismissRecording = async () => {\n clearStartRetry();\n stopRecordingTick();\n recordingStartTimeRef.current = null;\n regionRef.current = false;\n useWebCodecs.current = false;\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n pausedStateRef.current = false;\n chrome.runtime.sendMessage({ type: \"handle-dismiss\" });\n isRestarting.current = true;\n isDismissing.current = true;\n if (recorder.current !== null) {\n recorder.current.stop();\n recorder.current = null;\n }\n if (liveStream.current !== null) {\n liveStream.current.getTracks().forEach(function (track) {\n track.stop();\n });\n liveStream.current = null;\n }\n\n if (helperVideoStream.current !== null) {\n helperVideoStream.current.getTracks().forEach(function (track) {\n track.stop();\n });\n helperVideoStream.current = null;\n }\n\n if (helperAudioStream.current !== null) {\n helperAudioStream.current.getTracks().forEach(function (track) {\n track.stop();\n });\n helperAudioStream.current = null;\n }\n };\n\n const restartRecording = async () => {\n clearStartRetry();\n stopRecordingTick();\n recordingStartTimeRef.current = null;\n if (isRestarting.current) {\n return false;\n }\n await setRegionRestartPhase(\"restart-requested\");\n const wasRegionMode = Boolean(regionRef.current || target.current);\n isRestarting.current = true;\n isDismissing.current = false;\n pausedStateRef.current = false;\n const wasUsingWebCodecs = useWebCodecs.current;\n try {\n if (\n wasUsingWebCodecs &&\n recorder.current instanceof WebCodecsRecorder\n ) {\n recorder.current.running = false;\n recorder.current.paused = false;\n await recorder.current.cleanup();\n } else if (recorder.current && recorder.current.state !== \"inactive\") {\n await new Promise((resolve) => {\n let done = false;\n const finish = () => {\n if (done) return;\n done = true;\n clearTimeout(timeoutId);\n resolve();\n };\n const timeoutId = setTimeout(finish, 1600);\n try {\n recorder.current.addEventListener(\"stop\", finish, { once: true });\n } catch {}\n try {\n recorder.current.stop();\n } catch {\n finish();\n }\n });\n }\n } catch {\n isRestarting.current = false;\n await setRegionRestartPhase(\"restart-stop-failed\");\n return false;\n }\n await setRegionRestartPhase(\"restart-stop-complete\");\n recorder.current = null;\n sentLast.current = false;\n isFinished.current = false;\n isFinishing.current = false;\n hasChunks.current = false;\n lastTimecode.current = 0;\n lastSize.current = 0;\n savedCount.current = 0;\n pending.current = [];\n pendingBytes.current = 0;\n await chunksStore.clear();\n await setRecordingTimingState({\n recording: false,\n paused: false,\n recordingStartTime: null,\n pausedAt: null,\n totalPausedMs: 0,\n });\n useWebCodecs.current = false;\n regionRef.current = wasRegionMode;\n await setRegionRestartPhase(\"restart-state-restored\", {\n regionMode: Boolean(regionRef.current),\n hasTarget: Boolean(target.current),\n });\n isRestarting.current = false;\n return true;\n };\n\n async function startAudioStream(id) {\n const useExact = id && id !== \"none\";\n const audioStreamOptions = {\n mimeType: \"video/webm;codecs=vp8,opus\",\n audio: useExact\n ? {\n deviceId: {\n exact: id,\n },\n }\n : true,\n };\n\n const { defaultAudioInputLabel, audioinput } =\n await chrome.storage.local.get([\"defaultAudioInputLabel\", \"audioinput\"]);\n const desiredLabel =\n defaultAudioInputLabel ||\n audioinput?.find((device) => device.deviceId === id)?.label ||\n \"\";\n\n const result = await getUserMediaWithFallback({\n constraints: audioStreamOptions,\n fallbacks:\n useExact && desiredLabel\n ? [\n {\n kind: \"audioinput\",\n desiredDeviceId: id,\n desiredLabel,\n onResolved: (resolvedId) => {\n chrome.storage.local.set({\n defaultAudioInput: resolvedId,\n defaultAudioInputLabel: desiredLabel,\n });\n },\n },\n ]\n : [],\n })\n .then((stream) => {\n return stream;\n })\n .catch((err) => {\n // Try again without the device ID\n const audioStreamOptions = {\n mimeType: \"video/webm;codecs=vp8,opus\",\n audio: true,\n };\n\n return navigator.mediaDevices\n .getUserMedia(audioStreamOptions)\n .then((stream) => {\n return stream;\n })\n .catch((err) => {\n return null;\n });\n });\n\n return result;\n }\n // Set audio input volume\n function setAudioInputVolume(volume) {\n if (!audioInputGain.current) return;\n audioInputGain.current.gain.value = volume;\n }\n\n // Set audio output volume\n function setAudioOutputVolume(volume) {\n if (!audioOutputGain.current) return;\n audioOutputGain.current.gain.value = volume;\n }\n\n async function startStreaming(data) {\n try {\n // Get quality value\n const { qualityValue } = await chrome.storage.local.get([\"qualityValue\"]);\n\n let width = 1920;\n let height = 1080;\n\n if (qualityValue === \"4k\") {\n width = 4096;\n height = 2160;\n } else if (qualityValue === \"1080p\") {\n width = 1920;\n height = 1080;\n } else if (qualityValue === \"720p\") {\n width = 1280;\n height = 720;\n } else if (qualityValue === \"480p\") {\n width = 854;\n height = 480;\n } else if (qualityValue === \"360p\") {\n width = 640;\n height = 360;\n } else if (qualityValue === \"240p\") {\n width = 426;\n height = 240;\n }\n\n const { fpsValue } = await chrome.storage.local.get([\"fpsValue\"]);\n let fps = parseInt(fpsValue);\n\n // Check if fps is a number\n if (isNaN(fps)) {\n fps = 30;\n }\n\n let stream;\n\n const constraints = {\n preferCurrentTab: true,\n audio: data.systemAudio,\n video: {\n frameRate: fps,\n width: {\n ideal: width,\n },\n height: {\n ideal: height,\n },\n },\n };\n stream = await navigator.mediaDevices.getDisplayMedia(constraints);\n if (!stream || typeof stream.getVideoTracks !== \"function\") {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"Display stream is unavailable\",\n });\n window.location.reload();\n return;\n }\n if (!stream.getVideoTracks().length) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"Display stream has no video track\",\n });\n window.location.reload();\n return;\n }\n\n helperVideoStream.current = stream;\n\n // Create an audio context, destination, and stream\n aCtx.current = new AudioContext();\n destination.current = aCtx.current.createMediaStreamDestination();\n liveStream.current = new MediaStream();\n const micstream = await startAudioStream(data.defaultAudioInput);\n\n // Save the helper streams\n helperAudioStream.current = micstream;\n\n // Check if micstream has an audio track\n if (\n helperAudioStream.current != null &&\n helperAudioStream.current.getAudioTracks().length > 0\n ) {\n audioInputGain.current = aCtx.current.createGain();\n audioInputSource.current = aCtx.current.createMediaStreamSource(\n helperAudioStream.current,\n );\n audioInputSource.current\n .connect(audioInputGain.current)\n .connect(destination.current);\n } else {\n // No microphone available\n }\n\n if (helperAudioStream.current != null && !data.micActive) {\n setAudioInputVolume(0);\n }\n\n // Check if stream has an audio track\n if (helperVideoStream.current.getAudioTracks().length > 0) {\n audioOutputGain.current = aCtx.current.createGain();\n audioOutputSource.current = aCtx.current.createMediaStreamSource(\n helperVideoStream.current,\n );\n audioOutputSource.current\n .connect(audioOutputGain.current)\n .connect(destination.current);\n } else {\n // No system audio available\n }\n\n // Add the tracks to the stream\n const helperVideoTrack = helperVideoStream.current.getVideoTracks()[0];\n if (!helperVideoTrack) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"stream-error\",\n why: \"Display stream missing video track\",\n });\n window.location.reload();\n return;\n }\n liveStream.current.addTrack(helperVideoTrack);\n\n if (\n (helperAudioStream.current != null &&\n helperAudioStream.current.getAudioTracks().length > 0) ||\n helperVideoStream.current.getAudioTracks().length > 0\n ) {\n const mixedAudioTrack = destination.current.stream.getAudioTracks()[0];\n if (mixedAudioTrack) {\n liveStream.current.addTrack(mixedAudioTrack);\n }\n }\n\n try {\n if (target.current) {\n const track = liveStream.current.getVideoTracks()[0];\n if (!track || typeof track.cropTo !== \"function\") {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"cancel-modal\",\n why: \"Selected source does not support region cropping\",\n });\n window.location.reload();\n return;\n }\n await track.cropTo(target.current);\n } else {\n // No target\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"cancel-modal\",\n why: \"No target\",\n });\n\n // Reload this iframe\n window.location.reload();\n }\n } catch (err) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"cancel-modal\",\n why: String(err),\n });\n\n // Reload this iframe\n window.location.reload();\n }\n\n // Send message to go back to the previously active tab\n chrome.runtime.sendMessage({ type: \"reset-active-tab\" });\n } catch (err) {\n chrome.runtime.sendMessage({\n type: \"recording-error\",\n error: \"cancel-modal\",\n why: String(err),\n });\n\n // Reload this iframe\n window.location.reload();\n }\n }\n\n useEffect(() => {\n chrome.storage.local.get([\"backup\"], (result) => {\n if (result.backup) {\n backupRef.current = true;\n } else {\n backupRef.current = false;\n }\n });\n }, []);\n\n useEffect(() => {\n const handleBeforeUnload = (e) => {\n if (recordingRef.current && regionRef.current) {\n // Flush any buffered data from the MediaRecorder into IndexedDB.\n // The \"Leave page?\" dialog gives the ondataavailable handler enough\n // time to persist the chunk before the frame is torn down.\n try {\n recorder.current?.requestData?.();\n } catch (_) {}\n e.preventDefault();\n e.returnValue = \"\";\n }\n };\n window.addEventListener(\"beforeunload\", handleBeforeUnload);\n\n // When the iframe is actually being destroyed (user clicked \"Leave\" or\n // the parent page navigated), fire a message to the background to force\n // stop the recording. pagehide fires synchronously during teardown and\n // chrome.runtime.sendMessage from an extension page is delivered via IPC\n // before the frame is gone — no async race.\n const handlePageHide = () => {\n if (recordingRef.current && regionRef.current) {\n try {\n chrome.runtime.sendMessage({\n type: \"region-iframe-destroyed\",\n });\n } catch (_) {\n // Extension context may already be invalidated\n }\n }\n };\n window.addEventListener(\"pagehide\", handlePageHide);\n\n return () => {\n window.removeEventListener(\"beforeunload\", handleBeforeUnload);\n window.removeEventListener(\"pagehide\", handlePageHide);\n };\n }, []);\n\n const setMic = async (result) => {\n if (helperAudioStream.current != null) {\n if (result.active) {\n setAudioInputVolume(1);\n } else {\n setAudioInputVolume(0);\n }\n } else {\n // No microphone available\n }\n };\n\n const onMessage = useCallback(\n (request, sender, sendResponse) => {\n if (request.type === \"loaded\") {\n backupRef.current = request.backup;\n if (request.region) {\n chrome.runtime.sendMessage({ type: \"get-streaming-data\" });\n }\n }\n if (request.type === \"streaming-data\") {\n if (regionRef.current) {\n startStreaming(JSON.parse(request.data));\n }\n } else if (request.type === \"start-recording-tab\") {\n setRegionRestartPhase(\"restart-start-message-received\", {\n regionMode: Boolean(regionRef.current),\n hasTarget: Boolean(target.current),\n });\n if (regionRef.current || target.current) {\n regionRef.current = true;\n setRegionRestartPhase(\"restart-started\");\n startRecording();\n }\n } else if (request.type === \"restart-recording-tab\") {\n Promise.resolve(restartRecording())\n .then((restarted) => {\n if (!restarted) {\n sendResponse?.({ ok: false, error: \"restart-teardown-failed\" });\n return;\n }\n sendResponse?.({ ok: true, restarted: true });\n })\n .catch((error) => {\n sendResponse?.({\n ok: false,\n error: error?.message || String(error),\n });\n });\n return true;\n } else if (request.type === \"stop-recording-tab\") {\n if (isFinishing.current) return;\n stopRecording();\n } else if (request.type === \"set-mic-active-tab\") {\n setMic(request);\n } else if (request.type === \"set-audio-output-volume\") {\n setAudioOutputVolume(request.volume);\n } else if (request.type === \"pause-recording-tab\") {\n if (!recorder.current) return;\n if (pausedStateRef.current) return;\n recorder.current.pause();\n const now = Date.now();\n pausedStateRef.current = true;\n void setRecordingTimingState({\n paused: true,\n pausedAt: now,\n });\n } else if (request.type === \"resume-recording-tab\") {\n if (!recorder.current) return;\n if (!pausedStateRef.current) return;\n recorder.current.resume();\n const now = Date.now();\n pausedStateRef.current = false;\n void (async () => {\n try {\n const { pausedAt, totalPausedMs } = await chrome.storage.local.get([\n \"pausedAt\",\n \"totalPausedMs\",\n ]);\n const additional = pausedAt ? Math.max(0, now - pausedAt) : 0;\n await setRecordingTimingState({\n paused: false,\n pausedAt: null,\n totalPausedMs: (totalPausedMs || 0) + additional,\n });\n } catch (err) {\n console.warn(\n \"[Region Recorder] Failed to update resume timing state\",\n err,\n );\n }\n })();\n } else if (request.type === \"dismiss-recording\") {\n dismissRecording();\n }\n },\n [regionRef.current, isFinishing.current, recorder.current],\n );\n\n useEffect(() => {\n // Event listener (extension messaging)\n chrome.runtime.onMessage.addListener(onMessage);\n\n return () => {\n clearStartRetry();\n chrome.runtime.onMessage.removeListener(onMessage);\n };\n }, []);\n\n return (\n
\n {process.env.SCREENITY_DEV_MODE === \"true\" && (\n \n DEV\n
\n )}\n \n );\n};\n\nexport default Recorder;\n" }, { "path": "src/pages/Region/index.html", "content": "\n\n \n \n \n \n\n \n
\n \n\n" }, { "path": "src/pages/Region/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Recorder from \"./Recorder\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Sandbox/DevHUD.jsx", "content": "import React, { useState } from \"react\";\n\nconst BTN = {\n padding: \"4px 8px\",\n fontSize: \"11px\",\n border: \"1px solid rgba(255,255,255,0.2)\",\n borderRadius: \"4px\",\n background: \"rgba(0,0,0,0.6)\",\n color: \"#fff\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n};\nconst BTN_RESET = { ...BTN, background: \"rgba(200,50,50,0.7)\" };\nconst Z = 2147483647;\n\nconst DevHUD = ({ setContentState, contentStateRef }) => {\n const [collapsed, setCollapsed] = useState(true);\n\n if (collapsed) {\n return (\n setCollapsed(false)}\n style={{\n position: \"fixed\",\n top: 6,\n right: 6,\n zIndex: Z,\n background: \"rgba(0,0,0,0.65)\",\n color: \"#0f0\",\n fontSize: \"10px\",\n padding: \"3px 7px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontFamily: \"monospace\",\n }}\n >\n DEV\n \n );\n }\n\n const actions = [\n {\n label: \"Stuck processing\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n ready: false,\n processingProgress: 0,\n })),\n },\n {\n label: \"Processing 50%\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n ready: false,\n processingProgress: 50,\n })),\n },\n {\n label: \"Recovery mode\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n fallback: true,\n noffmpeg: true,\n editLimit: 3600,\n ready: true,\n editErrorType: null,\n offline: false,\n webm: p.webm || p.rawBlob || p.blob,\n })),\n },\n {\n label: \"Long recording\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n fallback: true,\n noffmpeg: true,\n editLimit: 0,\n ready: true,\n editErrorType: null,\n offline: false,\n webm: p.webm || p.rawBlob || p.blob,\n })),\n },\n {\n label: \"Encoding (FFmpeg)\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n ready: true,\n isFfmpegRunning: true,\n mp4ready: false,\n noffmpeg: false,\n fallback: false,\n editErrorType: null,\n offline: false,\n duration: Math.min(p.duration || 10, p.editLimit || 3600),\n })),\n },\n {\n label: \"MP4 not ready\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n ready: true,\n mp4ready: false,\n isFfmpegRunning: false,\n noffmpeg: false,\n fallback: false,\n editErrorType: null,\n offline: false,\n duration: Math.min(p.duration || 10, p.editLimit || 3600),\n })),\n },\n {\n label: \"Edit timeout\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n editErrorType: \"timeout\",\n fallback: false,\n })),\n },\n {\n label: \"Edit failed\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n editErrorType: \"failed\",\n fallback: false,\n })),\n },\n {\n label: \"Edit too long\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n editErrorType: \"too-long\",\n fallback: false,\n })),\n },\n {\n label: \"Offline\",\n fn: () =>\n setContentState((p) => ({\n ...p,\n offline: true,\n fallback: false,\n })),\n },\n {\n label: \"Memory limit modal\",\n fn: () => {\n contentStateRef.current?.openModal?.(\n chrome.i18n.getMessage(\"memoryLimitTitle\"),\n chrome.i18n.getMessage(\"memoryLimitDescription\"),\n chrome.i18n.getMessage(\"understoodButton\"),\n null,\n () => {},\n () => {}\n );\n },\n },\n {\n label: \"Having issues modal\",\n fn: () => {\n contentStateRef.current?.openModal?.(\n chrome.i18n.getMessage(\"havingIssuesModalTitle\"),\n chrome.i18n.getMessage(\"havingIssuesModalDescription\"),\n chrome.i18n.getMessage(\"restoreRecording\"),\n chrome.i18n.getMessage(\"havingIssuesModalButton2\"),\n () => {},\n () => {}\n );\n },\n },\n ];\n\n return (\n \n \n DEV HUD\n setCollapsed(true)}\n style={{ color: \"#888\", fontSize: \"12px\", cursor: \"pointer\" }}\n >\n x\n \n \n {actions.map((a) => (\n \n ))}\n \n setContentState((p) => ({\n ...p,\n ready: true,\n fallback: false,\n noffmpeg: false,\n editErrorType: null,\n isFfmpegRunning: false,\n mp4ready: true,\n offline: false,\n processingProgress: 0,\n }))\n }\n >\n Reset\n \n \n );\n};\n\nexport default DevHUD;\n" }, { "path": "src/pages/Sandbox/Sandbox.jsx", "content": "import \"./styles/edit/_VideoPlayer.scss\";\nimport \"./styles/global/_app.scss\";\n\nimport React, { useEffect, useRef, useContext } from \"react\";\n// Layout\nimport Editor from \"./layout/editor/Editor\";\nimport Player from \"./layout/player/Player\";\nimport Modal from \"./components/global/Modal\";\n\nimport HelpButton from \"./components/player/HelpButton\";\n\n// Context\nimport { ContentStateContext } from \"./context/ContentState\"; // Import the ContentState context\n\nconst Sandbox = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const parentRef = useRef(null);\n const progress = useRef(\"\");\n\n const getChromeVersion = () => {\n var raw = navigator.userAgent.match(/Chrom(e|ium)\\/([0-9]+)\\./);\n\n return raw ? parseInt(raw[2], 10) : false;\n };\n\n useEffect(() => {\n const MIN_CHROME_VERSION = 110;\n const chromeVersion = getChromeVersion();\n\n if (chromeVersion && chromeVersion > MIN_CHROME_VERSION) {\n contentState.loadFFmpeg();\n } else {\n setContentState((prevState) => ({\n ...prevState,\n updateChrome: true,\n ffmpeg: true,\n }));\n }\n }, []);\n\n useEffect(() => {\n if (!contentState.blob || !contentState.ffmpeg) return;\n if (contentState.frame) return;\n // Frame extraction now works in fallback mode using Canvas API\n contentState.getFrame();\n }, [contentState.blob, contentState.ffmpeg]);\n\n // Programmatically add custom scrollbars\n useEffect(() => {\n if (!parentRef) return;\n if (!parentRef.current) return;\n\n // Check if on mac\n const isMac = navigator.platform.toUpperCase().indexOf(\"MAC\") >= 0;\n if (isMac) return;\n\n const parentDiv = parentRef.current;\n\n const elements = parentDiv.querySelectorAll(\"*\");\n elements.forEach((element) => {\n element.classList.add(\"screenity-scrollbar\");\n });\n\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === \"childList\") {\n const addedNodes = Array.from(mutation.addedNodes);\n const removedNodes = Array.from(mutation.removedNodes);\n\n addedNodes.forEach((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n node.classList.add(\"screenity-scrollbar\");\n }\n });\n\n removedNodes.forEach((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n node.classList.remove(\"screenity-scrollbar\");\n }\n });\n }\n }\n });\n\n observer.observe(parentDiv, { childList: true, subtree: true });\n\n return () => {\n observer.disconnect();\n };\n }, [parentRef.current]);\n\n useEffect(() => {\n if (contentState.chunkCount > 0) {\n progress.current = `(${Math.min(\n 100,\n Math.round((contentState.chunkIndex / contentState.chunkCount) * 100),\n )}%)`;\n }\n }, [contentState.chunkIndex, contentState.chunkCount]);\n\n useEffect(() => {\n // Check if we need to show support banner\n chrome.runtime.sendMessage({ type: \"check-banner-support\" }, (response) => {\n if (response && response.bannerSupport) {\n setContentState((prev) => ({\n ...prev,\n bannerSupport: true,\n }));\n }\n });\n }, []);\n\n // If editor was opened manually and we don't yet have a blob/ready state,\n // proactively ask the background to send chunks to this sandbox tab.\n useEffect(() => {\n let requested = false;\n if (requested) return; // guard\n requested = true;\n\n const tryRequest = () => {\n try {\n if (!contentState.blob && !contentState.ready) {\n console.debug(\n \"[Screenity][Sandbox] requesting chunks from background (send-chunks-to-sandbox)\",\n );\n // Ask background to send chunks to this tab (background will\n // determine the target tab or use this sender)\n chrome.runtime.sendMessage(\n { type: \"send-chunks-to-sandbox\" },\n () => {},\n );\n }\n } catch (err) {}\n };\n\n // Delay slightly to allow initial message listeners to be registered\n const t = setTimeout(tryRequest, 400);\n return () => clearTimeout(t);\n }, []);\n\n // Regenerate frame when entering crop mode to reflect current blob\n useEffect(() => {\n if (\n contentState.mode === \"crop\" &&\n contentState.getFrame &&\n contentState.blob &&\n contentState.ffmpeg\n ) {\n // Small delay to ensure state updates have propagated\n setTimeout(() => {\n contentState.getFrame();\n }, 50);\n }\n }, [contentState.mode]);\n\n return (\n
\n \n \n {/* Render the WaveformGenerator component and pass the ffmpeg instance as a prop */}\n {contentState.ffmpeg &&\n contentState.ready &&\n contentState.mode === \"edit\" && }\n {contentState.mode != \"edit\" && contentState.ready && }\n {!contentState.ready && (\n
\n \n
\n \n
\n {chrome.i18n.getMessage(\"sandboxProgressTitle\") +\n \" \" +\n (contentState.processingProgress > 0\n ? `(${Math.round(contentState.processingProgress)}%)`\n : progress.current)}\n
\n
\n {chrome.i18n.getMessage(\"sandboxProgressDescription\")}\n
\n {typeof contentState.openModal === \"function\" && (\n {\n contentState.openModal(\n chrome.i18n.getMessage(\"havingIssuesModalTitle\"),\n chrome.i18n.getMessage(\"havingIssuesModalDescription\"),\n chrome.i18n.getMessage(\"restoreRecording\"),\n chrome.i18n.getMessage(\"havingIssuesModalButton2\"),\n () => {\n chrome.runtime.sendMessage({ type: \"restore-recording\" });\n },\n () => {\n chrome.runtime.sendMessage({ type: \"report-bug\" });\n },\n null, // image\n null, // learnMore\n null, // learnMoreLink\n false, // colorSafe\n chrome.i18n.getMessage(\"getHelpButton\"),\n () => {\n chrome.runtime.sendMessage({\n type: \"report-error\",\n source: \"processing-stuck\",\n });\n },\n );\n }}\n >\n {chrome.i18n.getMessage(\"havingIssuesButton\")}\n
\n )}\n
\n \n
\n
\n )}\n \n \n );\n};\n\nexport default Sandbox;\n" }, { "path": "src/pages/Sandbox/components/editor/CropperWrap.jsx", "content": "import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport { CropperRef, Cropper } from \"react-advanced-cropper\";\nimport \"react-advanced-cropper/dist/style.css\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst CropperWrap = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const [image, setImage] = useState(null);\n const cropperRef = useRef(null);\n\n useEffect(() => {\n if (!cropperRef.current) return;\n if (!cropperRef.current.getCoordinates()) return;\n if (contentState.fromCropper) return;\n cropperRef.current.setCoordinates({\n top: contentState.top,\n left: contentState.left,\n width: contentState.width,\n height: contentState.height,\n });\n if (contentState.top != cropperRef.current.getCoordinates().top) {\n setContentState((prevState) => ({\n ...prevState,\n top: cropperRef.current.getCoordinates().top,\n }));\n }\n if (contentState.left != cropperRef.current.getCoordinates().left) {\n setContentState((prevState) => ({\n ...prevState,\n left: cropperRef.current.getCoordinates().left,\n }));\n }\n if (contentState.width != cropperRef.current.getCoordinates().width) {\n setContentState((prevState) => ({\n ...prevState,\n width: cropperRef.current.getCoordinates().width,\n }));\n }\n if (contentState.height != cropperRef.current.getCoordinates().height) {\n setContentState((prevState) => ({\n ...prevState,\n height: cropperRef.current.getCoordinates().height,\n }));\n }\n }, [\n contentState.width,\n contentState.height,\n contentState.top,\n contentState.left,\n ]);\n\n const onChange = (cropper) => {\n if (!cropper) return;\n setContentState((prevState) => ({\n ...prevState,\n top: cropper.getCoordinates().top,\n left: cropper.getCoordinates().left,\n width: cropper.getCoordinates().width,\n height: cropper.getCoordinates().height,\n fromCropper: true,\n }));\n };\n\n useEffect(() => {\n if (!contentState.blob) return;\n\n setImage(contentState.frame);\n }, [contentState.frame]);\n\n return (\n
\n \n
\n );\n};\n\nexport default CropperWrap;\n" }, { "path": "src/pages/Sandbox/components/editor/Dropdown.jsx", "content": "import React, { useEffect, useState, useContext, useRef } from \"react\";\n\nimport * as Select from \"@radix-ui/react-select\";\n\nimport styles from \"../../styles/edit/_Dropdown.module.scss\";\n\n// Icons\n//import DropdownIcon from \"../../public/assets/icons/dropdown.svg\";\n//import CheckWhiteIcon from \"../../public/assets/icons/check-white.svg\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst Dropdown = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const [label, setLabel] = useState(\"None\");\n const [value, setValue] = useState(\"none\");\n\n // Video presets for Youtube, Instagram, TikTok, etc.\n const presets = [\n {\n name: \"none\",\n },\n {\n name: \"Youtube\",\n label: \"Youtube\",\n width: 1920,\n height: 1080,\n },\n {\n name: \"YoutubeShorts\",\n label: \"Youtube Shorts\",\n width: 1920,\n height: 1080,\n },\n {\n name: \"InstagramPost\",\n label: \"Instagram Post\",\n width: 1080,\n height: 1080,\n },\n {\n name: \"InstagramStory\",\n label: \"Instagram Story\",\n width: 1080,\n height: 1920,\n },\n {\n name: \"TikTok\",\n label: \"TikTok\",\n width: 1080,\n height: 1920,\n },\n {\n name: \"Facebook\",\n label: \"Facebook\",\n width: 1080,\n height: 1080,\n },\n {\n name: \"Twitter\",\n label: \"Twitter\",\n width: 1080,\n height: 1080,\n },\n {\n name: \"Dribbble\",\n label: \"Dribbble\",\n width: 2800,\n height: 2100,\n },\n ];\n\n useEffect(() => {\n // Update the value when the contentState changes\n setValue(contentState.cropPreset);\n setLabel(\n presets.find((preset) => preset.name === contentState.cropPreset).label\n );\n\n if (contentState.cropPreset === \"none\") return;\n const preset = presets.find(\n (preset) => preset.name === contentState.cropPreset\n );\n const aspectRatio = preset.width / preset.height;\n const maxWidth = contentState.prevWidth;\n const maxHeight = contentState.prevHeight;\n\n let width = Math.min(preset.width, maxWidth);\n let height = Math.min(preset.height, maxHeight);\n\n if (width > maxWidth || height > maxHeight) {\n if (width / height > aspectRatio) {\n width = Math.min(maxWidth, width);\n height = width / aspectRatio;\n } else {\n height = Math.min(maxHeight, height);\n width = height * aspectRatio;\n }\n }\n\n if (width > maxWidth) {\n width = maxWidth;\n height = width / aspectRatio;\n }\n\n if (height > maxHeight) {\n height = maxHeight;\n width = height * aspectRatio;\n }\n\n const left = maxWidth / 2 - width / 2;\n const top = maxHeight / 2 - height / 2;\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n fromCropper: false,\n width: width,\n height: height,\n left: left,\n top: top,\n }));\n }, [contentState.cropPreset]);\n\n return (\n {\n setValue(newValue);\n setLabel(presets.find((preset) => preset.name === newValue).label);\n setContentState((prevContentState) => ({\n ...prevContentState,\n cropPreset: newValue,\n }));\n }}\n >\n \n {props.icon && (\n \n )}\n
\n {label}\n
\n \n \n \n \n \n \n \n \n \n None\n \n\n \n \n {presets.map(\n (preset, index) =>\n preset.name !== \"none\" && (\n \n {preset.label}\n \n )\n )}\n \n \n \n \n \n \n );\n};\n\nconst SelectItem = React.forwardRef(\n ({ children, className, ...props }, forwardedRef) => {\n return (\n \n {children}\n \n \n \n \n );\n }\n);\n\nexport default Dropdown;\n" }, { "path": "src/pages/Sandbox/components/editor/Switch.jsx", "content": "import React, { useContext, useEffect } from \"react\";\nimport * as S from \"@radix-ui/react-switch\";\n\n// Styles\nimport styles from \"../../styles/edit/_Switch.module.scss\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst Switch = () => {\n const [contentState, setContentState] = useContext(ContentStateContext);\n\n return (\n
\n
\n \n {chrome.i18n.getMessage(\"replaceAudioEditor\")}\n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n replaceAudio: checked,\n }));\n }}\n >\n \n \n
\n
\n );\n};\n\nexport default Switch;\n" }, { "path": "src/pages/Sandbox/components/editor/Trimmer.jsx", "content": "import React, { useRef, useEffect, useState, useContext } from \"react\";\nimport styles from \"../../styles/edit/_Trimmer.module.scss\";\nimport WaveformGenerator from \"./Waveform\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst Trimmer = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const trimmerRef = useRef(null);\n const startHandleRef = useRef(null);\n const endHandleRef = useRef(null);\n const isDragging = useRef(false);\n const activeHandle = useRef(null);\n\n const handleMouseDown = (e, handle) => {\n e.preventDefault();\n isDragging.current = true;\n activeHandle.current = handle;\n\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n };\n\n const handleMouseMove = (e) => {\n if (!isDragging.current) return;\n\n const trimmerRect = trimmerRef.current.getBoundingClientRect();\n const trimmerWidth = trimmerRect.width;\n const mouseX = e.clientX - trimmerRect.left;\n let newPosition = mouseX / trimmerWidth;\n\n if (activeHandle.current === \"start\") {\n newPosition += 0;\n const validPosition = Math.max(\n Math.min(newPosition, contentState.end - 0.02),\n 0\n );\n setContentState((prevContentState) => ({\n ...prevContentState,\n start: validPosition,\n }));\n } else if (activeHandle.current === \"end\") {\n newPosition -= 0;\n const validPosition = Math.min(\n Math.max(newPosition, contentState.start + 0.02),\n 1\n );\n setContentState((prevContentState) => ({\n ...prevContentState,\n end: validPosition,\n }));\n }\n };\n\n const handleMouseUp = () => {\n isDragging.current = false;\n activeHandle.current = null;\n\n contentState.addToHistory();\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n dragInteracted: true,\n }));\n\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n\n useEffect(() => {\n // Update the handle positions when the start and end values change\n startHandleRef.current.style.left = `calc(${contentState.start * 100}%)`;\n endHandleRef.current.style.left = `${contentState.end * 100}%`;\n }, [contentState.start, contentState.end]);\n\n return (\n
\n
\n
\n \n \n \n
\n handleMouseDown(e, \"start\")}\n ref={startHandleRef}\n />\n handleMouseDown(e, \"end\")}\n ref={endHandleRef}\n />\n
\n
\n \n
\n
\n );\n};\n\nexport default Trimmer;\n" }, { "path": "src/pages/Sandbox/components/editor/VideoPlayer.jsx", "content": "import React, { useContext, useEffect, useState, useRef, useMemo } from \"react\";\nimport { default as Plyr } from \"plyr-react\";\nimport \"plyr-react/plyr.css\";\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst VideoPlayer = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const playerRef = useRef(null);\n const [url, setUrl] = useState(null);\n const [source, setSource] = useState(null);\n const [isSet, setIsSet] = useState(false);\n\n useEffect(() => {\n if (\n playerRef.current &&\n playerRef.current.plyr &&\n contentState.updatePlayerTime\n ) {\n playerRef.current.plyr.currentTime = contentState.time;\n }\n }, [contentState.time]);\n\n const options = useMemo(\n () => ({\n controls: [\"play\", \"mute\", \"captions\", \"settings\", \"pip\", \"fullscreen\"],\n ratio: \"16:9\",\n blankVideo:\n \"chrome-extension://\" +\n chrome.i18n.getMessage(\"@@extension_id\") +\n \"/assets/blank.mp4\",\n keyboard: {\n global: true,\n },\n }),\n []\n );\n\n useEffect(() => {\n if (contentState.blob) {\n const objectURL = URL.createObjectURL(contentState.blob);\n setSource({\n type: \"video\",\n sources: [\n {\n src: objectURL,\n type: \"video/mp4\",\n },\n ],\n });\n setUrl(objectURL);\n\n // if (playerRef.current && playerRef.current.plyr) {\n // // Check when the video is playing, update the time in real time\n // playerRef.current.plyr.on(\"timeupdate\", () => {\n // setContentState((prevContentState) => ({\n // ...prevContentState,\n // time: playerRef.current.plyr.currentTime,\n // updatePlayerTime: false,\n // }));\n // });\n // }\n\n return () => {\n URL.revokeObjectURL(objectURL);\n\n // if (playerRef.current && playerRef.current.plyr) {\n // playerRef.current.plyr.off(\"timeupdate\");\n // }\n };\n }\n }, [contentState.blob, playerRef]);\n\n useEffect(() => {\n if (playerRef.current && playerRef.current.plyr) {\n // Check when the video is playing, update the time in real time\n playerRef.current.plyr.on(\"timeupdate\", () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: playerRef.current.plyr.currentTime,\n updatePlayerTime: false,\n }));\n });\n }\n\n return () => {\n if (playerRef.current && playerRef.current.plyr) {\n playerRef.current.plyr.off(\"timeupdate\");\n }\n };\n }, [playerRef]);\n\n const handleClick = () => {\n if (isSet) return;\n if (playerRef.current && playerRef.current.plyr) {\n setIsSet(true);\n playerRef.current.plyr.on(\"timeupdate\", () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: playerRef.current.plyr.currentTime,\n updatePlayerTime: false,\n }));\n });\n }\n };\n\n useEffect(() => {\n if (isSet) return;\n const handleKeyPress = (event) => {\n if (playerRef.current && playerRef.current.plyr) {\n setIsSet(true);\n playerRef.current.plyr.on(\"timeupdate\", () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: playerRef.current.plyr.currentTime,\n updatePlayerTime: false,\n }));\n });\n }\n };\n window.addEventListener(\"keydown\", handleKeyPress);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyPress);\n };\n }, [isSet]);\n\n return (\n
\n
\n {url && (\n \n )}\n
\n \n
\n );\n};\n\nexport default VideoPlayer;\n" }, { "path": "src/pages/Sandbox/components/editor/Waveform.jsx", "content": "import React, { useContext, useRef, useEffect, useState } from \"react\";\nimport WaveSurfer from \"wavesurfer.js\";\nimport styles from \"../../styles/edit/_Waveform.module.scss\";\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst WaveformGenerator = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const wavesurferRef = useRef(null);\n const waveformContainerRef = useRef(null);\n const customCursorRef = useRef(null);\n const ghostCursorRef = useRef(null);\n const [showGhost, setShowGhost] = useState(false);\n const mouseDown = useRef(false);\n\n async function blobToArrayBuffer(blob) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n if (reader.result instanceof ArrayBuffer) {\n resolve(reader.result);\n } else {\n reject(new Error(\"Failed to convert Blob to ArrayBuffer\"));\n }\n };\n reader.onerror = reject;\n reader.readAsArrayBuffer(blob);\n });\n }\n\n const loadWaveform = async (blob) => {\n try {\n wavesurferRef.current = WaveSurfer.create({\n container: waveformContainerRef.current,\n waveColor: \"#C4C5CE\",\n progressColor: \"#9596A2\",\n interpolation: \"cubic\",\n height: \"auto\",\n cursorWidth: 0,\n });\n const audioArrayBuffer = await blobToArrayBuffer(blob);\n\n wavesurferRef.current.loadBlob(\n new Blob([audioArrayBuffer], { type: \"audio/wav\" })\n );\n\n wavesurferRef.current.on(\"seeking\", (currentTime) => {\n const containerRect =\n waveformContainerRef.current.getBoundingClientRect();\n const cursorX =\n containerRect.width *\n (currentTime / wavesurferRef.current.getDuration());\n customCursorRef.current.style.left = `${cursorX}px`;\n setContentState((prevContentState) => ({\n ...prevContentState,\n time: currentTime,\n updatePlayerTime: true,\n }));\n });\n } catch (error) {\n console.error(\"Error loading waveform:\", error);\n }\n };\n\n const handleMouseEnter = () => {\n if (mouseDown.current) return;\n setShowGhost(true);\n };\n\n const handleMouseMove = (e) => {\n const containerRect = waveformContainerRef.current.getBoundingClientRect();\n const cursorX = e.clientX - containerRect.left;\n const minX = 0;\n const maxX = containerRect.width;\n const cursorStyle = ghostCursorRef.current.style;\n cursorStyle.left = `${cursorX}px`;\n };\n\n const handleMouseLeave = () => {\n setShowGhost(false);\n };\n\n const handleMouseDown = (e) => {\n if (waveformContainerRef.current.contains(e.target)) return;\n mouseDown.current = true;\n setShowGhost(false);\n };\n\n const handleMouseUp = () => {\n mouseDown.current = false;\n };\n\n useEffect(() => {\n if (!contentState.blob) return;\n loadWaveform(contentState.blob);\n const container = waveformContainerRef.current;\n container.addEventListener(\"mouseover\", handleMouseEnter);\n container.addEventListener(\"mousemove\", handleMouseMove);\n container.addEventListener(\"mouseleave\", handleMouseLeave);\n document.addEventListener(\"mousedown\", handleMouseDown);\n document.addEventListener(\"mouseup\", handleMouseUp);\n\n if (wavesurferRef.current) {\n wavesurferRef.current.on(\"seek\", (position) => {\n const containerRect =\n waveformContainerRef.current.getBoundingClientRect();\n const cursorX = containerRect.width * position;\n customCursorRef.current.style.left = `${\n cursorX + containerRect.left\n }px`;\n });\n }\n\n return () => {\n if (wavesurferRef.current) {\n wavesurferRef.current.destroy();\n }\n container.removeEventListener(\"mouseenter\", handleMouseEnter);\n container.removeEventListener(\"mousemove\", handleMouseMove);\n container.removeEventListener(\"mouseleave\", handleMouseLeave);\n document.removeEventListener(\"mousedown\", handleMouseDown);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [contentState.blob]);\n\n useEffect(() => {\n if (!contentState.blob) return;\n if (contentState.updatePlayerTime) return;\n if (waveformContainerRef.current === null) return;\n\n const video = document.createElement(\"video\");\n video.preload = \"metadata\";\n video.onloadedmetadata = async () => {\n const containerRect =\n waveformContainerRef.current.getBoundingClientRect();\n const cursorX =\n containerRect.width * (contentState.time / video.duration);\n customCursorRef.current.style.left = `${cursorX}px`;\n\n URL.revokeObjectURL(video.src);\n video.remove();\n };\n video.src = URL.createObjectURL(contentState.blob);\n }, [contentState.time, contentState.blob, waveformContainerRef.current]);\n\n return (\n
\n
\n
\n
\n \n );\n};\n\nexport default WaveformGenerator;\n" }, { "path": "src/pages/Sandbox/components/global/Modal.jsx", "content": "import React, { useState, useEffect, useContext, useCallback } from \"react\";\nimport * as AlertDialog from \"@radix-ui/react-alert-dialog\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\";\n\nconst Modal = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext);\n const [title, setTitle] = useState(\"Test\");\n const [description, setDescription] = useState(\"Description here\");\n const [button1, setButton1] = useState(\"Submit\");\n const [button2, setButton2] = useState(\"Cancel\");\n const [trigger, setTrigger] = useState(() => {});\n const [trigger2, setTrigger2] = useState(() => {});\n const [showModal, setShowModal] = useState(false);\n const [image, setImage] = useState(null);\n const [learnmore, setLearnMore] = useState(null);\n const [learnMoreLink, setLearnMoreLink] = useState(() => {});\n const [colorSafe, setColorSafe] = useState(false);\n const [sideButton, setSideButton] = useState(false);\n const [sideButtonAction, setSideButtonAction] = useState(() => {});\n\n const openModal = useCallback(\n (\n title,\n description,\n button1,\n button2,\n action,\n action2,\n image = null,\n learnMore = null,\n learnMoreLink = null,\n colorSafe = false,\n sideButton = false,\n sideButtonAction = () => {}\n ) => {\n setTitle(title);\n setDescription(description);\n setButton1(button1);\n setButton2(button2);\n setShowModal(true);\n setTrigger(() => action);\n setTrigger2(() => action2);\n setImage(image);\n setLearnMore(learnMore);\n setLearnMoreLink(() => learnMoreLink);\n setColorSafe(colorSafe);\n setSideButton(sideButton);\n setSideButtonAction(() => sideButtonAction);\n }\n );\n\n useEffect(() => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openModal: openModal,\n }));\n\n return () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n openModal: null,\n }));\n };\n }, []);\n\n return (\n {\n setShowModal(open);\n }}\n >\n \n \n \n \n \n {title}\n \n \n {description}\n {learnmore && \" \"}\n {learnmore && (\n {\n e.preventDefault();\n e.stopPropagation();\n learnMoreLink();\n }}\n target=\"_blank\"\n >\n {learnmore}\n \n )}\n \n {image && (\n \n )}\n
\n {sideButton && (\n {\n sideButtonAction();\n setShowModal(false);\n }}\n >\n {sideButton}\n \n )}\n {button2 && (\n \n \n \n )}\n {button1 && (\n \n trigger()}\n >\n {button1}\n \n \n )}\n
\n \n \n \n );\n};\n\nexport default Modal;\n" }, { "path": "src/pages/Sandbox/components/global/ProBanner.jsx", "content": "import React, { useContext, useState } from \"react\";\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst CLOUD_FEATURES_ENABLED =\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\";\n\nconst ProBanner = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const titleKey = CLOUD_FEATURES_ENABLED\n ? \"proBannerTitle\"\n : \"hostBannerTitle\";\n\n const descriptionKey = CLOUD_FEATURES_ENABLED\n ? \"proBannerDescription\"\n : \"hostBannerDescription\";\n\n return (\n
\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(titleKey) ||\n \"Unlock cloud sharing, multi-scene editing, auto zooms, captions & more\"}\n
\n
\n {chrome.i18n.getMessage(descriptionKey) ||\n \"Screenity will always be free, open-source, and ad-free. Pro helps cover cloud & infra costs, & supports development by a solo indie dev! ❤️\"}\n
\n
\n
\n
\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n bannerSupport: false,\n }));\n chrome.runtime.sendMessage({ type: \"hide-banner\" });\n }}\n >\n {chrome.i18n.getMessage(\"proBannerAltButton\") || \"Don't show again\"}\n \n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n bannerSupport: false,\n }));\n chrome.runtime.sendMessage({ type: \"hide-banner\" });\n chrome.runtime.sendMessage({ type: \"pricing\" });\n }}\n >\n {chrome.i18n.getMessage(\"proBannerButton\") || \"Try it\"}\n \n
\n
\n );\n};\n\nexport default ProBanner;\n" }, { "path": "src/pages/Sandbox/components/player/HelpButton.jsx", "content": "import React, { useContext, useState, useEffect } from \"react\";\nimport styles from \"../../styles/player/_HelpButton.module.scss\";\nimport { ReactSVG } from \"react-svg\";\nimport { ContentStateContext } from \"../../context/ContentState\";\n\nconst HelpButton = () => {\n const [contentState] = useContext(ContentStateContext);\n const [windowWidth, setWindowWidth] = useState(\n typeof window !== \"undefined\" ? window.innerWidth : 1000\n );\n\n useEffect(() => {\n const handleResize = () => setWindowWidth(window.innerWidth);\n window.addEventListener(\"resize\", handleResize);\n\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n const shouldOffset = contentState.bannerSupport && windowWidth > 900;\n\n return (\n {\n chrome.runtime.sendMessage({ type: \"open-help\" });\n }}\n >\n \n \n );\n};\n\nexport default HelpButton;\n" }, { "path": "src/pages/Sandbox/components/player/ShareModal.jsx", "content": "import React, { useContext, useState } from \"react\";\n\nimport styles from \"../../styles/player/_ShareModal.module.scss\";\n\nimport { ReactSVG } from \"react-svg\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst URL = \"/assets/\";\n\nconst ShareModal = ({ showShare, setShowShare }) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n return (\n
\n
\n {\n setShowShare(false);\n }}\n >\n \n
\n
👋
\n
\n {chrome.i18n.getMessage(\"shareModalSandboxTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"shareModalSandboxDescription\")}\n
\n {\n chrome.runtime.sendMessage({ type: \"join-waitlist\" });\n setShowShare(false);\n }}\n >\n {chrome.i18n.getMessage(\"shareModalSandboxButton\")}\n
\n \n {\n setShowShare(false);\n }}\n >\n \n );\n};\n\nexport default ShareModal;\n" }, { "path": "src/pages/Sandbox/components/player/Title.jsx", "content": "import React, { useContext, useState, useEffect, useRef } from \"react\";\n\n// Styles\nimport styles from \"../../styles/player/_Title.module.scss\";\nconst URL = \"/assets/\";\n\n// Icon\nimport { ReactSVG } from \"react-svg\";\n\nimport ShareModal from \"./ShareModal\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst Title = () => {\n const [showShare, setShowShare] = useState(false);\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const inputRef = useRef(null);\n // Show the video title, as a heading by default (multiline), on click show a text input to edit the title\n const [showTitle, setShowTitle] = useState(true);\n const [title, setTitle] = useState(contentState.title);\n const [displayTitle, setDisplayTitle] = useState(contentState.title);\n\n useEffect(() => {\n setTitle(contentState.title);\n if (contentState.title.length > 80) {\n setDisplayTitle(contentState.title.slice(0, 80) + \"...\");\n } else {\n setDisplayTitle(contentState.title);\n }\n }, [contentState.title]);\n\n const handleTitleChange = (e) => {\n setTitle(e.target.value);\n };\n\n const handleTitleClick = () => {\n setShowTitle(false);\n };\n\n const handleTitleBlur = () => {\n setShowTitle(true);\n setContentState((prevState) => ({\n ...prevState,\n title: title,\n }));\n };\n\n useEffect(() => {\n if (!showTitle) {\n inputRef.current.focus();\n inputRef.current.select();\n }\n }, [showTitle]);\n\n useEffect(() => {\n const handleKeyDown = (e) => {\n if (e.key === \"Enter\") {\n setShowTitle(true);\n setContentState((prevState) => ({\n ...prevState,\n title: title,\n }));\n } else if (e.key === \"Escape\") {\n setShowTitle(true);\n setTitle(contentState.title);\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [title]);\n\n return (\n
\n {showShare && (\n \n )}\n
\n {showTitle ? (\n <>\n

\n {displayTitle}{\" \"}\n \n

\n {/* {\n chrome.runtime.sendMessage({ type: \"handle-login\" });\n }}\n >\n \n {chrome.i18n.getMessage(\"shareUnlockButton\") ||\n \"Sign in to share (pro)\"}\n
*/}\n \n ) : (\n \n )}\n
\n \n );\n};\n\nexport default Title;\n" }, { "path": "src/pages/Sandbox/components/player/VideoPlayer.jsx", "content": "import React, { useContext, useEffect, useState, useRef, useMemo } from \"react\";\nimport Plyr from \"plyr-react\";\nimport \"../../styles/plyr.css\";\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\n// Components\nimport Title from \"./Title\";\n\nconst VideoPlayer = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const playerRef = useRef(null);\n const [url, setUrl] = useState(null);\n const [source, setSource] = useState(null);\n const contentStateRef = useRef(contentState);\n const bannerRef = useRef(null);\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n const getProcessingBannerText = () => {\n const base = chrome.i18n.getMessage(\"processingBannerEditor\");\n const pct = Math.round(contentStateRef.current.processingProgress || 0);\n if (pct > 0 && pct < 100) {\n return `${base} (${pct}%)`;\n }\n return base;\n };\n\n useEffect(() => {\n if (\n playerRef.current &&\n playerRef.current.plyr &&\n contentState.updatePlayerTime\n ) {\n playerRef.current.plyr.currentTime = contentState.time;\n }\n }, [contentState.time]);\n\n const options = useMemo(\n () => ({\n controls: [\n \"play\",\n \"rewind\",\n \"fast-forward\",\n \"progress\",\n \"current-time\",\n \"duration\",\n \"mute\",\n \"captions\",\n \"settings\",\n \"pip\",\n \"fullscreen\",\n ],\n urls: null,\n ratio: \"16:9\",\n blankVideo:\n \"chrome-extension://\" +\n chrome.i18n.getMessage(\"@@extension_id\") +\n \"/assets/blank.mp4\",\n keyboard: {\n global: true,\n },\n }),\n []\n );\n\n /*\n useEffect(() => {\n if (contentState.blob) {\n const objectURL = URL.createObjectURL(contentState.blob);\n setSource({\n type: \"video\",\n sources: [\n {\n src: objectURL,\n type: \"video/mp4\",\n },\n ],\n });\n setUrl(objectURL);\n\n return () => {\n URL.revokeObjectURL(objectURL);\n };\n }\n }, [contentState.blob, playerRef]);\n\t*/\n\n useEffect(() => {\n if (contentState.webm || contentState.blob) {\n let vid;\n if (contentState.blob) {\n if (bannerRef.current) {\n bannerRef.current.style.display = \"none\";\n bannerRef.current.remove();\n }\n vid = contentState.blob;\n } else if (contentState.webm) {\n vid = contentState.webm;\n }\n const objectURL = URL.createObjectURL(vid);\n setSource({\n type: \"video\",\n sources: [\n {\n src: objectURL,\n type: contentState.blob ? \"video/mp4\" : \"video/webm\",\n },\n ],\n });\n setUrl(objectURL);\n\n return () => {\n URL.revokeObjectURL(objectURL);\n };\n }\n }, [\n contentState.webm,\n contentState.blob,\n contentState.hasBeenEdited,\n playerRef,\n ]);\n\n // Use a mutation observer to check if .plyr--video is added to the DOM\n useEffect(() => {\n if (contentStateRef.current.mp4ready || contentStateRef.current.blob)\n return;\n const config = { attributes: true, childList: true, subtree: true };\n\n const callback = function (mutationsList, observer) {\n for (let mutation of mutationsList) {\n if (\n document.querySelector(\".plyr--video\") &&\n !contentStateRef.current.mp4ready &&\n !contentStateRef.current.blob &&\n !bannerRef.current &&\n !contentStateRef.current.noffmpeg &&\n !(\n contentStateRef.current.duration >\n contentStateRef.current.editLimit &&\n !contentStateRef.current.override\n )\n ) {\n bannerRef.current = document.createElement(\"div\");\n bannerRef.current.classList.add(\"videoBanner\");\n bannerRef.current.innerHTML =\n \" \" +\n getProcessingBannerText() +\n \"\";\n\n document.querySelector(\".plyr--video\").appendChild(bannerRef.current);\n }\n }\n };\n\n const observer = new MutationObserver(callback);\n observer.observe(document.body, config);\n\n return () => {\n observer.disconnect();\n\n if (bannerRef.current) {\n bannerRef.current.style.display = \"none\";\n bannerRef.current.remove();\n bannerRef.current = null;\n }\n };\n }, []);\n\n useEffect(() => {\n if (!bannerRef.current) return;\n bannerRef.current.innerHTML =\n \" \" +\n getProcessingBannerText() +\n \"\";\n }, [contentState.processingProgress]);\n\n return (\n
\n
\n {url && (\n \n )}\n {contentState.mode === \"player\" && }\n </div>\n <style>\n {`\n\t\t\t\t\t@media (max-width: 900px) {\n\t\t\t\t\t\t.videoPlayer {\n\t\t\t\t\t\t\tposition: relative!important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t`}\n </style>\n </div>\n );\n};\n\nexport default VideoPlayer;\n" }, { "path": "src/pages/Sandbox/context/ContentState.jsx", "content": "import React, {\n createContext,\n useContext,\n useState,\n useCallback,\n useRef,\n} from \"react\";\nimport { useEffect } from \"react\";\n\nimport fixWebmDuration from \"fix-webm-duration\";\nimport { default as fixWebmDurationFallback } from \"webm-duration-fix\";\n\nimport localforage from \"localforage\";\nimport DevHUD from \"../DevHUD\";\nimport {\n formatLocalTimestamp,\n getHostnameFromUrl,\n sanitizeFilenameBase,\n} from \"../../utils/filenameHelpers\";\nimport {\n debugRecordingEventWithSession,\n isRecordingDebugEnabled,\n} from \"../../utils/recordingDebug\";\n\nlocalforage.config({\n driver: localforage.INDEXEDDB,\n name: \"screenity\", // global DB group\n version: 1,\n});\n\nconst chunksStore = localforage.createInstance({\n name: \"chunks\", // the actual DB name\n storeName: \"keyvaluepairs\",\n});\n\nexport const ContentStateContext = createContext();\n\nconst DEBUG_RECORDER =\n typeof window !== \"undefined\" ? !!window.SCREENITY_DEBUG_RECORDER : false;\n// Enable post-stop debug logs for sandbox\nconst DEBUG_POSTSTOP = DEBUG_RECORDER;\n\nconst ContentState = (props) => {\n const videoChunks = useRef([]);\n const makeVideoCheck = useRef(false);\n const chunkCount = useRef(0);\n const recdbgSessionRef = useRef(null);\n const tabIdRef = useRef(null);\n // Stale-result guard + stuck-edit watchdog.\n const opIdRef = useRef(0);\n const editWatchdogRef = useRef(null);\n\n useEffect(() => {\n if (!DEBUG_RECORDER && !isRecordingDebugEnabled()) return;\n chrome.storage.local.get(\n [\"recordingDebugSessionId\", \"recordingDebugStartMs\"],\n (res) => {\n if (!res?.recordingDebugSessionId) return;\n recdbgSessionRef.current = {\n sessionId: res.recordingDebugSessionId,\n startTimeMs: res.recordingDebugStartMs || null,\n startPerfMs: null,\n };\n },\n );\n }, []);\n\n useEffect(() => {\n try {\n chrome.tabs.getCurrent((tab) => {\n tabIdRef.current = tab?.id || null;\n });\n } catch {}\n }, []);\n\n useEffect(() => {\n if (!DEBUG_RECORDER && !isRecordingDebugEnabled()) return;\n window.__screenityExportRecordingDebug = async () => {\n const { recordingDebugSessionId } = await chrome.storage.local.get([\n \"recordingDebugSessionId\",\n ]);\n if (!recordingDebugSessionId) {\n // eslint-disable-next-line no-console\n console.warn(\"[Sandbox] No recording debug session id found.\");\n return;\n }\n chrome.runtime.sendMessage({\n type: \"export-recording-debug\",\n sessionId: recordingDebugSessionId,\n });\n };\n window.__screenityPingRecdbg = () =>\n chrome.runtime.sendMessage({ type: \"recdbg-ping\" });\n }, []);\n\n const defaultState = {\n time: 0,\n editLimit: 420,\n blob: null,\n webm: null,\n originalBlob: null,\n updatePlayerTime: false,\n start: 0, // Add missing properties here\n end: 1,\n trimming: false,\n cutting: false,\n muting: false,\n editErrorType: null, // null | \"too-long\" | \"timeout\" | \"failed\"\n history: [{}], // Initialize history with a default state\n redoHistory: [],\n undoDisabled: true,\n redoDisabled: true,\n duration: 0,\n mode: \"player\",\n ffmpegLoaded: false,\n frame: null,\n getFrame: null,\n isFfmpegRunning: false,\n reencoding: false,\n prevWidth: 0,\n width: 0,\n prevHeight: 0,\n height: 0,\n top: 0,\n left: 0,\n fromCropper: false,\n base64: null,\n saveDrive: false,\n downloading: false,\n downloadingWEBM: false,\n downloadingGIF: false,\n volume: 1,\n cropPreset: \"none\",\n replaceAudio: false,\n title: null,\n ready: false,\n mp4ready: false,\n saved: false,\n iframeRef: null,\n offline: false,\n updateChrome: false,\n driveEnabled: false,\n hasBeenEdited: false,\n dragInteracted: false,\n noffmpeg: false,\n processingProgress: 0, // Progress percentage (0-100) for current operation\n openModal: null,\n rawBlob: null,\n override: false,\n fallback: false,\n chunkCount: 0,\n chunkIndex: 0,\n bannerSupport: false,\n backupBlob: null,\n recordingMeta: null,\n };\n\n const [contentState, _setContentState] = useState(defaultState);\n const contentStateRef = useRef(contentState);\n const launchModeRef = useRef(\"normal\");\n const launchRecordingIdRef = useRef(null);\n const pseudoProgressTimerRef = useRef(null);\n const pseudoProgressStartRef = useRef(null);\n const pseudoProgressStartAtRef = useRef(null);\n\n const setContentState = useCallback((updater) => {\n _setContentState((prev) => {\n const next = typeof updater === \"function\" ? updater(prev) : updater;\n contentStateRef.current = next;\n return next;\n });\n }, []);\n\n useEffect(() => {\n try {\n const params = new URLSearchParams(window.location.search);\n launchModeRef.current = params.get(\"mode\") || \"normal\";\n launchRecordingIdRef.current = params.get(\"recordingId\") || null;\n } catch {}\n }, []);\n\n useEffect(() => {\n if (launchModeRef.current !== \"postStop\") return;\n if (contentState.ready) {\n if (pseudoProgressTimerRef.current) {\n clearInterval(pseudoProgressTimerRef.current);\n pseudoProgressTimerRef.current = null;\n }\n return;\n }\n\n if (pseudoProgressTimerRef.current || pseudoProgressStartRef.current)\n return;\n pseudoProgressStartRef.current = setTimeout(() => {\n pseudoProgressStartRef.current = null;\n if (contentStateRef.current?.ready) return;\n if ((contentStateRef.current?.processingProgress || 0) > 0) return;\n pseudoProgressStartAtRef.current = Date.now();\n pseudoProgressTimerRef.current = setInterval(() => {\n setContentState((prev) => {\n if (prev.ready) return prev;\n const current = Number(prev.processingProgress || 0);\n const elapsedMs = Math.max(\n 0,\n Date.now() - (pseudoProgressStartAtRef.current || Date.now()),\n );\n const target = Math.min(90, Math.round((elapsedMs / 6000) * 90));\n const next = Math.max(current, target);\n if (next <= current) return prev;\n return { ...prev, processingProgress: next };\n });\n }, 200);\n }, 800);\n\n return () => {\n if (pseudoProgressStartRef.current) {\n clearTimeout(pseudoProgressStartRef.current);\n pseudoProgressStartRef.current = null;\n }\n pseudoProgressStartAtRef.current = null;\n if (pseudoProgressTimerRef.current) {\n clearInterval(pseudoProgressTimerRef.current);\n pseudoProgressTimerRef.current = null;\n }\n };\n }, [contentState.ready]);\n\n const waitForFinalizeReady = async (recordingId) => {\n if (!recordingId) return { ok: true };\n const key = `freeFinalizeStatus:${recordingId}`;\n const timeoutMs = 60_000;\n const pollMs = 200;\n const start = Date.now();\n debugRecordingEventWithSession(recdbgSessionRef.current, \"poststop-wait\", {\n recordingId,\n key,\n timeoutMs,\n pollMs,\n });\n\n const getStatus = async () => {\n const res = await chrome.storage.local.get([key]);\n return res[key] || null;\n };\n\n return new Promise(async (resolve) => {\n let done = false;\n const cleanup = () => {\n done = true;\n chrome.storage.onChanged.removeListener(onChanged);\n clearInterval(pollTimer);\n };\n\n const handleStatus = (status) => {\n if (!status || done) return;\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] waitForFinalizeReady status\", {\n status,\n });\n const rawPct = typeof status.percent === \"number\" ? status.percent : 0;\n const prePct = Math.min(90, Math.max(0, Math.round(rawPct * 0.9)));\n debugRecordingEventWithSession(\n recdbgSessionRef.current,\n \"poststop-status\",\n {\n recordingId,\n stage: status.stage,\n percent: status.percent,\n updatedAt: status.updatedAt,\n },\n );\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: true,\n processingProgress: Math.max(prev.processingProgress || 0, prePct),\n }));\n if (status.stage === \"chunks_ready\" || status.stage === \"ready\") {\n cleanup();\n debugRecordingEventWithSession(\n recdbgSessionRef.current,\n \"poststop-ready\",\n { recordingId, stage: status.stage },\n );\n resolve({ ok: true });\n } else if (status.stage === \"failed\") {\n cleanup();\n debugRecordingEventWithSession(\n recdbgSessionRef.current,\n \"poststop-failed\",\n { recordingId, error: status.error || \"failed\" },\n );\n resolve({ ok: false, error: status.error || \"failed\" });\n }\n };\n\n const onChanged = (changes, area) => {\n if (area !== \"local\") return;\n if (!changes[key]) return;\n handleStatus(changes[key].newValue);\n };\n\n chrome.storage.onChanged.addListener(onChanged);\n\n const pollTimer = setInterval(async () => {\n if (done) return;\n if (Date.now() - start > timeoutMs) {\n cleanup();\n debugRecordingEventWithSession(\n recdbgSessionRef.current,\n \"poststop-timeout\",\n { recordingId, timeoutMs },\n );\n resolve({ ok: false, error: \"timeout\" });\n return;\n }\n const status = await getStatus();\n handleStatus(status);\n }, pollMs);\n\n const initial = await getStatus();\n handleStatus(initial);\n });\n };\n\n useEffect(() => {\n if (launchModeRef.current !== \"postStop\") return;\n if (!contentState.chunkCount) return;\n const ratio =\n contentState.chunkCount > 0\n ? contentState.chunkIndex / contentState.chunkCount\n : 0;\n const pct = Math.min(100, Math.max(20, Math.round(ratio * 80 + 20)));\n setContentState((prev) => ({\n ...prev,\n processingProgress: pct,\n }));\n }, [contentState.chunkIndex, contentState.chunkCount]);\n\n const buildBlobFromChunks = async () => {\n const items = [];\n\n await chunksStore.ready();\n if (DEBUG_POSTSTOP)\n console.debug(\n \"[Screenity][Sandbox] buildBlobFromChunks: chunksStore ready, iterating\",\n );\n\n await chunksStore.iterate((value) => (items.push(value), undefined));\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] buildBlobFromChunks: items loaded\", {\n count: items.length,\n });\n\n items.sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0));\n const parts = items.map((c) =>\n c.chunk instanceof Blob ? c.chunk : new Blob([c.chunk]),\n );\n\n if (!parts.length) {\n debug(\"No chunks found in IndexedDB\");\n if (DEBUG_POSTSTOP)\n console.warn(\n \"[Screenity][Sandbox] buildBlobFromChunks: no parts found in IndexedDB\",\n );\n debugRecordingEventWithSession(recdbgSessionRef.current, \"blob-empty\", {\n chunkCount: 0,\n });\n return null;\n }\n\n const first = parts[0];\n const inferredType = first?.type || \"video/webm\";\n\n const blob = new Blob(parts, { type: inferredType });\n if (DEBUG_POSTSTOP)\n console.debug(\n \"[Screenity][Sandbox] buildBlobFromChunks: reconstructed blob\",\n {\n size: blob.size,\n type: blob.type,\n },\n );\n reconstructVideo(blob);\n return blob;\n };\n\n // useEffect(() => {\n // contentStateRef.current = contentState;\n // }, [contentState]);\n\n // Check if the user is offline\n // useEffect(() => {\n // if (!navigator.onLine) {\n // setContentState((prevState) => ({\n // ...prevState,\n // offline: true,\n // }));\n // }\n // }, []);\n\n // Generate a title based on the current time unless this is a tab recording\n useEffect(() => {\n const loadInitialTitle = async () => {\n const date = new Date();\n const formattedDate = date.toLocaleString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n hour: \"numeric\",\n minute: \"2-digit\",\n hour12: true,\n });\n const fallbackTitle = `Screenity video - ${formattedDate}`;\n\n try {\n const { recordingMeta } = await chrome.storage.local.get([\n \"recordingMeta\",\n ]);\n if (recordingMeta?.type === \"tab\") {\n const baseTitle = sanitizeFilenameBase(\n recordingMeta.title?.trim() ||\n getHostnameFromUrl(recordingMeta.url) ||\n fallbackTitle,\n );\n const timestamp = formatLocalTimestamp(recordingMeta.startedAt);\n setContentState((prevState) => ({\n ...prevState,\n title: `${baseTitle} — ${timestamp}`,\n recordingMeta,\n }));\n chrome.storage.local.remove([\"recordingMeta\"]);\n return;\n }\n } catch (error) {\n console.warn(\"Failed to load recording meta:\", error);\n }\n\n setContentState((prevState) => ({\n ...prevState,\n title: fallbackTitle,\n recordingMeta: null,\n }));\n };\n\n loadInitialTitle();\n }, []);\n\n // Show a popup when attempting to close the tab if the user has not downloaded their video\n useEffect(() => {\n if (!contentState.saved) {\n window.onbeforeunload = function () {\n return true;\n };\n } else {\n window.onbeforeunload = null;\n }\n }, [contentState.saved]);\n\n const createBackup = () => {\n setContentState((prev) => ({\n ...prev,\n backupBlob: prev.blob,\n }));\n };\n\n const restoreBackup = () => {\n setContentState((prev) => ({\n ...prev,\n blob: prev.backupBlob || prev.blob,\n mode: \"player\",\n start: 0,\n end: 1,\n backupBlob: null,\n }));\n };\n\n const clearBackup = () => {\n setContentState((prev) => ({\n ...prev,\n backupBlob: null,\n }));\n };\n\n const addToHistory = useCallback(() => {\n setContentState((prevState) => ({\n ...prevState,\n history: [...prevState.history, prevState],\n redoHistory: [], // Clear redo history when a new state is added\n }));\n }, [contentState]);\n\n const undo = useCallback(() => {\n if (contentState.history.length > 1) {\n const previousState =\n contentState.history[contentState.history.length - 2];\n const newHistory = contentState.history.slice(0, -1);\n setContentState((prevState) => ({\n ...prevState,\n ...previousState,\n history: newHistory,\n redoHistory: [contentState, ...contentState.redoHistory],\n }));\n }\n }, [contentState]);\n\n const redo = useCallback(() => {\n if (contentState.redoHistory.length > 0) {\n const nextState = contentState.redoHistory[0];\n const newRedoHistory = contentState.redoHistory.slice(1);\n setContentState((prevState) => ({\n ...prevState,\n ...nextState,\n history: [...contentState.history, contentState],\n redoHistory: newRedoHistory,\n }));\n }\n }, [contentState]);\n\n const base64ToUint8Array = (base64) => {\n const dataUrlRegex = /^data:(.*?);base64,/;\n const matches = base64.match(dataUrlRegex);\n if (matches !== null) {\n // Base64 is a data URL\n const mimeType = matches[1];\n const binaryString = atob(base64.slice(matches[0].length));\n const bytes = new Uint8Array(binaryString.length);\n for (let i = 0; i < binaryString.length; i++) {\n bytes[i] = binaryString.charCodeAt(i);\n }\n return new Blob([bytes], { type: mimeType });\n } else {\n // Base64 is a regular string\n const binaryString = atob(base64);\n const bytes = new Uint8Array(binaryString.length);\n for (let i = 0; i < binaryString.length; i++) {\n bytes[i] = binaryString.charCodeAt(i);\n }\n return bytes;\n }\n };\n\n useEffect(() => {\n if (!contentState.blob) return;\n\n // Get duration of video blob\n const video = document.createElement(\"video\");\n video.preload = \"metadata\";\n video.onloadedmetadata = async () => {\n setContentState((prevState) => ({\n ...prevState,\n duration: video.duration,\n width: video.videoWidth,\n height: video.videoHeight,\n prevWidth: video.videoWidth,\n prevHeight: video.videoHeight,\n }));\n\n URL.revokeObjectURL(video.src);\n video.remove();\n };\n video.src = URL.createObjectURL(contentState.blob);\n }, [contentState.blob]);\n\n const reconstructVideo = async (withBlob) => {\n // Sniff MIME type from magic bytes (WebCodecs chunks are MP4, not WebM).\n let inferredType = \"video/webm; codecs=vp8,opus\";\n if (!withBlob && videoChunks.current.length > 0) {\n try {\n const head = videoChunks.current[0];\n if (head && head.length >= 8) {\n const magic = new TextDecoder().decode(head.slice(4, 8));\n if (magic === \"ftyp\") {\n inferredType = \"video/mp4\";\n }\n if (DEBUG_RECORDER)\n console.log(\"[Screenity][Sandbox] reconstructVideo inferred type\", {\n magic,\n inferredType,\n chunkCount: videoChunks.current.length,\n totalSize: videoChunks.current.reduce((s, c) => s + c.length, 0),\n });\n }\n } catch (e) {\n console.warn(\"[Screenity][Sandbox] reconstructVideo type sniff failed\", e);\n }\n }\n\n let blob = withBlob\n ? withBlob\n : new Blob(videoChunks.current, { type: inferredType });\n\n if (blob.type === \"video/mp4\") {\n if (DEBUG_RECORDER)\n console.log(\"[Screenity][Sandbox] reconstructVideo: fast MP4 path taken\", {\n size: blob.size,\n });\n //const TOO_BIG_BYTES = 200 * 1024 * 1024;\n // const TOO_BIG_BYTES = 0;\n // if (blob.size > TOO_BIG_BYTES) {\n // // Convert Blob → base64 first so we can pass to sandbox\n // const reader = new FileReader();\n // reader.onloadend = () => {\n // const base64 = reader.result;\n\n // setContentState((prev) => ({\n // ...prev,\n // base64,\n // compressing: true,\n // mp4ready: false,\n // ready: false,\n // rawBlob: prev.rawBlob || blob,\n // }));\n\n // // Send to sandbox for compression\n // sendMessage({\n // type: \"compress-video\",\n // base64,\n // topLevel: true,\n // });\n // };\n // reader.readAsDataURL(blob);\n\n // return;\n // }\n\n setContentState((prev) => ({\n ...prev,\n blob: blob,\n webm: null,\n mp4ready: true,\n ready: true,\n rawBlob: blob,\n isFfmpegRunning: false,\n noffmpeg: false,\n }));\n\n // Extract duration, width, height\n const video = document.createElement(\"video\");\n video.preload = \"metadata\";\n video.onloadedmetadata = () => {\n setContentState((prev) => ({\n ...prev,\n duration: video.duration,\n width: video.videoWidth,\n height: video.videoHeight,\n }));\n\n URL.revokeObjectURL(video.src);\n };\n video.src = URL.createObjectURL(blob);\n\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n chrome.runtime.sendMessage({ type: \"diag-editor-ready\", path: \"mp4-fast\" }).catch(() => {});\n return;\n }\n\n let { recordingDuration } = await chrome.storage.local.get(\n \"recordingDuration\",\n );\n\n // If recordingDuration is missing or 0, try to probe it from the blob\n if (!recordingDuration || recordingDuration <= 0) {\n console.warn(\n \"[Screenity][WebM] recordingDuration missing or 0, probing from blob\",\n );\n try {\n const probeDuration = await new Promise((resolve) => {\n const probe = document.createElement(\"video\");\n probe.preload = \"metadata\";\n const timeout = setTimeout(() => {\n URL.revokeObjectURL(probe.src);\n resolve(0);\n }, 5000);\n probe.onloadedmetadata = () => {\n clearTimeout(timeout);\n const dur = probe.duration;\n URL.revokeObjectURL(probe.src);\n if (Number.isFinite(dur) && dur > 0) {\n resolve(Math.round(dur * 1000));\n } else {\n resolve(0);\n }\n };\n probe.onerror = () => {\n clearTimeout(timeout);\n URL.revokeObjectURL(probe.src);\n resolve(0);\n };\n probe.src = URL.createObjectURL(blob);\n });\n if (probeDuration > 0) {\n recordingDuration = probeDuration;\n }\n } catch (err) {\n console.warn(\"[Screenity][WebM] blob duration probe failed:\", err);\n }\n }\n\n // Check if token is present\n const { token } = await chrome.storage.local.get(\"token\");\n\n let driveEnabled = false;\n\n if (token && token !== null) {\n driveEnabled = true;\n }\n\n const safeDuration = Number(recordingDuration) || 0;\n setContentState((prevState) => ({\n ...prevState,\n rawBlob: blob,\n duration: safeDuration / 1000,\n }));\n\n // Check if user is in Windows 10\n const isWindows10 = navigator.userAgent.match(/Windows NT 10.0/);\n\n try {\n if (safeDuration > 0) {\n if (!isWindows10) {\n fixWebmDuration(\n blob,\n safeDuration,\n async (fixedWebm) => {\n // Skip conversion only if Chrome is outdated or recording exceeds edit limit\n if (\n contentStateRef.current.updateChrome ||\n contentStateRef.current.noffmpeg ||\n (contentStateRef.current.duration >\n contentStateRef.current.editLimit &&\n !contentStateRef.current.override)\n ) {\n setContentState((prevState) => ({\n ...prevState,\n webm: fixedWebm,\n ready: true,\n isFfmpegRunning: false,\n }));\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n return;\n }\n\n const reader = new FileReader();\n reader.onloadend = function () {\n const base64data = reader.result;\n setContentState((prevContentState) => ({\n ...prevContentState,\n base64: base64data,\n driveEnabled: driveEnabled,\n }));\n };\n reader.readAsDataURL(fixedWebm);\n },\n { logger: false },\n );\n } else {\n const fixedWebm = await fixWebmDurationFallback(blob, {\n type: \"video/webm; codecs=vp8, opus\",\n });\n // Skip conversion only if Chrome is outdated or recording exceeds edit limit\n if (\n contentStateRef.current.updateChrome ||\n contentStateRef.current.noffmpeg ||\n (contentStateRef.current.duration >\n contentStateRef.current.editLimit &&\n !contentStateRef.current.override)\n ) {\n setContentState((prevState) => ({\n ...prevState,\n webm: fixedWebm,\n ready: true,\n isFfmpegRunning: false,\n }));\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n return;\n }\n\n const reader = new FileReader();\n reader.onloadend = function () {\n const base64data = reader.result;\n setContentState((prevContentState) => ({\n ...prevContentState,\n base64: base64data,\n driveEnabled: driveEnabled,\n }));\n };\n reader.readAsDataURL(fixedWebm);\n }\n } else {\n // Duration unknown — skip fixing, use raw blob as-is\n console.warn(\n \"[Screenity][WebM] skipping duration fix: safeDuration=0, blob will have broken seek metadata\",\n );\n // Skip conversion only if Chrome is outdated or recording exceeds edit limit\n if (\n contentStateRef.current.updateChrome ||\n contentStateRef.current.noffmpeg ||\n (contentStateRef.current.duration >\n contentStateRef.current.editLimit &&\n !contentStateRef.current.override)\n ) {\n setContentState((prevState) => ({\n ...prevState,\n webm: blob,\n ready: true,\n isFfmpegRunning: false,\n }));\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n return;\n }\n\n const reader = new FileReader();\n reader.onloadend = function () {\n const base64data = reader.result;\n setContentState((prevContentState) => ({\n ...prevContentState,\n base64: base64data,\n driveEnabled: driveEnabled,\n }));\n };\n reader.readAsDataURL(blob);\n }\n } catch (error) {\n console.error(\n \"[Screenity][WebM] duration fix failed, using unfixed blob:\",\n error,\n );\n setContentState((prevState) => ({\n ...prevState,\n webm: blob,\n ready: true,\n isFfmpegRunning: false,\n }));\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n }\n\n // 45s safety timeout for the direct-blob path — force ready if\n // fixWebmDuration or readAsDataURL hangs.\n if (withBlob) {\n setTimeout(() => {\n const s = contentStateRef.current;\n if (s?.ready) return;\n console.warn(\n \"[Screenity][WebM] reconstructVideo(blob) safety timeout: forcing ready with raw blob\",\n );\n setContentState((prev) => {\n if (prev.ready) return prev;\n return {\n ...prev,\n webm: prev.webm || prev.rawBlob || withBlob,\n ready: true,\n noffmpeg: true,\n isFfmpegRunning: false,\n };\n });\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n }, 45000);\n }\n };\n\n const checkMemory = () => {\n if (typeof contentStateRef.current.openModal === \"function\") {\n chrome.storage.local.get(\"memoryError\", (result) => {\n if (result.memoryError && result.memoryError !== null) {\n chrome.storage.local.set({ memoryError: false });\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"memoryLimitTitle\"),\n chrome.i18n.getMessage(\"memoryLimitDescription\"),\n chrome.i18n.getMessage(\"understoodButton\"),\n null,\n () => {},\n () => {},\n null,\n chrome.i18n.getMessage(\"learnMoreDot\"),\n () => {\n chrome.runtime.sendMessage({ type: \"memory-limit-help\" });\n },\n false, // colorSafe\n chrome.i18n.getMessage(\"getHelpButton\"),\n () => {\n chrome.runtime.sendMessage({\n type: \"report-error\",\n errorCode: \"REC_RUN_MEMORY\",\n source: \"memory-limit\",\n });\n },\n );\n }\n });\n }\n };\n\n useEffect(() => {\n chunkCount.current = contentState.chunkCount;\n }, [contentState.chunkCount]);\n\n const handleBatch = (chunks, sendResponse) => {\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] handleBatch called\", {\n chunksLen: chunks?.length,\n });\n // Process chunks asynchronously, but do not make this function async\n (async () => {\n try {\n await Promise.all(\n chunks.map(async (chunk) => {\n // contentStateRef is sync — chunkCount.current lags a render cycle.\n if (contentStateRef.current.chunkIndex >= contentStateRef.current.chunkCount) {\n return; // Skip processing\n }\n\n const chunkData = base64ToUint8Array(chunk.chunk);\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] handleBatch pushing chunk\", {\n index: chunk.index,\n size: chunkData?.size || null,\n });\n videoChunks.current.push(chunkData);\n\n // Assuming setContentState doesn't need to be awaited\n setContentState((prevState) => ({\n ...prevState,\n chunkIndex: prevState.chunkIndex + 1,\n }));\n }),\n );\n\n sendResponse({ status: \"ok\" });\n } catch (err) {\n console.error(\"Error processing batch\", err);\n try {\n sendResponse?.({\n status: \"error\",\n error: String(err?.message || err),\n });\n } catch {}\n }\n })();\n\n return true; // Keep the messaging channel open for the response\n };\n\n // Check Chrome version\n useEffect(() => {\n const version = navigator.userAgent.match(/Chrom(e|ium)\\/([0-9]+)\\./);\n\n const MIN_CHROME_VERSION = 109;\n\n if (version && parseInt(version[2], 10) < MIN_CHROME_VERSION) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n updateChrome: true,\n noffmpeg: true,\n }));\n }\n }, []);\n\n const makeVideoTab = (sendResponse = null, message) => {\n if (makeVideoCheck.current) return;\n makeVideoCheck.current = true;\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] makeVideoTab invoked\", {\n override: message?.override,\n });\n setContentState((prevState) => ({\n ...prevState,\n override: message.override,\n }));\n // All chunks received, reconstruct video\n checkMemory();\n reconstructVideo();\n\n // Timeout: if duration-fix hasn't finished, mark ready so the user\n // isn't stuck forever. Don't overwrite an already-fixed webm.\n const safetyCheck = () => {\n const s = contentStateRef.current;\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] makeVideoTab: safety-check\", {\n chunkCount: s?.chunkCount,\n chunkIndex: s?.chunkIndex,\n rawBlob: Boolean(s?.rawBlob),\n webm: Boolean(s?.webm),\n ready: s?.ready,\n });\n if (s?.ready) return; // Fix already completed, nothing to do\n\n const complete = s?.chunkCount > 0 && s?.chunkIndex >= s?.chunkCount;\n if (complete && s?.rawBlob) {\n // Keep the fixed webm if it landed between checks.\n if (s?.webm) {\n if (DEBUG_RECORDER)\n console.log(\n \"[Screenity][WebM] safety timeout: webm already set by fix, marking ready\",\n );\n setContentState((prev) => ({\n ...prev,\n ready: true,\n noffmpeg: true,\n isFfmpegRunning: false,\n }));\n } else {\n console.warn(\n \"[Screenity][WebM] safety timeout: duration fix did not complete in time, using unfixed rawBlob\",\n );\n setContentState((prev) => ({\n ...prev,\n webm: prev.rawBlob,\n ready: true,\n noffmpeg: true,\n isFfmpegRunning: false,\n }));\n }\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n }\n };\n // First check at 30s; if still not ready, final check at 60s\n setTimeout(() => {\n if (!contentStateRef.current?.ready) {\n safetyCheck();\n }\n }, 30000);\n setTimeout(() => {\n if (!contentStateRef.current?.ready) {\n console.warn(\n \"[Screenity][WebM] 60s safety timeout: force-marking ready\",\n );\n safetyCheck();\n }\n }, 60000);\n\n if (sendResponse) sendResponse({ status: \"ok\" });\n };\n\n const toBase64 = (blob) => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => {\n resolve(reader.result);\n };\n reader.onerror = reject;\n });\n };\n\n const onChromeMessage = useCallback(\n (request, sender, sendResponse) => {\n const message = request;\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] onChromeMessage\", {\n type: message?.type,\n senderTab: sender?.tab?.id,\n });\n if (\n message?._targetTabId &&\n tabIdRef.current &&\n message._targetTabId !== tabIdRef.current\n ) {\n return false;\n }\n if (message.type === \"chunk-count\") {\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] received chunk-count\", {\n count: message.count,\n });\n setContentState((prevState) => ({\n ...prevState,\n chunkCount: message.count,\n override: message.override,\n }));\n } else if (message.type === \"ping\") {\n sendResponse({ status: \"ready\" });\n } else if (message.type === \"new-chunk-tab\") {\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] received new-chunk-tab\", {\n chunksLen: message?.chunks?.length,\n });\n return handleBatch(message.chunks, sendResponse);\n } else if (message.type === \"make-video-tab\") {\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] received make-video-tab\");\n makeVideoTab(sendResponse, message);\n\n return true;\n } else if (message.type === \"saved-to-drive\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n saveDrive: false,\n driveEnabled: true,\n saved: true,\n }));\n } else if (message.type === \"restore-recording\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n fallback: true,\n noffmpeg: false, // Pretending FFmpeg is loaded (using Mediabunny)\n isFfmpegRunning: false,\n editLimit: 3600, // Set high edit limit (1 hour) for recovery mode\n }));\n\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n chrome.runtime.sendMessage({ type: \"send-chunks-to-sandbox\" });\n sendResponse({ status: \"deferred\" });\n return;\n }\n sendResponse({ status: \"ok\" });\n })\n .catch((error) => {\n sendResponse({ status: \"error\", error: error.message });\n });\n\n return true; // Keep message port open for async response\n } else if (message.type === \"large-recording\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n noffmpeg: false,\n isFfmpegRunning: true,\n editLimit: 0,\n }));\n const shouldGate =\n launchModeRef.current === \"postStop\" &&\n Boolean(launchRecordingIdRef.current);\n if (shouldGate) {\n waitForFinalizeReady(launchRecordingIdRef.current).then((result) => {\n if (!result.ok) {\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: false,\n noffmpeg: true,\n ffmpegLoaded: true,\n processingProgress: 0,\n }));\n // Try to recover chunks.\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n chrome.runtime.sendMessage({\n type: \"send-chunks-to-sandbox\",\n });\n }\n })\n .catch(() => {});\n sendResponse({ status: \"error\", error: result.error });\n return;\n }\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n chrome.runtime.sendMessage({\n type: \"send-chunks-to-sandbox\",\n });\n sendResponse({ status: \"deferred\" });\n return;\n }\n sendResponse({ status: \"ok\" });\n })\n .catch((error) =>\n sendResponse({ status: \"error\", error: error.message }),\n );\n });\n return true;\n }\n\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n chrome.runtime.sendMessage({ type: \"send-chunks-to-sandbox\" });\n sendResponse({ status: \"deferred\" });\n return;\n }\n sendResponse({ status: \"ok\" });\n })\n .catch((error) => {\n sendResponse({ status: \"error\", error: error.message });\n });\n\n return true; // Keep message port open for async response\n } else if (message.type === \"fallback-recording\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n fallback: true,\n noffmpeg: false,\n isFfmpegRunning: true,\n editLimit: 3600,\n }));\n const shouldGate =\n launchModeRef.current === \"postStop\" &&\n Boolean(launchRecordingIdRef.current);\n if (shouldGate) {\n waitForFinalizeReady(launchRecordingIdRef.current).then((result) => {\n if (!result.ok) {\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: false,\n noffmpeg: true,\n ffmpegLoaded: true,\n processingProgress: 0,\n }));\n // Try to recover chunks.\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n chrome.runtime.sendMessage({\n type: \"send-chunks-to-sandbox\",\n });\n }\n })\n .catch(() => {});\n sendResponse({ status: \"error\", error: result.error });\n return;\n }\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n chrome.runtime.sendMessage({\n type: \"send-chunks-to-sandbox\",\n });\n sendResponse({ status: \"deferred\" });\n return;\n }\n sendResponse({ status: \"ok\" });\n })\n .catch((error) =>\n sendResponse({ status: \"error\", error: error.message }),\n );\n });\n return true;\n }\n\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n chrome.runtime.sendMessage({ type: \"send-chunks-to-sandbox\" });\n sendResponse({ status: \"deferred\" });\n return;\n }\n sendResponse({ status: \"ok\" });\n })\n .catch((error) => {\n sendResponse({ status: \"error\", error: error.message });\n });\n\n return true;\n } else if (message.type === \"viewer-recording\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n fallback: true,\n noffmpeg: true, // No FFmpeg\n isFfmpegRunning: true,\n editLimit: 0, // No editing allowed\n }));\n const shouldGate =\n launchModeRef.current === \"postStop\" &&\n Boolean(launchRecordingIdRef.current);\n if (shouldGate) {\n waitForFinalizeReady(launchRecordingIdRef.current).then((result) => {\n if (!result.ok) {\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: false,\n noffmpeg: true,\n ffmpegLoaded: true,\n processingProgress: 0,\n }));\n // Try to recover chunks.\n buildBlobFromChunks().catch(() => {});\n sendResponse({ status: \"error\", error: result.error });\n return;\n }\n buildBlobFromChunks()\n .then(() => sendResponse({ status: \"ok\" }))\n .catch((error) =>\n sendResponse({ status: \"error\", error: error.message }),\n );\n });\n return true;\n }\n\n buildBlobFromChunks()\n .then(() => {\n sendResponse({ status: \"ok\" });\n })\n .catch((error) => {\n sendResponse({ status: \"error\", error: error.message });\n });\n\n return true;\n } else if (message.type === \"banner-support\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n bannerSupport: true,\n }));\n }\n },\n [\n makeVideoCheck.current,\n videoChunks.current,\n contentState,\n contentStateRef.current,\n ],\n );\n\n useEffect(() => {\n const messageListener = (message, sender, sendResponse) => {\n const shouldKeepPortOpen = onChromeMessage(message, sender, sendResponse);\n return shouldKeepPortOpen === true;\n };\n\n chrome.runtime.onMessage.addListener(messageListener);\n\n // Storage fallback listener: watch for background writing a `chunks_ready_for:<tabId>` key\n const storageListener = (changes, areaName) => {\n if (areaName !== \"local\") return;\n try {\n const tabId = tabIdRef.current;\n if (!tabId) return;\n const key = `chunks_ready_for:${tabId}`;\n if (changes[key]) {\n if (DEBUG_POSTSTOP)\n console.debug(\"[Screenity][Sandbox] storage fallback triggered\", {\n key,\n });\n // Ensure IndexedDB is available in this frame before attempting\n // to read chunks. Some sandboxed/iframe contexts (ffmpeg iframe)\n // may not expose IndexedDB; guard to avoid localforage throwing.\n if (!window.indexedDB) {\n if (DEBUG_POSTSTOP)\n console.warn(\n \"[Screenity][Sandbox] storage fallback: no indexedDB in this context, skipping\",\n );\n return;\n }\n\n // Asynchronously attempt to build the blob from IndexedDB\n buildBlobFromChunks()\n .then((blob) => {\n if (!blob) {\n if (DEBUG_POSTSTOP)\n console.warn(\n \"[Screenity][Sandbox] storage fallback: no blob built\",\n );\n return;\n }\n if (DEBUG_POSTSTOP)\n console.debug(\n \"[Screenity][Sandbox] storage fallback: blob built\",\n {\n size: blob.size,\n },\n );\n })\n .catch((err) => {\n if (DEBUG_POSTSTOP)\n console.warn(\n \"[Screenity][Sandbox] storage fallback build error\",\n err,\n );\n });\n }\n } catch (err) {\n if (DEBUG_POSTSTOP)\n console.warn(\"[Screenity][Sandbox] storageListener error\", err);\n }\n };\n\n // Only attach the storage fallback listener in the top-level window\n // (editor/page) — avoid running this inside sandboxed iframes used for\n // FFmpeg which may not expose IndexedDB.\n let storageListenerAttached = false;\n if (window.top === window.self) {\n chrome.storage.onChanged.addListener(storageListener);\n storageListenerAttached = true;\n } else if (DEBUG_POSTSTOP) {\n console.debug(\n \"[Screenity][Sandbox] running inside an iframe; skipping storage fallback listener\",\n );\n }\n\n return () => {\n chrome.runtime.onMessage.removeListener(messageListener);\n if (storageListenerAttached) {\n chrome.storage.onChanged.removeListener(storageListener);\n }\n };\n }, []);\n\n const onMessage = async (event) => {\n if (event.data.type === \"updated-blob\") {\n // Discard results from a timed-out or superseded operation.\n const msgOpId = event.data._opId;\n if (msgOpId != null && msgOpId !== opIdRef.current) return;\n\n const base64 = event.data.base64;\n\n const blob = base64ToUint8Array(base64);\n\n const wasCropping = contentState.cropping;\n const isTopLevel = event.data.topLevel === true;\n const isFromAudio = event.data.fromAudio === true;\n\n if (isFromAudio) {\n // Mid-chain: add-audio succeeded; reencode is still pending.\n // Forward the same opId so the reencode result is also validated.\n sendMessage({\n type: \"reencode-video\",\n blob,\n duration: contentState.duration,\n topLevel: isTopLevel,\n _opId: event.data._opId,\n });\n return;\n }\n\n clearEditOp();\n\n setContentState((prev) => {\n const wasFirstReady = !prev.mp4ready && isTopLevel;\n if (wasFirstReady) {\n chrome.runtime.sendMessage({ type: \"diag-editor-ready\", path: \"updated-blob\" }).catch(() => {});\n }\n return {\n ...prev,\n blob: blob,\n mp4ready: true,\n hasBeenEdited: event.data.edited === false ? prev.hasBeenEdited : true,\n isFfmpegRunning: false,\n reencoding: false,\n trimming: false,\n cutting: false,\n muting: false,\n cropping: false,\n processingProgress: 0,\n editErrorType: null,\n hasTempChanges: !isTopLevel,\n\n ...(prev.fromCropper && { mode: \"player\", fromCropper: false }),\n ...(prev.fromAudio && { mode: \"player\", fromAudio: false }),\n };\n });\n\n const video = document.createElement(\"video\");\n video.preload = \"metadata\";\n video.onloadedmetadata = async () => {\n setContentState((prev) => ({\n ...prev,\n duration: video.duration,\n width: video.videoWidth,\n height: video.videoHeight,\n start: 0,\n end: 1,\n ...(wasCropping && { top: 0, left: 0 }),\n }));\n\n if (event.data.addToHistory) {\n contentState.addToHistory();\n }\n\n URL.revokeObjectURL(video.src);\n video.remove();\n };\n\n video.src = URL.createObjectURL(blob);\n\n if (!contentState.originalBlob && isTopLevel) {\n setContentState((prev) => ({\n ...prev,\n originalBlob: blob,\n }));\n }\n } else if (event.data.type === \"download-mp4\") {\n const base64 = event.data.base64;\n\n const blob = base64ToUint8Array(base64);\n // Download the blob\n const url = URL.createObjectURL(blob);\n await requestDownload(url, \".mp4\");\n setContentState((prevContentState) => ({\n ...prevContentState,\n saved: true,\n isFfmpegRunning: false,\n downloading: false,\n }));\n } else if (event.data.type === \"download-gif\") {\n const base64 = event.data.base64;\n // const blob = new Blob([base64ToUint8Array(base64)], {\n // type: \"image/gif\",\n // });\n const blob = base64ToUint8Array(base64);\n // Download the blob\n const url = URL.createObjectURL(blob);\n await requestDownload(url, \".gif\");\n setContentState((prevContentState) => ({\n ...prevContentState,\n saved: true,\n isFfmpegRunning: false,\n downloadingGIF: false,\n }));\n } else if (event.data.type === \"new-frame\") {\n const url = URL.createObjectURL(event.data.frame);\n setContentState((prevContentState) => ({\n ...prevContentState,\n frame: url,\n isFfmpegRunning: false,\n }));\n } else if (event.data.type === \"ffmpeg-loaded\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n ffmpeg: true,\n ffmpegLoaded: true,\n isFfmpegRunning: false,\n }));\n } else if (event.data.type === \"ffmpeg-load-error\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n ffmpeg: true,\n noffmpeg: true,\n ffmpegLoaded: true,\n isFfmpegRunning: false,\n }));\n console.log(\"[Screenity][Editor] recording-complete sent from ffmpeg-load-error fallback\");\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n\n // if (!navigator.onLine) {\n // setContentState((prevState) => ({\n // ...prevState,\n // offline: true,\n // }));\n\n // // Try loading ffmpeg again when reconnected to the internet\n // window.addEventListener(\"online\", () => {\n // setContentState((prevState) => ({\n // ...prevState,\n // offline: false,\n // }));\n // contentState.loadFFmpeg();\n // });\n // }\n } else if (event.data.type === \"ffmpeg-error\") {\n console.warn(\"FFmpeg error:\", event.data.error);\n clearEditOp();\n\n // Fallback: allow playback/download using webm/rawBlob even if conversion fails\n setContentState((prev) => {\n // If an edit was actively running, surface the failure to the user\n const wasEditing = prev.isFfmpegRunning && (prev.cutting || prev.trimming || prev.muting || prev.cropping || prev.reencoding);\n return {\n ...prev,\n noffmpeg: true,\n ffmpegLoaded: true, // treat as \"done trying\"\n isFfmpegRunning: false,\n muting: false,\n cutting: false,\n trimming: false,\n reencoding: false,\n cropping: false,\n processingProgress: 0,\n editErrorType: wasEditing ? \"failed\" : prev.editErrorType,\n ...(prev.rawBlob || prev.webm\n ? { ready: true, webm: prev.webm || prev.rawBlob }\n : {}),\n };\n });\n\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n } else if (event.data.type === \"edit-too-long\") {\n // Too long for in-browser processing — reset so user can retry or trim.\n clearEditOp();\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: false,\n muting: false,\n cutting: false,\n trimming: false,\n reencoding: false,\n cropping: false,\n processingProgress: 0,\n editErrorType: \"too-long\",\n }));\n } else if (event.data.type === \"crop-update\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n mode: \"crop\",\n cropping: false,\n isFfmpegRunning: false,\n processingProgress: 0,\n start: 0,\n end: 1,\n fromCropper: false,\n }));\n\n setTimeout(() => {\n if (contentState.getFrame) {\n contentState.getFrame();\n }\n }, 100);\n } else if (event.data.type === \"ffmpeg-progress\") {\n const pct = Math.min(100, Math.max(0, Math.round(event.data.progress)));\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n processingProgress: pct,\n }));\n } else if (event.data.type === \"download-webm\") {\n const base64 = event.data.base64;\n // const blob = new Blob([base64ToUint8Array(base64)], {\n // type: \"video/webm\",\n // });\n const blob = base64ToUint8Array(base64);\n\n const url = URL.createObjectURL(blob);\n await requestDownload(url, \".webm\");\n\n setContentState((prevState) => ({\n ...prevState,\n saved: true,\n isFfmpegRunning: false,\n downloadingWEBM: false,\n }));\n }\n };\n\n // Listen to PostMessage events\n useEffect(() => {\n window.addEventListener(\"message\", onMessage);\n return () => window.removeEventListener(\"message\", onMessage);\n }, [onMessage]);\n\n const sendMessage = (message) => {\n window.parent.postMessage(message, \"*\");\n };\n\n const getBlob = async () => {\n // Skip conversion only if Chrome is outdated or recording exceeds edit limit\n if (\n contentState.noffmpeg ||\n (contentState.duration > contentState.editLimit && !contentState.override)\n ) {\n return;\n }\n\n // const webmVideo = new Blob([base64ToUint8Array(contentState.base64)], {\n // type: \"video/webm\",\n // });\n\n const webmVideo = base64ToUint8Array(contentState.base64);\n\n setContentState((prevState) => ({\n ...prevState,\n webm: webmVideo,\n ready: true,\n }));\n\n if (contentState.offline && contentState.ffmpeg === true) {\n // Offline (if I need to do anything differently)\n } else if (\n !contentState.updateChrome &&\n (contentState.duration <= contentState.editLimit || contentState.override)\n ) {\n // Set isFfmpegRunning to true when starting conversion\n setContentState((prevState) => ({\n ...prevState,\n isFfmpegRunning: true,\n }));\n sendMessage({\n type: \"base64-to-blob\",\n base64: contentState.base64,\n topLevel: true,\n });\n }\n\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n };\n\n useEffect(() => {\n if (!contentState.base64) return;\n if (!contentState.ffmpeg) return;\n if (!contentState.ffmpegLoaded) return;\n\n getBlob();\n }, [contentState.base64, contentState.ffmpeg, contentState.ffmpegLoaded]);\n\n // 30s fallback: if FFmpeg never loads (blocked CDN, worker crash, etc.),\n // force recovery mode so the user can still download their recording.\n useEffect(() => {\n if (!contentState.base64) return;\n if (!contentState.ffmpeg) return;\n if (contentState.ffmpegLoaded) return; // FFmpeg loaded normally — nothing to do\n if (contentState.noffmpeg) return; // already in fallback — nothing to do\n\n const timer = setTimeout(() => {\n // Re-check via ref in case state changed since the effect ran.\n const current = contentStateRef.current;\n if (current.ffmpegLoaded || current.noffmpeg) return;\n chrome.storage.local.set({ editorLoadTimeoutAt: Date.now() });\n setContentState((prev) => {\n // Double-check inside the updater for concurrent state races.\n if (prev.ffmpegLoaded || prev.noffmpeg) return prev;\n // Also set ready when falling back — getBlob() early-returns\n // when noffmpeg is true, so ready would never be set otherwise.\n const fallbackWebm = prev.webm || prev.rawBlob;\n return {\n ...prev,\n noffmpeg: true,\n ffmpegLoaded: true,\n fallback: true,\n ...(fallbackWebm && !prev.ready\n ? { webm: fallbackWebm, ready: true }\n : {}),\n };\n });\n console.log(\"[Screenity][Editor] recording-complete sent from ffmpeg-load-timeout fallback\");\n chrome.runtime.sendMessage({ type: \"recording-complete\" });\n }, 30000);\n\n return () => clearTimeout(timer);\n }, [contentState.base64, contentState.ffmpeg, contentState.ffmpegLoaded, contentState.noffmpeg]);\n\n const getImage = useCallback(async () => {\n if (!contentState.blob) return;\n if (!contentState.ffmpeg) return;\n if (contentState.isFfmpegRunning) return;\n\n setContentState((prevState) => ({\n ...prevState,\n isFfmpegRunning: true, // Set isFfmpegRunning to true to indicate that ffmpeg is running\n }));\n\n sendMessage({ type: \"get-frame\", time: 0, blob: contentState.blob });\n }, [contentState.blob, contentState.ffmpeg, contentState.isFfmpegRunning]);\n\n // Returns the opId to include in outgoing messages for stale-result validation.\n const beginEditOp = () => {\n if (editWatchdogRef.current) {\n clearTimeout(editWatchdogRef.current);\n }\n opIdRef.current += 1;\n const id = opIdRef.current;\n editWatchdogRef.current = setTimeout(() => {\n editWatchdogRef.current = null;\n opIdRef.current += 1; // invalidate any late-arriving result\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: false,\n muting: false,\n cutting: false,\n trimming: false,\n reencoding: false,\n cropping: false,\n processingProgress: 0,\n editErrorType: \"timeout\",\n }));\n }, 5 * 60 * 1000); // 5-minute ceiling\n return id;\n };\n\n // Clears the watchdog when an op completes or fails normally.\n const clearEditOp = () => {\n if (editWatchdogRef.current) {\n clearTimeout(editWatchdogRef.current);\n editWatchdogRef.current = null;\n }\n };\n\n const addAudio = async (videoBlob, audioBlob, volume) => {\n if (contentState.isFfmpegRunning) return;\n if (\n contentState.duration > contentState.editLimit &&\n !contentState.override\n )\n return;\n\n const sourceBlob = videoBlob || contentState.blob || contentState.webm;\n const opId = beginEditOp();\n\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: true,\n processingProgress: 0,\n editErrorType: null,\n }));\n\n sendMessage({\n type: \"add-audio-to-video\",\n blob: sourceBlob,\n audio: audioBlob,\n duration: contentState.duration,\n volume: volume,\n replaceAudio: contentState.replaceAudio,\n topLevel: false,\n _opId: opId,\n });\n };\n\n const handleTrim = async (cut) => {\n if (contentState.isFfmpegRunning) return;\n if (\n contentState.duration > contentState.editLimit &&\n !contentState.override\n )\n return;\n\n const sourceBlob = contentState.blob;\n const opId = beginEditOp();\n\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: true,\n processingProgress: 0,\n editErrorType: null,\n [cut ? \"cutting\" : \"trimming\"]: true,\n }));\n\n sendMessage({\n type: \"cut-video\",\n blob: sourceBlob,\n startTime: contentState.start * contentState.duration,\n endTime: contentState.end * contentState.duration,\n cut,\n duration: contentState.duration,\n encode: false,\n topLevel: false,\n _opId: opId,\n });\n };\n\n const handleMute = async () => {\n if (contentState.isFfmpegRunning) return;\n if (\n contentState.duration > contentState.editLimit &&\n !contentState.override\n )\n return;\n\n const sourceBlob = contentState.blob;\n const opId = beginEditOp();\n\n setContentState((prev) => ({\n ...prev,\n muting: true,\n isFfmpegRunning: true,\n processingProgress: 0,\n editErrorType: null,\n }));\n\n sendMessage({\n type: \"mute-video\",\n blob: sourceBlob,\n startTime: contentState.start * contentState.duration,\n endTime: contentState.end * contentState.duration,\n duration: contentState.duration,\n topLevel: false,\n _opId: opId,\n });\n };\n\n const handleCrop = async (x, y, width, height) => {\n if (contentState.isFfmpegRunning || contentState.cropping) return;\n if (\n contentState.duration > contentState.editLimit &&\n !contentState.override\n )\n return;\n\n const opId = beginEditOp();\n\n setContentState((prevState) => ({\n ...prevState,\n cropping: true,\n isFfmpegRunning: true,\n processingProgress: 0,\n editErrorType: null,\n }));\n\n const sourceBlob = contentState.blob;\n\n sendMessage({\n type: \"crop-video\",\n blob: sourceBlob,\n x,\n y,\n width,\n height,\n topLevel: false,\n _opId: opId,\n });\n\n return true;\n };\n\n const handleReencode = async (topLevel = false) => {\n if (contentState.isFfmpegRunning) return;\n\n const sourceBlob = contentState.blob;\n const opId = beginEditOp();\n\n setContentState((prevState) => ({\n ...prevState,\n isFfmpegRunning: true,\n reencoding: true,\n processingProgress: 0,\n editErrorType: null,\n }));\n\n sendMessage({\n type: \"reencode-video\",\n blob: sourceBlob,\n duration: contentState.duration,\n topLevel,\n _opId: opId,\n });\n\n return true;\n };\n\n const sanitizeDownloadFilename = (name, { maxLen = 180 } = {}) => {\n let out = String(name ?? \"\");\n out = out.replace(/[\\\\/:*?\"<>|]/g, \" \");\n out = out.replace(/[\\u0000-\\u001F\\u007F]/g, \" \");\n out = out.replace(/\\s+/g, \" \").trim();\n out = out.replace(/[. ]+$/g, \"\");\n\n if (!out) out = \"Screenity recording\";\n if (out.length > maxLen) out = out.slice(0, maxLen).trim();\n\n return out;\n };\n\n const requestDownload = async (url, ext) => {\n const rawTitle = contentStateRef.current.title || \"Screenity recording\";\n\n const base = sanitizeDownloadFilename(rawTitle);\n const filename = `${base}${ext}`;\n\n const revoke = () => {\n try {\n URL.revokeObjectURL(url);\n } catch {}\n };\n\n // Brave fallback: send base64 to background for download\n if ((navigator.brave && (await navigator.brave.isBrave())) || false) {\n const resp = await fetch(url);\n const blob = await resp.blob();\n await new Promise((resolve) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n chrome.runtime.sendMessage({\n type: \"request-download\",\n base64: reader.result,\n title: filename,\n });\n revoke();\n resolve();\n };\n reader.readAsDataURL(blob);\n });\n return;\n }\n\n const downloadId = await new Promise((resolve, reject) => {\n chrome.downloads.download({ url, filename, saveAs: true }, (id) => {\n if (chrome.runtime.lastError || !id) {\n reject(chrome.runtime.lastError || new Error(\"Download failed\"));\n } else {\n resolve(id);\n }\n });\n });\n\n await new Promise((resolve) => {\n const handler = async (delta) => {\n if (delta.id !== downloadId || !delta.state) return;\n\n const done = () => {\n chrome.downloads.onChanged.removeListener(handler);\n revoke();\n resolve();\n };\n\n if (\n delta.state.current === \"interrupted\" &&\n delta.error?.current !== \"USER_CANCELED\"\n ) {\n try {\n const resp = await fetch(url);\n const blob = await resp.blob();\n await new Promise((res) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n chrome.runtime.sendMessage({\n type: \"request-download\",\n base64: reader.result,\n title: filename,\n });\n res();\n };\n reader.readAsDataURL(blob);\n });\n } finally {\n done();\n }\n } else if (\n delta.state.current === \"complete\" ||\n delta.state.current === \"interrupted\"\n ) {\n done();\n }\n };\n\n chrome.downloads.onChanged.addListener(handler);\n });\n };\n\n const download = async () => {\n if (contentState.isFfmpegRunning || contentState.downloading) return;\n\n setContentState((prev) => ({\n ...prev,\n downloading: true,\n isFfmpegRunning: true,\n }));\n\n try {\n const url = URL.createObjectURL(contentState.blob);\n await requestDownload(url, \".mp4\");\n setContentState((prev) => ({ ...prev, saved: true }));\n } catch (err) {\n console.error(\"MP4 download failed:\", err);\n } finally {\n setContentState((prev) => ({\n ...prev,\n downloading: false,\n isFfmpegRunning: false,\n }));\n }\n };\n\n const downloadWEBM = async () => {\n if (contentState.isFfmpegRunning || contentState.downloadingWEBM) return;\n\n const sourceBlob = contentState.blob || contentState.webm;\n\n if (!sourceBlob) {\n return;\n }\n\n const hasFFmpeg = contentState.ffmpegLoaded && !contentState.noffmpeg;\n const isAlreadyWebm = sourceBlob.type === \"video/webm\";\n\n if (!hasFFmpeg || isAlreadyWebm) {\n const url = URL.createObjectURL(sourceBlob);\n await requestDownload(url, \".webm\");\n\n setContentState((prevState) => ({\n ...prevState,\n downloadingWEBM: false,\n isFfmpegRunning: false,\n saved: true,\n }));\n return;\n }\n\n // ➜ ADD THIS: If untouched + already webm → skip FFmpeg entirely\n if (!contentState.hasBeenEdited && contentState.webm) {\n const url = URL.createObjectURL(contentState.webm);\n await requestDownload(url, \".webm\");\n\n setContentState((prev) => ({\n ...prev,\n downloadingWEBM: false,\n isFfmpegRunning: false,\n saved: true,\n }));\n return;\n }\n\n setContentState((prevState) => ({\n ...prevState,\n downloadingWEBM: true,\n isFfmpegRunning: true,\n processingProgress: 0,\n }));\n\n sendMessage({\n type: \"to-webm\",\n blob: sourceBlob,\n duration: contentState.duration,\n });\n\n await waitForUpdatedBlob();\n\n setContentState((prevState) => ({\n ...prevState,\n downloadingWEBM: false,\n isFfmpegRunning: false,\n saved: true,\n }));\n };\n\n const downloadGIF = async () => {\n if (contentState.isFfmpegRunning || contentState.downloading) {\n return;\n }\n if (contentState.duration > 30) return;\n\n setContentState((prevState) => ({\n ...prevState,\n downloadingGIF: true,\n isFfmpegRunning: true,\n }));\n\n sendMessage({\n type: \"to-gif\",\n blob: contentState.blob,\n });\n };\n\n const loadFFmpeg = async () => {\n sendMessage({ type: \"load-ffmpeg\" });\n };\n\n const waitForUpdatedBlob = () => {\n return new Promise((resolve) => {\n const handler = (event) => {\n if (event.data?.type === \"updated-blob\") {\n window.removeEventListener(\"message\", handler);\n resolve();\n }\n };\n window.addEventListener(\"message\", handler);\n });\n };\n\n contentState.undo = undo;\n contentState.redo = redo;\n contentState.addToHistory = addToHistory;\n contentState.handleTrim = handleTrim;\n contentState.handleMute = handleMute;\n contentState.download = download;\n contentState.handleCrop = handleCrop;\n contentState.handleReencode = handleReencode;\n contentState.getFrame = getImage;\n contentState.downloadGIF = downloadGIF;\n contentState.downloadWEBM = downloadWEBM;\n contentState.addAudio = addAudio;\n contentState.loadFFmpeg = loadFFmpeg;\n contentState.waitForUpdatedBlob = waitForUpdatedBlob;\n contentState.createBackup = createBackup;\n contentState.restoreBackup = restoreBackup;\n contentState.clearBackup = clearBackup;\n\n return (\n <ContentStateContext.Provider value={[contentState, setContentState]}>\n {props.children}\n {process.env.SCREENITY_DEV_MODE === \"true\" && (\n <DevHUD\n setContentState={setContentState}\n contentStateRef={contentStateRef}\n />\n )}\n </ContentStateContext.Provider>\n );\n};\n\nexport default ContentState;\n" }, { "path": "src/pages/Sandbox/index.html", "content": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Screenity - Video editor\n \n \n \n\n \n
\n \n\n" }, { "path": "src/pages/Sandbox/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\nimport Sandbox from \"./Sandbox\";\nimport ContentState from \"./context/ContentState\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render(\n \n \n \n );\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Sandbox/layout/editor/AudioNav.js", "content": "import React, { useContext } from \"react\";\nimport styles from \"../../styles/edit/_EditorNav.module.scss\";\nimport { ContentStateContext } from \"../../context/ContentState\";\n\nconst URL = \"/assets/\";\n\nconst AudioNav = () => {\n const [contentState, setContentState] = useContext(ContentStateContext);\n\n const handleCancel = () => {\n setContentState((prev) => ({\n ...prev,\n mode: \"player\",\n start: 0,\n end: 1,\n pendingAudio: null,\n }));\n contentState.restoreBackup();\n };\n\n const handleRevert = () => {\n setContentState((prev) => ({\n ...prev,\n blob: contentState.originalBlob,\n start: 0,\n end: 1,\n pendingAudio: null,\n }));\n };\n\n const saveChanges = async () => {\n const { pendingAudio, volume } = contentState;\n const source = contentState.blob;\n\n setContentState((prev) => ({\n ...prev,\n isFfmpegRunning: true,\n processingProgress: 0,\n fromAudio: true,\n }));\n\n if (pendingAudio) {\n contentState.addAudio(source, pendingAudio, volume);\n } else {\n contentState.handleReencode(true);\n }\n\n await contentState.waitForUpdatedBlob?.();\n\n contentState.clearBackup();\n };\n\n return (\n
\n
\n chrome.runtime.sendMessage({ type: \"open-home\" })}\n >\n \"Logo\"\n
\n\n
\n
\n {chrome.i18n.getMessage(\"sandboxEditorMainTitle\")}{\" \"}\n BETA\n
\n
\n\n
\n \n {chrome.i18n.getMessage(\"sandboxEditorCancelButton\")}\n \n\n \n {chrome.i18n.getMessage(\"sandboxEditorRevertButton\")}\n \n\n \n {contentState.isFfmpegRunning ? (\n contentState.processingProgress > 0 ? (\n <>\n {chrome.i18n.getMessage(\"sandboxEditorSaveProgressButton\") ||\n \"Saving\"}{\" \"}\n {Math.round(contentState.processingProgress)}%\n \n ) : (\n chrome.i18n.getMessage(\"sandboxEditorSaveProgressButton\") ||\n \"Saving...\"\n )\n ) : (\n chrome.i18n.getMessage(\"sandboxEditorSaveButton\") ||\n \"Save changes\"\n )}\n \n
\n
\n
\n );\n};\n\nexport default AudioNav;\n" }, { "path": "src/pages/Sandbox/layout/editor/AudioUI.js", "content": "import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport styles from \"../../styles/player/_RightPanel.module.scss\";\n\n// Components\nimport Dropdown from \"../../components/editor/Dropdown\";\nimport * as Slider from \"@radix-ui/react-slider\";\nimport Switch from \"../../components/editor/Switch\";\n\n// Icons\nconst URL = \"/assets/\";\n\nimport { ReactSVG } from \"react-svg\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst AudioUI = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const [audio, setAudio] = useState(null);\n const prevBlob = useRef(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n if (contentState.blob !== prevBlob.current) {\n prevBlob.current = contentState.blob;\n setAudio(null);\n setContentState((prevContentState) => ({\n ...prevContentState,\n volume: 1,\n }));\n }\n }, []);\n\n const handleAudio = async (e) => {\n const file = e.target.files[0];\n // Check if the file is an audio file\n if (!file.type.includes(\"audio\") || file.size === 0) {\n return;\n }\n\n // Use rawBlob (webm from recovery) if blob (mp4) is not available yet\n const videoBlob =\n contentState.blob || contentState.rawBlob || contentState.webm;\n //contentState.addAudio(videoBlob, file, contentState.volume);\n setAudio(file);\n setContentState((prev) => ({\n ...prev,\n pendingAudio: file,\n }));\n };\n\n const handleVolume = (e) => {\n let value = e.target.value;\n if (isNaN(value)) {\n return;\n }\n if (value < 0) {\n return;\n }\n if (value > 100) {\n return;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n volume: parseFloat(value) / 100,\n }));\n };\n\n return (\n
\n
\n
Audio upload
\n \n {!audio && (\n inputRef.current.click()}\n >\n \n
\n
\n {chrome.i18n.getMessage(\"sandboxAudioDragAndDrop\")}\n
\n
\n {chrome.i18n.getMessage(\"sandboxAudioOrBrowse\")}\n
\n
\n
\n )}\n {audio && (\n
\n
\n \n
\n
\n {audio.name}\n
\n
\n {\n setAudio(null);\n setContentState((prevContentState) => ({\n ...prevContentState,\n blob: prevBlob.current,\n }));\n inputRef.current.value = null;\n }}\n />\n
\n
\n )}\n
\n
\n
\n {chrome.i18n.getMessage(\"sandboxAudioSettingsTitle\")}\n
\n
\n
\n
\n {chrome.i18n.getMessage(\"sandboxAudioVolumeLabel\")}\n
\n handleVolume(e)}\n value={Math.round(contentState.volume * 100)}\n onBlur={(e) => {\n if (e.target.value === \"\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n volume: 0,\n }));\n }\n }}\n />\n %\n
\n {\n setContentState((prevContentState) => ({\n ...prevContentState,\n // Round to the nearest integer\n volume: Math.round(newValue) / 100,\n }));\n }}\n value={[contentState.volume * 100]}\n >\n \n \n \n \n \n
\n \n {/* \n {chrome.i18n.getMessage(\"sandboxAudioUpdateButton\")}\n */}\n
\n
\n );\n};\n\nexport default AudioUI;\n" }, { "path": "src/pages/Sandbox/layout/editor/CropNav.js", "content": "import React, { useContext } from \"react\";\nimport styles from \"../../styles/edit/_EditorNav.module.scss\";\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst URL = \"/assets/\";\n\nconst CropNav = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const handleCancel = () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n mode: \"player\",\n start: 0,\n end: 1,\n width: contentState.prevWidth,\n height: contentState.prevHeight,\n left: 0,\n top: 0,\n fromCropper: false,\n }));\n\n contentState.clearBackup();\n };\n\n const handleRevert = () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n blob: contentState.originalBlob,\n start: 0,\n end: 1,\n width: contentState.prevWidth,\n height: contentState.prevHeight,\n left: 0,\n top: 0,\n fromCropper: false,\n }));\n };\n\n const saveChanges = async () => {\n await contentState.handleCrop(\n contentState.left,\n contentState.top,\n contentState.width,\n contentState.height\n );\n\n setContentState((prev) => ({\n ...prev,\n // mode: \"player\",\n fromCropper: true,\n hasTempChanges: false,\n }));\n\n contentState.clearBackup();\n };\n\n return (\n
\n
\n {\n chrome.runtime.sendMessage({ type: \"open-home\" });\n }}\n >\n \"Logo\"\n
\n
\n
\n {chrome.i18n.getMessage(\"sandboxEditorMainTitle\") + \" \"}{\" \"}\n BETA\n
\n
\n
\n \n {chrome.i18n.getMessage(\"sandboxEditorCancelButton\")}\n \n \n {chrome.i18n.getMessage(\"sandboxEditorRevertButton\")}\n \n \n {contentState.isFfmpegRunning ? (\n contentState.processingProgress > 0 ? (\n <>\n {chrome.i18n.getMessage(\"sandboxEditorSaveProgressButton\") ||\n \"Saving\"}{\" \"}\n {Math.round(contentState.processingProgress)}%\n \n ) : (\n chrome.i18n.getMessage(\"sandboxEditorSaveProgressButton\") ||\n \"Saving...\"\n )\n ) : (\n chrome.i18n.getMessage(\"sandboxEditorSaveButton\") ||\n \"Save changes\"\n )}\n \n
\n
\n \n );\n};\n\nexport default CropNav;\n" }, { "path": "src/pages/Sandbox/layout/editor/CropUI.js", "content": "import React, { useState, useEffect, useContext } from \"react\";\nimport styles from \"../../styles/player/_RightPanel.module.scss\";\n\n// Components\nimport Dropdown from \"../../components/editor/Dropdown\";\n\nimport { ReactSVG } from \"react-svg\";\n\nconst URL =\n \"chrome-extension://\" + chrome.i18n.getMessage(\"@@extension_id\") + \"/assets/\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst CropUI = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const handleWidth = (e) => {\n let value = e.target.value;\n if (isNaN(value)) {\n return;\n }\n if (value < 0) {\n return;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n width: parseFloat(value),\n cropPreset: \"none\",\n fromCropper: false,\n }));\n };\n\n const handleHeight = (e) => {\n let value = e.target.value;\n if (isNaN(value)) {\n return;\n }\n if (value < 0) {\n return;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n height: parseFloat(value),\n cropPreset: \"none\",\n fromCropper: false,\n }));\n };\n\n const handleTop = (e) => {\n let value = e.target.value;\n if (isNaN(value)) {\n return;\n }\n if (value < 0) {\n return;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n top: parseFloat(value),\n fromCropper: false,\n }));\n };\n\n const handleLeft = (e) => {\n let value = e.target.value;\n if (isNaN(value)) {\n return;\n }\n if (value < 0) {\n return;\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n left: parseFloat(value),\n fromCropper: false,\n }));\n };\n\n return (\n
\n {/*\n
\n
Dimensions
\n
\n
Preset
\n \n
\n
\n\t\t\t\t\t\t\t*/}\n\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"croppingInfoTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"videoProcessingLabelDescription\")}\n
\n
\n {\n chrome.runtime.sendMessage({ type: \"upgrade-info\" });\n }}\n >\n {chrome.i18n.getMessage(\"learnMoreLabel\")}\n
\n
\n
\n
\n {chrome.i18n.getMessage(\"sandboxCropTitle\")}\n
\n
\n
\n
\n {chrome.i18n.getMessage(\"widthLabel\")}\n
\n handleWidth(e)}\n onBlur={(e) => {\n if (e.target.value === \"\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n width: 0,\n }));\n }\n }}\n value={contentState.width}\n />\n px\n
\n
\n
\n {chrome.i18n.getMessage(\"heightLabel\")}\n
\n handleHeight(e)}\n value={contentState.height}\n onBlur={(e) => {\n if (e.target.value === \"\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n height: 0,\n }));\n }\n }}\n />\n px\n
\n
\n
\n
\n
\n {chrome.i18n.getMessage(\"leftLabel\")}\n
\n handleLeft(e)}\n onBlur={(e) => {\n if (e.target.value === \"\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n left: 0,\n }));\n }\n }}\n value={contentState.left}\n />\n px\n
\n
\n
\n {chrome.i18n.getMessage(\"topLabel\")}\n
\n handleTop(e)}\n onBlur={(e) => {\n if (e.target.value === \"\") {\n setContentState((prevContentState) => ({\n ...prevContentState,\n top: 0,\n }));\n }\n }}\n value={contentState.top}\n />\n px\n
\n {/* {\n contentState.handleCrop(\n contentState.left,\n contentState.top,\n contentState.width,\n contentState.height\n );\n }}\n disabled={contentState.isFfmpegRunning}\n >\n {chrome.i18n.getMessage(\"sandboxCropUpdateButton\") || \"Update crop\"}\n */}\n
\n
\n \n );\n};\n\nexport default CropUI;\n" }, { "path": "src/pages/Sandbox/layout/editor/Editor.js", "content": "import React, { useState, useEffect, useContext } from \"react\";\nimport EditorNav from \"./EditorNav\";\nimport VideoPlayer from \"../../components/editor/VideoPlayer\";\nimport TrimUI from \"./TrimUI\";\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nimport HelpButton from \"../../components/player/HelpButton\";\n\nconst Editor = ({ ffmpeg }) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const handleSeek = (t, updateTime) => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n updatePlayerTime: updateTime,\n time: t,\n }));\n };\n\n useEffect(() => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n history: [{}],\n redoHistory: [],\n }));\n contentState.addToHistory();\n }, []);\n\n return (\n
\n \n \n \n \n
\n );\n};\n\nexport default Editor;\n" }, { "path": "src/pages/Sandbox/layout/editor/EditorNav.js", "content": "import React, { useContext } from \"react\";\nimport styles from \"../../styles/edit/_EditorNav.module.scss\";\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst URL = \"/assets/\";\n\nconst EditorNav = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n const handleCancel = () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n mode: \"player\",\n start: 0,\n end: 1,\n }));\n\n contentState.restoreBackup();\n };\n\n const handleRevert = () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n blob: contentState.originalBlob,\n start: 0,\n end: 1,\n }));\n };\n\n const saveChanges = async () => {\n if (contentState.isFfmpegRunning) return;\n\n setContentState((prev) => ({\n ...prev,\n mode: \"player\",\n hasTempChanges: false,\n start: 0,\n end: 1,\n }));\n\n contentState.clearBackup();\n };\n\n return (\n
\n
\n {\n chrome.runtime.sendMessage({ type: \"open-home\" });\n }}\n >\n \"Logo\"\n
\n
\n
\n {chrome.i18n.getMessage(\"sandboxEditorMainTitle\")}{\" \"}\n BETA\n
\n
\n
\n \n {chrome.i18n.getMessage(\"sandboxEditorCancelButton\")}\n \n \n {chrome.i18n.getMessage(\"sandboxEditorRevertButton\")}\n \n\n \n {contentState.reencoding\n ? chrome.i18n.getMessage(\"sandboxEditorSaveProgressButton\")\n : chrome.i18n.getMessage(\"sandboxEditorSaveButton\")}\n \n
\n
\n \n );\n};\n\nexport default EditorNav;\n" }, { "path": "src/pages/Sandbox/layout/editor/TrimUI.js", "content": "import React, { useContext, useState, useEffect } from \"react\";\nimport Trimmer from \"../../components/editor/Trimmer\";\nimport styles from \"../../styles/edit/_TrimUI.module.scss\";\n\n// Icons\nimport { ReactSVG } from \"react-svg\";\n\nconst URL = \"/assets/\";\n\nconst TrimIcon = URL + \"editor/icons/trim.svg\";\nconst RemoveIcon = URL + \"editor/icons/trash.svg\";\nconst MuteIcon = URL + \"editor/icons/mute.svg\";\nconst UndoIcon = URL + \"editor/icons/undo.svg\";\nconst RedoIcon = URL + \"editor/icons/redo.svg\";\nconst TimeIcon = URL + \"editor/icons/time.svg\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst TrimUI = (props) => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const [undoDisabled, setUndoDisabled] = useState(true);\n const [redoDisabled, setRedoDisabled] = useState(true);\n const [startTime, setStartTime] = useState(0);\n const [endTime, setEndTime] = useState(0);\n\n useEffect(() => {\n setStartTime(contentState.start * contentState.duration);\n setEndTime(contentState.end * contentState.duration);\n }, [contentState.duration, contentState.start, contentState.end]);\n\n useEffect(() => {\n if (contentState.history.length > 2) {\n setUndoDisabled(false);\n } else {\n setUndoDisabled(true);\n }\n }, [contentState.history]);\n\n useEffect(() => {\n if (contentState.redoHistory.length > 0) {\n setRedoDisabled(false);\n } else {\n setRedoDisabled(true);\n }\n }, [contentState.redoHistory]);\n\n const toTimeStamp = (time) => {\n const minutes = Math.floor(time / 60);\n const seconds = Math.floor(time - minutes * 60);\n\n if (seconds < 10) {\n return `${minutes}:0${seconds}`;\n } else {\n return `${minutes}:${seconds}`;\n }\n };\n\n return (\n
\n
\n
\n contentState.handleTrim(false)}\n disabled={\n contentState.isFfmpegRunning ||\n (contentState.start === 0 && contentState.end === 1)\n }\n >\n \n {contentState.trimming\n ? chrome.i18n.getMessage(\"sandboxEditorTrimProgressButton\") +\n (contentState.processingProgress > 0\n ? ` ${contentState.processingProgress}%`\n : \"\")\n : chrome.i18n.getMessage(\"sandboxEditorTrimButton\")}\n \n contentState.handleTrim(true)}\n >\n \n {contentState.cutting\n ? chrome.i18n.getMessage(\"sandboxEditorCutProgressButton\") +\n (contentState.processingProgress > 0\n ? ` ${contentState.processingProgress}%`\n : \"\")\n : chrome.i18n.getMessage(\"sandboxEditorCutButton\")}\n \n contentState.handleMute()}\n disabled={contentState.isFfmpegRunning}\n >\n \n {contentState.muting\n ? chrome.i18n.getMessage(\"sandboxEditorMuteProgressButton\") +\n (contentState.processingProgress > 0\n ? ` ${contentState.processingProgress}%`\n : \"\")\n : chrome.i18n.getMessage(\"sandboxEditorMuteButton\")}\n \n
\n
\n \n {toTimeStamp(startTime) + \" - \" + toTimeStamp(endTime)}\n
\n\n
\n contentState.undo()}\n disabled={undoDisabled || contentState.isFfmpegRunning}\n >\n \n {chrome.i18n.getMessage(\"undoLabel\")}\n \n contentState.redo()}\n disabled={redoDisabled || contentState.isFfmpegRunning}\n >\n \n {chrome.i18n.getMessage(\"redoLabel\")}\n \n
\n
\n \n {(!contentState.dragInteracted || contentState.duration > 3) && (\n
\n
\n \n
\n
\n {chrome.i18n.getMessage(\"sandboxEditorTrimInfo\")}\n {\n chrome.runtime.sendMessage({ type: \"trim-info\" });\n }}\n >\n {chrome.i18n.getMessage(\"learnMoreDot\")}\n
\n
\n
\n )}\n {contentState.dragInteracted && contentState.duration <= 3 && (\n
\n
\n \n
\n
\n {chrome.i18n.getMessage(\"sandboxEditorTooSmallInfo\")}\n {\n chrome.runtime.sendMessage({ type: \"trim-info\" });\n }}\n >\n {chrome.i18n.getMessage(\"learnMoreDot\")}\n
\n
\n \n )}\n \n );\n};\n\nexport default TrimUI;\n" }, { "path": "src/pages/Sandbox/layout/player/Content.js", "content": "import React, { useContext, useState } from \"react\";\nimport styles from \"../../styles/player/_Content.module.scss\";\n\n// Components\nimport VideoPlayer from \"../../components/player/VideoPlayer\";\nimport CropperWrap from \"../../components/editor/CropperWrap\";\nimport HelpButton from \"../../components/player/HelpButton\";\nimport ProBanner from \"../../components/global/ProBanner\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst Content = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n return (\n
\n
\n {contentState.mode === \"audio\" && }\n {contentState.mode === \"player\" && }\n {contentState.mode === \"crop\" && }\n
\n \n {contentState.bannerSupport && }\n
\n );\n};\n\nexport default Content;\n" }, { "path": "src/pages/Sandbox/layout/player/Player.js", "content": "import React, { useContext, useState } from \"react\";\n\n// Components\nimport PlayerNav from \"./PlayerNav\";\nimport CropNav from \"../editor/CropNav\";\nimport AudioNav from \"../editor/AudioNav\";\nimport RightPanel from \"./RightPanel\";\nimport Content from \"./Content\";\n\nimport styles from \"../../styles/player/_Player.module.scss\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst Player = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n\n return (\n
\n {contentState.mode === \"crop\" && }\n {contentState.mode === \"player\" && }\n {contentState.mode === \"audio\" && }\n
\n \n \n
\n
\n );\n};\n\nexport default Player;\n" }, { "path": "src/pages/Sandbox/layout/player/PlayerNav.js", "content": "import React, { useContext, useRef, useEffect } from \"react\";\nimport styles from \"../../styles/player/_Nav.module.scss\";\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\n// Icons\nimport { ReactSVG } from \"react-svg\";\n\nconst URL = \"/assets/\";\n\nconst StarIcon = URL + \"editor/icons/help-nav.svg\";\nconst HeartIcon = URL + \"editor/icons/heart.svg\";\nconst UnlockIcon = URL + \"editor/icons/unlock.svg\";\n\nconst PlayerNav = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const contentStateRef = useRef(null);\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n return (\n
\n
\n {\n chrome.runtime.sendMessage({ type: \"open-home\" });\n }}\n aria-label=\"home\"\n className={styles.navLeft}\n >\n \"Screenity\n
\n
\n {\n chrome.runtime.sendMessage({ type: \"open-help\" });\n }}\n >\n \n {chrome.i18n.getMessage(\"getHelpNav\")}\n \n {\n chrome.runtime.sendMessage({ type: \"pricing\" });\n }}\n >\n {\" \"}\n {chrome.i18n.getMessage(\"unlockMoreFeatures\") ||\n \"Unlock more features\"}\n \n
\n
\n \n );\n};\n\nexport default PlayerNav;\n" }, { "path": "src/pages/Sandbox/layout/player/RightPanel.js", "content": "import React, { useContext, useEffect, useState, useRef } from \"react\";\nimport styles from \"../../styles/player/_RightPanel.module.scss\";\n\nimport { buildDiagnosticZip } from \"../../../utils/buildDiagnosticZip\";\n\nimport { ReactSVG } from \"react-svg\";\n\nconst URL =\n \"chrome-extension://\" + chrome.i18n.getMessage(\"@@extension_id\") + \"/assets/\";\n\n// Components\nimport CropUI from \"../editor/CropUI\";\nimport AudioUI from \"../editor/AudioUI\";\n\n// Context\nimport { ContentStateContext } from \"../../context/ContentState\"; // Import the ContentState context\n\nconst RightPanel = () => {\n const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context\n const contentStateRef = useRef(contentState);\n const consoleErrorRef = useRef([]);\n\n useEffect(() => {\n console.error = (error) => {\n consoleErrorRef.current.push(error);\n };\n }, []);\n\n useEffect(() => {\n contentStateRef.current = contentState;\n }, [contentState]);\n\n // Returns a context-specific \"not available\" label for disabled buttons\n const getNotAvailableLabel = () => {\n if (contentState.fallback && contentState.noffmpeg && contentState.editLimit === 0) {\n return chrome.i18n.getMessage(\"notAvailableLongRecording\");\n }\n if (contentState.fallback && contentState.noffmpeg) {\n return chrome.i18n.getMessage(\"notAvailableRecoveryMode\");\n }\n return chrome.i18n.getMessage(\"notAvailableLabel\");\n };\n\n const getPreparingLabel = () => {\n const base = chrome.i18n.getMessage(\"preparingLabel\");\n const pct = Math.round(contentState.processingProgress || 0);\n if (!contentState.mp4ready && pct > 0) {\n return `${base} (${pct}%)`;\n }\n return base;\n };\n\n const saveToDrive = () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n saveDrive: true,\n }));\n\n const handleDriveResponse = (response) => {\n if (!response || response.status === \"ew\" || response.error) {\n console.error(\"[Drive] drive_save_failed:\", response?.error || \"unknown error\");\n setContentState((prevContentState) => ({\n ...prevContentState,\n saveDrive: false,\n }));\n }\n // On success, saveDrive is reset by the \"saved-to-drive\" message from background\n };\n\n const handleDriveError = (err) => {\n console.error(\"[Drive] drive_save_error:\", err);\n setContentState((prevContentState) => ({\n ...prevContentState,\n saveDrive: false,\n }));\n };\n\n if (contentState.noffmpeg || !contentState.mp4ready || !contentState.blob) {\n // Prefer the duration-fixed webm blob over rebuilding from raw chunks\n const fixedWebm = contentState.webm;\n if (fixedWebm && fixedWebm instanceof Blob && fixedWebm.size > 0) {\n const reader = new FileReader();\n reader.onload = () => {\n const dataUrl = reader.result;\n const base64 = dataUrl.split(\",\")[1];\n chrome.runtime\n .sendMessage({\n type: \"save-to-drive\",\n base64: base64,\n title: contentState.title,\n isWebm: true,\n })\n .then(handleDriveResponse)\n .catch(handleDriveError);\n };\n reader.onerror = () => {\n chrome.runtime\n .sendMessage({\n type: \"save-to-drive-fallback\",\n title: contentState.title,\n })\n .then(handleDriveResponse)\n .catch(handleDriveError);\n };\n reader.readAsDataURL(fixedWebm);\n } else {\n chrome.runtime\n .sendMessage({\n type: \"save-to-drive-fallback\",\n title: contentState.title,\n })\n .then(handleDriveResponse)\n .catch(handleDriveError);\n }\n } else {\n // Blob to base64\n const reader = new FileReader();\n reader.onload = () => {\n const dataUrl = reader.result;\n const base64 = dataUrl.split(\",\")[1];\n\n chrome.runtime\n .sendMessage({\n type: \"save-to-drive\",\n base64: base64,\n title: contentState.title,\n })\n .then(handleDriveResponse)\n .catch(handleDriveError);\n };\n reader.onerror = () => {\n console.error(\"[Drive] FileReader failed to read blob for Drive upload\");\n setContentState((prevContentState) => ({\n ...prevContentState,\n saveDrive: false,\n }));\n };\n if (\n !contentState.noffmpeg &&\n contentState.mp4ready &&\n contentState.blob\n ) {\n reader.readAsDataURL(contentState.blob);\n } else {\n reader.readAsDataURL(contentState.webm);\n }\n }\n };\n\n const signOutDrive = () => {\n chrome.runtime.sendMessage({ type: \"sign-out-drive\" });\n setContentState((prevContentState) => ({\n ...prevContentState,\n driveEnabled: false,\n }));\n };\n\n const handleEdit = () => {\n if (\n contentState.duration > contentState.editLimit &&\n !contentState.override\n )\n return;\n if (!contentState.mp4ready) return;\n\n contentState.createBackup();\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n mode: \"edit\",\n dragInteracted: false,\n }));\n\n if (!contentState.hasBeenEdited) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hasBeenEdited: true,\n }));\n }\n };\n\n const handleCrop = () => {\n if (\n contentState.duration > contentState.editLimit &&\n !contentState.override\n )\n return;\n\n if (!contentState.mp4ready) return;\n\n contentState.createBackup();\n\n if (!contentState.frame && !contentState.isFfmpegRunning) {\n contentState.getFrame();\n }\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n mode: \"crop\",\n }));\n\n if (!contentState.hasBeenEdited) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hasBeenEdited: true,\n }));\n }\n };\n\n const handleAddAudio = async () => {\n if (\n contentState.duration > contentState.editLimit &&\n !contentState.override\n )\n return;\n if (!contentState.mp4ready) return;\n\n contentState.createBackup();\n\n setContentState((prevContentState) => ({\n ...prevContentState,\n mode: \"audio\",\n }));\n\n if (!contentState.hasBeenEdited) {\n setContentState((prevContentState) => ({\n ...prevContentState,\n hasBeenEdited: true,\n }));\n }\n };\n\n // Download best available blob: edited MP4 → fixed WebM → raw WebM.\n const handleDownloadOriginal = () => {\n const s = contentStateRef.current;\n const source = s.blob || s.webm || s.rawBlob;\n if (!source) return;\n const blob =\n source instanceof Blob\n ? source\n : new Blob([source], { type: \"video/webm\" });\n const ext = blob.type.includes(\"mp4\") ? \"mp4\" : \"webm\";\n const rawTitle = s.title || \"screenity-recording\";\n const safe = rawTitle\n .replace(/[\\\\:*?\"<>|]/g, \" \")\n .replace(/[\\u0000-\\u001F\\u007F]/g, \" \")\n .replace(/\\s+/g, \" \")\n .trim() || \"screenity-recording\";\n const url = window.URL.createObjectURL(blob);\n chrome.downloads.download({ url, filename: `${safe}.${ext}` }, () => {\n window.URL.revokeObjectURL(url);\n });\n };\n\n const handleRawRecording = () => {\n if (typeof contentStateRef.current.openModal === \"function\") {\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"rawRecordingModalTitle\"),\n chrome.i18n.getMessage(\"rawRecordingModalDescription\"),\n chrome.i18n.getMessage(\"rawRecordingModalButton\"),\n chrome.i18n.getMessage(\"sandboxEditorCancelButton\"),\n () => {\n const s = contentStateRef.current;\n const blob = s.rawBlob;\n if (!blob) {\n console.error(\"[Screenity][WebM] raw download: no rawBlob available\");\n return;\n }\n const url = window.URL.createObjectURL(blob);\n\n const ext = blob.type.includes(\"mp4\") ? \"mp4\" : \"webm\";\n\n chrome.downloads.download(\n {\n url: url,\n filename: `raw-recording.${ext}`,\n },\n () => {\n window.URL.revokeObjectURL(url);\n }\n );\n },\n () => {}\n );\n }\n };\n\n const handleTroubleshooting = () => {\n if (typeof contentStateRef.current.openModal === \"function\") {\n contentStateRef.current.openModal(\n chrome.i18n.getMessage(\"troubleshootModalTitle\"),\n chrome.i18n.getMessage(\"troubleshootModalDescription\"),\n chrome.i18n.getMessage(\"troubleshootModalButton\"),\n chrome.i18n.getMessage(\"sandboxEditorCancelButton\"),\n async () => {\n try {\n const cs = contentStateRef.current;\n const { blob, filename } = await buildDiagnosticZip({\n source: \"sandbox-editor\",\n extraConfig: {\n editorMode: cs.mode || null,\n duration: cs.duration || null,\n width: cs.width || null,\n height: cs.height || null,\n hasBlobReady: Boolean(cs.blob || cs.rawBlob),\n mp4ready: Boolean(cs.mp4ready),\n ffmpegLoaded: Boolean(cs.ffmpegLoaded),\n fallback: Boolean(cs.fallback),\n offline: Boolean(cs.offline),\n noffmpeg: Boolean(cs.noffmpeg),\n updateChrome: Boolean(cs.updateChrome),\n hasBeenEdited: Boolean(cs.hasBeenEdited),\n editLimit: cs.editLimit || null,\n },\n });\n const url = window.URL.createObjectURL(blob);\n chrome.downloads.download(\n { url, filename },\n () => {\n window.URL.revokeObjectURL(url);\n },\n );\n } catch (err) {\n console.error(\"[Screenity] Troubleshooting export failed:\", err);\n }\n },\n () => {},\n );\n }\n };\n\n return (\n
\n {contentState.mode === \"audio\" && }\n {contentState.mode === \"crop\" && }\n {contentState.mode === \"player\" && (\n
\n {!contentState.fallback && contentState.offline && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"offlineLabelTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"offlineLabelDescription\")}\n
\n
\n
\n {chrome.i18n.getMessage(\"offlineLabelTryAgain\")}\n
\n
\n )}\n {contentState.fallback && contentState.noffmpeg && contentState.editLimit === 0 && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"longRecordingTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"longRecordingDescription\")}\n
\n
\n \n {chrome.i18n.getMessage(\"rawRecordingModalButton\")}\n
\n
\n )}\n {contentState.fallback && contentState.noffmpeg && contentState.editLimit !== 0 && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"recoveryModeTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"recoveryModeDescription\")}\n
\n
\n \n {chrome.i18n.getMessage(\"rawRecordingModalButton\")}\n
\n
\n )}\n {!contentState.fallback &&\n contentState.updateChrome &&\n !contentState.offline &&\n contentState.duration <= contentState.editLimit && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"updateChromeLabelTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"updateChromeLabelDescription\")}\n
\n
\n {\n chrome.runtime.sendMessage({ type: \"chrome-update-info\" });\n }}\n >\n {chrome.i18n.getMessage(\"learnMoreLabel\")}\n
\n \n )}\n {!contentState.fallback &&\n contentState.duration > contentState.editLimit &&\n !contentState.override &&\n !contentState.offline &&\n !contentState.updateChrome && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"overLimitLabelTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"overLimitLabelDescription\")}\n
\n
\n {\n //chrome.runtime.sendMessage({ type: \"upgrade-info\" });\n if (typeof contentState.openModal === \"function\") {\n contentState.openModal(\n chrome.i18n.getMessage(\"overLimitModalTitle\"),\n chrome.i18n.getMessage(\"overLimitModalDescription\"),\n chrome.i18n.getMessage(\"overLimitModalButton\"),\n chrome.i18n.getMessage(\"sandboxEditorCancelButton\"),\n () => {\n setContentState((prevContentState) => ({\n ...prevContentState,\n saved: true,\n }));\n chrome.runtime.sendMessage({\n type: \"force-processing\",\n });\n },\n () => {},\n null,\n chrome.i18n.getMessage(\"overLimitModalLearnMore\"),\n () => {\n chrome.runtime.sendMessage({ type: \"upgrade-info\" });\n }\n );\n }\n }}\n >\n {chrome.i18n.getMessage(\"learnMoreLabel\")}\n
\n \n )}\n {(!contentState.mp4ready || contentState.isFfmpegRunning) &&\n (contentState.duration <= contentState.editLimit ||\n contentState.override) &&\n !contentState.offline &&\n !contentState.updateChrome &&\n !contentState.noffmpeg && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"videoProcessingLabelTitle\")}\n
\n
\n {contentState.isFfmpegRunning\n ? chrome.i18n.getMessage(\"editProcessingSafeDescription\")\n : chrome.i18n.getMessage(\"videoProcessingLabelDescription\")}\n
\n
\n {!contentState.isFfmpegRunning && (\n {\n chrome.runtime.sendMessage({\n type: \"pricing\",\n });\n }}\n >\n {chrome.i18n.getMessage(\"learnMoreLabel\")}\n
\n )}\n \n )}\n\n {!contentState.fallback && contentState.editErrorType === \"too-long\" && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"editTooLongTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"editTooLongDescription\")}\n
\n
\n \n setContentState((prev) => ({ ...prev, editErrorType: null }))\n }\n >\n {chrome.i18n.getMessage(\"permissionsModalDismiss\")}\n
\n \n )}\n {!contentState.fallback && contentState.editErrorType === \"timeout\" && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"editTimeoutTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"editTimeoutDescription\")}\n
\n
\n \n setContentState((prev) => ({ ...prev, editErrorType: null }))\n }\n >\n {chrome.i18n.getMessage(\"permissionsModalDismiss\")}\n
\n \n )}\n {!contentState.fallback && contentState.editErrorType === \"failed\" && (\n
\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"editFailedTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"editFailedDescription\")}\n
\n
\n \n setContentState((prev) => ({ ...prev, editErrorType: null }))\n }\n >\n {chrome.i18n.getMessage(\"permissionsModalDismiss\")}\n
\n \n )}\n
\n
\n {chrome.i18n.getMessage(\"sandboxEditTitle\")}\n
\n
\n contentState.editLimit &&\n !contentState.override) ||\n !contentState.mp4ready ||\n contentState.noffmpeg\n }\n >\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"editButtonTitle\")}\n
\n
\n {contentState.offline && !contentState.ffmpegLoaded\n ? chrome.i18n.getMessage(\"noConnectionLabel\")\n : contentState.updateChrome ||\n contentState.noffmpeg ||\n (contentState.duration > contentState.editLimit &&\n !contentState.override)\n ? getNotAvailableLabel()\n : contentState.mp4ready\n ? chrome.i18n.getMessage(\"editButtonDescription\")\n : getPreparingLabel()}\n
\n
\n
\n \n
\n
\n contentState.editLimit &&\n !contentState.override) ||\n !contentState.mp4ready ||\n contentState.noffmpeg\n }\n >\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"cropButtonTitle\")}\n
\n
\n {contentState.offline && !contentState.ffmpegLoaded\n ? chrome.i18n.getMessage(\"noConnectionLabel\")\n : contentState.updateChrome ||\n contentState.noffmpeg ||\n (contentState.duration > contentState.editLimit &&\n !contentState.override)\n ? getNotAvailableLabel()\n : contentState.mp4ready\n ? chrome.i18n.getMessage(\"cropButtonDescription\")\n : getPreparingLabel()}\n
\n
\n
\n \n
\n
\n contentState.editLimit &&\n !contentState.override) ||\n !contentState.mp4ready ||\n contentState.noffmpeg\n }\n >\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"addAudioButtonTitle\")}\n
\n
\n {contentState.offline && !contentState.ffmpegLoaded\n ? chrome.i18n.getMessage(\"noConnectionLabel\")\n : contentState.updateChrome ||\n contentState.noffmpeg ||\n (contentState.duration > contentState.editLimit &&\n !contentState.override)\n ? getNotAvailableLabel()\n : contentState.mp4ready\n ? chrome.i18n.getMessage(\"addAudioButtonDescription\")\n : getPreparingLabel()}\n
\n
\n
\n \n
\n \n \n \n
\n
\n {chrome.i18n.getMessage(\"sandboxSaveTitle\")}\n
\n {contentState.driveEnabled && (\n {\n signOutDrive();\n }}\n >\n {chrome.i18n.getMessage(\"signOutDriveLabel\")}\n
\n )}\n
\n \n
\n \n
\n
\n
\n {contentState.saveDrive\n ? chrome.i18n.getMessage(\"savingDriveLabel\")\n : contentState.driveEnabled\n ? chrome.i18n.getMessage(\"saveDriveButtonTitle\")\n : chrome.i18n.getMessage(\"signInDriveLabel\")}\n
\n
\n {contentState.offline\n ? chrome.i18n.getMessage(\"noConnectionLabel\")\n : contentState.updateChrome\n ? chrome.i18n.getMessage(\"notAvailableLabel\")\n : chrome.i18n.getMessage(\"saveDriveButtonDescription\")}\n
\n
\n
\n \n
\n
\n \n \n
\n
\n {chrome.i18n.getMessage(\"sandboxExportTitle\")}\n
\n
\n {contentState.fallback && (\n contentState.downloadWEBM()}\n disabled={contentState.isFfmpegRunning}\n >\n
\n \n
\n
\n
\n {contentState.downloadingWEBM\n ? chrome.i18n.getMessage(\"downloadingLabel\")\n : chrome.i18n.getMessage(\"downloadWEBMButtonTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"downloadWEBMButtonDescription\")}\n
\n
\n
\n \n
\n
\n )}\n {\n if (!contentState.mp4ready) return;\n contentState.download();\n }}\n disabled={\n contentState.isFfmpegRunning ||\n contentState.noffmpeg ||\n !contentState.mp4ready ||\n contentState.noffmpeg\n }\n >\n
\n \n
\n
\n
\n {contentState.downloading\n ? chrome.i18n.getMessage(\"downloadingLabel\")\n : chrome.i18n.getMessage(\"downloadMP4ButtonTitle\")}\n
\n
\n {contentState.offline && !contentState.ffmpegLoaded\n ? chrome.i18n.getMessage(\"noConnectionLabel\")\n : contentState.updateChrome ||\n contentState.noffmpeg ||\n (contentState.duration > contentState.editLimit &&\n !contentState.override)\n ? getNotAvailableLabel()\n : contentState.mp4ready && !contentState.isFfmpegRunning\n ? chrome.i18n.getMessage(\"downloadMP4ButtonDescription\")\n : getPreparingLabel()}\n
\n
\n
\n \n
\n
\n {!contentState.fallback && (\n contentState.downloadWEBM()}\n disabled={contentState.isFfmpegRunning}\n >\n
\n \n
\n
\n
\n {contentState.downloadingWEBM\n ? chrome.i18n.getMessage(\"downloadingLabel\")\n : chrome.i18n.getMessage(\"downloadWEBMButtonTitle\")}\n
\n
\n {!contentState.isFfmpegRunning\n ? chrome.i18n.getMessage(\n \"downloadWEBMButtonDescription\"\n )\n : getPreparingLabel()}\n
\n
\n
\n \n
\n \n )}\n {\n if (!contentState.mp4ready) return;\n contentState.downloadGIF();\n }}\n disabled={\n contentState.isFfmpegRunning ||\n contentState.duration > 30 ||\n !contentState.mp4ready ||\n contentState.noffmpeg\n }\n >\n
\n \n
\n
\n
\n {contentState.downloadingGIF\n ? chrome.i18n.getMessage(\"downloadingLabel\")\n : chrome.i18n.getMessage(\"downloadGIFButtonTitle\")}\n
\n
\n {contentState.offline && !contentState.ffmpegLoaded\n ? chrome.i18n.getMessage(\"noConnectionLabel\")\n : contentState.updateChrome ||\n contentState.noffmpeg ||\n (contentState.duration > contentState.editLimit &&\n !contentState.override)\n ? getNotAvailableLabel()\n : contentState.mp4ready\n ? chrome.i18n.getMessage(\"downloadGIFButtonDescription\")\n : getPreparingLabel()}\n
\n
\n
\n \n
\n \n \n \n
\n {/* Create an advanced section with a button to send logs and to download raw video file as a backup */}\n
\n {chrome.i18n.getMessage(\"sandboxAdvancedTitle\")}\n
\n
\n {\n handleRawRecording();\n }}\n >\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"rawRecordingButtonTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"rawRecordingButtonDescription\")}\n
\n
\n
\n \n
\n
\n {\n handleTroubleshooting();\n }}\n >\n
\n \n
\n
\n
\n {chrome.i18n.getMessage(\"troubleshootButtonTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"troubleshootButtonDescription\")}\n
\n
\n
\n \n
\n
\n \n \n \n )}\n \n );\n};\n\nexport default RightPanel;\n" }, { "path": "src/pages/Sandbox/styles/edit/_Dropdown.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.SelectTrigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n border-radius: $container-border-radius;\n line-height: 1;\n height: 44px;\n gap: 5px;\n background-color: $color-background;\n color: $color-text-primary;\n width: 100%;\n box-sizing: border-box;\n margin-top: $spacing-02;\n margin-bottom: $spacing-02;\n border: 1px solid $color-border;\n text-align: left !important;\n font-family: $font-medium !important;\n text-indent: 18px;\n}\n.SelectTrigger:hover {\n box-shadow: $container-shadow-focus;\n cursor: pointer;\n}\n.SelectTrigger:focus {\n box-shadow: $focus-border !important;\n}\n.SelectTrigger[data-placeholder] {\n color: var(--violet9);\n}\n.SelectTrigger[data-state=\"open\"] {\n box-shadow: $focus-border;\n}\n\n.SelectValue {\n text-align: left;\n flex: 1;\n display: block;\n width: 100%;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n text-indent: 18px !important;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n height: 100%;\n line-height: 44px;\n text-indent: 18px !important;\n }\n}\n\n.SelectIconDrop,\n.SelectIconType {\n text-align: center;\n}\n.SelectIconType {\n padding-left: $spacing-05;\n padding-right: $spacing-02;\n}\n.SelectIconDrop {\n padding-right: $spacing-05;\n}\n.SelectTrigger[data-state=\"open\"] .SelectIconDrop img {\n transform: rotate(180deg);\n}\n.Portal {\n position: absolute;\n}\n.SelectContent {\n position: absolute;\n overflow: hidden;\n z-index: $z-index-max;\n width: var(--radix-select-trigger-width);\n max-height: var(--radix-select-content-available-height);\n font-family: $font-medium;\n background-color: white;\n border-radius: 15px;\n margin-top: $spacing-02;\n box-shadow: $container-shadow-focus;\n}\n.SelectItem {\n font-size: $font-size-normal;\n line-height: 1;\n color: var(--violet11);\n display: flex;\n align-items: center;\n height: 44px;\n padding-left: $spacing-05;\n padding-right: $spacing-05;\n position: relative;\n user-select: none;\n}\n.SelectItem[data-disabled] {\n color: $color-text-secondary;\n pointer-events: none;\n}\n.SelectItem[data-highlighted] {\n background: $color-light-grey;\n outline: none !important;\n}\n.SelectItem:hover {\n background: $color-light-grey;\n cursor: pointer;\n}\n\n.SelectSeparator {\n height: 1px;\n background-color: $color-border;\n width: calc(100% - $spacing-04 * 2);\n margin: auto;\n border-radius: $container-border-radius;\n margin-top: $spacing-02;\n margin-bottom: $spacing-02;\n}\n\n.SelectItemIndicator {\n position: absolute;\n right: $spacing-04;\n width: 24px;\n height: 24px;\n background: $color-primary;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.SelectScrollButton {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 25px;\n background-color: white;\n color: var(--violet11);\n cursor: default;\n}\n\n.SelectOff {\n background: $color-red-light;\n color: $color-red;\n padding-left: $spacing-04;\n padding-right: $spacing-04;\n padding-top: $spacing-03;\n padding-bottom: $spacing-03;\n margin-right: $spacing-02;\n border-radius: $container-border-radius;\n font-size: $font-size-small;\n font-weight: $font-weight-bold;\n}\n" }, { "path": "src/pages/Sandbox/styles/edit/_EditorNav.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.editorNav {\n width: 100%;\n margin: auto;\n height: 80px;\n left: 0px;\n top: 0px;\n position: fixed;\n z-index: 999999999999;\n background-color: #fff;\n border-bottom: 1px solid $color-border;\n}\n.navWrap {\n margin: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n width: 95%;\n}\n.editorNavCenter {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.editorNavTitle {\n font-size: $font-size-normal;\n color: $color-text-primary;\n font-weight: 600;\n text-align: center;\n margin: auto;\n\n span {\n margin-left: 4px;\n font-weight: 400;\n font-size: $font-size-small;\n color: $color-text-contrast;\n background-color: $color-primary;\n border-radius: $container-border-radius;\n padding: $spacing-02 $spacing-03;\n }\n}\n.editorNavRight {\n display: flex;\n height: fit-content;\n align-items: center;\n gap: 8px;\n}\n.editorNavLeft {\n display: flex;\n align-items: center;\n cursor: pointer;\n img {\n height: 30px;\n }\n}\n\n// max 1000px\n@media (max-width: 1000px) {\n .editorNavCenter {\n display: none;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/edit/_Switch.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.SwitchRow {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 40px;\n}\n\n.SwitchRoot {\n width: 34px;\n height: 22px;\n background-color: $color-border;\n border-radius: 9999px;\n position: relative;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n border: none !important;\n}\n.SwitchRoot[disabled] {\n opacity: 0.5;\n cursor: not-allowed !important;\n}\n.SwitchRoot:focus {\n box-shadow: $focus-border;\n}\n.SwitchRoot[data-state=\"checked\"] {\n background-color: $color-primary;\n}\n.SwitchRoot:hover {\n cursor: pointer;\n}\n\n.SwitchThumb {\n display: block;\n width: 14px;\n height: 14px;\n background-color: white;\n border-radius: 9999px;\n box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);\n transition: transform 100ms;\n transform: translateX(4px);\n will-change: transform;\n}\n.SwitchThumb[data-state=\"checked\"] {\n transform: translateX(16px);\n}\n\n.Label {\n color: $color-text-secondary;\n}\n" }, { "path": "src/pages/Sandbox/styles/edit/_TrimUI.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.trimWrap {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 230px;\n border-top: 1px solid $color-border;\n background-color: #fff;\n}\n.controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 90%;\n margin: auto;\n margin-top: 12px;\n}\n.actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.controlsRight {\n display: flex;\n align-items: center;\n}\n.timeWrap {\n color: $color-text-primary;\n display: flex;\n align-items: center;\n gap: 4px;\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n width: fit-content;\n\n span {\n position: relative;\n font-variant-numeric: tabular-nums;\n }\n svg {\n color: $color-icon;\n margin-top: 5px;\n }\n}\n.trimInfo {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: $color-light-grey;\n border-radius: $container-border-radius;\n padding: 8px 16px;\n width: fit-content;\n margin-left: auto;\n margin-right: auto;\n margin-top: 8px;\n margin-bottom: 8px;\n justify-content: center;\n align-items: center;\n color: $color-text-primary;\n position: absolute;\n left: 0px;\n right: 0px;\n bottom: 8px;\n\n svg {\n color: $color-icon;\n margin-top: 5px;\n margin-right: 5px;\n }\n .trimInfoLink {\n color: $color-primary;\n cursor: pointer;\n display: inline-block;\n margin-left: 5px;\n }\n}\n\n@media (max-width: 1000px) {\n .timeWrap {\n display: none;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/edit/_Trimmer.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.trimmerContainer {\n position: absolute;\n bottom: 75px;\n left: 0px;\n right: 0px;\n margin: auto;\n width: 90%;\n height: 80px;\n}\n.thumbstrip {\n width: 100%;\n display: flex;\n overflow: hidden;\n position: relative;\n}\n.trimSection {\n pointer-events: none;\n}\n.trimmer {\n position: absolute; /* Position the trimmer over the thumbstrip */\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n.trimWrap {\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: 999999;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n.handle {\n position: absolute;\n width: 12px;\n height: 30px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n background-color: $color-primary;\n cursor: pointer;\n pointer-events: all !important;\n\n &::after {\n content: \"\";\n width: 2px;\n height: 12px;\n border-radius: 30px;\n background-color: #fff;\n position: absolute;\n top: 0px;\n left: 0px;\n bottom: 0px;\n right: 0px;\n margin: auto;\n }\n\n &:hover {\n cursor: ew-resize;\n background-color: #2969d8 !important;\n }\n}\n\n.startHandle {\n border-radius: 5px 0px 0px 5px;\n transform: translateX(-10px);\n}\n\n.endHandle {\n border-radius: 0px 5px 5px 0px;\n transform: translateX(2px);\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.5);\n pointer-events: none !important;\n}\n\n.leftOverlay {\n position: absolute;\n top: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.05);\n border-radius: 5px 0px 0px 5px;\n}\n\n.rightOverlay {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: auto;\n background: rgba(0, 0, 0, 0.05);\n border-radius: 0px 5px 5px 0px;\n}\n\n.trimSection {\n position: absolute;\n top: 0;\n bottom: 0;\n border: 2px solid $color-primary;\n border-radius: 5px;\n}\n" }, { "path": "src/pages/Sandbox/styles/edit/_VideoPlayer.scss", "content": "@use \"../global/variables.scss\" as *;\n:root {\n --plyr-color-main: #3080f8;\n --plyr-font-family: \"Satoshi-Medium\", sans-serif;\n}\n\n.videoPlayer {\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n margin: auto;\n height: 100vh;\n}\n.playerWrap {\n height: calc(100% - 300px);\n position: absolute;\n top: 80px;\n left: 0px;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 32px;\n}\n.plyr {\n max-width: 900px !important;\n left: 0px !important;\n right: 0px !important;\n margin: 0px !important;\n top: 0px !important;\n bottom: 0px !important;\n position: relative !important;\n border-radius: 15px !important;\n width: 90% !important;\n}\n/* Customize progress bar color */\n.plyr__progress--played {\n background-color: #ff5733 !important; /* Your custom color */\n}\n\n// Max width 900px\n@media (max-width: 900px) {\n .videoPlayer {\n height: 100% !important;\n }\n .playerWrap {\n position: relative !important;\n height: 100% !important;\n padding-top: 40px !important;\n padding-bottom: 60px !important;\n top: 0px !important;\n position: relative !important;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/edit/_Waveform.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.waveform {\n height: 100%;\n}\n.waveform ::part(cursor) {\n display: none;\n}\n.cursor {\n height: 100%;\n background-color: $color-primary;\n z-index: 999999;\n width: 3px;\n position: absolute;\n border-radius: 30px;\n padding-top: 20px;\n transform: translateY(-10px);\n}\n.ghostCursor {\n height: 100%;\n padding-top: 20px;\n transform: translateY(-10px);\n background-color: #8aafee;\n z-index: 999999;\n width: 3px;\n position: absolute;\n border-radius: 30px;\n pointer-events: none;\n}\n" }, { "path": "src/pages/Sandbox/styles/global/_app.scss", "content": "@use \"./variables.scss\" as *;\n@use \"sass:color\";\n\nbody {\n background: $color-light-grey;\n font-family: $font-medium;\n font-size: $font-size-normal;\n height: 100vh;\n overflow-y: hidden;\n margin: 0px;\n}\n\n// max width 900px\n@media (max-width: 900px) {\n body {\n overflow-y: unset !important;\n }\n}\n\n/* Button component */\n.button {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border: none;\n padding: 8px 16px;\n gap: 6px;\n text-align: center;\n box-sizing: border-box;\n border-radius: $container-border-radius;\n font-family: $font-bold;\n font-weight: 500;\n\n &.primaryButton:disabled,\n &.secondaryButton:disabled {\n background-color: $color-light-grey !important;\n color: $color-icon !important;\n cursor: not-allowed !important;\n border: 1px solid transparent !important;\n\n svg {\n color: $color-icon !important;\n margin-top: 5px;\n }\n }\n\n &.simpleButton:disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n }\n\n &.primaryButton {\n color: $color-text-contrast;\n background-color: $color-primary;\n height: 40px;\n\n svg {\n margin-top: 5px;\n color: $color-text-contrast;\n }\n &:hover {\n background-color: color.adjust($color-primary, $lightness: -10%);\n cursor: pointer;\n }\n }\n\n &.secondaryButton {\n color: $color-text-primary;\n background-color: #fff;\n border: 1px solid $color-border;\n height: 40px;\n svg {\n margin-top: 5px;\n color: $color-icon;\n }\n &:hover {\n background-color: $color-light-grey;\n cursor: pointer;\n }\n }\n\n &.simpleButton {\n color: $color-text-secondary;\n background: none;\n\n svg {\n margin-top: 5px;\n }\n\n &:hover {\n background-color: $color-light-grey;\n cursor: pointer;\n }\n }\n\n &.blueButton {\n color: $color-primary;\n }\n\n &.blackButton {\n color: $color-text-primary !important;\n }\n}\n\n/* Define variables for handle size, border width, and margin */\n$handle-size: 15px;\n$border-width: 4px;\n$margin-offset: 8px;\n\n/* Disable transitions for Cropper */\n.cropper,\n.advanced-cropper-artificial-transition,\n.advanced-cropper-background-image,\n.advanced-cropper-wrapper,\n.advanced-cropper,\n.CropperBackgroundWrapper,\n.cropper * {\n transition: none !important;\n}\n\n.cropper {\n max-width: 80%;\n height: 80%;\n border-radius: 15px;\n margin: auto !important;\n position: absolute !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px !important;\n display: block;\n transition: none !important;\n padding-left: 40px;\n padding-right: 40px;\n}\n.advanced-cropper-artificial-transition {\n transition: none !important;\n}\n\n.advanced-cropper-background-image {\n transition: none !important;\n}\n\n.advanced-cropper-wrapper,\n.advanced-cropper,\n.CropperBackgroundWrapper {\n /* tile background image svg */\n background-image: url(\"chrome-extension://__MSG_@@extension_id__/assets/editor/transparenttile.png\") !important;\n background-repeat: repeat !important;\n background-size: 20px !important;\n transition: none !important;\n}\n/* Custom styles for the handles */\n.advanced-cropper-simple-handler {\n width: $handle-size !important; /* Adjust the handle width */\n height: $handle-size !important; /* Adjust the handle height */\n background-color: transparent !important;\n position: absolute;\n border-style: solid; /* Specify the border style as solid */\n border-width: 0 !important; /* Initialize border width to 0 */\n border-radius: 2px;\n\n &--west-north,\n &--west-south {\n margin-left: $margin-offset !important; /* Offset from the left */\n }\n\n &--west-north,\n &--east-north {\n margin-top: $margin-offset !important; /* Offset from the top */\n }\n\n &--west-south,\n &--east-south {\n margin-bottom: $margin-offset !important; /* Offset from the bottom */\n }\n\n &--east {\n margin-right: $margin-offset !important;\n border-right-width: $border-width !important; /* Border on the right */\n }\n\n &--west {\n margin-left: $margin-offset;\n border-left-width: $border-width !important; /* Border on the left */\n }\n\n &--north {\n margin-top: $margin-offset;\n border-top-width: $border-width !important; /* Border on the top */\n }\n\n &--south {\n margin-bottom: $margin-offset;\n border-bottom-width: $border-width !important; /* Border on the bottom */\n }\n}\n\n/* reset */\nbutton {\n all: unset;\n}\n\n.AlertDialogOverlay {\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n inset: 0;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 99999999999;\n}\n\n.AlertDialogContent {\n background-color: white;\n border-radius: 30px;\n box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 90vw;\n max-width: 500px;\n max-height: 85vh;\n padding: 35px 25px;\n animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: $z-index-max;\n}\n.AlertDialogContent:focus {\n outline: none;\n}\n\n.AlertDialogTitle {\n margin: 0;\n color: $color-text-primary;\n font-size: $font-size-normal;\n font-family: $font-bold;\n font-weight: 700;\n}\n\n.AlertDialogDescription {\n margin-bottom: 20px;\n color: $color-text-secondary;\n font-size: $font-size-normal;\n line-height: 1.5;\n\n a {\n color: $color-primary !important;\n font-weight: 600 !important;\n text-decoration: none !important;\n display: inline-block;\n cursor: pointer;\n }\n}\n\n.Button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n padding: 0 15px;\n font-size: 14px;\n line-height: 1;\n font-weight: 500;\n height: 35px;\n}\n.Button.blue {\n background-color: rgba(48, 128, 248, 0.1);\n color: $color-primary;\n\n &:hover {\n background-color: rgba(48, 128, 248, 0.15);\n cursor: pointer;\n }\n &:focus {\n box-shadow: $focus-border;\n }\n}\n.Button.red {\n background-color: rgba(247, 56, 90, 0.1);\n color: rgba(247, 56, 90, 1);\n}\n.Button.red:hover {\n background-color: rgba(247, 56, 90, 0.15);\n cursor: pointer;\n}\n.Button.red:focus {\n box-shadow: $focus-border;\n}\n.Button.grey {\n background: rgba(110, 118, 132, 0.1);\n color: $color-text-secondary;\n}\n.Button.grey:hover {\n background: rgba(110, 118, 132, 0.15);\n cursor: pointer;\n}\n.Button.grey:focus {\n box-shadow: $focus-border;\n}\n\n@keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes contentShow {\n from {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n.SideButtonModal {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n padding: 0 15px;\n font-size: 14px;\n line-height: 1;\n font-weight: 500;\n height: 35px;\n color: $color-text-secondary;\n font-family: $font-medium;\n\n &:hover {\n cursor: pointer;\n background: rgba(110, 118, 132, 0.05);\n }\n}\n.pro-banner {\n background-color: $color-background;\n border-top-left-radius: 25px;\n border-top-right-radius: 25px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n min-height: 110px;\n max-height: 150px;\n border: 1px solid $color-border;\n border-bottom: 0 !important;\n box-sizing: border-box;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n max-width: 990px;\n width: 80%;\n font-size: 13px;\n padding: 12px;\n gap: 8px;\n}\n\n.pro-banner-content {\n display: flex;\n flex-direction: row;\n gap: 12px;\n align-items: center;\n flex: 1;\n overflow: hidden;\n min-height: 0;\n}\n\n.pro-banner-left {\n height: 100%;\n width: 80px;\n min-width: 80px;\n flex-shrink: 0;\n overflow: hidden;\n aspect-ratio: 640 / 480;\n}\n\n.pro-banner-left video {\n height: 100%;\n width: 100%;\n object-fit: cover;\n border-radius: 6px;\n display: block;\n}\n\n.pro-banner-right {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.pro-banner-title {\n font-family: $font-bold;\n color: $color-text-primary;\n font-size: 13px;\n line-height: 1.2;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.pro-banner-description {\n color: $color-text-secondary;\n font-family: $font-medium;\n font-size: 13px;\n line-height: 1.3;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.pro-banner-cta {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n flex-shrink: 0;\n}\n\n.altButton {\n background: transparent !important;\n color: $color-text-primary;\n font-family: $font-bold;\n height: 37px !important;\n white-space: nowrap !important;\n padding: 0 12px;\n border-radius: 30px;\n border: 1px solid transparent;\n font-size: 13px;\n\n &:hover {\n background: $color-light-grey !important;\n cursor: pointer;\n }\n}\n\n.primaryDarkButton {\n background: $color-text-primary !important;\n color: $color-text-contrast !important;\n height: 37px !important;\n white-space: nowrap !important;\n padding: 0 12px;\n border-radius: 30px;\n border: none;\n font-size: 13px;\n font-family: $font-bold;\n\n &:hover {\n background: #000 !important;\n cursor: pointer;\n }\n}\n\n@media (max-width: 1400px) {\n .pro-banner {\n width: 100%;\n border-radius: 0px !important;\n min-height: 100px;\n max-height: 140px;\n border-right: none !important;\n }\n\n .pro-banner-title,\n .pro-banner-description {\n font-size: 12px;\n }\n\n .pro-banner-cta {\n gap: 6px;\n }\n\n .altButton,\n .primaryDarkButton {\n height: 32px !important;\n padding: 0 12px;\n font-size: 12px;\n }\n}\n\n@media (max-width: 1020px) {\n .pro-banner {\n flex-direction: column;\n justify-content: flex-end;\n }\n .pro-banner-cta {\n width: 100%;\n justify-content: right;\n text-align: right;\n }\n}\n\n@media (max-width: 900px) {\n .pro-banner {\n position: fixed;\n bottom: 0;\n z-index: 99999999999;\n flex-direction: row !important;\n justify-content: center !important;\n }\n .pro-banner-cta {\n width: auto !important;\n justify-content: center;\n text-align: center;\n }\n}\n\n@media (max-width: 300px) {\n .pro-banner {\n flex-direction: column;\n align-items: flex-start;\n max-width: none;\n width: 100%;\n height: auto !important;\n border-right: none;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n padding: 12px;\n gap: 10px;\n }\n\n .pro-banner-content {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n }\n\n .pro-banner-left {\n width: 100%;\n min-width: 0;\n height: auto;\n aspect-ratio: 16 / 9;\n border-radius: 8px;\n }\n\n .pro-banner-left video {\n width: 100%;\n height: auto;\n object-fit: cover;\n border-radius: 8px;\n }\n\n .pro-banner-right {\n width: 100%;\n align-items: flex-start;\n }\n\n .pro-banner-title,\n .pro-banner-description {\n font-size: 12px;\n -webkit-line-clamp: 2;\n }\n\n .pro-banner-cta {\n width: 100%;\n justify-content: flex-end;\n gap: 6px;\n flex-wrap: wrap;\n }\n\n .altButton,\n .primaryDarkButton {\n height: 32px !important;\n padding: 0 12px;\n font-size: 12px;\n flex: 1;\n min-width: 100px;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/global/_variables.scss", "content": "@mixin font($font-family, $font-file) {\n @font-face {\n font-family: $font-family;\n src: url($font-file+'.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n }\n}\n\n@include font('Satoshi-Light', 'chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Light');\n@include font('Satoshi-Medium', 'chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Medium');\n@include font('Satoshi-Bold', 'chrome-extension://__MSG_@@extension_id__/assets/fonts/Satoshi-Bold');\n\n/* Colors */\n$color-background: #FFF;\n$color-light-grey: #F6F7FB;\n$color-primary: #3080F8;\n$color-border: #E8E8E8;\n$color-text-contrast: #FFF;\n$color-text-primary: #29292F;\n$color-text-secondary: #6E7684;\n$color-red: #D2234D;\n$color-red-light: #FAF0F4; \n$color-primary-transparent: rgba(48, 128, 248, 0.1);\n$color-icon: #9797A4;\n\n/* Font */\n//$font-size-normal: 0.875rem;\n//$font-size-small: 0.75rem;\n$font-size-normal: 14px;\n$font-size-small: 12px;\n$font-weight-bold: 700;\n$font-weight-normal: 500;\n$font-weight-light: 400;\n$font-light: 'Satoshi-Light', sans-serif;\n$font-medium: 'Satoshi-Medium', sans-serif;\n$font-bold: 'Satoshi-Bold', sans-serif;\n\n/* Spacing */\n/*\n$spacing-01: 0.125rem;\n$spacing-02: 0.25rem;\n$spacing-03: 0.5rem;\n$spacing-04: 0.75rem;\n$spacing-05: 1rem;\n*/\n$spacing-01: 2px;\n$spacing-02: 4px; \n$spacing-03: 8px;\n$spacing-04: 12px; \n$spacing-05: 16px;\n\n/* Container */\n$container-border-radius: 30px;\n$container-border: 1px solid $color-border;\n$container-shadow: drop-shadow(0px 4px 100px rgba(0, 0, 0, 0.35));\n$container-shadow-focus: 2px 2px 10px rgba(0, 0, 0, 0.1);\n\n/* Gradients */\n$gradient-primary: radial-gradient(117.41% 117.78% at 35.44% 0%, #2BAEF8 23.13%, #3582F6 46.35%, #486DEF 74.48%, #7B9AEA 100%);\n$gradient-shadow-primary: drop-shadow(0px 4px 20px rgba(86, 123, 218, 0.5));\n\n/* Events */\n$focus-border: 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n$focus-inner-border: inset 0px 0px 0px 2px rgba(48, 128, 248, 0.5);\n\n/* Z-index */\n$z-index-max: 99999999999;" }, { "path": "src/pages/Sandbox/styles/player/_Content.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.content {\n flex: 1;\n height: 100%;\n position: relative;\n overflow: hidden;\n min-height: 300px;\n}\n.wrap {\n max-width: 1400px;\n margin: 0 auto;\n position: relative;\n height: 100%;\n min-height: 50vh;\n}\n\n@media (max-width: 900px) {\n .content {\n display: block !important;\n height: auto !important;\n overflow: unset !important;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/player/_HelpButton.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.HelpButton {\n position: absolute;\n bottom: 20px;\n right: 20px;\n z-index: 99999;\n background: $color-background;\n border-radius: 50%;\n border: 1px solid $color-border;\n box-shadow: 0px 4px 30px 0px rgba(63, 67, 72, 0.15);\n cursor: pointer;\n pointer-events: all;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n border: $focus-border !important;\n }\n\n svg {\n fill: $color-text-secondary;\n color: $color-text-secondary;\n margin-top: 3px;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/player/_Nav.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.nav {\n width: 100%;\n margin: auto;\n height: 80px;\n left: 0px;\n top: 0px;\n position: fixed;\n z-index: 99999999999999;\n background-color: #fff;\n border-bottom: 1px solid $color-border;\n}\n.navWrap {\n margin: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n width: 95%;\n}\n.navCenter {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.navTitle {\n font-size: $font-size-normal;\n color: $color-text-primary;\n font-weight: 600;\n text-align: center;\n margin: auto;\n}\n.beta {\n margin-left: 4px;\n font-weight: 400;\n font-size: $font-size-small;\n color: $color-text-contrast;\n background-color: $color-primary;\n border-radius: $container-border-radius;\n padding: $spacing-02 $spacing-03;\n}\n.navLeft {\n display: flex;\n align-items: center;\n cursor: pointer;\n\n img {\n height: 30px;\n }\n}\n.navRight {\n display: flex;\n height: fit-content;\n align-items: center;\n gap: 8px;\n\n .button {\n padding: 8px 16px !important;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/player/_Player.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.content {\n display: flex;\n position: absolute;\n top: 80px;\n width: 100%;\n height: calc(100% - 80px);\n box-sizing: border-box;\n left: 0px;\n}\n.player {\n position: absolute;\n}\n\n@media (max-width: 900px) {\n .content {\n display: block !important;\n height: auto !important;\n }\n .player {\n position: relative;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/player/_RightPanel.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.panel {\n height: 100%;\n width: 460px;\n background-color: #fff;\n border: 1px solid $color-border;\n box-sizing: border-box;\n overflow-y: auto;\n z-index: 9999999;\n}\n// Max width 900px\n@media (max-width: 900px) {\n .panel {\n width: 100% !important;\n position: relative !important;\n top: 0px;\n left: 0px;\n overflow: unset !important;\n }\n}\n.section {\n width: 90%;\n margin: auto;\n padding-top: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid $color-border;\n position: relative;\n\n &:last-child {\n border-bottom: none;\n }\n}\n.sectionTitle {\n margin-top: 8px;\n margin-bottom: 16px;\n font-family: $font-bold;\n color: $color-text-primary;\n}\n.buttonLogout {\n position: absolute;\n right: 8px;\n top: 26px;\n font-family: $font-medium;\n color: $color-text-secondary;\n cursor: pointer;\n}\n.buttonWrap {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.alert {\n display: flex;\n width: 100%;\n min-height: 80px;\n padding: 12px 0;\n justify-content: space-between;\n align-items: center;\n position: relative;\n background-color: rgba(56, 126, 247, 0.1);\n box-sizing: border-box;\n\n .buttonRight {\n color: $color-primary;\n font-family: $font-bold;\n width: 150px;\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n.button {\n display: flex;\n width: 100%;\n height: 80px;\n border-radius: $container-border-radius;\n border: 1px solid $color-border;\n justify-content: space-between;\n align-items: center;\n position: relative;\n overflow: hidden;\n\n &:hover {\n cursor: pointer;\n background-color: $color-light-grey;\n }\n &:disabled,\n &[disabled] {\n background-color: $color-light-grey !important;\n opacity: 0.5;\n cursor: not-allowed;\n }\n &.progress::after {\n content: \"\";\n display: block;\n position: absolute;\n background-color: $color-primary;\n opacity: 0.1;\n height: 100%;\n width: 80px;\n left: 0px;\n top: 0px;\n }\n}\n.buttonLeft,\n.buttonRight {\n width: 60px;\n display: flex;\n align-items: center;\n text-align: center;\n height: 100%;\n justify-content: center;\n\n svg {\n color: $color-icon;\n }\n}\n.buttonMiddle {\n flex: 1;\n\n .buttonTitle {\n font-family: $font-bold;\n color: $color-text-primary;\n }\n .buttonDescription {\n font-family: $font-medium;\n color: $color-text-secondary;\n margin-top: 4px;\n }\n}\n.inputSection {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n.inputSectionTitle {\n font-family: $font-medium;\n color: $color-text-secondary;\n margin-bottom: 4px;\n}\n.inputs {\n display: flex;\n gap: 18px;\n margin-bottom: 16px;\n}\n.inputVolume {\n flex: none !important;\n width: 100px;\n}\n.input,\n.inputVolume {\n flex: 1;\n position: relative;\n\n input {\n border-radius: $container-border-radius;\n border: 1px solid $color-border;\n height: 40px;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n padding-left: 18px;\n padding-right: 40px;\n font-family: $font-medium;\n }\n span {\n color: $color-text-secondary;\n font-family: $font-medium;\n position: absolute;\n right: 18px;\n bottom: 12px;\n user-select: none;\n }\n}\n.inputTitle {\n font-family: $font-medium;\n color: $color-text-secondary;\n margin-bottom: 8px;\n}\n.uploadArea {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 16px;\n justify-content: center;\n align-items: center;\n width: 100%;\n border: 1px solid $color-border;\n border-radius: $container-border-radius;\n text-align: center;\n padding-top: 20px;\n padding-bottom: 20px;\n\n svg {\n color: #6e7684;\n }\n\n .uploadTitle {\n font-family: $font-bold;\n color: $color-text-primary;\n }\n .uploadDescription {\n margin-top: 10px;\n font-family: $font-medium;\n color: $color-text-secondary;\n }\n\n &:hover {\n cursor: pointer;\n background-color: $color-light-grey;\n }\n}\n.audioDetails {\n display: flex;\n border-radius: $container-border-radius;\n border: 1px solid $color-border;\n height: 43px;\n align-items: center;\n position: relative;\n\n .audioDetailsLeft {\n display: flex;\n padding-left: 14px;\n padding-right: 8px;\n svg {\n color: #6e7684;\n }\n }\n .audioDetailsMiddle {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4px;\n overflow: hidden;\n\n span {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n width: 90%;\n }\n }\n .audioDetailsRight {\n right: 0px;\n top: 0px;\n bottom: 0px;\n display: flex;\n align-items: center;\n padding-right: 14px;\n position: absolute;\n height: 100%;\n svg {\n color: #6e7684;\n }\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n.SliderRoot {\n position: relative;\n display: flex;\n align-items: center;\n user-select: none;\n touch-action: none;\n width: 200px;\n height: 20px;\n margin-top: 36px;\n flex: 1;\n}\n\n.SliderTrack {\n background-color: $color-border;\n position: relative;\n flex-grow: 1;\n border-radius: 9999px;\n height: 6px;\n}\n\n.SliderRange {\n position: absolute;\n background-color: $color-primary;\n border-radius: 9999px;\n height: 100%;\n}\n\n.SliderThumb {\n display: block;\n width: 16px;\n height: 16px;\n background-color: #fff;\n box-sizing: border-box;\n border: 2px solid $color-primary;\n border-radius: 10px;\n}\n.SliderThumb:focus {\n outline: none;\n box-shadow: $focus-border;\n}\n\n.updateButton {\n margin-top: 20px;\n float: right;\n}\n" }, { "path": "src/pages/Sandbox/styles/player/_ShareModal.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.modalWrap {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n overflow: hidden;\n z-index: $z-index-max;\n}\n\n.modal {\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n margin: auto;\n padding: 24px;\n background: $color-background;\n z-index: $z-index-max;\n text-align: center;\n width: fit-content;\n height: fit-content;\n border-radius: $container-border-radius;\n\n .emoji {\n font-size: 22px;\n }\n\n .title {\n font-family: $font-bold;\n color: $color-text-primary;\n text-align: center;\n margin-top: 8px;\n }\n\n .subtitle {\n font-family: $font-medium;\n color: $color-text-secondary;\n margin-top: 8px;\n text-align: center;\n width: 300px;\n line-height: 150%;\n }\n\n .button {\n background: radial-gradient(\n 118.3% 119.01% at 35.44% 0%,\n #2baef8 23.13%,\n #3582f6 46.35%,\n #486def 74.48%,\n #7b9aea 100%\n ),\n #1b58f6;\n color: $color-text-contrast;\n text-align: center;\n padding: 8px 16px;\n border-radius: $container-border-radius;\n margin-top: 18px;\n font-family: $font-medium;\n width: fit-content;\n margin-left: auto;\n margin-right: auto;\n\n &:hover {\n cursor: pointer;\n opacity: 0.8;\n }\n }\n}\n\n.modalBackground {\n width: 100%;\n height: 100%;\n position: absolute;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.close {\n position: absolute;\n right: 18px;\n top: 18px;\n\n &:hover {\n cursor: pointer;\n opacity: 0.8;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/player/_Title.module.scss", "content": "@use \"../global/variables.scss\" as *;\n\n.TitleParent {\n position: relative;\n bottom: 0;\n width: 90%;\n max-width: 900px;\n left: 0;\n right: 0;\n margin: 0px !important;\n}\n\n.TitleWrap {\n position: relative;\n margin: auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start; /* Align items at the top of the flex container */\n height: auto; /* Allow the container to expand with multiple lines of text */\n\n &:hover {\n cursor: text;\n }\n\n h1 {\n margin: 0;\n padding: 0;\n font-size: 20px;\n font-family: $font-medium;\n position: absolute;\n top: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n width: calc(100% - 140px);\n }\n\n input {\n position: absolute;\n top: 100%;\n font-family: $font-medium;\n font-size: 20px;\n border-radius: $container-border-radius;\n border: 1px solid $color-border;\n width: 100%;\n height: 32px;\n box-sizing: border-box;\n\n &:focus {\n outline: none;\n box-shadow: $focus-border;\n }\n }\n}\n.pencil {\n display: inline-block;\n color: $color-icon;\n}\n.shareButton {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: $color-text-primary;\n color: $color-text-contrast;\n border-radius: $container-border-radius;\n padding: 0px 16px;\n height: 40px;\n position: absolute;\n right: 0px;\n gap: 8px;\n font-size: 500;\n font-family: $font-medium;\n top: -6px;\n\n &:hover {\n cursor: pointer;\n background-color: #000 !important;\n }\n}\n.shareIcon {\n width: 16px;\n svg {\n color: #fff;\n margin-top: 1px;\n }\n}\n" }, { "path": "src/pages/Sandbox/styles/plyr.css", "content": "@charset \"UTF-8\";@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:#0000;border:0;border-radius:3px;border-radius:var(--plyr-control-radius,3px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .3s ease}.plyr__control svg{fill:currentColor;display:block;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}a.plyr__control{text-decoration:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:4px;border-radius:var(--plyr-menu-radius,4px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:\"\";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:\"\";position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:\"\";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:\"\";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{color:#0000}.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time:before{content:\"⁄\";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:#ffffffe6;background:var(--plyr-tooltip-background,#ffffffe6);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #ffffffe6;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#ffffffe6);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:\"\";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc((var(--plyr-range-track-height, 5px)/2)*-1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:#0000}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}.plyr__volume{align-items:center;display:flex;position:relative}.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr--video{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));height:100%;margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen video{height:100%}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;bottom:0;height:100%;left:0;margin:0;position:fixed;right:0;top:0;width:100%;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads:empty:after{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}.plyr__preview-thumb{background-color:#ffffffe6;background-color:var(--plyr-tooltip-background,#ffffffe6);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #ffffffe6;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#ffffffe6);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:\"\";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:4px;border-radius:calc(var(--plyr-tooltip-radius, 5px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:\"\";pointer-events:none}.plyr__preview-thumb__image-container img{max-height:none;max-width:none}.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:4px;border-bottom-left-radius:calc(var(--plyr-tooltip-radius, 5px) - 1px);border-bottom-right-radius:4px;border-bottom-right-radius:calc(var(--plyr-tooltip-radius, 5px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__preview-scrubbing{bottom:0;filter:blur(1px);height:100%;left:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important}" }, { "path": "src/pages/Setup/Setup.jsx", "content": "import React, { useEffect, useState } from \"react\";\n\nconst Setup = () => {\n const [setupComplete, setSetupComplete] = useState(false);\n\n useEffect(() => {\n // Inject content script\n const script = document.createElement(\"script\");\n script.src = chrome.runtime.getURL(\"contentScript.bundle.js\");\n script.async = true;\n document.body.appendChild(script);\n\n // Also inject CSS\n const style = document.createElement(\"link\");\n style.rel = \"stylesheet\";\n style.type = \"text/css\";\n style.href = chrome.runtime.getURL(\"assets/fonts/fonts.css\");\n document.body.appendChild(style);\n\n // Return\n return () => {\n document.body.removeChild(script);\n document.body.removeChild(style);\n };\n }, []);\n\n useEffect(() => {\n chrome.runtime.onMessage.addListener(function (\n request,\n sender,\n sendResponse\n ) {\n if (request.type === \"setup-complete\") {\n setSetupComplete(true);\n }\n });\n }, []);\n\n return (\n
\n {!setupComplete && (\n
\n
\n \n
\n
\n
👋
\n
\n {chrome.i18n.getMessage(\"setupTitle\")}\n
\n
\n
\n {chrome.i18n.getMessage(\"setupStep1Before\")}\n \n \n \n {chrome.i18n.getMessage(\"setupStep1After\")}\n
\n
\n {chrome.i18n.getMessage(\"setupStep2Before\")}\n \n \n {\" \"}\n {chrome.i18n.getMessage(\"setupStep2After\")}\n
\n
\n {chrome.i18n.getMessage(\"setupStep3Before\")}\n \n \n \n {chrome.i18n.getMessage(\"setupStep3After\")}\n
\n
\n
\n
\n )}\n {setupComplete && (\n
\n
\n
🥳
\n
\n {chrome.i18n.getMessage(\"setupCompleteTitle\")}\n
\n
\n {chrome.i18n.getMessage(\"setupCompleteDescription\")}\n
\n
\n
\n )}\n \n \n
\n );\n};\n\nexport default Setup;\n" }, { "path": "src/pages/Setup/index.html", "content": "\n\n \n \n \n Screenity - First Steps\n \n \n\n \n
\n \n\n" }, { "path": "src/pages/Setup/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\nimport Setup from \"./Setup\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/Waveform/Waveform.jsx", "content": "import React, { useEffect, useRef } from \"react\";\n\nconst Waveform = () => {\n const canvasRef = useRef(null);\n let audioContext;\n let analyser;\n let dataArray;\n let animationFrameId;\n let audioStream;\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const canvasContext = canvas.getContext(\"2d\");\n\n function initializeAudioContext() {\n if (!audioContext) {\n audioContext = new (window.AudioContext || window.webkitAudioContext)();\n analyser = audioContext.createAnalyser();\n analyser.fftSize = 2048;\n analyser.maxDecibels = -60;\n dataArray = new Float32Array(analyser.fftSize);\n const source = audioContext.createMediaStreamDestination();\n analyser.connect(source);\n audioContext.resume();\n startVisualization();\n }\n }\n\n function startVisualization() {\n analyser.getFloatTimeDomainData(dataArray);\n canvasContext.clearRect(0, 0, canvas.width, canvas.height);\n canvasContext.beginPath();\n const sliceWidth = 0.9;\n const waveformHeight = canvas.height;\n const waveformOffset = (canvas.height - waveformHeight) / 2;\n let x = 0;\n let sum = 0;\n let count = 0;\n for (let i = 0; i < dataArray.length; i++) {\n const v = (dataArray[i] + 1) / 2;\n sum += v;\n count++;\n if (count === 10) {\n const avg = sum / count;\n const y = avg * waveformHeight * 2 + waveformOffset;\n if (i === 0) {\n canvasContext.moveTo(x, y);\n } else {\n canvasContext.lineTo(x, y);\n }\n x += sliceWidth;\n sum = 0;\n count = 0;\n }\n }\n canvasContext.strokeStyle = \"#78C072\";\n canvasContext.stroke();\n\n animationFrameId = requestAnimationFrame(startVisualization);\n }\n\n function startVisualization() {\n analyser.getFloatTimeDomainData(dataArray);\n canvasContext.clearRect(0, 0, canvas.width, canvas.height);\n canvasContext.beginPath();\n const sliceWidth = 0.7;\n const waveformHeight = canvas.height * 0.9;\n const waveformOffset = (canvas.height - waveformHeight) / 2;\n let x = 0;\n for (let i = 0; i < dataArray.length; i++) {\n const v = (dataArray[i] + 1) / 2;\n const y = v * waveformHeight + waveformOffset;\n if (i === 0) {\n canvasContext.moveTo(x, y);\n } else {\n canvasContext.lineTo(x, y);\n }\n x += sliceWidth;\n }\n canvasContext.strokeStyle = \"#78C072\";\n canvasContext.lineWidth = 1.5;\n canvasContext.stroke();\n\n animationFrameId = requestAnimationFrame(startVisualization);\n }\n\n function stopVisualization() {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n }\n }\n\n function startAudioCapture() {\n navigator.mediaDevices\n .getUserMedia({ audio: true, video: false })\n .then((stream) => {\n audioStream = stream;\n initializeAudioContext();\n const audioSource = audioContext.createMediaStreamSource(audioStream);\n audioSource.connect(analyser);\n })\n .catch((error) => {\n console.error(\"Error capturing audio:\", error);\n });\n }\n\n function stopAudioCapture() {\n if (audioStream) {\n const tracks = audioStream.getTracks();\n tracks.forEach((track) => track.stop());\n audioStream = null;\n stopVisualization();\n }\n }\n\n startAudioCapture();\n\n return () => {\n stopAudioCapture();\n };\n }, []);\n\n return (\n \n );\n};\n\nexport default Waveform;\n" }, { "path": "src/pages/Waveform/index.html", "content": "\n\n \n \n \n \n\n \n
\n \n\n" }, { "path": "src/pages/Waveform/index.jsx", "content": "import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\nimport Waveform from \"./Waveform\";\n\n// Find the container to render into\nconst container = window.document.querySelector(\"#app-container\");\n\nif (container) {\n const root = createRoot(container);\n root.render();\n}\n\n// Hot Module Replacement\nif (module.hot) {\n module.hot.accept();\n}\n" }, { "path": "src/pages/utils/buildDiagnosticZip.js", "content": "/**\n * Builds a diagnostic ZIP for troubleshooting. Returns { blob, filename }.\n * Used by the popup settings menu and the editor \"Get help\" button.\n */\nimport JSZip from \"jszip\";\nimport { getStartFlowTrace } from \"./startFlowTrace\";\n\nconst FAST_RECORDER_KEYS = [\n \"fastRecorderBeta\",\n \"fastRecorderDecision\",\n \"fastRecorderDisabledForDevice\",\n \"fastRecorderDisabledReason\",\n \"fastRecorderDisabledDetails\",\n \"fastRecorderDisabledAt\",\n \"fastRecorderProbe\",\n \"fastRecorderValidation\",\n \"fastRecorderValidationFailed\",\n \"fastRecorderInUse\",\n];\n\nexport const buildDiagnosticZip = async ({\n extraConfig = {},\n source = \"unknown\",\n} = {}) => {\n const userAgent = navigator.userAgent;\n\n // Parallel fetches from background\n const [platformInfo, diagData, fastRecorderData] = await Promise.all([\n chrome.runtime.sendMessage({ type: \"get-platform-info\" }),\n chrome.runtime.sendMessage({ type: \"get-diagnostic-log\" }),\n new Promise((resolve) =>\n chrome.storage.local.get(FAST_RECORDER_KEYS, resolve),\n ),\n ]);\n\n const manifestVersion = chrome.runtime.getManifest().version;\n const now = new Date();\n const ts = now.toISOString().replace(/[:.]/g, \"-\").slice(0, 19);\n\n const zip = new JSZip();\n\n // manifest.json — export metadata\n zip.file(\n \"manifest.json\",\n JSON.stringify({\n extensionVersion: manifestVersion,\n schemaVersion: 1,\n exportedAt: now.toISOString(),\n chromeVersion: /Chrome\\/([\\d.]+)/.exec(userAgent)?.[1] || null,\n source,\n }),\n );\n\n // environment.json\n zip.file(\n \"environment.json\",\n JSON.stringify({\n userAgent,\n platformInfo,\n screen: {\n width: window.screen.availWidth,\n height: window.screen.availHeight,\n devicePixelRatio: window.devicePixelRatio,\n },\n deviceMemory: navigator.deviceMemory || null,\n }),\n );\n\n // config.json — recording settings + caller-specific extras\n zip.file(\n \"config.json\",\n JSON.stringify({\n fastRecorder: fastRecorderData,\n ...extraConfig,\n }),\n );\n\n // sessions.json — diagnostic session timeline with derived hints\n if (diagData?.log) {\n const annotated = JSON.parse(JSON.stringify(diagData.log));\n if (annotated.sessions) {\n for (const session of annotated.sessions) {\n if (!session.events?.length) continue;\n const hints = [];\n const hasEditorOpen = session.events.some(\n (ev) => ev.e === \"editor-open\" && ev.d?.type === \"editorwebcodecs\",\n );\n const hasEditorReady = session.events.some(\n (ev) => ev.e === \"editor-load-ready\",\n );\n if (hasEditorOpen && !hasEditorReady) {\n hints.push(\"Editor handoff incomplete: editor opened but never finished loading\");\n }\n if (hints.length > 0) session.hints = hints;\n }\n }\n zip.file(\"sessions.json\", JSON.stringify(annotated));\n }\n\n // errors.json — consolidated error-state keys\n if (diagData?.errors) {\n zip.file(\"errors.json\", JSON.stringify(diagData.errors));\n }\n\n // storage-flags.json — current boolean/numeric state flags\n if (diagData?.flags) {\n zip.file(\"storage-flags.json\", JSON.stringify(diagData.flags));\n }\n\n // start-flow-trace.json\n try {\n const trace = await getStartFlowTrace();\n if (trace) {\n zip.file(\"start-flow-trace.json\", JSON.stringify(trace));\n }\n } catch {\n // best effort\n }\n\n const blob = await zip.generateAsync({ type: \"blob\" });\n const filename = `screenity-diagnostics-${ts}.zip`;\n\n return { blob, filename };\n};\n" }, { "path": "src/pages/utils/buildSupportContext.js", "content": "/**\n * Builds a URL-safe support-context object for Tally form prefills.\n * No URLs, tokens, page content, or blobs — only sanitized technical metadata.\n */\n\nconst MAX_ERR_LEN = 120;\n\nconst sanitizeError = (err) => {\n if (!err) return \"\";\n const str =\n typeof err === \"string\"\n ? err\n : err.message || err.errorCode || JSON.stringify(err);\n return str\n .replace(/https?:\\/\\/[^\\s)]+/gi, \"[url]\")\n .replace(/chrome-extension:\\/\\/[^\\s)]+/gi, \"[ext]\")\n .slice(0, MAX_ERR_LEN);\n};\n\nconst shortBrowser = () => {\n const ua = navigator.userAgent || \"\";\n const edg = ua.match(/Edg\\/(\\d+)/);\n if (edg) return `Edge/${edg[1]}`;\n const ch = ua.match(/Chrome\\/(\\d+)/);\n if (ch) return `Chrome/${ch[1]}`;\n return \"Unknown\";\n};\n\n/** Build support context. Returns flat key-value pairs for URLSearchParams. */\nexport const buildSupportContext = async (opts = {}) => {\n const ctx = {};\n\n // ---- always included ----\n ctx.v = chrome.runtime.getManifest().version;\n ctx.lang = chrome.i18n.getMessage(\"@@ui_locale\") || \"unknown\";\n ctx.br = shortBrowser();\n\n try {\n const info = await chrome.runtime.getPlatformInfo();\n ctx.os = info.os; // \"mac\", \"win\", \"linux\", \"cros\", etc.\n } catch {\n ctx.os = \"unknown\";\n }\n\n // Human-readable platform for Tally choice prefill\n const platformMap = { mac: \"macOS\", win: \"Windows\", linux: \"Linux\", cros: \"ChromeOS\" };\n ctx.platform = platformMap[ctx.os] || \"Other\";\n\n ctx.cloud =\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES === \"true\" ? \"1\" : \"0\";\n\n if (opts.source) {\n ctx.src = opts.source;\n }\n\n // ---- recording / error state (opt-in) ----\n if (opts.includeRecordingState) {\n try {\n const keys = [\n \"lastRecordingError\",\n \"lastRecordingType\",\n \"recordingType\",\n \"fastRecorderInUse\",\n \"fastRecorderDisabledReason\",\n \"isSubscribed\",\n \"diagnosticLog\",\n \"recordingAttemptId\",\n ];\n const store = await chrome.storage.local.get(keys);\n\n const recType = store.lastRecordingType || store.recordingType;\n if (recType) ctx.recType = recType;\n if (store.fastRecorderInUse != null)\n ctx.fast = store.fastRecorderInUse ? \"1\" : \"0\";\n if (store.fastRecorderDisabledReason)\n ctx.fastOff = String(store.fastRecorderDisabledReason).slice(0, 60);\n ctx.sub = store.isSubscribed ? \"1\" : \"0\";\n ctx.cloud = store.isSubscribed ? \"1\" : \"0\";\n if (store.lastRecordingError) {\n ctx.lastErr = sanitizeError(\n store.lastRecordingError.why || store.lastRecordingError.error,\n );\n if (store.lastRecordingError.errorCode)\n ctx.errCode = store.lastRecordingError.errorCode;\n }\n if (store.recordingAttemptId)\n ctx.attemptId = store.recordingAttemptId;\n\n // Last diagnostic session outcome (compact — just the outcome string)\n if (store.diagnosticLog?.sessions?.length) {\n const last =\n store.diagnosticLog.sessions[\n store.diagnosticLog.sessions.length - 1\n ];\n if (last?.outcome) ctx.lastOutcome = last.outcome;\n // Detect incomplete editor handoff (editor opened but never loaded)\n if (last?.events?.length) {\n const hasEditorOpen = last.events.some(\n (ev) => ev.e === \"editor-open\" && ev.d?.type === \"editorwebcodecs\",\n );\n const hasEditorReady = last.events.some(\n (ev) => ev.e === \"editor-load-ready\",\n );\n if (hasEditorOpen && !hasEditorReady) ctx.editorHandoff = \"incomplete\";\n }\n }\n } catch {\n // storage read failed — continue without recording state\n }\n }\n\n // ---- explicit error overrides (from error modal \"Get help\" button) ----\n if (opts.errorCode) ctx.errCode = opts.errorCode;\n if (opts.errorWhy) ctx.lastErr = sanitizeError(opts.errorWhy);\n\n // ---- support code (short human-readable reference) ----\n if (ctx.attemptId) {\n const hash = ctx.attemptId.replace(/[^a-z0-9]/gi, \"\").slice(-4).toUpperCase();\n const date = new Date().toISOString().slice(0, 10).replace(/-/g, \"\");\n ctx.supportCode = `SCR-${hash}-${date}`;\n }\n\n // ---- user info (only when explicitly provided) ----\n if (opts.user) {\n if (opts.user.name) ctx.name = opts.user.name;\n if (opts.user.email) ctx.email = opts.user.email;\n }\n\n return ctx;\n};\n\n/** Build context and return as a query string. */\nexport const supportContextQuery = async (opts = {}) => {\n const ctx = await buildSupportContext(opts);\n const params = new URLSearchParams();\n for (const [k, val] of Object.entries(ctx)) {\n if (val !== undefined && val !== null && val !== \"\") {\n params.set(k, val);\n }\n }\n return params.toString();\n};\n" }, { "path": "src/pages/utils/buildSupportDebugInfo.js", "content": "/**\n * Clipboard-friendly debug summary for support.\n * Same privacy rules as buildSupportContext — no URLs, tokens, or user content.\n */\n\nimport { makeSupportCode } from \"./errorCodes\";\nimport { getStartFlowTrace, formatStartFlowTimeline } from \"./startFlowTrace\";\n\nconst MAX_ERR_LEN = 120;\n\nconst sanitizeError = (err) => {\n if (!err) return \"\";\n const str = typeof err === \"string\" ? err : String(err);\n return str\n .replace(/https?:\\/\\/[^\\s)]+/gi, \"[url]\")\n .replace(/chrome-extension:\\/\\/[^\\s)]+/gi, \"[ext]\")\n .slice(0, MAX_ERR_LEN);\n};\n\nconst shortBrowser = () => {\n const ua = navigator.userAgent || \"\";\n const edg = ua.match(/Edg\\/(\\d+)/);\n if (edg) return `Edge/${edg[1]}`;\n const ch = ua.match(/Chrome\\/(\\d+)/);\n if (ch) return `Chrome/${ch[1]}`;\n return \"Unknown\";\n};\n\nconst shortOS = async () => {\n try {\n const info = await chrome.runtime.getPlatformInfo();\n return info.os || \"unknown\";\n } catch {\n return \"unknown\";\n }\n};\n\n/** Build a plain-text debug info block for clipboard. */\nexport const buildSupportDebugInfo = async (opts = {}) => {\n const version = chrome.runtime.getManifest().version;\n const browser = shortBrowser();\n const os = await shortOS();\n const ts = new Date().toISOString();\n\n // Pull relevant state from storage\n let store = {};\n try {\n store = await chrome.storage.local.get([\n \"recordingAttemptId\",\n \"recordingType\",\n \"fastRecorderInUse\",\n \"fastRecorderDisabledReason\",\n \"isSubscribed\",\n \"lastRecordingError\",\n \"lastStreamCheckFail\",\n \"lastAutoDiscardableError\",\n \"streamLifecycleLog\",\n \"diagnosticLog\",\n ]);\n } catch {\n // storage read failed — continue with defaults\n }\n\n const attemptId = store.recordingAttemptId || null;\n const supportCode = makeSupportCode(attemptId);\n\n // Determine error code: prefer explicit, fall back to stored\n const errorCode =\n opts.errorCode ||\n store.lastRecordingError?.errorCode ||\n null;\n\n const errorWhy = sanitizeError(\n opts.errorWhy || store.lastRecordingError?.why || \"\"\n );\n\n // Recording mode\n const recType = store.recordingType || \"unknown\";\n const fastRec = store.fastRecorderInUse ? \"active\" : \"off\";\n const fastOff = store.fastRecorderDisabledReason || null;\n const sub = store.isSubscribed ? \"pro\" : \"free\";\n\n // Last diagnostic session outcome + editor handoff check\n let lastOutcome = null;\n let editorHandoffIncomplete = false;\n if (store.diagnosticLog?.sessions?.length) {\n const last =\n store.diagnosticLog.sessions[store.diagnosticLog.sessions.length - 1];\n lastOutcome = last?.outcome || null;\n if (last?.events?.length) {\n const hasEditorOpen = last.events.some(\n (ev) => ev.e === \"editor-open\" && ev.d?.type === \"editorwebcodecs\",\n );\n const hasEditorReady = last.events.some(\n (ev) => ev.e === \"editor-load-ready\",\n );\n editorHandoffIncomplete = hasEditorOpen && !hasEditorReady;\n }\n }\n\n // Build the text block\n const lines = [\n `Screenity Debug Info`,\n `====================`,\n `Code: ${supportCode}`,\n ];\n if (errorCode) lines.push(`Error: ${errorCode}`);\n if (errorWhy) lines.push(`Detail: ${errorWhy}`);\n lines.push(`Version: ${version}`);\n lines.push(`Browser: ${browser}`);\n lines.push(`OS: ${os}`);\n lines.push(`Mode: ${recType}`);\n lines.push(`Fast MP4: ${fastRec}${fastOff ? ` (${fastOff})` : \"\"}`);\n lines.push(`Plan: ${sub}`);\n if (lastOutcome) lines.push(`Session: ${lastOutcome}`);\n if (editorHandoffIncomplete) lines.push(`EditorLoad: incomplete (editor opened but never became ready)`);\n if (store.lastStreamCheckFail) {\n const sc = store.lastStreamCheckFail;\n lines.push(`StreamChk: ${sc.bucket || \"?\"} vis=${sc.docVisibility || sc.docHidden} ms=${sc.msSinceReady ?? \"?\"}`);\n }\n if (store.lastAutoDiscardableError) {\n lines.push(`AutoDisc: failed tab=${store.lastAutoDiscardableError.tabId}`);\n }\n if (store.streamLifecycleLog?.length) {\n const sl = store.streamLifecycleLog;\n const tags = sl.map((e) => `${e.tag}@${e.t}`).join(\" → \");\n lines.push(`SL(${sl.length}): ${tags.slice(0, 300)}`);\n }\n if (attemptId) lines.push(`Ref: ${attemptId}`);\n lines.push(`Time: ${ts}`);\n\n // Start-flow trace timeline\n try {\n const trace = await getStartFlowTrace();\n if (trace) {\n const timeline = formatStartFlowTimeline(trace);\n if (timeline) {\n lines.push(\"\");\n lines.push(\"Start Flow:\");\n lines.push(timeline);\n }\n }\n } catch {\n // best effort\n }\n\n return lines.join(\"\\n\");\n};\n" }, { "path": "src/pages/utils/diagnosticLog.js", "content": "/**\n * Ring-buffer diagnostic log stored in chrome.storage.local (\"diagnosticLog\").\n * Max 5 sessions, 100 events each. Used in the background service worker.\n */\n\nconst MAX_SESSIONS = 5;\nconst MAX_EVENTS = 100;\nconst FLUSH_EVERY_N = 10; // flush to storage every N events\n\nlet _log = null; // in-memory mirror of diagnosticLog\nlet _dirty = 0; // events written since last flush\n\nconst now = () => Date.now();\n\nconst makeId = () =>\n `diag-${now()}-${Math.random().toString(16).slice(2, 7)}`;\n\nconst currentSession = () => {\n if (!_log || !_log.sessions || _log.sessions.length === 0) return null;\n const last = _log.sessions[_log.sessions.length - 1];\n return last.endedAt == null ? last : null;\n};\n\nconst flush = async () => {\n if (!_log) return;\n _dirty = 0;\n try {\n await chrome.storage.local.set({ diagnosticLog: _log });\n } catch {\n // SW may be shutting down — best-effort\n }\n};\n\nconst maybeFlush = () => {\n _dirty += 1;\n if (_dirty >= FLUSH_EVERY_N) {\n flush(); // fire-and-forget\n }\n};\n\n/** Hydrate the in-memory log from storage. Call once on SW init. */\nexport const hydrateDiagnosticLog = async () => {\n try {\n const res = await chrome.storage.local.get(\"diagnosticLog\");\n _log = res?.diagnosticLog || { schemaVersion: 1, sessions: [] };\n } catch {\n _log = { schemaVersion: 1, sessions: [] };\n }\n};\n\n/** Start a new session. Call from startRecording(). */\nexport const initDiagSession = async (config = {}) => {\n if (!_log) await hydrateDiagnosticLog();\n\n const session = {\n id: makeId(),\n startedAt: now(),\n endedAt: null,\n outcome: \"in-progress\",\n config,\n events: [],\n };\n\n _log.sessions.push(session);\n\n // Trim to MAX_SESSIONS\n while (_log.sessions.length > MAX_SESSIONS) {\n _log.sessions.shift();\n }\n\n await flush();\n return session.id;\n};\n\n/** Append an event to the current open session. */\nexport const diagEvent = (eventType, data) => {\n const s = currentSession();\n if (!s) return; // no open session\n\n const entry = {\n t: now() - s.startedAt,\n e: eventType,\n };\n if (data !== undefined && data !== null) {\n entry.d = data;\n }\n\n s.events.push(entry);\n\n // Ring-buffer trim\n while (s.events.length > MAX_EVENTS) {\n s.events.shift();\n }\n\n // Force-flush on lifecycle/error events so they survive SW termination.\n const ALWAYS_FLUSH = [\n \"error\",\n \"crash\",\n \"start-fail\",\n \"warning\",\n \"session-start\",\n \"stop\",\n \"stop-tab\",\n \"editor-open\",\n \"chunks-sent\",\n \"chunks-fail\",\n \"sw-init\",\n \"countdown-started\",\n \"countdown-cancelled\",\n \"countdown-finished\",\n \"pause\",\n \"resume\",\n \"restart-requested\",\n \"restart-completed\",\n \"restart-failed\",\n \"alarm-fired\",\n \"recorded-tab-closed\",\n \"recorded-tab-navigated\",\n \"drive-upload-start\",\n \"drive-upload-ok\",\n \"drive-upload-fail\",\n \"drive-save-fail\",\n \"drive-auth-fail\",\n \"editor-load-ready\",\n ];\n if (ALWAYS_FLUSH.includes(eventType)) {\n flush();\n } else {\n maybeFlush();\n }\n};\n\n/** Close the current session with a final outcome. */\nexport const endDiagSession = async (outcome = \"ok\") => {\n const s = currentSession();\n if (!s) return;\n s.endedAt = now();\n s.outcome = outcome;\n await flush();\n};\n\n/** Return the full diagnostic log (for export). */\nexport const getDiagnosticLog = async () => {\n if (!_log) await hydrateDiagnosticLog();\n return _log;\n};\n\n/** Collect error-state keys from storage into one object. */\nexport const getErrorSnapshot = async () => {\n const keys = [\n \"lastRecordingError\",\n \"lastChunkSendFailure\",\n \"recorderSession\",\n \"freeRecorderSession\",\n \"fastRecorderValidation\",\n \"fastRecorderProbe\",\n \"fastRecorderDecision\",\n \"fastRecorderDisabledReason\",\n \"fastRecorderDisabledDetails\",\n \"fastRecorderDisabledAt\",\n \"memoryError\",\n \"recordingAttemptId\",\n ];\n try {\n return await chrome.storage.local.get(keys);\n } catch {\n return {};\n }\n};\n\n/** Read current state flags for export. */\nexport const getStorageFlags = async () => {\n const keys = [\n \"recording\",\n \"pendingRecording\",\n \"restarting\",\n \"paused\",\n \"offscreen\",\n \"sendingChunks\",\n \"postStopEditorOpening\",\n \"postStopEditorOpened\",\n \"recordingStartTime\",\n \"totalPausedMs\",\n \"recordingDuration\",\n \"recordingTab\",\n \"sandboxTab\",\n \"recordingUiTabId\",\n \"fastRecorderInUse\",\n \"memoryError\",\n \"lowStorageAbortAt\",\n \"lowStorageAbortChunks\",\n \"editorLoadTimeoutAt\",\n ];\n try {\n return await chrome.storage.local.get(keys);\n } catch {\n return {};\n }\n};\n" }, { "path": "src/pages/utils/errorCodes.js", "content": "/**\n * Error codes for recording flows.\n *\n * Codes are stored in `lastRecordingError.code` and flow through diagnostics\n * and support context. They never contain URLs, page content, or user data.\n */\n\n// -- Recording Start --\nexport const REC_START_PERM = \"REC_START_PERM\"; // permission denied\nexport const REC_START_STREAM = \"REC_START_STREAM\"; // getUserMedia / getDisplayMedia failed\nexport const REC_START_CODEC = \"REC_START_CODEC\"; // MediaRecorder or WebCodecs init failed\nexport const REC_START_REGION = \"REC_START_REGION\"; // region/crop target setup failed\nexport const REC_START_TAB = \"REC_START_TAB\"; // tab capture or message routing failed\nexport const REC_START_TIMEOUT = \"REC_START_TIMEOUT\"; // start flow timed out\nexport const REC_START_CANCEL = \"REC_START_CANCEL\"; // user cancelled the capture picker\nexport const REC_START_NOT_READY = \"REC_START_NOT_READY\"; // recorder tab not ready (likely discarded)\n\n// -- Recording Runtime --\nexport const REC_RUN_STREAM_END = \"REC_RUN_STREAM_END\"; // stream ended unexpectedly\nexport const REC_RUN_MEMORY = \"REC_RUN_MEMORY\"; // memory/quota pressure\n\n// -- Recording Stop --\nexport const REC_STOP_CHUNKS = \"REC_STOP_CHUNKS\"; // chunk delivery failed\nexport const REC_STOP_EDITOR = \"REC_STOP_EDITOR\"; // editor tab open failed\n\n// -- Drive --\nexport const DRV_AUTH = \"DRV_AUTH\"; // auth failed\nexport const DRV_FOLDER = \"DRV_FOLDER\"; // folder operation failed\nexport const DRV_UPLOAD = \"DRV_UPLOAD\"; // file upload failed\n\n// -- Fallback --\nexport const UNKNOWN = \"UNKNOWN\";\n\n// -- Classifier --\n\n// Patterns that strongly indicate the user explicitly cancelled the picker.\n// Note: \"aborterror\" is intentionally NOT here — Chrome throws AbortError for\n// picker dismissal but also for unrelated abort scenarios. We only classify\n// AbortError as cancel when the caller passes the \"cancel-modal\" hint.\nconst CANCEL_PATTERNS = [\n \"cancelled\",\n \"canceled\",\n \"cancel-modal\",\n \"user cancelled\",\n \"user canceled\",\n];\n\nconst PERM_PATTERNS = [\n \"permission\",\n \"not allowed\",\n \"denied\",\n \"notallowederror\",\n \"dismissedbyuser\",\n \"permission is blocked\",\n];\n\nconst STREAM_PATTERNS = [\n \"no video track\",\n \"no audio\",\n \"getusermedia\",\n \"getdisplaymedia\",\n \"stream unavailable\",\n \"camera stream\",\n \"display stream missing\",\n \"failed to get user media\",\n \"failed to start streaming\",\n \"failed to start stream\",\n \"failed to setup streaming\",\n \"failed to get stream\",\n \"failed to access screen stream\",\n \"failed to access region stream\",\n \"no streams to record\",\n \"no screen video track\",\n \"no camera video track\",\n \"notreadableerror\",\n \"notfounderror\",\n \"overconstrainederror\",\n];\n\nconst CODEC_PATTERNS = [\n \"mediarecorder\",\n \"webcodecs\",\n \"failed to start recording\",\n \"codec\",\n \"mimeType\",\n \"mime type\",\n \"recording error:\",\n];\n\nconst TAB_PATTERNS = [\n \"no recording tab\",\n \"tab stream\",\n \"unable to resolve tab\",\n \"tab capture\",\n \"message routing\",\n];\n\nconst TIMEOUT_PATTERNS = [\n \"taking too long\",\n \"timed out\",\n \"timeout\",\n];\n\nconst REGION_PATTERNS = [\n \"crop target\",\n \"crop region\",\n \"failed to crop\",\n \"region capture\",\n \"no crop target\",\n];\n\n/**\n * Classify an error string into an error code.\n *\n * @param {string} errorStr — raw error message\n * @param {string} [errorType] — optional hint (\"stream-error\", \"cancel-modal\", etc.)\n * @returns {string} one of the exported error code constants\n */\nexport const classifyError = (errorStr = \"\", errorType = \"\") => {\n const lower = String(errorStr).toLowerCase();\n const typeLower = String(errorType).toLowerCase();\n\n // Explicit cancel — either the caller flagged it or the message clearly says so.\n // AbortError only counts as cancel when the caller confirms via \"cancel-modal\",\n // since Chrome reuses AbortError for non-cancel scenarios too.\n if (typeLower === \"cancel-modal\") {\n return REC_START_CANCEL;\n }\n if (CANCEL_PATTERNS.some((p) => lower.includes(p))) {\n return REC_START_CANCEL;\n }\n\n // Permission denied\n if (PERM_PATTERNS.some((p) => lower.includes(p))) {\n return REC_START_PERM;\n }\n\n // Recorder not ready (stream ref missing, likely tab discarded during countdown)\n if (lower.includes(\"recording not ready\") || lower.includes(\"screen stream is missing\")) {\n return REC_START_NOT_READY;\n }\n\n // Stream acquisition\n if (STREAM_PATTERNS.some((p) => lower.includes(p))) {\n return REC_START_STREAM;\n }\n\n // Codec / recorder init\n if (CODEC_PATTERNS.some((p) => lower.includes(p))) {\n return REC_START_CODEC;\n }\n\n // Timeout\n if (TIMEOUT_PATTERNS.some((p) => lower.includes(p))) {\n return REC_START_TIMEOUT;\n }\n\n // Region / crop\n if (REGION_PATTERNS.some((p) => lower.includes(p))) {\n return REC_START_REGION;\n }\n\n // Stream ended (runtime, not start)\n if (typeLower === \"stream-ended\" || lower.includes(\"stream ended\")) {\n return REC_RUN_STREAM_END;\n }\n\n // Tab routing\n if (TAB_PATTERNS.some((p) => lower.includes(p))) {\n return REC_START_TAB;\n }\n\n // Memory / storage\n if (\n lower.includes(\"memory\") ||\n lower.includes(\"quota\") ||\n lower.includes(\"indexeddb\") ||\n lower.includes(\"local storage is blocked\") ||\n lower.includes(\"local buffer\")\n ) {\n return REC_RUN_MEMORY;\n }\n\n // Bare AbortError without a cancel-modal hint — this is ambiguous, so treat\n // it as a stream-level failure rather than assuming user intent.\n if (lower.includes(\"aborterror\")) {\n return REC_START_STREAM;\n }\n\n return UNKNOWN;\n};\n\n// -- Helpers --\n\n/** Short ID for a recording attempt (no crypto dependency). */\nexport const makeRecordingAttemptId = () => {\n const ts = Date.now().toString(36);\n const rand = Math.random().toString(36).slice(2, 8);\n return `ra-${ts}-${rand}`;\n};\n\n/** Derive a short support code from an attempt ID. */\nexport const makeSupportCode = (attemptId) => {\n if (!attemptId) return \"SCR-0000\";\n const hash = attemptId.replace(/[^a-z0-9]/gi, \"\").slice(-4).toUpperCase();\n const date = new Date().toISOString().slice(0, 10).replace(/-/g, \"\");\n return `SCR-${hash}-${date}`;\n};\n" }, { "path": "src/pages/utils/filenameHelpers.js", "content": "export const sanitizeFilenameBase = (value) => {\n const fallback = \"Screenity recording\";\n if (typeof value !== \"string\") return fallback;\n\n let sanitized = value.replace(/[\\u0000-\\u001f\\u007f]/g, \"\");\n sanitized = sanitized.replace(/[\\\\/:*?\"<>|]/g, \"-\");\n sanitized = sanitized.replace(/\\s+/g, \" \").trim();\n\n if (sanitized.length > 80) {\n sanitized = sanitized.slice(0, 80).trim();\n }\n\n return sanitized.length > 0 ? sanitized : fallback;\n};\n\nexport const formatLocalTimestamp = (value) => {\n const date = value ? new Date(value) : new Date();\n const safeDate = Number.isNaN(date.getTime()) ? new Date() : date;\n // Use Intl.DateTimeFormat to respect user locale and time format.\n return new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"2-digit\",\n }).format(safeDate);\n};\n\nexport const getHostnameFromUrl = (url) => {\n if (!url) return \"\";\n try {\n const parsed = new URL(url);\n let hostname = parsed.hostname || \"\";\n if (hostname.startsWith(\"www.\")) {\n hostname = hostname.slice(4);\n }\n return hostname;\n } catch {\n return \"\";\n }\n};\n\nexport const getTabRecordingBaseTitle = (title, url) => {\n const candidate = title && title.trim().length > 0 ? title : getHostnameFromUrl(url);\n return sanitizeFilenameBase(candidate);\n};\n" }, { "path": "src/pages/utils/mediaDeviceFallback.js", "content": "const DEVICE_ID_ERRORS = new Set([\"OverconstrainedError\", \"NotFoundError\"]);\n\nconst isDeviceIdError = (err) => err && DEVICE_ID_ERRORS.has(err.name);\n\nconst cloneConstraints = (constraints) =>\n JSON.parse(JSON.stringify(constraints || {}));\n\nconst updateConstraintsDeviceId = (constraints, kind, deviceId) => {\n if (!constraints || !deviceId) return;\n\n if (kind === \"audioinput\") {\n if (!constraints.audio || typeof constraints.audio !== \"object\") return;\n constraints.audio = {\n ...constraints.audio,\n deviceId: { exact: deviceId },\n };\n return;\n }\n\n if (kind === \"videoinput\") {\n if (!constraints.video || typeof constraints.video !== \"object\") return;\n constraints.video = {\n ...constraints.video,\n deviceId: { exact: deviceId },\n };\n }\n};\n\nexport const enumerateCurrentDevices = async () => {\n try {\n return await navigator.mediaDevices.enumerateDevices();\n } catch (err) {\n console.warn(\"Failed to enumerate devices:\", err);\n return [];\n }\n};\n\nexport const resolveDeviceIdByLabel = async (kind, desiredLabel) => {\n if (!desiredLabel) return null;\n const devices = await enumerateCurrentDevices();\n const matches = devices.filter(\n (device) => device.kind === kind && device.label === desiredLabel\n );\n if (matches.length !== 1) return null;\n return matches[0].deviceId;\n};\n\nexport const getUserMediaWithFallback = async ({\n constraints,\n fallbacks = [],\n}) => {\n try {\n return await navigator.mediaDevices.getUserMedia(constraints);\n } catch (err) {\n if (!isDeviceIdError(err) || fallbacks.length === 0) {\n throw err;\n }\n\n const nextConstraints = cloneConstraints(constraints);\n const resolved = [];\n\n for (const fallback of fallbacks) {\n const { kind, desiredLabel, desiredDeviceId } = fallback || {};\n if (!kind || !desiredLabel || !desiredDeviceId) continue;\n const resolvedId = await resolveDeviceIdByLabel(kind, desiredLabel);\n if (!resolvedId || resolvedId === desiredDeviceId) continue;\n updateConstraintsDeviceId(nextConstraints, kind, resolvedId);\n resolved.push({ ...fallback, resolvedId });\n }\n\n if (resolved.length === 0) {\n throw err;\n }\n\n console.warn(\n \"[Screenity] Retrying getUserMedia with label-matched device IDs\"\n );\n\n const stream = await navigator.mediaDevices.getUserMedia(nextConstraints);\n resolved.forEach(({ resolvedId, onResolved }) => {\n if (typeof onResolved === \"function\") {\n onResolved(resolvedId);\n }\n });\n return stream;\n }\n};\n" }, { "path": "src/pages/utils/recordingDebug.js", "content": "let recordingDebugEnabled = false;\nlet recordingDebugSession = null;\n\nconst hasWindowDebugFlag = () => {\n if (typeof window === \"undefined\") return false;\n return !!window.SCREENITY_DEBUG_RECORDER;\n};\n\nconst ensureSession = (sessionOverride) => {\n if (sessionOverride?.sessionId) return sessionOverride;\n if (recordingDebugSession?.sessionId) return recordingDebugSession;\n\n const sessionId = `recdbg-${Date.now()}-${Math.random()\n .toString(16)\n .slice(2, 7)}`;\n const startTimeMs = Date.now();\n recordingDebugSession = {\n sessionId,\n startTimeMs,\n startPerfMs: null,\n };\n\n try {\n chrome.storage?.local?.set?.({\n recordingDebugEnabled: true,\n recordingDebugSessionId: sessionId,\n recordingDebugStartMs: startTimeMs,\n });\n } catch {}\n\n return recordingDebugSession;\n};\n\nexport const hydrateRecordingDebugFlag = async () => {\n try {\n const res = await chrome.storage?.local?.get?.([\n \"recordingDebugEnabled\",\n \"recordingDebugSessionId\",\n \"recordingDebugStartMs\",\n ]);\n recordingDebugEnabled = Boolean(\n res?.recordingDebugEnabled || res?.recordingDebugSessionId,\n );\n if (res?.recordingDebugSessionId) {\n recordingDebugSession = {\n sessionId: res.recordingDebugSessionId,\n startTimeMs: res.recordingDebugStartMs || Date.now(),\n startPerfMs: null,\n };\n }\n } catch {}\n};\n\nexport const resetRecordingDebugSession = async () => {\n recordingDebugEnabled = false;\n recordingDebugSession = null;\n try {\n await chrome.storage?.local?.remove?.([\n \"recordingDebugEnabled\",\n \"recordingDebugSessionId\",\n \"recordingDebugStartMs\",\n ]);\n } catch {}\n};\n\nexport const isRecordingDebugEnabled = () =>\n recordingDebugEnabled || hasWindowDebugFlag();\n\nexport const debugRecordingEventWithSession = (session, eventType, payload) => {\n if (!isRecordingDebugEnabled()) return;\n const activeSession = ensureSession(session);\n const now = Date.now();\n const tSinceStartMs =\n activeSession?.startTimeMs != null ? now - activeSession.startTimeMs : null;\n\n try {\n chrome.runtime?.sendMessage?.({\n type: \"recdbg\",\n eventType,\n payload,\n sessionId: activeSession?.sessionId || null,\n tSinceStartMs,\n ts: now,\n });\n } catch {}\n};\n\nexport const debugRecordingEvent = (sessionRef, eventType, payload) => {\n const session = sessionRef?.current || sessionRef || null;\n debugRecordingEventWithSession(session, eventType, payload);\n};\n" }, { "path": "src/pages/utils/startFlowTrace.js", "content": "/**\n * Start-flow trace for recording diagnostics.\n *\n * Single bounded object in chrome.storage.local (\"startFlowTrace\"),\n * overwritten each attempt. No URLs, no page content, no user identity\n * beyond isPro boolean. Error text is truncated and URL-stripped.\n */\n\nconst STORAGE_KEY = \"startFlowTrace\";\nconst MAX_ERR_LEN = 120;\n\nconst sanitize = (str) => {\n if (!str) return null;\n return String(str)\n .replace(/https?:\\/\\/[^\\s)]+/gi, \"[url]\")\n .replace(/chrome-extension:\\/\\/[^\\s)]+/gi, \"[ext]\")\n .slice(0, MAX_ERR_LEN);\n};\n\n/** Create a fresh trace for a new recording attempt. */\nexport const initStartFlowTrace = async (attemptId, config = {}) => {\n const trace = {\n attemptId: attemptId || null,\n recordingType: config.recordingType || null,\n surface: config.surface || null,\n isPro: Boolean(config.isPro),\n countdown: Boolean(config.countdown),\n outcome: \"in-progress\",\n\n t: {\n startStreaming: null,\n desktopCaptureSent: null,\n recorderTabCreated: null,\n streamAcquired: null,\n preparingSent: null,\n preparingReceived: null,\n apiProjectCreated: null,\n apiUploadersReady: null,\n resetActiveTabSent: null,\n readyToRecordSent: null,\n readyToRecordReceived: null,\n countdownStart: null,\n countdownEnd: null,\n recordingStarted: null,\n },\n\n routing: {\n targetTabId: null,\n activeTab: null,\n currentTabId: null,\n shouldFocusTab: null,\n },\n\n error: null,\n errorCode: null,\n stuck: null,\n };\n\n try {\n await chrome.storage.local.set({ [STORAGE_KEY]: trace });\n } catch {\n // best effort\n }\n return trace;\n};\n\n/** Write a timestamp checkpoint. Merges extra fields without overwriting others. */\nexport const traceStep = async (stepName, extra = {}) => {\n try {\n const res = await chrome.storage.local.get(STORAGE_KEY);\n const trace = res?.[STORAGE_KEY];\n if (!trace) return;\n\n if (trace.t && stepName in trace.t) {\n trace.t[stepName] = Date.now();\n }\n\n // Merge extra fields (surface, routing, etc.)\n for (const [key, value] of Object.entries(extra)) {\n if (key === \"routing\" && trace.routing) {\n Object.assign(trace.routing, value);\n } else if (key !== \"t\") {\n trace[key] = value;\n }\n }\n\n await chrome.storage.local.set({ [STORAGE_KEY]: trace });\n } catch {\n // best effort\n }\n};\n\n/** Set the final outcome. Only overwrites \"in-progress\". */\nexport const setStartFlowOutcome = async (outcome, extra = {}) => {\n try {\n const res = await chrome.storage.local.get(STORAGE_KEY);\n const trace = res?.[STORAGE_KEY];\n if (!trace) return;\n\n const wasInProgress = trace.outcome === \"in-progress\";\n if (wasInProgress) {\n trace.outcome = outcome;\n }\n\n if (extra.error) trace.error = sanitize(extra.error);\n if (extra.errorCode) trace.errorCode = extra.errorCode;\n if (extra.stuck) trace.stuck = extra.stuck;\n\n await chrome.storage.local.set({ [STORAGE_KEY]: trace });\n\n // Submit to server for Pro users on terminal outcomes\n if (wasInProgress) {\n if (outcome === \"error\" || outcome === \"stuck\") {\n submitDiagnosticReport(outcome);\n } else if (outcome === \"cancelled\" && extra.error) {\n // Only submit cancelled if there's a diagnostic reason\n // (permission-denied, quota issues) not plain user dismiss\n submitDiagnosticReport(\"cancelled\");\n } else if (outcome === \"ok\") {\n submitDiagnosticReport(\"success-summary\");\n }\n }\n } catch {\n // best effort\n }\n};\n\n/** Read the current trace for export. */\nexport const getStartFlowTrace = async () => {\n try {\n const res = await chrome.storage.local.get(STORAGE_KEY);\n return res?.[STORAGE_KEY] || null;\n } catch {\n return null;\n }\n};\n\n// Track submitted attempt IDs to avoid duplicate submissions\nconst submittedAttempts = new Set();\n\n/**\n * Submit the current trace to the server for Pro users.\n * Delegates to the background service worker which has no origin\n * restrictions. Best-effort, fire-and-forget. No retries.\n */\nexport const submitDiagnosticReport = async (trigger) => {\n try {\n const res = await chrome.storage.local.get([\n STORAGE_KEY,\n \"isSubscribed\",\n \"isLoggedIn\",\n ]);\n const trace = res?.[STORAGE_KEY];\n if (!trace) return;\n\n // Only submit for Pro users\n if (!res.isSubscribed || !res.isLoggedIn) return;\n\n // Dedupe by attemptId\n if (!trace.attemptId || submittedAttempts.has(trace.attemptId)) return;\n submittedAttempts.add(trace.attemptId);\n\n // Send to background for the actual network call\n chrome.runtime.sendMessage({\n type: \"submit-diagnostic-report\",\n trigger,\n }).catch(() => {});\n } catch {\n // best effort\n }\n};\n\n/** Format the trace as a compact human-readable timeline. */\nexport const formatStartFlowTimeline = (trace) => {\n if (!trace?.t) return null;\n\n const base = trace.t.startStreaming;\n if (!base) return null;\n\n const STEP_ORDER = [\n \"startStreaming\",\n \"desktopCaptureSent\",\n \"recorderTabCreated\",\n \"streamAcquired\",\n \"preparingSent\",\n \"preparingReceived\",\n \"apiProjectCreated\",\n \"apiUploadersReady\",\n \"resetActiveTabSent\",\n \"readyToRecordSent\",\n \"readyToRecordReceived\",\n \"countdownStart\",\n \"countdownEnd\",\n \"recordingStarted\",\n ];\n\n const lines = [];\n for (const step of STEP_ORDER) {\n const ts = trace.t[step];\n if (ts != null) {\n const delta = ts - base;\n lines.push(` ${step.padEnd(26)} T+${delta}ms`);\n } else {\n lines.push(` ${step.padEnd(26)} (not reached)`);\n }\n }\n\n const lastTs = trace.t.recordingStarted;\n const outcomeStr = trace.outcome || \"unknown\";\n if (lastTs) {\n lines.push(` Outcome: ${outcomeStr} (${((lastTs - base) / 1000).toFixed(2)}s total)`);\n } else {\n lines.push(` Outcome: ${outcomeStr}`);\n }\n\n if (trace.stuck) {\n lines.push(` Stuck: ${trace.stuck.state} for ${trace.stuck.durationMs}ms`);\n }\n\n return lines.join(\"\\n\");\n};\n" }, { "path": "src/schema.json", "content": "{\n \"type\": \"object\",\n \"properties\": {\n \"skipSetup\": {\n \"type\": \"boolean\",\n \"description\": \"If true, prevents setup.html from opening on install.\"\n }\n }\n}" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": false,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"noEmit\": false,\n \"checkJs\": false,\n \"types\": [\n \"node\"\n ],\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"isolatedModules\": true\n },\n \"include\": [\n \"src\"\n ],\n \"exclude\": [\n \"build\",\n \"node_modules\"\n ]\n}\n" }, { "path": "utils/autoReloadClients/backgroundClient.js", "content": "const querystring = require(\"querystring\");\n\nconst logger = (msg) => {\n console.log(`[Background] ${msg}`);\n};\n\nlogger(\"Initializing auto-reload client\");\n\n// Parse port from query string\nconst port = querystring.parse(__resourceQuery.slice(1)).port;\n\n// Connect to SSE endpoint\nconst es = new EventSource(`http://localhost:${port}/__server_sent_events__`);\n\n// Handle connection events\nes.addEventListener(\n \"open\",\n () => {\n logger(\"Connected to dev server\");\n },\n false\n);\n\nes.addEventListener(\n \"error\",\n (event) => {\n if (event.target.readyState === 0) {\n console.error(\n \"[Background] Dev server connection failed - is it running?\"\n );\n } else {\n console.error(\"[Background] SSE error:\", event);\n }\n },\n false\n);\n\n// Handle background script update events\nes.addEventListener(\n \"background-updated\",\n () => {\n logger(\"Background script updated, reloading extension...\");\n chrome.runtime.reload();\n },\n false\n);\n\n// Handle content script update events\nes.addEventListener(\n \"content-scripts-updated\",\n () => {\n logger(\"Content scripts updated, notifying tabs...\");\n\n // Query all tabs to send reload messages\n chrome.tabs.query({}, (tabs) => {\n const reloadPromises = tabs.map((tab) => {\n return new Promise((resolve) => {\n try {\n chrome.tabs.sendMessage(\n tab.id,\n { from: \"backgroundClient\", action: \"reload-yourself\" },\n (response) => {\n // Handle any runtime errors from sendMessage\n if (chrome.runtime.lastError) {\n // Tab might not have content script running, ignore error\n resolve(false);\n return;\n }\n\n if (response && response.from === \"contentScriptClient\") {\n logger(`Tab ${tab.id} acknowledged reload request`);\n resolve(true);\n } else {\n resolve(false);\n }\n }\n );\n } catch (err) {\n logger(`Error sending message to tab ${tab.id}: ${err.message}`);\n resolve(false);\n }\n });\n });\n\n // Wait for all tabs to respond or timeout\n Promise.all(reloadPromises).then((results) => {\n const successCount = results.filter(Boolean).length;\n logger(`${successCount}/${tabs.length} tabs acknowledged reload`);\n\n // Only reload extension if we got at least one successful tab response\n if (successCount > 0) {\n logger(\"Reloading extension to apply content script changes\");\n es.close();\n chrome.runtime.reload();\n }\n });\n });\n },\n false\n);\n" }, { "path": "utils/autoReloadClients/contentScriptClient.js", "content": "const logger = (msg) => {\n console.log(`[Content Script] ${msg}`);\n};\n\nlogger(\"Initialized reload listener\");\n\n// Listen for reload messages from background script\nchrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {\n const shouldReload =\n request.from === \"backgroundClient\" && request.action === \"reload-yourself\";\n\n if (shouldReload) {\n logger(\"Received reload request from background\");\n sendResponse({ from: \"contentScriptClient\", action: \"acknowledged\" });\n\n // Short delay before reload to ensure response is sent\n setTimeout(() => {\n logger(\"Reloading page...\");\n window.location.reload();\n }, 100);\n }\n});\n" }, { "path": "utils/build.js", "content": "// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = \"production\";\nprocess.env.NODE_ENV = \"production\";\nprocess.env.ASSET_PATH = \"/\";\n\nvar webpack = require(\"webpack\"),\n config = require(\"../webpack.config\");\n\n//delete config.chromeExtensionBoilerplate;\ndelete config.custom;\n\nconfig.mode = \"production\";\n\nwebpack(config, (err, stats) => {\n if (err) {\n console.error(\"Webpack compilation error:\", err);\n throw err;\n }\n\n if (stats.hasErrors()) {\n console.error(\"Webpack compilation failed with errors:\");\n const info = stats.toJson();\n console.error(info.errors);\n process.exit(1);\n }\n\n if (stats.hasWarnings()) {\n console.warn(\"Webpack compilation had warnings:\");\n const info = stats.toJson();\n console.warn(info.warnings);\n }\n\n console.log(\"Production build completed successfully!\");\n});\n" }, { "path": "utils/env.js", "content": "// tiny wrapper with default env vars\nmodule.exports = {\n NODE_ENV: process.env.NODE_ENV || \"development\",\n PORT: process.env.PORT || 3001,\n};\n" }, { "path": "utils/server.js", "content": "// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = \"development\";\nprocess.env.NODE_ENV = \"development\";\nprocess.env.ASSET_PATH = \"/\";\n\nconst WebpackDevServer = require(\"webpack-dev-server\");\nconst webpack = require(\"webpack\");\nconst config = require(\"../webpack.config\");\nconst env = require(\"./env\");\nconst path = require(\"path\");\nconst { debounce } = require(\"lodash\");\nconst SSEStream = require(\"ssestream\").default;\n\nconst customOptions = require(\"../custom.config\");\n\nfor (const entryName in config.entry) {\n if (!customOptions.notHMR.includes(entryName)) {\n config.entry[entryName] = [\n \"webpack/hot/dev-server.js\",\n `webpack-dev-server/client/index.js?hot=true&hostname=localhost&port=${env.PORT}`,\n ].concat(config.entry[entryName]);\n }\n}\n\nif (\n customOptions.enableBackgroundAutoReload ||\n customOptions.enableContentScriptsAutoReload\n) {\n config.entry[\"background\"] = [\n path.resolve(\n __dirname,\n `autoReloadClients/backgroundClient.js?port=${env.PORT}`\n ),\n ].concat(config.entry[\"background\"]);\n}\n\nif (customOptions.enableContentScriptsAutoReload) {\n config.entry[\"contentScript\"] = [\n path.resolve(__dirname, \"autoReloadClients/contentScriptClient.js\"),\n ].concat(config.entry[\"contentScript\"]);\n}\n\nconfig.plugins = [new webpack.HotModuleReplacementPlugin()].concat(\n config.plugins || []\n);\n\ndelete config.custom;\n\nconst compiler = webpack(config);\n\nconst server = new WebpackDevServer(\n {\n https: false,\n hot: false, // We're handling HMR manually\n client: false,\n compress: false, // Important: Keep false for SSE to work\n host: \"localhost\",\n port: env.PORT,\n static: {\n directory: path.join(__dirname, \"../build\"),\n },\n devMiddleware: {\n publicPath: `http://localhost:${env.PORT}/`,\n writeToDisk: true,\n },\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n },\n allowedHosts: \"all\",\n setupMiddlewares: (middlewares, devServer) => {\n // Skip middleware setup if auto-reload is disabled\n if (\n !customOptions.enableBackgroundAutoReload &&\n !customOptions.enableContentScriptsAutoReload\n ) {\n return middlewares;\n }\n\n if (!devServer) {\n throw new Error(\"webpack-dev-server is not defined\");\n }\n\n // Add SSE middleware for extension reloading\n middlewares.push({\n path: \"/__server_sent_events__\",\n middleware: (req, res) => {\n const sseStream = new SSEStream(req);\n sseStream.pipe(res);\n\n sseStream.write(\"Dev server connected\");\n\n let closed = false;\n\n // Debounce compile events to prevent excessive reloads\n const compileDoneHandler = debounce((stats) => {\n if (closed || stats.hasErrors()) return;\n\n const { modules } = stats.toJson({ all: false, modules: true });\n const updatedJsModules = modules.filter(\n (module) =>\n module.type === \"module\" &&\n module.moduleType === \"javascript/auto\"\n );\n\n // Check which parts of the extension have been updated\n const isBackgroundUpdated = updatedJsModules.some((module) =>\n module.nameForCondition.startsWith(\n path.resolve(__dirname, \"../src/pages/Background\")\n )\n );\n\n const isContentScriptsUpdated = updatedJsModules.some((module) =>\n module.nameForCondition.startsWith(\n path.resolve(__dirname, \"../src/pages/Content\")\n )\n );\n\n // Determine what needs to be reloaded based on changes and config\n const shouldBackgroundReload =\n isBackgroundUpdated && customOptions.enableBackgroundAutoReload;\n\n const shouldContentScriptsReload =\n isContentScriptsUpdated &&\n customOptions.enableContentScriptsAutoReload;\n\n // Send appropriate events through SSE\n if (shouldBackgroundReload) {\n sseStream.writeMessage(\n {\n event: \"background-updated\",\n data: {},\n },\n \"utf-8\"\n );\n }\n\n if (shouldContentScriptsReload) {\n sseStream.writeMessage(\n {\n event: \"content-scripts-updated\",\n data: {},\n },\n \"utf-8\"\n );\n }\n }, 1000);\n\n // Register plugin with webpack compiler\n compiler.hooks.done.tap(\"extension-auto-reload-plugin\", (stats) => {\n if (!closed) {\n compileDoneHandler(stats);\n }\n });\n\n // Clean up when connection closes\n res.on(\"close\", () => {\n closed = true;\n sseStream.unpipe(res);\n });\n },\n });\n\n return middlewares;\n },\n },\n compiler\n);\n\nconst startServer = async () => {\n try {\n await server.start();\n console.log(`Dev server running at http://localhost:${env.PORT}`);\n } catch (error) {\n console.error(\"Failed to start dev server:\", error);\n process.exit(1);\n }\n};\n\nstartServer();\n" }, { "path": "webpack.config.js", "content": "const webpack = require(\"webpack\");\nconst path = require(\"path\");\nconst fileSystem = require(\"fs-extra\");\nconst env = require(\"./utils/env\");\nconst CopyWebpackPlugin = require(\"copy-webpack-plugin\");\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\nconst TerserPlugin = require(\"terser-webpack-plugin\");\n\nconst isDev = env.NODE_ENV === \"development\";\n\nconst ASSET_PATH = process.env.ASSET_PATH || \"/\";\n\nrequire(\"dotenv\").config();\n\n// Entry points for the different pages\nconst entryPoints = {\n background: path.join(__dirname, \"src\", \"pages\", \"Background\", \"index.js\"),\n contentScript: path.join(__dirname, \"src\", \"pages\", \"Content\", \"index.jsx\"),\n recorder: path.join(__dirname, \"src\", \"pages\", \"Recorder\", \"index.jsx\"),\n cloudrecorder: path.join(\n __dirname,\n \"src\",\n \"pages\",\n \"CloudRecorder\",\n \"index.jsx\"\n ),\n recorderoffscreen: path.join(\n __dirname,\n \"src\",\n \"pages\",\n \"RecorderOffscreen\",\n \"index.jsx\"\n ),\n audiooffscreen: path.join(\n __dirname,\n \"src\",\n \"pages\",\n \"AudioOffscreen\",\n \"index.js\"\n ),\n camera: path.join(__dirname, \"src\", \"pages\", \"Camera\", \"index.jsx\"),\n waveform: path.join(__dirname, \"src\", \"pages\", \"Waveform\", \"index.jsx\"),\n sandbox: path.join(__dirname, \"src\", \"pages\", \"Sandbox\", \"index.jsx\"),\n permissions: path.join(__dirname, \"src\", \"pages\", \"Permissions\", \"index.jsx\"),\n setup: path.join(__dirname, \"src\", \"pages\", \"Setup\", \"index.jsx\"),\n playground: path.join(__dirname, \"src\", \"pages\", \"Playground\", \"index.jsx\"),\n editor: path.join(__dirname, \"src\", \"pages\", \"Editor\", \"index.jsx\"),\n region: path.join(__dirname, \"src\", \"pages\", \"Region\", \"index.jsx\"),\n download: path.join(__dirname, \"src\", \"pages\", \"Download\", \"index.jsx\"),\n editorwebcodecs: path.join(\n __dirname,\n \"src\",\n \"pages\",\n \"EditorWebCodecs\",\n \"index.jsx\"\n ),\n editorviewer: path.join(\n __dirname,\n \"src\",\n \"pages\",\n \"EditorViewer\",\n \"index.jsx\"\n ),\n backup: path.join(__dirname, \"src\", \"pages\", \"Backup\", \"index.jsx\"),\n};\n\nconst htmlPlugins = Object.keys(entryPoints)\n .map((entryName) => {\n // Skip background script as it doesn't need an HTML file\n if (entryName === \"background\" || entryName === \"contentScript\") {\n return null;\n }\n\n // Map entry names to folder names (for multi-word entries)\n const folderNameMap = {\n cloudrecorder: \"CloudRecorder\",\n recorderoffscreen: \"RecorderOffscreen\",\n audiooffscreen: \"AudioOffscreen\",\n editorwebcodecs: \"EditorWebCodecs\",\n editorviewer: \"EditorViewer\",\n };\n\n const folderName =\n folderNameMap[entryName] ||\n entryName.charAt(0).toUpperCase() + entryName.slice(1);\n\n const templatePath = path.join(\n __dirname,\n \"src\",\n \"pages\",\n folderName,\n \"index.html\"\n );\n\n const options = {\n template: templatePath,\n filename: `${entryName}.html`,\n chunks: [entryName],\n cache: true,\n };\n\n // Add favicon only for backup page\n if (entryName === \"backup\") {\n options.favicon = path.join(\n __dirname,\n \"src\",\n \"assets\",\n \"backup-favicon.ico\"\n );\n } else {\n options.favicon = path.join(__dirname, \"src\", \"assets\", \"favicon.png\");\n }\n\n return new HtmlWebpackPlugin(options);\n })\n .filter(Boolean); // Filter out null values\n\nconst fileExtensions = [\n \"jpg\",\n \"jpeg\",\n \"png\",\n \"gif\",\n \"eot\",\n \"otf\",\n \"svg\",\n \"ttf\",\n \"woff\",\n \"woff2\",\n];\n\nconst secretsPath = path.join(__dirname, `secrets.${env.NODE_ENV}.js`);\nconst alias = { \"react-dom\": \"@hot-loader/react-dom\" };\n\nif (fileSystem.existsSync(secretsPath)) {\n alias[\"secrets\"] = secretsPath;\n}\n\nconst config = {\n mode: process.env.NODE_ENV || \"production\",\n performance: { hints: false },\n entry: entryPoints,\n\n // Persistent filesystem cache for fast rebuilds\n cache: {\n type: \"filesystem\",\n buildDependencies: {\n config: [__filename],\n },\n },\n\n output: {\n filename: \"[name].bundle.js\",\n path: path.resolve(__dirname, \"build\"),\n clean: !isDev, // Only wipe build dir in production; dev keeps it to avoid re-copying 40MB of assets\n publicPath: ASSET_PATH,\n },\n module: {\n rules: [\n {\n test: /\\.(css|scss)$/,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n {\n loader: \"sass-loader\",\n options: { sourceMap: true },\n },\n ],\n },\n {\n test: new RegExp(`.(${fileExtensions.join(\"|\")})$`),\n type: \"asset/resource\",\n exclude: /node_modules/,\n },\n {\n test: /\\.html$/,\n loader: \"html-loader\",\n exclude: /node_modules/,\n },\n {\n test: /\\.(ts|tsx)$/,\n loader: \"ts-loader\",\n exclude: /node_modules/,\n options: {\n transpileOnly: isDev,\n },\n },\n {\n test: /\\.(js|jsx)$/,\n use: isDev\n ? [{ loader: \"babel-loader\" }]\n : [{ loader: \"source-map-loader\" }, { loader: \"babel-loader\" }],\n exclude: /node_modules/,\n },\n ],\n },\n resolve: {\n alias: {\n react: path.resolve(\"./node_modules/react\"),\n \"react-dom\": path.resolve(\"./node_modules/react-dom\"),\n \"react/jsx-runtime\": path.resolve(\"./node_modules/react/jsx-runtime\"),\n },\n // Code extensions first — image/font extensions are only needed for explicit imports with extensions\n extensions: [\".js\", \".jsx\", \".ts\", \".tsx\", \".css\"],\n },\n plugins: [\n new webpack.ProgressPlugin(),\n new webpack.DefinePlugin({\n \"process.env.SCREENITY_APP_BASE\": JSON.stringify(\n process.env.SCREENITY_APP_BASE\n ),\n \"process.env.SCREENITY_WEBSITE_BASE\": JSON.stringify(\n process.env.SCREENITY_WEBSITE_BASE\n ),\n \"process.env.SCREENITY_API_BASE_URL\": JSON.stringify(\n process.env.SCREENITY_API_BASE_URL\n ),\n \"process.env.SCREENITY_ENABLE_CLOUD_FEATURES\": JSON.stringify(\n process.env.SCREENITY_ENABLE_CLOUD_FEATURES\n ),\n \"process.env.MAX_RECORDING_DURATION\": JSON.stringify(\n process.env.MAX_RECORDING_DURATION || 3600 // Default to 1 hour\n ),\n \"process.env.RECORDING_WARNING_THRESHOLD\": JSON.stringify(\n process.env.RECORDING_WARNING_THRESHOLD || 60 // Default to 1 minute\n ),\n \"process.env.SCREENITY_DEV_MODE\": JSON.stringify(\n process.env.SCREENITY_DEV_MODE || \"\"\n ),\n }),\n\n // Copy manifest and transform with package info\n new CopyWebpackPlugin({\n patterns: [\n {\n from: \"src/manifest.json\",\n to: path.join(__dirname, \"build\"),\n force: true,\n transform: (content) => {\n return Buffer.from(\n JSON.stringify({\n description: process.env.npm_package_description,\n version: process.env.npm_package_version,\n ...JSON.parse(content.toString()),\n })\n );\n },\n },\n {\n from: \"src/schema.json\",\n to: path.join(__dirname, \"build/schema.json\"),\n force: true,\n },\n {\n from: \"src/assets/\",\n to: path.join(__dirname, \"build/assets\"),\n force: true,\n },\n {\n from: \"src/_locales/\",\n to: path.join(__dirname, \"build/_locales\"),\n force: true,\n },\n ],\n }),\n ...htmlPlugins,\n ],\n};\n\nif (isDev) {\n config.devtool = \"cheap-module-source-map\";\n} else {\n config.optimization = {\n minimize: true,\n minimizer: [\n new TerserPlugin({\n extractComments: false,\n }),\n ],\n };\n}\n\nmodule.exports = config;\n" } ]