ign4...

rf/filmstrip_mod/m.css

@@ -147,4 +147,6 @@
 
 .remote-videos-container {
 	outline: 
-}
+}
+
+

rf/i4m/m.css

@@ -9,43 +9,75 @@
 /*rx2*/
 
 
+
+
+
+
 .lobby_root {
+	/*opacity: .5;*/
+	/*opacity: 0;*/
+	/*display: none;*/
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	outline: 3px solid red;
+	/*outline: 3px solid red;*/
 	outline-offset: -20px;
 	position: absolute;
 	z-index: 10;
 	/*background-image: url("../../media/examples/lizard.png");*/
 	/*background-image: url("/ign/rf/img/image.png");*/
 	/*background-image: url("/ign/rf/img/img3.jpg");*/
-	background-image: url("/ign/rf/img/cropped_bak.jpg");
+	/*background-image: url("/ign/rf/img/cropped_bak.jpg");*/
+	/*--vurlx:url("/ign/rf/artists/fisher.png");*/
 	/*background-position: 50% 100%; */
 	/*background-position: 20% 0%; */
-	background-position: 50% 50%; 
+	/*background-position: 50% 50%; */
 	/*background-attachment: fixed;*/
 	/*background-repeat: no-repeat;*/
-	background-size: cover; 
+	/*background-size: cover; */
 
 	/*background-image: url("/ign/rf/img/img3.jpg");*/
 	/*vertical-align: middle;*/
 }
+html {
+  scroll-behavior: smooth;
+}
+
 
+.tile_overlay{
+	position: absolute;
+		top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	/*border-radius: 20px; */
+	/*background-image: #0004;*/
+	/*background-color: #0004;*/
+	/*background-color: linear-gradient(#0000 #0ff8 #0009);*/
+	/*background-image: linear-gradient(to bottom #0000, #0ff8, #0009);*/
+		/*background-image: linear-gradient( 10% #0000, 30% #0ff0, 60% #0009);*/
 
+	background-image: linear-gradient( #0000 , #0000, #000a);
 
+}
+.rooms_dir0{
+	top: 50%;
+	transform: translate(0,-50%);
+	position: relative;
+
+}
 .rooms_dir {
 	/*padding-top: auto;*/
 	/*top: 50%;*/
 	top: 50%;
 	vertical-align: middle;
 	/*display: inline-block;*/
-	transform: translate(0,-50%);
-	width: calc(100% - 50px);
-	height: 300px;
+	/*transform: translate(0,-50%);*/
+	width: calc(100% - 150px);
+	height: 400px;
 	position: relative;
-	outline: 6px solid green;
+	/*outline: 6px solid green;*/
 	margin: auto;
 	overflow-x: scroll;
 
@@ -63,22 +95,33 @@
 	/*right: 0;*/
 	bottom: 0;
 }
-
+/*159/256*/
 
 
 .room_span {
 	/*top: 0;*/
 	/*bottom: 0;*/
 	height: 200px;
+	height: calc(200px * (256/159));
 	/*width: 20%;*/
+	background-size: cover;
 	/*margin: 20em;*/
 	margin: 20px;
+	border-radius: 20px; 
+
+
+
 	width: 200px;
-	outline: 2px solid #ff0;
+	/*outline: 2px solid #ff0;*/
 	position: relative;
 	display: flex;
 	display: inline;
 	display: inline-block;
+	overflow: hidden;
+	/*style="--vurl:/ign/rf/artists/fisher.png; --vtitle:"Fisher";"*/
+	/*background-image: url(--vurlx);*/
+	background-image: var(--vurl);
+	/*background-image: url("/ign/rf/artists/fisher.png");*/
 	/*display: inline-flex;*/
 }
 
@@ -88,15 +131,87 @@
 	/*width: 100%;*/
 	text-align: center;
 	position: relative;
+	/*bottom: 20px;*/
+	/*top: 100%;*/
+	color: #fff;
+	top: calc(100% - 40px - 2em);
+	/*position: absolute;*/
 	/*display: inline;*/
 	font-size: 2em;
+
+}
+.tile_title:after{
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	position: absolute;
+content:var(--vtitle);
+
 }
+
 .tile_button{
+	/*top:40px;*/
+	bottom:40px;
+	bottom:20px;
+	/*margin: 20px;*/
+	left: 50%;
+	
+	--vcolor:#eee;
+	color: var(--vcolor);
+	outline: 2px solid var(--vcolor);
+	line-height:25px;
+	font-size: 15px;
+	text-align: center;
+
+	transform: translate(-50%,0);
+	/*padding: 20px;*/
+	/*bottom:40px;*/
+
+	/*position: relative;*/
+	position: absolute;
 	width: 125px;
 	height: 25px;
-	outline: 3px solid blue;
 	/*margin: 0 50%;*/
 	margin: 0 auto;
 
 
-}
+}
+
+.tile_button:hover{
+	--vcolor:#fff;
+	background-color: #0009; 
+}
+
+
+
+
+.arrow {
+  border: solid #bbb;
+  width: 13px;
+  height: 13px;
+  border-width: 0 4px 4px 0;
+  display: inline-block;
+  padding: 3px;
+
+}
+.arrow:hover {
+  border-color: #fff;
+
+
+}
+
+.right {
+	position: absolute;
+	transform: rotate(-45deg);
+	right: 20px;
+	top: 50%;
+	/*transform: rotate(45);*/
+}
+.left {
+	left: 20px;
+	position: absolute;
+	top: 50%;
+	transform: rotate(135deg);
+	/*transform: rotate(45);*/
+}

rf/i4m/m.html

@@ -4,11 +4,16 @@
 <span class="plugin_top abs filmstrip_template">
 
 <div class="lobby_root plugin_top">
+	<div class="rooms_dir0">
+		
+		<i class="arrow right"></i>
+		<i class="arrow left"></i>
 	<div class="rooms_dir">
 	<span class="rooms_dir_full">
 		<!-- <span class="room_span rx2"></span> -->
 	</span>
 	</div>
+	</div>
 </div>
 
 
@@ -18,8 +23,12 @@
 <span>
 	
 		<span class="room_span rxt">
-			<div class="tile_title">Title</div>
-			<div class="tile_button"></div>
+			<span class="tile_overlay">
+
+			</span>
+				
+			<div class="tile_title"></div>
+			<div class="tile_button">Play Now</div>
 		</span>
 </span>
 

rf/i4m/m.js

@@ -4,7 +4,9 @@ mod_templates_4 = window.mod_templates_4 || $("")
 function html_js_handler_lobby(rsp) {
 	clog("html_js_handler_lobby",[...arguments])
 	mod_templates_4 = $(`<span>${rsp}</span>`)
+	clog("html_js_handler_lobby2")
 	init_lobby()
+	clog("html_js_handler_lobby3")
 	// init_api6()
 }
 
@@ -21,16 +23,93 @@ function init_lobby(){
 	// add_node(n,`.vid_toptoolbar_hook`,"append")
 	add_node(lr,"#welcome_page","append")
 	add_tiles()
+	$(".arrow").click(arrow_click_cb)
+	$(".tile_button").click(tile_button_cb)
 	clog("init_lobby........")
 	// $("#welcome_page").
 
+}
+function scroll_rt(n){
+	var rooms_scroll = $(".rooms_dir_full")
+	var room_tiles = rooms_scroll.children(".room_span")
+	room_tiles[n].scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
+	// room_span
+	// vid.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
+}
+
+
+function scroll_rt2(n){
+	var rooms_scroll = $(".rooms_dir_full")
+	var room_tiles = rooms_scroll.children(".room_span")
+	var bcr
+	var bcr_rooms
+	var rooms_dir =  $(".rooms_dir")
+	// rooms_scroll
+
+	bcr_rooms = rooms_dir[0].getBoundingClientRect()
+	clog("~~~",bcr_rooms)
+	var v_last 
+	var r,l
+	var r2,l2
+    for (v of room_tiles){
+        bcr = v.getBoundingClientRect()
+        // clog("...",bcr.left - bcr_rooms.left,bcr)
+        // clog("...",bcr_rooms.left - bcr.left ,bcr)
+        // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,bcr)
+        r = bcr_rooms.right - bcr.right
+        l = bcr_rooms.left - bcr.left
+        if ((r < 0 ) != ((r2 < 0))  && (r2 != undefined)){
+        	clog(":::",r,r2)
+        }
+        // if (l < 0 && !(l2 < 0) ){
+        if ((l < 0) != ((l2 < 0))   && (l2 != undefined)){
+        	clog(":::2",l,l2)
+        	
+        }
+
+        r2 = r
+        l2 = l
+
+
+
+
+
+        clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,v)
+        v_last = v
+    }
+
+
+	// var bcr
+}
+
+
+
+
+function arrow_click_cb(e){
+
+	clog("arrow_click_cb",{that:this,e})
+}
+function tile_button_cb(e){
+
+	var rspan = $(this).parents(".room_span")
+	var room_name = rspan[0].dataset["room"]
+
+	// clog("tile_button",rspan[0].dataset["room"],{that:this,e})
+	// clog("nav",location.pathname + rspan[0].dataset["room"])
+	if (!room_name){
+		clog("<>")
+		return 
+
+	}
+	location.assign(location.pathname + rspan[0].dataset["room"])
+
 }
 
 dj_tiles = [
-{"img":"fisher.png","title":"Fisher"},
-{"img":"louis_the_child.png","title":"Louis The Child"},
-{"img":"petit_biscuit.png","title":"Petit Biscuit"},
-{"img":"porter_robinson.png","title":"Porter Robinson"},
+{room:"fisher","img":"fisher.png","title":"Fisher"},
+{room:"louis_the_child","img":"louis_the_child.png","title":"Louis The Child"},
+{room:"petit_biscuit","img":"petit_biscuit.png","title":"Petit Biscuit"},
+{room:"porter_robinson","img":"porter_robinson.png","title":"Porter Robinson"},
 ]
 
 // $(".rxt")[0].style.cssText
@@ -45,8 +124,19 @@ function add_tiles(){
 
 		n = $(rtile2)
 		djt = dj_tiles[i]
+				// url("/ign/rf/img/cropped_bak.jpg");
 		if (djt){
-			n[0].cssText
+			n.css({
+				// "--vurl":`/ign/rf/artists/${djt["img"]}`,
+				// "--vurl":`"/ign/rf/artists/${djt["img"]}"`,
+				"--vurl":`url("/ign/rf/artists/${djt["img"]}")`,
+				"--vtitle":`"${djt["title"]}"`,
+			})
+			clog("zz")
+			// n[0].cssText += `--vurl:${djt["img"]};`
+			// n[0].cssText += `--vtitle:"${djt["title"]}"`
+		n.addClass(`rxz${i}`)
+		n[0].dataset["room"] = djt["room"]
 		}
 		n.addClass(`rx${i}`)
 		// add_node(n,".rooms_dir","append")
@@ -57,6 +147,7 @@ function add_tiles(){
 	set_width()
 }
 
+
 function set_width(){
 	var rdf = $('.rooms_dir_full')
   var totalWidth = 0;
@@ -97,6 +188,7 @@ $(document).ready(function(){
 clog(".....2")
 
 try {
+setTimeout(init_lobby,1000)
 init_lobby()
 } catch (err) {
 clog("err:",err)

rf/i4m/welcome.css

@@ -0,0 +1,16 @@
+#welcome_page{
+	background-image: url("/ign/rf/img/cropped_bak.jpg");
+		background-size: cover; 
+	background-position: 50% 50%; 
+}
+.header{
+	/*z-index: 40;*/
+	display: none !important;
+	/*opacity: .5;*/
+}
+.welcome-watermark{
+	/*z-index: 40;*/
+	display: none !important;
+
+}
+

rf/i4n/m.html

@@ -15,6 +15,14 @@
 
 
 
+<span class="plugin_top_v2 shared_vid_overlay">
+	<div class="shared_vid_div">
+		shared_vid_overlay
+	</div>
+
+</span>
+
+
 
 <span class="text_input_template">
 	<input type="text" class="text_input"><button class="text_input_submit">Enter</button>

rf/i4n/m.js

@@ -15,6 +15,27 @@ function html_js_handler_not_lobby(rsp) {
 }
 
 
+
+
+// reg_qxi
+
+
+
+function add_vid_overlay(){
+	var n,ntxt
+	// plugin_top_v2 shared_vid_overlay
+	saftly_remove(".plugin_top_v2.shared_vid_overlay")
+	// saftly_remove(".plugin_top_v2.popup_root")
+	n = mod_templates_4n.find(".plugin_top_v2.shared_vid_overlay")
+	ntxt = n[0].outerHTML
+	// ntxt = $(n)
+
+	// add_node(ntxt,`.new_toolbox_hook`,"append")
+	// qxi_event
+	add_node(ntxt,`.lvc_overlay`,"append")
+}
+
+
  
 
 
@@ -135,6 +156,8 @@ function set_display_name(name){
 
 
 try {
+	add_vid_overlay()
+	// add_vid_overlay
 // show_popup()
 // build_popup()
 // build_popup_av()

rf/i4n/m0.js

@@ -1 +1,5 @@
+/*    create_new_toolbox_hook(n){
+        add_node(n,`.new_toolbox_hook`,"append")
+    },
  
+*/

rf/m/m_req.js

@@ -168,6 +168,22 @@ function qxi2(o){
 	}
 	clog("qxi2",o.action.type,o)
 }
+
+
+function qxi_event(o){
+	var cb
+	cb = glob_mx.qxi_test[o.action.type]
+	if (cb){
+		cb(o)
+	}
+	// glob_mx.qxi_test
+
+}
+function reg_qxi(action_type,cb){
+	glob_mx.qxi_test[action_type] = cb
+}
+
+
 // this is called with setTimeout so we can throw errors without wrecking everything
 function dev_middleware_listner(o) {
 	if (!o.action.type){
@@ -176,7 +192,8 @@ function dev_middleware_listner(o) {
 	//			/*
 	if (o.action.type != "ENDPOINT_MESSAGE_RECEIVED"){
 		// CONFERENCE_JOINED
-		qxi2(o)
+		// qxi2(o)
+		qxi_event(o)
 		// if (o.action.type.startsWith("SET_TOOLBOX_" || o.action.type == "TOGGLE_TOOLBOX_VISIBLE")){
 			// SET_TOOLBOX_info(o,this)
 		// }

rf/m/m_utils.js

@@ -28,6 +28,11 @@ glob_mx.event_handlers = {}
 glob_mx.cb = {
 	init_db:{}
 }
+
+glob_mx.qxi_test = {
+
+}
+
 glob_mx.filmstrip_handlers  = {}
 //glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
 

rf/m2/m2.css

@@ -128,6 +128,13 @@
 }
 
 
+.vspace._hide {
+	
+}
+
+
+
+
 .lvov_container._hide .toggle_ff {
 	opacity: 0;
 	/*opacity: 1;*/