tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-12-22 18:00:17 +00:00
Code Issues Projects Releases Wiki Activity

framework to switch between grid and list view

Browse Source
This commit is contained in:
simon 2021-10-01 14:42:17 +07:00
parent 21ad1fd832
commit 7c34ceb9f8
7 changed files with 291 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
tubearchivist/home/config.json
View File

@ -6,6 +6,11 @@
"show_subed_only": false,
"page_size": 12
},
"default_view": {
"home": "grid",
"channel": "grid",
"downloads": "list"
},
"subscriptions": {
"auto_search": false,
"auto_download": false,

4
tubearchivist/home/templates/home/home.html
View File

@ -31,6 +31,10 @@
</form>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
<div id="player" class="video-player"></div>
<div class="video-list">
{% if videos %}

15
tubearchivist/home/views.py
View File

@ -39,7 +39,7 @@ class HomeView(View):
def get(self, request):
"""return home search results"""
colors, sort_order, hide_watched = self.read_config()
colors, view_style, sort_order, hide_watched = self.read_config()
# handle search
search_get = request.GET.get("search", False)
if search_get:
@ -66,6 +66,7 @@ class HomeView(View):
"sortorder": sort_order,
"hide_watched": hide_watched,
"colors": colors,
"view_style": view_style,
}
return render(request, "home/home.html", context)
@ -108,9 +109,10 @@ class HomeView(View):
"""read needed values from redis"""
config_handler = AppConfig().config
colors = config_handler["application"]["colors"]
view_style = config_handler["default_view"]["home"]
sort_order = RedisArchivist().get_message("sort_order")
hide_watched = RedisArchivist().get_message("hide_watched")
return colors, sort_order, hide_watched
return colors, view_style, sort_order, hide_watched
@staticmethod
def post(request):
@ -474,6 +476,7 @@ class PostData:
"""map dict key and return function to execute"""
exec_map = {
"watched": self.watched,
"change_view": self.change_view,
"rescan_pending": self.rescan_pending,
"ignore": self.ignore,
"dl_pending": self.dl_pending,
@ -499,6 +502,14 @@ class PostData:
WatchState(self.exec_val).mark_as_watched()
return {"success": True}
def change_view(self):
"""process view changes in home, channel, and downloads"""
origin, new_view = self.exec_val.split(":")
print(f"change view on page {origin} to {new_view}")
update_dict = {f"default_view.{origin}": [new_view]}
AppConfig().update_config(update_dict)
return {"success": True}
@staticmethod
def rescan_pending():
"""look for new items in subscribed channels"""

13
tubearchivist/static/css/style.css
View File

@ -211,6 +211,19 @@ button:hover {
filter: var(--img-filter);
}
.view-icons {
display: flex;
justify-content: end;
margin-top: 15px;
}
.view-icons img {
width: 30px;
margin: 5px 10px;
cursor: pointer;
filter: var(--img-filter);
}
#search-box {
display: none;
flex: auto;

122
tubearchivist/static/img/icon-gridview.svg Normal file
View File

@ -0,0 +1,122 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="2000"
height="2000"
viewBox="0 0 529.16666 529.16735"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="Gridview.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35729063"
inkscape:cx="901.7564"
inkscape:cy="1021.9111"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1">
<sodipodi:guide
position="247.25932,291.92959"
orientation="1,0"
id="guide853"
inkscape:locked="false" />
<sodipodi:guide
position="337.22901,167.98535"
orientation="0,1"
id="guide855"
inkscape:locked="false" />
<sodipodi:guide
position="266.76325,305.4565"
orientation="0,1"
id="guide857"
inkscape:locked="false" />
<sodipodi:guide
position="257.79774,279.50371"
orientation="0,1"
id="guide861"
inkscape:locked="false" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,232.16736)">
<g
id="g873"
transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)"
style="stroke:none">
<rect
ry="7.445024"
rx="7.445024"
y="-121.39048"
x="79.903137"
height="113.24854"
width="167.35619"
id="rect815"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600005, 0.56300002999999998;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
<rect
ry="7.445024"
rx="7.445024"
y="-121.7837"
x="273.05484"
height="113.24854"
width="167.35619"
id="rect815-4"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
<rect
ry="7.445024"
rx="7.445024"
y="17.882772"
x="79.903137"
height="113.24854"
width="167.35619"
id="rect815-2"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
<rect
ry="7.445024"
rx="7.445024"
y="17.453594"
x="273.05484"
height="113.24854"
width="167.35619"
id="rect815-7"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

122
tubearchivist/static/img/icon-listview.svg Normal file
View File

@ -0,0 +1,122 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="2000"
height="2000"
viewBox="0 0 529.16666 529.16735"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="Listview.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.42053519"
inkscape:cx="851.82064"
inkscape:cy="1105.7974"
inkscape:document-units="mm"
inkscape:current-layer="g873"
showgrid="false"
units="px"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1">
<sodipodi:guide
position="247.25932,291.92959"
orientation="1,0"
id="guide853"
inkscape:locked="false" />
<sodipodi:guide
position="337.22901,167.98535"
orientation="0,1"
id="guide855"
inkscape:locked="false" />
<sodipodi:guide
position="266.76325,305.4565"
orientation="0,1"
id="guide857"
inkscape:locked="false" />
<sodipodi:guide
position="257.79774,279.50371"
orientation="0,1"
id="guide861"
inkscape:locked="false" />
<sodipodi:guide
position="22.413775,336.67894"
orientation="1,0"
id="guide926"
inkscape:locked="false" />
<sodipodi:guide
position="503.71355,217.50031"
orientation="1,0"
id="guide928"
inkscape:locked="false" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,232.16736)">
<g
id="g873"
transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)">
<rect
ry="7.445024"
rx="7.445024"
y="-121.34892"
x="79.944702"
height="70.107315"
width="358.24551"
id="rect815"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64810181;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29620369, 0.64810185;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
<rect
ry="7.4450235"
rx="7.4450235"
y="-31.167784"
x="79.861153"
height="70.107315"
width="358.32907"
id="rect815-20"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64817739;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29635485, 0.64817743;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
<rect
ry="7.4450235"
rx="7.4450231"
y="60.024326"
x="79.908524"
height="70.106117"
width="358.28171"
id="rect815-8"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64812905;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29625813, 0.64812907;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

12
tubearchivist/static/script.js
View File

@ -43,6 +43,18 @@ function unsubscribe(channel_id) {
document.getElementById(channel_id).remove();
}
function changeView(image) {
var sourcePage = image.getAttribute("data-origin");
var newView = image.getAttribute("data-value");
var payload = JSON.stringify({'change_view': sourcePage + ":" + newView});
console.log(payload);
sendPost(payload);
setTimeout(function(){
location.reload();
return false;
}, 500);
}
// download page buttons
function rescanPending() {
var payload = JSON.stringify({'rescan_pending': true});