4 lines
20 KiB
XML
4 lines
20 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!-- Do not edit this file with editors other than draw.io -->
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="281px" height="422px" viewBox="-0.5 -0.5 281 422" content="<mxfile host="app.diagrams.net" modified="2024-07-17T10:46:42.166Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36" etag="szqoFZvX9Ti6G2t-dgjT" version="24.7.0" type="gitlab"> <diagram name="Page-1" id="Os_d6Ix4-OmGA2ESzcNy"> <mxGraphModel dx="2074" dy="2246" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <mxCell id="vnCT68lWyodSIy9P_5kl-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="vnCT68lWyodSIy9P_5kl-1" target="vnCT68lWyodSIy9P_5kl-10" edge="1"> <mxGeometry relative="1" as="geometry"> <Array as="points"> <mxPoint x="100" y="-990" /> <mxPoint x="100" y="-990" /> </Array> </mxGeometry> </mxCell> <mxCell id="mC6_lUEuGq_3_uGXtFcV-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="vnCT68lWyodSIy9P_5kl-1" target="vnCT68lWyodSIy9P_5kl-3" edge="1"> <mxGeometry relative="1" as="geometry"> <Array as="points"> <mxPoint x="180" y="-870" /> <mxPoint x="180" y="-870" /> </Array> </mxGeometry> </mxCell> <mxCell id="mC6_lUEuGq_3_uGXtFcV-6" value="SPA" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="mC6_lUEuGq_3_uGXtFcV-4" vertex="1" connectable="0"> <mxGeometry x="-0.3857" relative="1" as="geometry"> <mxPoint x="-20" y="7" as="offset" /> </mxGeometry> </mxCell> <mxCell id="vnCT68lWyodSIy9P_5kl-1" value="&lt;div align=&quot;center&quot;&gt;backend&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;align=center;" parent="1" vertex="1"> <mxGeometry x="40" y="-980" width="280" height="80" as="geometry" /> </mxCell> <mxCell id="vnCT68lWyodSIy9P_5kl-2" value="MPD" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="240" y="-1080" width="80" height="60" as="geometry" /> </mxCell> <mxCell id="mC6_lUEuGq_3_uGXtFcV-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;" parent="1" source="vnCT68lWyodSIy9P_5kl-3" target="vnCT68lWyodSIy9P_5kl-1" edge="1"> <mxGeometry relative="1" as="geometry"> <mxPoint x="280.02857142857147" y="-920" as="targetPoint" /> <Array as="points"> <mxPoint x="280" y="-880" /> <mxPoint x="280" y="-880" /> </Array> </mxGeometry> </mxCell> <mxCell id="mC6_lUEuGq_3_uGXtFcV-7" value="WebSocket" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="mC6_lUEuGq_3_uGXtFcV-2" vertex="1" connectable="0"> <mxGeometry x="-0.4" relative="1" as="geometry"> <mxPoint x="-40" y="-8" as="offset" /> </mxGeometry> </mxCell> <mxCell id="vnCT68lWyodSIy9P_5kl-3" value="frontend" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="40" y="-860" width="280" height="60" as="geometry" /> </mxCell> <mxCell id="vnCT68lWyodSIy9P_5kl-10" value="yt-dlp" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="40" y="-1080" width="120" height="60" as="geometry" /> </mxCell> <mxCell id="vnCT68lWyodSIy9P_5kl-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="vnCT68lWyodSIy9P_5kl-14" target="vnCT68lWyodSIy9P_5kl-3" edge="1"> <mxGeometry relative="1" as="geometry" /> </mxCell> <mxCell id="vnCT68lWyodSIy9P_5kl-14" value="user" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;" parent="1" vertex="1"> <mxGeometry x="165" y="-740" width="30" height="60" as="geometry" /> </mxCell> <mxCell id="mC6_lUEuGq_3_uGXtFcV-3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;" parent="1" source="vnCT68lWyodSIy9P_5kl-1" target="vnCT68lWyodSIy9P_5kl-2" edge="1"> <mxGeometry relative="1" as="geometry"> <mxPoint x="280.02857142857147" y="-960" as="sourcePoint" /> <Array as="points"> <mxPoint x="280" y="-990" /> <mxPoint x="280" y="-990" /> </Array> </mxGeometry> </mxCell> <mxCell id="mC6_lUEuGq_3_uGXtFcV-8" value="TCP" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="mC6_lUEuGq_3_uGXtFcV-3" vertex="1" connectable="0"> <mxGeometry x="0.2857" y="-2" relative="1" as="geometry"> <mxPoint x="-22" as="offset" /> </mxGeometry> </mxCell> <mxCell id="mC6_lUEuGq_3_uGXtFcV-9" value="WebSocket/MPD translator" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="210" y="-960" width="100" height="40" as="geometry" /> </mxCell> </root> </mxGraphModel> </diagram> </mxfile> " resource="https://app.diagrams.net/?mode=gitlab.com#AXenGi%2Fsanic%2Fmain%2Farchitecture.drawio.svg#%7B%22pageId%22%3A%22Os_d6Ix4-OmGA2ESzcNy%22%7D"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="vnCT68lWyodSIy9P_5kl-11"><g><path d="M 60 100 L 60 90 L 60 66.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 60 61.12 L 63.5 68.12 L 60 66.37 L 56.5 68.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="mC6_lUEuGq_3_uGXtFcV-4"><g><path d="M 140 180 L 140 210 L 140 213.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 140 218.88 L 136.5 211.88 L 140 213.63 L 143.5 211.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="mC6_lUEuGq_3_uGXtFcV-6"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 200px; margin-left: 121px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">SPA</div></div></div></foreignObject><text x="121" y="203" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="11px" text-anchor="middle">SPA</text></switch></g></g></g></g><g data-cell-id="vnCT68lWyodSIy9P_5kl-1"><g><rect x="0" y="100" width="280" height="80" rx="12" ry="12" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 140px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div align="center">backend</div></div></div></div></foreignObject><text x="140" y="144" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="12px" text-anchor="middle">backend</text></switch></g></g></g><g data-cell-id="vnCT68lWyodSIy9P_5kl-2"><g><rect x="200" y="0" width="80" height="60" rx="9" ry="9" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 30px; margin-left: 201px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">MPD</div></div></div></foreignObject><text x="240" y="34" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="12px" text-anchor="middle">MPD</text></switch></g></g></g><g data-cell-id="mC6_lUEuGq_3_uGXtFcV-2"><g><path d="M 240 213.63 L 240 200 L 240 186.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 240 218.88 L 236.5 211.88 L 240 213.63 L 243.5 211.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 240 181.12 L 243.5 188.12 L 240 186.37 L 236.5 188.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="mC6_lUEuGq_3_uGXtFcV-7"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 201px; margin-left: 201px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">WebSocket</div></div></div></foreignObject><text x="201" y="204" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="11px" text-anchor="middle">WebSocket</text></switch></g></g></g></g><g data-cell-id="vnCT68lWyodSIy9P_5kl-3"><g><rect x="0" y="220" width="280" height="60" rx="9" ry="9" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 250px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">frontend</div></div></div></foreignObject><text x="140" y="254" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="12px" text-anchor="middle">frontend</text></switch></g></g></g><g data-cell-id="vnCT68lWyodSIy9P_5kl-10"><g><rect x="0" y="0" width="120" height="60" rx="9" ry="9" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">yt-dlp</div></div></div></foreignObject><text x="60" y="34" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="12px" text-anchor="middle">yt-dlp</text></switch></g></g></g><g data-cell-id="vnCT68lWyodSIy9P_5kl-15"><g><path d="M 140 340 L 140 286.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 140 281.12 L 143.5 288.12 L 140 286.37 L 136.5 288.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="vnCT68lWyodSIy9P_5kl-14"><g><ellipse cx="140" cy="347.5" rx="7.5" ry="7.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 140 355 L 140 380 M 140 360 L 125 360 M 140 360 L 155 360 M 140 380 L 125 400 M 140 380 L 155 400" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 407px; margin-left: 140px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">user</div></div></div></foreignObject><text x="140" y="419" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="12px" text-anchor="middle">user</text></switch></g></g></g><g data-cell-id="mC6_lUEuGq_3_uGXtFcV-3"><g><path d="M 240 93.63 L 240 90 L 240 66.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 240 98.88 L 236.5 91.88 L 240 93.63 L 243.5 91.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 240 61.12 L 243.5 68.12 L 240 66.37 L 236.5 68.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="mC6_lUEuGq_3_uGXtFcV-8"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 75px; margin-left: 221px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">TCP</div></div></div></foreignObject><text x="221" y="78" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="11px" text-anchor="middle">TCP</text></switch></g></g></g></g><g data-cell-id="mC6_lUEuGq_3_uGXtFcV-9"><g><rect x="170" y="120" width="100" height="40" rx="6" ry="6" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 140px; margin-left: 171px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">WebSocket/MPD translator</div></div></div></foreignObject><text x="220" y="144" fill="rgb(0, 0, 0)" font-family=""Helvetica"" font-size="12px" text-anchor="middle">WebSocket/MPD tr...</text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg> |