4 lines
19 KiB
XML
4 lines
19 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="2023-11-07T19:09:12.102Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0" etag="FmdaLPf_HPHCfeaYSUOK" version="22.0.8" type="github">
 <diagram name="Page-1" id="Os_d6Ix4-OmGA2ESzcNy">
 <mxGraphModel dx="819" dy="1534" 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="220" y="70" />
 <mxPoint x="220" y="70" />
 </Array>
 </mxGeometry>
 </mxCell>
 <mxCell id="mC6_lUEuGq_3_uGXtFcV-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="vnCT68lWyodSIy9P_5kl-1" target="vnCT68lWyodSIy9P_5kl-3">
 <mxGeometry relative="1" as="geometry">
 <Array as="points">
 <mxPoint x="300" y="190" />
 <mxPoint x="300" y="190" />
 </Array>
 </mxGeometry>
 </mxCell>
 <mxCell id="mC6_lUEuGq_3_uGXtFcV-6" value="SPA" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="mC6_lUEuGq_3_uGXtFcV-4">
 <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="160" y="80" 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="360" y="-20" 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;" edge="1" parent="1" source="vnCT68lWyodSIy9P_5kl-3" target="vnCT68lWyodSIy9P_5kl-1">
 <mxGeometry relative="1" as="geometry">
 <mxPoint x="400.02857142857147" y="140" as="targetPoint" />
 <Array as="points">
 <mxPoint x="400" y="180" />
 <mxPoint x="400" y="180" />
 </Array>
 </mxGeometry>
 </mxCell>
 <mxCell id="mC6_lUEuGq_3_uGXtFcV-7" value="WebSocket" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="mC6_lUEuGq_3_uGXtFcV-2">
 <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="160" y="200" 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="160" y="-20" 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="285" y="320" 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;" edge="1" parent="1" source="vnCT68lWyodSIy9P_5kl-1" target="vnCT68lWyodSIy9P_5kl-2">
 <mxGeometry relative="1" as="geometry">
 <mxPoint x="400.02857142857147" y="100" as="sourcePoint" />
 <Array as="points">
 <mxPoint x="400" y="70" />
 <mxPoint x="400" y="70" />
 </Array>
 </mxGeometry>
 </mxCell>
 <mxCell id="mC6_lUEuGq_3_uGXtFcV-8" value="TCP" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="mC6_lUEuGq_3_uGXtFcV-3">
 <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;" vertex="1" parent="1">
 <mxGeometry x="330" y="100" width="100" height="40" as="geometry" />
 </mxCell>
 </root>
 </mxGraphModel>
 </diagram>
</mxfile>
" resource="https://app.diagrams.net/?mode=github#Hcccb%2Fsanic%2Fmain%2Farchitecture.drawio.svg"><defs/><g><path d="M 60.03 100 L 60.03 90 L 60.03 66.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 60.03 61.12 L 63.53 68.12 L 60.03 66.37 L 56.53 68.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 140.03 180 L 140.03 210 L 140.03 213.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 140.03 218.88 L 136.53 211.88 L 140.03 213.63 L 143.53 211.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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: 120px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><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="120" y="203" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">SPA</text></switch></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 transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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 style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><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><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 transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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 style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><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><path d="M 240.03 213.63 L 240.03 200 L 240.03 186.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 240.03 218.88 L 236.53 211.88 L 240.03 213.63 L 243.53 211.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 240.03 181.12 L 243.53 188.12 L 240.03 186.37 L 236.53 188.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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: 200px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><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="200" y="204" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">WebSocket</text></switch></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 transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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 style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><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><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 transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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 style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><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><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"/><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 transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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 style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><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><path d="M 240.03 93.63 L 240.03 90 L 240.03 66.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 240.03 98.88 L 236.53 91.88 L 240.03 93.63 L 243.53 91.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 240.03 61.12 L 243.53 68.12 L 240.03 66.37 L 236.53 68.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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: 220px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><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="220" y="78" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">TCP</text></switch></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 transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><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 style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><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><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> |