Feature: adds screen sharing

.gitignore

@@ -1,3 +1,4 @@
 build/
+result
 node_modules/
 tsconfig.tsbuildinfo

Dockerfile

@@ -7,14 +7,11 @@ WORKDIR /app
 COPY backend/package*.json  ./backend/
 COPY frontend/package*.json ./frontend/
 
-# Install dependencies
-RUN cd backend  && npm ci
-RUN cd frontend && npm ci
-
 # Copy source files
 COPY . .
 
 # Build frontend and backend
+RUN npm install
 RUN npm run build --workspaces
 
 # Production stage

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -32,3 +32,40 @@ On some systems, you may need to add `--security-opt seccomp=unconfined` to allo
 
 Once running, you should be able to access the UI via http://localhost:8080. 
 
+### Video
+
+QueueCube supports video as well. Just set the environment variable `ENABLE_VIDEO=1`. 
+
+#### Video + Docker
+
+When running in a Docker container, there are a few extra steps needed to make this work. 
+
+First, make sure you're passing in `/dev/dri` as a volume in the container. Since mpd is capable of rendering directly to the GPU, this would be the most performant. 
+
+```
+volumes:
+    - /dev/dri:/dev/dri
+```
+
+as well as the X11 socket:
+
+```
+    - /tmp/.X11-unix:/tmp/.X11-unix
+```
+
+In order to be able to interact with the X session from the Docker container, you may also need to explicitly allow connections to the host via:
+
+```
+$ xhost +local:
+```
+
+Since the container will also need to be able to access the GPU device, it may be required to run the container in "privileged" mode:
+
+```
+privileged: true
+```
+
+(or `--privileged`). 
+
+On Podman rootless, it seems to be enough to just run it with the "unconfined" security profile (`seccomp=unconfined`). 
+

backend/favorites.json

@@ -1 +0,0 @@
-[]

backend/src/FavoritesStore.ts

@@ -1,3 +1,21 @@
+/*
+ * FavoritesStore.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 import fs from 'fs/promises';
 import path from 'path';
 import os from 'os';
@@ -25,7 +43,7 @@ export class FavoritesStore {
         }
 
         // In production (in a container), use /app/data
-        if (process.env.NODE_ENV === 'production') {
+        else if (process.env.NODE_ENV === 'production') {
             storePath = path.resolve('/app/data');
         }
 
@@ -33,7 +51,9 @@ export class FavoritesStore {
             console.error('Failed to create intermediate directory:', err);
         });
 
-        return path.join(storePath, storeFilename);
+        const fullPath = path.join(storePath, storeFilename);
+        console.log("Favorites store path: " + fullPath);
+        return fullPath;
     }
 
     private async loadFavorites() {
@@ -59,54 +79,71 @@ export class FavoritesStore {
         return this.favorites;
     }
 
-    async addFavorite(item: PlaylistItem, fetchMetadata: boolean = true): Promise<void> {
+    async addFavorite(filename: string): Promise<void> {
         // Check if the item already exists by filename
-        const exists = this.favorites.some(f => f.filename === item.filename);
+        const exists = this.favorites.some(f => f.filename === filename);
         if (!exists) {
             this.favorites.push({
-                ...item,
+                filename: filename,
                 id: this.favorites.length // Generate new ID
             });
             await this.saveFavorites();
-        } else {
-            // Otherwise, update the item with the new metadata
-            const index = this.favorites.findIndex(f => f.filename === item.filename);
-            this.favorites[index] = {
-                ...this.favorites[index],
-                ...item,
-            };
-            await this.saveFavorites();
-        }
 
-        // If the item is missing metadata, fetch it
+            // Fetch metadata for the new favorite
-        if (fetchMetadata && !item.metadata) {
+            await this.fetchMetadata(filename);
-            await this.fetchMetadata(item);
         }
     }
 
-    private async fetchMetadata(item: PlaylistItem): Promise<void> {
+    private async fetchMetadata(filename: string): Promise<void> {
-        console.log("Fetching metadata for " + item.filename);
+        console.log("Fetching metadata for " + filename);
-        const metadata = await getLinkPreview(item.filename);
+        const metadata = await getLinkPreview(filename);
 
-        item.metadata = {
+        const item: PlaylistItem = {
-            title: (metadata as any)?.title,
+            filename: filename,
-            description: (metadata as any)?.description,
+            id: this.favorites.length,
-            siteName: (metadata as any)?.siteName,
+            metadata: {
+                title: (metadata as any)?.title,
+                description: (metadata as any)?.description,
+                siteName: (metadata as any)?.siteName,
+            },
         };
 
         console.log("Metadata fetched for " + item.filename);
         console.log(item);
 
-        await this.addFavorite(item, false);
+        const index = this.favorites.findIndex(f => f.filename === filename);
+        if (index !== -1) {
+            this.favorites[index] = item;
+            await this.saveFavorites();
+        }
     }
 
-    async removeFavorite(id: number): Promise<void> {
+    async removeFavorite(filename: string): Promise<void> {
-        this.favorites = this.favorites.filter(f => f.id !== id);
+        console.log("Removing favorite " + filename);
+        this.favorites = this.favorites.filter(f => f.filename !== filename);
         await this.saveFavorites();
     }
 
+    async updateFavoriteTitle(filename: string, title: string): Promise<void> {
+        console.log(`Updating title for favorite ${filename} to "${title}"`);
+        const index = this.favorites.findIndex(f => f.filename === filename);
+        if (index !== -1) {
+            // Create metadata object if it doesn't exist
+            if (!this.favorites[index].metadata) {
+                this.favorites[index].metadata = {};
+            }
+            
+            // Update the title in metadata
+            this.favorites[index].metadata!.title = title;
+            
+            await this.saveFavorites();
+        } else {
+            throw new Error(`Favorite with filename ${filename} not found`);
+        }
+    }
+
     async clearFavorites(): Promise<void> {
         this.favorites = [];
         await this.saveFavorites();
     }
-} 
+} 

backend/src/InvidiousAPI.ts

@@ -1,3 +1,21 @@
+/*
+ * InvidiousAPI.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 import fetch from 'node-fetch';
 
 interface InvidiousVideoThumbnail {

backend/src/MediaPlayer.ts

@@ -1,14 +1,42 @@
+/*
+ * MediaPlayer.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 import { ChildProcess, spawn } from "child_process";
 import { Socket } from "net";
 import { WebSocket } from "ws";
 import { getLinkPreview } from "link-preview-js";
 import { PlaylistItem, LinkMetadata } from './types';
 import { FavoritesStore } from "./FavoritesStore";
+
 interface PendingCommand {
     resolve: (value: any) => void;
     reject: (reason: any) => void;
 }
 
+enum UserEvent {
+    PlaylistUpdate      = "playlist_update",
+    NowPlayingUpdate    = "now_playing_update",
+    VolumeUpdate        = "volume_update",
+    FavoritesUpdate     = "favorites_update",
+    MetadataUpdate      = "metadata_update",
+    MPDUpdate           = "mpd_update",
+}
+
 export class MediaPlayer { 
     private playerProcess: ChildProcess;
     private socket: Socket;
@@ -23,10 +51,12 @@ export class MediaPlayer {
     constructor() {
         const socketFilename = Math.random().toString(36).substring(2, 10);
         const socketPath = `/tmp/mpv-${socketFilename}`;
+        const enableVideo = process.env.ENABLE_VIDEO || false;
 
-        console.log("Starting player process");
+        console.log("Starting player process (video: " + (enableVideo ? "enabled" : "disabled") + ")");
         this.playerProcess = spawn("mpv", [
-            "--no-video", 
+            "--video=" + (enableVideo ? "auto" : "no"),
+            "--fullscreen",
             "--no-terminal",
             "--idle=yes",
             "--input-ipc-server=" + socketPath
@@ -43,7 +73,7 @@ export class MediaPlayer {
 
         this.favoritesStore = new FavoritesStore();
         this.favoritesStore.onFavoritesChanged = (favorites) => {
-            this.handleEvent("favorites_update", { favorites });
+            this.handleEvent(UserEvent.FavoritesUpdate, { favorites });
         };
     }
 
@@ -122,32 +152,70 @@ export class MediaPlayer {
         await this.loadFile(url, "replace");
     }
 
+    public async initiateScreenSharing(url: string) {
+        console.log(`Initiating screen sharing with file: ${url}`);
+
+        this.metadata.set(url, {
+            title: "Screen Sharing",
+            description: "Screen Sharing",
+            siteName: "Screen Sharing",
+        });
+
+        // Special options for mpv to better handle screen sharing (AI recommended...)
+        await this.loadFile(url, "replace", false, [
+            "demuxer-lavf-o=fflags=+nobuffer+discardcorrupt",  // Reduce buffering and discard corrupt frames
+            "demuxer-lavf-o=analyzeduration=100000",           // Reduce analyze duration
+            "demuxer-lavf-o=probesize=1000000",                // Reduce probe size
+            "untimed=yes",                                     // Ignore timing info
+            "cache=no",                                        // Disable cache
+            "force-seekable=yes",                              // Force seekable
+            "no-cache=yes",                                    // Disable cache
+            "demuxer-max-bytes=500K",                          // Limit demuxer buffer
+            "demuxer-readahead-secs=0.1",                      // Reduce readahead
+            "hr-seek=no",                                      // Disable high-res seeking
+            "video-sync=display-resample",                     // Better sync mode
+            "video-latency-hacks=yes",                         // Enable latency hacks
+            "audio-sync=yes",                                  // Enable audio sync
+            "audio-buffer=0.1",                                // Reduce audio buffer
+            "audio-channels=stereo",                           // Force stereo audio
+            "audio-samplerate=44100",                          // Match sample rate
+            "audio-format=s16",                                // Use 16-bit audio
+        ]);
+
+        // Make sure it's playing
+        setTimeout(() => this.play(), 100);
+    }
+
     public async play() {
-        return this.modify(() => this.writeCommand("set_property", ["pause", false]));
+        return this.modify(UserEvent.NowPlayingUpdate, () => this.writeCommand("set_property", ["pause", false]));
     }
 
     public async pause() {
-        return this.modify(() => this.writeCommand("set_property", ["pause", true]));
+        return this.modify(UserEvent.NowPlayingUpdate, () => this.writeCommand("set_property", ["pause", true]));
+    }
+
+    public async stop() {
+        return this.modify(UserEvent.NowPlayingUpdate, () => this.writeCommand("stop", []));
     }
 
     public async skip() {
-        return this.modify(() => this.writeCommand("playlist-next", []));
+        return this.modify(UserEvent.PlaylistUpdate, () => this.writeCommand("playlist-next", []));
     }
 
     public async skipTo(index: number) {
-        return this.modify(() => this.writeCommand("playlist-play-index", [index]));
+        return this.modify(UserEvent.PlaylistUpdate, () => this.writeCommand("playlist-play-index", [index]));
     }
 
     public async previous() {
-        return this.modify(() => this.writeCommand("playlist-prev", []));
+        return this.modify(UserEvent.PlaylistUpdate, () => this.writeCommand("playlist-prev", []));
     }
 
     public async deletePlaylistItem(index: number) {
-        return this.modify(() => this.writeCommand("playlist-remove", [index]));
+        return this.modify(UserEvent.PlaylistUpdate, () => this.writeCommand("playlist-remove", [index]));
     }
         
     public async setVolume(volume: number) {
-        return this.modify(() => this.writeCommand("set_property", ["volume", volume]));
+        return this.modify(UserEvent.VolumeUpdate, () => this.writeCommand("set_property", ["volume", volume]));
     }
 
     public subscribe(ws: WebSocket) {
@@ -162,31 +230,37 @@ export class MediaPlayer {
         return this.favoritesStore.getFavorites();
     }
 
-    public async addFavorite(item: PlaylistItem) {
+    public async addFavorite(filename: string) {
-        return this.favoritesStore.addFavorite(item);
+        return this.modify(UserEvent.FavoritesUpdate, () => this.favoritesStore.addFavorite(filename));
     }
 
-    public async removeFavorite(id: number) {
+    public async removeFavorite(filename: string) {
-        return this.favoritesStore.removeFavorite(id);
+        return this.modify(UserEvent.FavoritesUpdate, () => this.favoritesStore.removeFavorite(filename));
     }
 
     public async clearFavorites() {
-        return this.favoritesStore.clearFavorites();
+        return this.modify(UserEvent.FavoritesUpdate, () => this.favoritesStore.clearFavorites());
     }
 
-    private async loadFile(url: string, mode: string) {
+    public async updateFavoriteTitle(filename: string, title: string) {
-        this.modify(() => this.writeCommand("loadfile", [url, mode]));
+        return this.modify(UserEvent.FavoritesUpdate, () => this.favoritesStore.updateFavoriteTitle(filename, title));
-
-        this.fetchMetadataAndNotify(url).catch(error => {
-            console.warn(`Failed to fetch metadata for ${url}:`, error);
-        });
     }
 
-    private async modify<T>(func: () => Promise<T>): Promise<T> {
+    private async loadFile(url: string, mode: string, fetchMetadata: boolean = true, options: string[] = []) {
+        this.modify(UserEvent.PlaylistUpdate, () => this.writeCommand("loadfile", [url, mode, options.join(',')]));
+
+        if (fetchMetadata) {
+            this.fetchMetadataAndNotify(url).catch(error => {
+                console.warn(`Failed to fetch metadata for ${url}:`, error);
+            });
+        }
+    }
+
+    private async modify<T>(event: UserEvent, func: () => Promise<T>): Promise<T> {
         return func()
             .then((result) => {
                 // Notify all subscribers
-                this.handleEvent("user_modify", {});
+                this.handleEvent(event, {});
                 return result;
         });
     }
@@ -230,7 +304,7 @@ export class MediaPlayer {
             console.log(this.metadata.get(url));
             
             // Notify clients that metadata has been updated
-            this.handleEvent("metadata_update", {
+            this.handleEvent(UserEvent.MetadataUpdate, {
                 url,
                 metadata: this.metadata.get(url)
             });
@@ -245,7 +319,7 @@ export class MediaPlayer {
     }
 
     private handleEvent(event: string, data: any) {
-        console.log("Event [" + event + "]: " + JSON.stringify(data, null, 2));
+        console.log("Event [" + event + "]: ", data);
 
         // Notify all subscribers
         this.eventSubscribers.forEach(subscriber => {
@@ -272,7 +346,7 @@ export class MediaPlayer {
                             this.pendingCommands.delete(response.request_id);
                         }
                     } else if (response.event) {
-                        this.handleEvent(response.event, response);
+                        this.handleEvent(UserEvent.MPDUpdate, response);
                     } else {
                         console.log(response);
                     }
@@ -282,4 +356,4 @@ export class MediaPlayer {
             }
         }
     }
-} 
+} 

backend/src/server.ts

@@ -1,8 +1,31 @@
+/*
+ * server.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 import express from "express";
 import expressWs from "express-ws";
+import path from "path";
+import fs from "fs";
+import os from "os";
 import { MediaPlayer } from "./MediaPlayer";
 import { searchInvidious, fetchThumbnail } from "./InvidiousAPI";
 import { PlaylistItem } from './types';
+import { PassThrough } from "stream";
+import { AddressInfo } from "net";
 
 const app = express();
 app.use(express.json());
@@ -11,6 +34,10 @@ expressWs(app);
 const apiRouter = express.Router();
 const mediaPlayer = new MediaPlayer();
 
+// Create a shared stream that both endpoints can access
+let activeScreenshareStream: PassThrough | null = null;
+let activeScreenshareMimeType: string | null = null;
+
 const withErrorHandling = (func: (req: any, res: any) => Promise<any>) => {
     return async (req: any, res: any) => {
         try {
@@ -54,6 +81,11 @@ apiRouter.post("/pause", withErrorHandling(async (req, res) => {
     res.send(JSON.stringify({ success: true }));
 }));
 
+apiRouter.post("/stop", withErrorHandling(async (req, res) => {
+    await mediaPlayer.stop();
+    res.send(JSON.stringify({ success: true }));
+}));
+
 apiRouter.post("/skip", withErrorHandling(async (req, res) => {
     await mediaPlayer.skip();
     res.send(JSON.stringify({ success: true }));
@@ -103,6 +135,82 @@ apiRouter.ws("/events", (ws, req) => {
     });
 });
 
+// This is effectively a "private" endpoint that only the MPV instance accesses. We're 
+// using the fact that QueueCube/MPV is based all around streaming URLs, so the active 
+// screenshare stream manifests as just another URL to play. 
+apiRouter.get("/screenshareStream", withErrorHandling(async (req, res) => {
+    res.setHeader("Content-Type", activeScreenshareMimeType || "video/mp4");
+    res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+    res.setHeader("Pragma", "no-cache");
+    res.setHeader("Expires", "0");
+    res.setHeader("Connection", "keep-alive");
+    res.setHeader("Transfer-Encoding", "chunked");
+
+    if (!activeScreenshareStream) {
+        res.status(503).send("No active screen sharing session");
+        return;
+    }
+
+    // Handle client disconnection
+    req.on('close', () => {
+        console.log("Screenshare viewer disconnected");
+    });
+
+    // Configure stream for low latency
+    activeScreenshareStream.setMaxListeners(0);
+    
+    // Pipe with immediate flush
+    activeScreenshareStream.pipe(res, { end: false });
+}));
+
+apiRouter.ws("/screenshare", (ws, req) => {
+    const mimeType = req.query.mimeType as string;
+    console.log("Screen sharing client connected with mimeType: " + mimeType);
+    ws.binaryType = "arraybuffer";
+
+    let firstChunk = false;
+
+    // Configure WebSocket for low latency
+    ws.setMaxListeners(0);
+    ws.binaryType = "arraybuffer";
+
+    ws.on('message', (data: any) => {
+        const buffer = data instanceof Buffer ? data : Buffer.from(data);
+        
+        if (!firstChunk) {
+            firstChunk = true;
+
+            const port = (server.address() as AddressInfo).port;
+            const url = `http://localhost:${port}/api/screenshareStream`;
+            console.log(`Starting screen share stream at ${url}`);
+            
+            // Create new shared stream with immediate flush
+            activeScreenshareStream = new PassThrough({
+                highWaterMark: 1024 * 1024, // 1MB buffer
+                allowHalfOpen: false
+            });
+            
+            activeScreenshareStream.write(buffer);
+            mediaPlayer.initiateScreenSharing(url);
+        } else if (activeScreenshareStream) {
+            // Write with immediate flush
+            activeScreenshareStream.write(buffer, () => {
+                activeScreenshareStream?.cork();
+                activeScreenshareStream?.uncork();
+            });
+        }
+    });
+
+    ws.on('close', () => {
+        console.log("Screen sharing client disconnected");
+        if (activeScreenshareStream) {
+            activeScreenshareStream.end();
+            activeScreenshareStream = null;
+        }
+        mediaPlayer.stop();
+    });
+});
+
 apiRouter.get("/search", withErrorHandling(async (req, res) => {
     const query = req.query.q as string;
     if (!query) {
@@ -140,14 +248,15 @@ apiRouter.get("/favorites", withErrorHandling(async (req, res) => {
 }));
 
 apiRouter.post("/favorites", withErrorHandling(async (req, res) => {
-    const item = req.body as PlaylistItem;
+    const { filename } = req.body as { filename: string };
-    await mediaPlayer.addFavorite(item);
+    console.log("Adding favorite: " + filename);
+    await mediaPlayer.addFavorite(filename);
     res.send(JSON.stringify({ success: true }));
 }));
 
-apiRouter.delete("/favorites/:id", withErrorHandling(async (req, res) => {
+apiRouter.delete("/favorites/:filename", withErrorHandling(async (req, res) => {
-    const { id } = req.params;
+    const { filename } = req.params as { filename: string };
-    await mediaPlayer.removeFavorite(parseInt(id));
+    await mediaPlayer.removeFavorite(filename);
     res.send(JSON.stringify({ success: true }));
 }));
 
@@ -156,15 +265,31 @@ apiRouter.delete("/favorites", withErrorHandling(async (req, res) => {
     res.send(JSON.stringify({ success: true }));
 }));
 
+apiRouter.put("/favorites/:filename/title", withErrorHandling(async (req, res) => {
+    const { filename } = req.params as { filename: string };
+    const { title } = req.body as { title: string };
+    
+    if (!title) {
+        res.status(400).send(JSON.stringify({ 
+            success: false, 
+            error: "Title is required" 
+        }));
+        return;
+    }
+    
+    await mediaPlayer.updateFavoriteTitle(filename, title);
+    res.send(JSON.stringify({ success: true }));
+}));
+
 // Serve static files for React app (after building)
-app.use(express.static("dist/frontend"));
+app.use(express.static(path.join(__dirname, "../dist/frontend")));
 
 // Mount API routes under /api
 app.use("/api", apiRouter);
 
 // Serve React app for all other routes (client-side routing)
 app.get("*", (req, res) => {
-    res.sendFile("dist/frontend/index.html", { root: "." });
+    res.sendFile(path.join(__dirname, "../dist/frontend/index.html"));
 });
 
 const port = process.env.PORT || 3000;
@@ -190,4 +315,4 @@ const shutdown = async () => {
 
 // Handle various shutdown signals
 process.on('SIGTERM', shutdown);
-process.on('SIGINT', shutdown); 
+process.on('SIGINT', shutdown); 

backend/src/types.ts

@@ -1,3 +1,21 @@
+/*
+ * types.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 export interface LinkMetadata {
     title?: string;
     description?: string;
@@ -11,4 +29,4 @@ export interface PlaylistItem {
     playing?: boolean;
     current?: boolean;
     metadata?: LinkMetadata;
-} 
+} 

flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1740828860,
+        "narHash": "sha256-cjbHI+zUzK5CPsQZqMhE3npTyYFt9tJ3+ohcfaOF/WM=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "303bd8071377433a2d8f76e684ec773d70c5b642",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,196 @@
+{
+  description = "NodeJS application with mpv, yt-dlp, and pulseaudio dependencies";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, flake-utils }:
+    let
+      # Define the NixOS module for the systemd service
+      nixosModule = { config, lib, pkgs, ... }:
+        let
+          cfg = config.services.queuecube;
+        in {
+          options.services.queuecube = {
+            enable = lib.mkEnableOption "QueueCube media player service";
+            
+            port = lib.mkOption {
+              type = lib.types.port;
+              default = 3000;
+              description = "Port on which QueueCube will listen";
+            };
+
+            enable_video = lib.mkOption {
+              type = lib.types.bool;
+              default = false;
+              description = "Enable video playback";
+            };
+
+            store_path = lib.mkOption {
+              type = lib.types.str;
+              default = "/var/tmp/queuecube";
+              description = "Path to the store for QueueCube";
+            };
+
+            invidious = lib.mkOption {
+              type = lib.types.submodule {
+                options = {
+                  enable = lib.mkOption {
+                    type = lib.types.bool;
+                    default = false;
+                    description = "Enable Invidious";
+                  };
+
+                  url = lib.mkOption {
+                    type = lib.types.str;
+                    default = "http://invidious.nor";
+                    description = "URL of the Invidious instance to use";
+                  };
+                };
+              };
+
+              default = {
+                enable = false;
+                url = "http://invidious.nor";
+              };
+            };
+            
+            user = lib.mkOption {
+              type = lib.types.str;
+              description = "User account under which QueueCube runs (required)";
+            };
+          };
+          
+          config = lib.mkIf cfg.enable {
+            users.users.${cfg.user} = {
+              packages = [ self.packages.${pkgs.system}.queuecube ];
+            };
+            
+            systemd.user.services.queuecube = {
+              description = "QueueCube media player service";
+              wantedBy = [ "default.target" ];
+              after = [ "pipewire.service" "pipewire-pulse.service" ];
+              
+              serviceConfig = {
+                ExecStart = "${self.packages.${pkgs.system}.queuecube}/bin/queuecube";
+                Restart = "on-failure";
+                RestartSec = 5;
+                
+                # Allow access to X11 for mpv
+                Environment = [ "DISPLAY=:0" ];
+              };
+              
+              environment = {
+                PORT = toString cfg.port;
+                ENABLE_VIDEO = if cfg.enable_video then "1" else "0";
+                USE_INVIDIOUS = if cfg.invidious.enable then "1" else "0";
+                INVIDIOUS_URL = cfg.invidious.url;
+                STORE_PATH = cfg.store_path;
+              };
+            };
+          };
+        };
+    in
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        pkgs = nixpkgs.legacyPackages.${system};
+        
+        # Define the package using buildNpmPackage
+        queuecube = pkgs.buildNpmPackage {
+          pname = "queuecube";
+          version = "0.1.0";
+          
+          src = ./.;
+
+          # Skip the standard buildPhase and provide our own
+          dontNpmBuild = true;
+          buildPhase = ''
+            # First install all dependencies
+            npm install
+            
+            # Then run the build with workspaces flag
+            npm run build --workspaces
+          '';
+
+          # Runtime dependencies
+          buildInputs = with pkgs; [
+            mpv
+            yt-dlp
+            pulseaudio
+          ];
+          
+          # Create a wrapper script to ensure runtime deps are available
+          postInstall = ''
+            # Create the necessary directories
+            mkdir -p $out/lib/node_modules/queuecube
+            
+            # Copy the entire project with built files
+            cp -r . $out/lib/node_modules/queuecube
+
+            # Install the frontend build to the backend dist directory
+            mkdir -p $out/lib/node_modules/queuecube/backend/dist/
+            cp -r frontend/dist $out/lib/node_modules/queuecube/backend/dist/frontend
+
+            # Create bin directory if it doesn't exist
+            mkdir -p $out/bin
+            
+            # Create executable script
+            cat > $out/bin/queuecube <<EOF
+            #!/bin/sh
+            exec ${pkgs.nodejs}/bin/node $out/lib/node_modules/queuecube/backend/build/server.js
+            EOF
+            
+            # Make it executable
+            chmod +x $out/bin/queuecube
+            
+            # Wrap the program to include runtime deps in PATH
+            wrapProgram $out/bin/queuecube \
+              --prefix PATH : ${pkgs.lib.makeBinPath [
+                pkgs.mpv
+                pkgs.yt-dlp
+                pkgs.pulseaudio
+              ]}
+          '';
+          
+          # Let buildNpmPackage handle npm package hash
+          npmDepsHash = "sha256-BqjJ4CxTPc14Od88sAm/ASwsLszkvcHHeNoZupotlFw=";
+          
+          meta = with pkgs.lib; {
+            description = "NodeJS application with media playback capabilities";
+            platforms = platforms.linux;
+          };
+        };
+        
+      in {
+        packages = {
+          default = queuecube;
+          queuecube = queuecube;
+        };
+        
+        apps.default = {
+          type = "app";
+          program = "${queuecube}/bin/queuecube";
+        };
+        
+        # Development environment
+        devShells.default = pkgs.mkShell {
+          buildInputs = with pkgs; [
+            nodejs_20
+            nodePackages.npm
+            mpv
+            yt-dlp
+            pulseaudio
+          ];
+        };
+        
+        # Add a basic check to verify the package builds
+        checks.queuecube = queuecube;
+      }
+    ) // {
+      # Export the NixOS module
+      nixosModules.default = nixosModule;
+      nixosModules.queuecube = nixosModule;
+    };
+}

frontend/src/api/player.tsx

@@ -46,6 +46,16 @@ export interface SearchResponse {
   results: SearchResult[];
 }
 
+export enum ServerEvent {
+  PlaylistUpdate      = "playlist_update",
+  NowPlayingUpdate    = "now_playing_update",
+  VolumeUpdate        = "volume_update",
+  FavoritesUpdate     = "favorites_update",
+  MetadataUpdate      = "metadata_update",
+  MPDUpdate           = "mpd_update",
+  ScreenShare         = "screen_share",
+}
+
 export const API = {
   async getPlaylist(): Promise<PlaylistItem[]> {
     const response = await fetch('/api/playlist');
@@ -81,6 +91,10 @@ export const API = {
   async play(): Promise<void> {
     await fetch('/api/play', { method: 'POST' });
   },
+
+  async stop(): Promise<void> {
+    await fetch('/api/stop', { method: 'POST' });
+  },
   
   async pause(): Promise<void> {
     await fetch('/api/pause', { method: 'POST' });
@@ -133,31 +147,37 @@ export const API = {
     return response.json();
   },
 
-  async addToFavorites(url: string): Promise<void> {
+  async addToFavorites(filename: string): Promise<void> {
-    // Maybe a little weird to make an empty PlaylistItem here, but we do want to support adding
-    // known PlaylistItems to favorites in the future. 
-    const playlistItem: PlaylistItem = {
-      filename: url,
-      title: null,
-      id: 0,
-      playing: null,
-      metadata: undefined,
-    };
-
     await fetch('/api/favorites', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(playlistItem),
+      body: JSON.stringify({ filename }),
     });
   },
 
-  async removeFromFavorites(id: number): Promise<void> {
+  async removeFromFavorites(filename: string): Promise<void> {
-    await fetch(`/api/favorites/${id}`, { method: 'DELETE' });
+    await fetch(`/api/favorites/${encodeURIComponent(filename)}`, { method: 'DELETE' });
   },
 
   async clearFavorites(): Promise<void> {
     await fetch('/api/favorites', { method: 'DELETE' });
+  },
+
+  async updateFavoriteTitle(filename: string, title: string): Promise<void> {
+    await fetch(`/api/favorites/${encodeURIComponent(filename)}/title`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ title }),
+    });
+  },
+
+  startScreenShare(mimeType: string): WebSocket {
+    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const ws = new WebSocket(`${protocol}://${window.location.host}/api/screenshare?mimeType=${mimeType}`);
+    return ws;
   }
 };

frontend/src/components/AddSongPanel.tsx

@@ -2,6 +2,7 @@ import React, { useState, KeyboardEvent, ChangeEvent } from 'react';
 import { FaSearch } from 'react-icons/fa';
 import InvidiousSearchModal from './InvidiousSearchModal';
 import { USE_INVIDIOUS } from '../config';
+
 interface AddSongPanelProps {
   onAddURL: (url: string) => void;
 }

frontend/src/components/App.tsx

@@ -1,11 +1,14 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, ReactNode } from 'react';
 import SongTable from './SongTable';
 import NowPlaying from './NowPlaying';
 import AddSongPanel from './AddSongPanel';
+import RenameFavoriteModal from './RenameFavoriteModal';
 import { TabView, Tab } from './TabView';
-import { API, getDisplayTitle, PlaylistItem } from '../api/player';
+import { API, getDisplayTitle, PlaylistItem, ServerEvent } from '../api/player';
-import { useEventWebSocket } from '../hooks/useEventWebsocket';
+import { FaMusic, FaHeart, FaPlus, FaEdit } from 'react-icons/fa';
-import { FaMusic, FaHeart } from 'react-icons/fa';
+import useWebSocket from 'react-use-websocket';
+import classNames from 'classnames';
+import { useScreenShare } from '../hooks/useScreenShare';
 
 enum Tabs {
   Playlist = "playlist",
@@ -21,10 +24,11 @@ const EmptyContent: React.FC<{ label: string}> = ({label}) => (
 interface SonglistContentProps {
   songs: PlaylistItem[];
   isPlaying: boolean;
+  auxControlProvider?: (song: PlaylistItem) => ReactNode;
   onNeedsRefresh: () => void;
 }
 
-const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onNeedsRefresh }) => {
+const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, auxControlProvider, onNeedsRefresh }) => {
   const handleDelete = (index: number) => {
     API.removeFromPlaylist(index);
     onNeedsRefresh();
@@ -40,6 +44,7 @@ const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onN
       <SongTable 
         songs={songs} 
         isPlaying={isPlaying} 
+        auxControlProvider={auxControlProvider}
         onDelete={handleDelete} 
         onSkipTo={handleSkipTo} 
       />
@@ -49,9 +54,9 @@ const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onN
   );
 };
 
-const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onNeedsRefresh }) => {
+const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, auxControlProvider, onNeedsRefresh }) => {
   const handleDelete = (index: number) => {
-    API.removeFromFavorites(index);
+    API.removeFromFavorites(songs[index].filename);
     onNeedsRefresh();
   };
 
@@ -66,6 +71,7 @@ const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, on
       <SongTable 
         songs={songs} 
         isPlaying={isPlaying} 
+        auxControlProvider={auxControlProvider}
         onDelete={handleDelete} 
         onSkipTo={handleSkipTo} 
       />
@@ -77,6 +83,7 @@ const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, on
 
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
+  const [isIdle, setIsIdle] = useState(false);
   const [nowPlayingSong, setNowPlayingSong] = useState<string | null>(null);
   const [nowPlayingFileName, setNowPlayingFileName] = useState<string | null>(null);
   const [volume, setVolume] = useState(100);
@@ -84,6 +91,15 @@ const App: React.FC = () => {
   const [playlist, setPlaylist] = useState<PlaylistItem[]>([]);
   const [favorites, setFavorites] = useState<PlaylistItem[]>([]);
   const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.Playlist);
+  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
+  const [favoriteToRename, setFavoriteToRename] = useState<PlaylistItem | null>(null);
+
+  const { 
+    isScreenSharing, 
+    isScreenSharingSupported, 
+    toggleScreenShare, 
+    stopScreenShare 
+  } = useScreenShare();
 
   const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
@@ -96,14 +112,18 @@ const App: React.FC = () => {
   }, []);
 
   const fetchNowPlaying = useCallback(async () => {
+    if (volumeSettingIsLocked) {
+      // We are actively changing the volume, which we do actually want to send events
+      // continuously to the server, but we don't want to refresh our state while doing that. 
+      return;
+    }
+
     const nowPlaying = await API.getNowPlaying();
     setNowPlayingSong(getDisplayTitle(nowPlaying.playingItem));
     setNowPlayingFileName(nowPlaying.playingItem.filename);
     setIsPlaying(!nowPlaying.isPaused);
-
+    setVolume(nowPlaying.volume);
-    if (!volumeSettingIsLocked) {
+    setIsIdle(nowPlaying.playingItem ? !nowPlaying.playingItem.playing : true);
-      setVolume(nowPlaying.volume);
-    }
   }, [volumeSettingIsLocked]);
 
   const handleAddURL = async (url: string) => {
@@ -133,6 +153,13 @@ const App: React.FC = () => {
     fetchNowPlaying();
   };
 
+  const handleStop = async () => {
+    stopScreenShare();
+    
+    await API.stop();
+    fetchNowPlaying();
+  };
+
   const handleSkip = async () => {
     await API.skip();
     fetchNowPlaying();
@@ -148,23 +175,43 @@ const App: React.FC = () => {
     await API.setVolume(volume);
   };
 
-  const handleWebSocketEvent = useCallback((event: any) => {
+  const handleWebSocketEvent = useCallback((message: MessageEvent) => {
+    const event = JSON.parse(message.data);
     switch (event.event) {
-      case 'user_modify':
+      case ServerEvent.PlaylistUpdate:
-      case 'end-file':
+      case ServerEvent.NowPlayingUpdate:
-      case 'playback-restart':
+      case ServerEvent.MetadataUpdate:
-      case 'metadata_update':
+      case ServerEvent.MPDUpdate:
         fetchPlaylist();
         fetchNowPlaying();
         break;
-      case 'favorites_update':
+      case ServerEvent.VolumeUpdate:
+        if (!volumeSettingIsLocked) {
+          fetchNowPlaying();
+        }
+
+        break;
+      case ServerEvent.FavoritesUpdate:
         fetchFavorites();
         break;
     }
   }, [fetchPlaylist, fetchNowPlaying, fetchFavorites]);
 
-  // Use the hook
+  const wsUrl = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/api/events`;
-  useEventWebSocket(handleWebSocketEvent);
+  console.log('Connecting to WebSocket at', wsUrl);
+  useWebSocket(wsUrl, {
+    onOpen: () => {
+      console.log('WebSocket connected');
+    },
+    onClose: () => {
+      console.log('WebSocket disconnected');
+    },
+    onError: (error) => {
+      console.error('WebSocket error:', error);
+    },
+    onMessage: handleWebSocketEvent,
+    shouldReconnect: () => true,
+  });
 
   // Handle visibility changes
   useEffect(() => {
@@ -194,21 +241,95 @@ const App: React.FC = () => {
     fetchFavorites();
   }, [fetchPlaylist, fetchNowPlaying, fetchFavorites]);
 
+  const AuxButton: React.FC<{ children: ReactNode, className: string, title: string, onClick: () => void }> = (props) => (
+    <button 
+      className={
+        classNames("hover:text-white transition-colors px-3 py-1 rounded", props.className)
+      } 
+      title={props.title} 
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+  );
+
+  const playlistAuxControlProvider = (song: PlaylistItem) => {
+    const isFavorite = favorites.some(f => f.filename === song.filename);
+    return (
+      <AuxButton
+        className={classNames({
+          "text-red-500": isFavorite,
+          "text-white/40": !isFavorite,
+        })}
+        title={isFavorite ? "Remove from favorites" : "Add to favorites"}
+        onClick={() => {
+          if (isFavorite) {
+            API.removeFromFavorites(song.filename);
+          } else {
+            API.addToFavorites(song.filename);
+          }
+        }}
+      >
+        <FaHeart />
+      </AuxButton>
+    );
+  };
+
+  const favoritesAuxControlProvider = (song: PlaylistItem) => {
+    const isInPlaylist = playlist.some(p => p.filename === song.filename);
+    return (
+      <div className="flex">
+        <AuxButton
+          className="text-white hover:text-white"
+          title="Rename favorite"
+          onClick={() => {
+            setFavoriteToRename(song);
+            setIsRenameModalOpen(true);
+          }}
+        >
+          <FaEdit />
+        </AuxButton>
+        
+        <AuxButton
+          className={classNames({
+            "text-white/40": isInPlaylist,
+            "text-white": !isInPlaylist,
+          })}
+          title={isInPlaylist ? "Remove from playlist" : "Add to playlist"}
+          onClick={() => {
+            if (isInPlaylist) {
+              API.removeFromPlaylist(playlist.findIndex(p => p.filename === song.filename));
+            } else {
+              API.addToPlaylist(song.filename);
+            }
+          }}
+        >
+          <FaPlus />
+        </AuxButton>
+      </div>
+    );
+  };
+
   return (
     <div className="flex items-center justify-center h-screen w-screen bg-black md:py-10">
       <div className="bg-violet-900 w-full md:max-w-2xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
-        <NowPlaying 
+        <NowPlaying
-          className="flex flex-row md:rounded-t-2xl" 
+          className="flex flex-row md:rounded-t-2xl"
-          songName={nowPlayingSong || "(Not Playing)"} 
+          songName={nowPlayingSong || "(Not Playing)"}
-          fileName={nowPlayingFileName || ""} 
+          fileName={nowPlayingFileName || ""}
-          isPlaying={isPlaying} 
+          isPlaying={isPlaying}
-          onPlayPause={togglePlayPause} 
+          isIdle={isIdle}
-          onSkip={handleSkip} 
+          onPlayPause={togglePlayPause}
-          onPrevious={handlePrevious} 
+          onStop={handleStop}
+          onSkip={handleSkip}
+          onPrevious={handlePrevious}
+          onScreenShare={toggleScreenShare}
+          isScreenSharing={isScreenSharing}
           volume={volume}
           onVolumeSettingChange={handleVolumeSettingChange}
           onVolumeWillChange={() => setVolumeSettingIsLocked(true)}
           onVolumeDidChange={() => setVolumeSettingIsLocked(false)}
+          isScreenSharingSupported={isScreenSharingSupported}
         />
 
         <TabView selectedTab={selectedTab} onTabChange={setSelectedTab}>
@@ -217,6 +338,7 @@ const App: React.FC = () => {
               songs={playlist} 
               isPlaying={isPlaying} 
               onNeedsRefresh={refreshContent} 
+              auxControlProvider={playlistAuxControlProvider}
             />
           </Tab>
           <Tab label="Favorites" identifier={Tabs.Favorites} icon={<FaHeart />}>
@@ -224,14 +346,21 @@ const App: React.FC = () => {
               songs={favorites.map(f => ({ ...f, playing: f.filename === nowPlayingFileName }))} 
               isPlaying={isPlaying} 
               onNeedsRefresh={refreshContent} 
+              auxControlProvider={favoritesAuxControlProvider}
             />
           </Tab>
         </TabView>
 
         <AddSongPanel onAddURL={handleAddURL} />
+        
+        <RenameFavoriteModal 
+          isOpen={isRenameModalOpen}
+          onClose={() => setIsRenameModalOpen(false)}
+          favorite={favoriteToRename}
+        />
       </div>
     </div>
   );
 };
 
-export default App;
+export default App;

frontend/src/components/NowPlaying.tsx

@@ -1,16 +1,22 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { FaPlay, FaPause, FaStepForward, FaStepBackward, FaVolumeUp } from 'react-icons/fa';
+import { FaPlay, FaPause, FaStepForward, FaStepBackward, FaVolumeUp, FaDesktop, FaStop } from 'react-icons/fa';
 
 interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
   songName: string;
   fileName: string;
   isPlaying: boolean;
+  isIdle: boolean;
   volume: number;
   onPlayPause: () => void;
+  onStop: () => void;
   onSkip: () => void;
   onPrevious: () => void;
-  
+
+  onScreenShare: () => void;
+  isScreenSharingSupported: boolean;
+  isScreenSharing: boolean;
+
   // Sent when the volume setting actually changes value
   onVolumeSettingChange: (volume: number) => void;
 
@@ -22,16 +28,27 @@ interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const NowPlaying: React.FC<NowPlayingProps> = (props) => {
+  const titleArea = props.isScreenSharing ? (
+    <div className="flex flex-row items-center gap-2 text-white text-center justify-center">
+      <FaDesktop size={24} />
+      <div className="text-lg font-bold truncate">Screen Sharing</div>
+    </div>
+  ) : (
+    <div className={classNames(props.isIdle ? 'opacity-50' : 'opacity-100')}>
+      <div className="text-lg font-bold truncate">{props.songName}</div>
+      <div className="text-sm truncate">{props.fileName}</div>
+    </div>
+  );
+
   return (
     <div className={classNames(props.className, 'bg-black/50 h-fit p-5')}>
       <div className="flex flex-col w-full gap-2">
-        <div className="flex flex-col md:flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center gap-4">
+        <div className="flex flex-col w-full h-full bg-black/50 rounded-lg p-5 gap-4">
-          <div className="flex-grow min-w-0 w-full md:w-auto text-white">
+          <div className="flex-grow min-w-0 w-full text-white text-left">
-            <div className="text-lg font-bold truncate text-center md:text-left">{props.songName}</div>
+            {titleArea}
-            <div className="text-sm truncate text-center md:text-left">{props.fileName}</div>
           </div>
-          <div className="flex flex-row items-center gap-4 justify-center md:justify-end">
+          <div className="flex flex-row items-center gap-4 w-full">
-            <div className="flex items-center gap-2 text-white">
+            <div className="flex items-center gap-2 text-white w-full max-w-[250px]">
               <FaVolumeUp size={20} />
               <input
                 type="range"
@@ -41,21 +58,37 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
                 onMouseDown={() => props.onVolumeWillChange(props.volume)}
                 onMouseUp={() => props.onVolumeDidChange(props.volume)}
                 onChange={(e) => props.onVolumeSettingChange(Number(e.target.value))}
-                className="fancy-slider w-48 md:w-24 h-2"
+                className="fancy-slider h-2 w-full"
               />
             </div>
+            
+            <div className="flex-grow"></div>
 
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPrevious}>
               <FaStepBackward size={24} />
             </button>
 
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPlayPause}>
-              {props.isPlaying ? <FaPause size={24} /> : <FaPlay size={24} />}
+              {(props.isPlaying && !props.isIdle) ? <FaPause size={24} /> : <FaPlay size={24} />}
+            </button>
+
+            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStop}>
+              <FaStop size={24} className={props.isIdle ? 'opacity-25' : 'opacity-100'} />
             </button>
 
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onSkip}>
               <FaStepForward size={24} />
             </button>
+
+            {props.isScreenSharingSupported && (
+              <button
+                className={classNames("text-white hover:text-violet-300 transition-colors rounded-full p-2", props.isScreenSharing ? ' bg-violet-800' : '')}
+                onClick={props.onScreenShare}
+                title="Share your screen"
+              >
+                <FaDesktop size={24} />
+              </button>
+            )}
           </div>
         </div>
       </div>

frontend/src/components/RenameFavoriteModal.tsx

@@ -0,0 +1,97 @@
+import React, { useState, KeyboardEvent, useEffect } from 'react';
+import { FaTimes, FaCheck } from 'react-icons/fa';
+import { API, PlaylistItem, getDisplayTitle } from '../api/player';
+
+interface RenameFavoriteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  favorite: PlaylistItem | null;
+}
+
+const RenameFavoriteModal: React.FC<RenameFavoriteModalProps> = ({ isOpen, onClose, favorite }) => {
+  const [title, setTitle] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (favorite) {
+      setTitle(getDisplayTitle(favorite));
+    }
+  }, [favorite]);
+
+  const handleSave = async () => {
+    if (!favorite || !title.trim()) return;
+    
+    setIsSaving(true);
+
+    try {
+      await API.updateFavoriteTitle(favorite.filename, title);
+      onClose();
+    } catch (error) {
+      console.error('Failed to rename favorite:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSave();
+    } else if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  if (!isOpen || !favorite) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-violet-900 w-full max-w-md rounded-lg p-4 shadow-lg">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-white text-xl font-bold">Rename Favorite</h2>
+
+          <button onClick={onClose} className="text-white/60 hover:text-white">
+            <FaTimes size={24} />
+          </button>
+        </div>
+
+        <div className="mb-4">
+          <label className="text-white/80 block mb-2">Original filename:</label>
+          <div className="text-white/60 text-sm truncate bg-black/20 p-2 rounded-lg mb-4">
+            {favorite.filename}
+          </div>
+          
+          <label className="text-white/80 block mb-2">Title:</label>
+          <input
+            type="text"
+            autoFocus
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Enter new title..."
+            className="p-2 rounded-lg border-2 border-violet-500 w-full bg-black/20 text-white"
+          />
+        </div>
+
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="bg-black/30 text-white p-2 rounded-lg px-4 hover:bg-black/40"
+          >
+            Cancel
+          </button>
+          
+          <button
+            onClick={handleSave}
+            disabled={isSaving || !title.trim()}
+            className="bg-violet-500 text-white p-2 rounded-lg px-4 disabled:opacity-50 flex items-center gap-2"
+          >
+            <FaCheck size={16} />
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RenameFavoriteModal;

frontend/src/components/SongRow.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, ReactNode } from 'react';
 import { FaPlay, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';
 import { getDisplayTitle, PlaylistItem } from '../api/player';
 
@@ -11,12 +11,13 @@ export enum PlayState {
 
 export interface SongRowProps {
   song: PlaylistItem;
+  auxControl?: ReactNode;
   playState: PlayState;
   onDelete: () => void;
   onPlay: () => void;
 }
 
-const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay }) => {
+const SongRow: React.FC<SongRowProps> = ({ song, auxControl, playState, onDelete, onPlay }) => {
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   
@@ -39,7 +40,8 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
   const displayTitle = getDisplayTitle(song);
   
   return (
-    <div className={classNames("flex flex-row w-full h-24 px-2 py-5 items-center border-b gap-2 transition-colors", {
+    <div className={classNames(
+      "flex flex-row w-full h-20 px-2 py-2 items-center border-b gap-2 transition-colors shrink-0", {
       "qc-highlighted": (playState === PlayState.Playing || playState === PlayState.Paused),
       "bg-black/30": playState === PlayState.NotPlaying,
     })}>
@@ -76,6 +78,8 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
       </div>
       
       <div className="flex flex-row gap-2">
+        {auxControl}
+
         <button
           ref={buttonRef}
           className="text-red-100 px-3 py-1 bg-red-500/40 rounded"

frontend/src/components/SongTable.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, ReactNode } from "react";
 import SongRow, { PlayState } from "./SongRow";
 import { PlaylistItem } from "../api/player";
 
 interface SongTableProps {
   songs: PlaylistItem[];
-  isPlaying: boolean;
+  isPlaying: boolean
+  auxControlProvider?: (song: PlaylistItem) => ReactNode;
   onDelete: (index: number) => void;
   onSkipTo: (index: number) => void;
 }
 
-const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, onDelete, onSkipTo }) => {
+const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, auxControlProvider, onDelete, onSkipTo }) => {
   const nowPlayingIndex = songs.findIndex(song => song.playing ?? false);
   const songTableRef = useRef<HTMLDivElement>(null);
 
@@ -21,11 +22,12 @@ const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, onDelete, onSki
   }, [nowPlayingIndex]);
 
   return (
-    <div className="flex flex-col w-full h-full overflow-y-auto border-y" ref={songTableRef}>
+    <div className="flex flex-col w-full h-full overflow-y-auto" ref={songTableRef}>
       {songs.map((song, index) => (
         <SongRow 
           key={index} 
           song={song} 
+          auxControl={auxControlProvider ? auxControlProvider(song) : undefined}
           playState={
             (song.playing ?? false) ? (isPlaying ? PlayState.Playing : PlayState.Paused)
             : PlayState.NotPlaying

frontend/src/components/TabView.tsx

@@ -26,7 +26,7 @@ export const TabView = <T,>({ children, selectedTab, onTabChange }: TabViewProps
   ) as React.ReactElement<TabProps<T>>[];
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col flex-1 overflow-hidden">
       <div className="flex flex-row h-11 border-b border-white/20">
         {tabs.map((tab, index) => {
           const isSelected = selectedTab === tab.props.identifier;
@@ -47,7 +47,7 @@ export const TabView = <T,>({ children, selectedTab, onTabChange }: TabViewProps
           );
         })}
       </div>
-      <div className="flex-1">
+      <div className="flex-1 overflow-hidden">
         {tabs.map((tab, index) => (
           <div
             key={index}

frontend/src/config.ts

@@ -1,3 +1,21 @@
+/*
+ * config.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 export const USE_INVIDIOUS = import.meta.env.VITE_USE_INVIDIOUS || true;
 export const INVIDIOUS_BASE_URL = import.meta.env.VITE_INVIDIOUS_BASE_URL || 'http://invidious.nor';
 export const INVIDIOUS_API_ENDPOINT = `${INVIDIOUS_BASE_URL}/api/v1`;

frontend/src/hooks/useEventWebsocket.ts

@@ -1,70 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { API } from '../api/player';
-
-export const useEventWebSocket = (onEvent: (event: any) => void) => {
-  const [ws, setWs] = useState<WebSocket | null>(null);
-  const [wsReconnectTimeout, setWsReconnectTimeout] = useState<number | null>(null);
-
-  const connectWebSocket = useCallback(() => {
-    // Clear any existing reconnection timeout
-    if (wsReconnectTimeout) {
-      window.clearTimeout(wsReconnectTimeout);
-      setWsReconnectTimeout(null);
-    }
-
-    // Close existing websocket if it exists
-    if (ws) {
-      ws.close();
-    }
-
-    const websocket = API.subscribeToEvents(onEvent);
-    
-    websocket.addEventListener('close', () => {
-      console.log('WebSocket closed. Attempting to reconnect...');
-
-      // Attempt to reconnect after 2 seconds
-      const timeout = window.setTimeout(() => {
-        connectWebSocket();
-      }, 2000);
-
-      setWsReconnectTimeout(timeout);
-    });
-
-    websocket.addEventListener('error', (error) => {
-      console.error('WebSocket error:', error);
-      websocket.close();
-    });
-
-    setWs(websocket);
-  }, [wsReconnectTimeout, onEvent]);
-
-  // Check WebSocket health periodically
-  useEffect(() => {
-    const healthCheck = setInterval(() => {
-      if (!ws || ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING) {
-        console.log('WebSocket unhealthy, reconnecting...');
-        connectWebSocket();
-      }
-    }, 5000);
-
-    return () => {
-      clearInterval(healthCheck);
-    };
-  }, [ws, connectWebSocket]);
-
-  // Initial WebSocket connection
-  useEffect(() => {
-    connectWebSocket();
-
-    return () => {
-      if (ws) {
-        ws.close();
-      }
-      if (wsReconnectTimeout) {
-        window.clearTimeout(wsReconnectTimeout);
-      }
-    };
-  }, [connectWebSocket]);
-
-  return ws;
-}; 

frontend/src/hooks/useScreenShare.ts

@@ -0,0 +1,136 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { API } from '../api/player';
+
+interface UseScreenShareResult {
+  isScreenSharing: boolean;
+  isScreenSharingSupported: boolean;
+  toggleScreenShare: () => Promise<void>;
+  stopScreenShare: () => void;
+}
+
+function getBestSupportedMimeType() {
+  // Ordered by preference (best first) - all of these include audio+video
+  const mimeTypes = [
+    'video/webm;codecs=vp9,opus',     // Best quality, good compression
+    'video/webm;codecs=vp8,opus',     // Good fallback, well supported
+    'video/webm;codecs=h264,opus',    // Better compatibility with some systems
+    'video/mp4;codecs=h264,aac',      // Good for Safari but may not be supported for MediaRecorder
+    'video/webm',                     // Generic fallback (browser will choose codecs)
+    'video/mp4'                       // Last resort
+  ];
+
+  // Find the first supported mimetype
+  for (const type of mimeTypes) {
+    if (MediaRecorder.isTypeSupported(type)) {
+      console.log(`Using mime type: ${type}`);
+      return type;
+    }
+  }
+
+  // If none are supported, return null or a basic fallback
+  console.warn('No preferred mime types supported by this browser');
+  return 'video/webm'; // Most basic fallback
+}
+
+export const useScreenShare = (): UseScreenShareResult => {
+  const [isScreenSharing, setIsScreenSharing] = useState(false);
+  const [isScreenSharingSupported, setIsScreenSharingSupported] = useState(false);
+  const screenShareSocketRef = useRef<WebSocket | null>(null);
+
+  // Check if screen sharing is supported
+  useEffect(() => {
+    setIsScreenSharingSupported(
+      typeof navigator !== 'undefined' &&
+      navigator.mediaDevices !== undefined &&
+      typeof navigator.mediaDevices.getDisplayMedia === 'function'
+    );
+  }, []);
+
+  const stopScreenShare = useCallback(() => {
+    if (screenShareSocketRef.current) {
+      screenShareSocketRef.current.close();
+      screenShareSocketRef.current = null;
+    }
+    setIsScreenSharing(false);
+  }, []);
+
+  const startScreenShare = useCallback(async () => {
+    try {
+      const mediaStream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: true,
+      });
+
+      let mimeType = getBestSupportedMimeType();
+      console.log('Using MIME type:', mimeType);
+
+      const mediaRecorder = new MediaRecorder(mediaStream, {
+        mimeType: mimeType,
+        videoBitsPerSecond: 2500000, // 2.5 Mbps
+        audioBitsPerSecond: 128000,  // 128 kbps
+      });
+
+      // Connect to WebSocket
+      screenShareSocketRef.current = API.startScreenShare(mimeType);
+
+      // Set up WebSocket event handlers
+      screenShareSocketRef.current.onopen = () => {
+        console.log('Screen sharing WebSocket connected');
+        setIsScreenSharing(true);
+
+        mediaRecorder.start(100);
+      };
+
+      screenShareSocketRef.current.onclose = () => {
+        console.log('Screen sharing WebSocket closed');
+        setIsScreenSharing(false);
+
+        // Stop all tracks when WebSocket is closed
+        mediaStream.getTracks().forEach(track => track.stop());
+      };
+
+      screenShareSocketRef.current.onerror = (error) => {
+        console.error('Screen sharing WebSocket error:', error);
+        setIsScreenSharing(false);
+        
+        // Stop all tracks on error
+        mediaStream.getTracks().forEach(track => track.stop());
+      };
+
+      // Send data over WebSocket when available
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data && event.data.size > 0 && screenShareSocketRef.current && screenShareSocketRef.current.readyState === WebSocket.OPEN) {
+          screenShareSocketRef.current.send(event.data);
+        }
+      };
+
+      // Handle stream ending (user clicks "Stop sharing")
+      mediaStream.getVideoTracks()[0].onended = () => {
+        if (screenShareSocketRef.current) {
+          screenShareSocketRef.current.close();
+          screenShareSocketRef.current = null;
+        }
+        setIsScreenSharing(false);
+      };
+
+    } catch (error) {
+      console.error('Error starting screen share:', error);
+      setIsScreenSharing(false);
+    }
+  }, []);
+
+  const toggleScreenShare = useCallback(async () => {
+    if (screenShareSocketRef.current) {
+      stopScreenShare();
+    } else {
+      await startScreenShare();
+    }
+  }, [startScreenShare, stopScreenShare]);
+
+  return {
+    isScreenSharing,
+    isScreenSharingSupported,
+    toggleScreenShare,
+    stopScreenShare
+  };
+}; 

frontend/src/vite-env.d.ts

@@ -1 +1,19 @@
+/*
+ * vite-env.d.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 /// <reference types="vite/client" />

frontend/vite.config.ts

@@ -1,3 +1,21 @@
+/*
+ * vite.config.ts
+ * Copyleft 2025 James Magahern <buzzert@buzzert.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

package-lock.json

@@ -10,7 +10,10 @@
             "workspaces": [
                 "backend",
                 "frontend"
-            ]
+            ],
+            "dependencies": {
+                "react-use-websocket": "^4.13.0"
+            }
         },
         "backend": {
             "name": "mpvqueue",
@@ -4685,6 +4688,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-use-websocket": {
+            "version": "4.13.0",
+            "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-4.13.0.tgz",
+            "integrity": "sha512-anMuVoV//g2N76Wxqvqjjo1X48r9Np3y1/gMl7arX84tAPXdy5R7sB5lO5hvCzQRYjqXwV8XMAiEBOUbyrZFrw==",
+            "license": "MIT"
+        },
         "node_modules/readdirp": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -8,5 +8,8 @@
     "workspaces": [
         "backend",
         "frontend"
-    ]
+    ],
+    "dependencies": {
+        "react-use-websocket": "^4.13.0"
+    }
 }