@skooldev/skool-stream-layout 1.0.0

package/README.md

@@ -0,0 +1,17 @@
+# @skooldev/skool-stream-layout
+
+A custom video call layout built for [GetStream’s Stream Video SDK](https://getstream.io/video/)
+
+## 🚀 Installation
+
+```bash
+npm install @skooldev/skool-stream-layout
+# or
+yarn add @skooldev/skool-stream-layout
+```
+
+## 🧱 Usage
+
+```tsx
+import { SkoolStreamLayout } from "@skooldev/skool-stream-layout";
+```

package/dist/index.cjs.js

@@ -0,0 +1,2 @@
+/*! For license information please see index.cjs.js.LICENSE.txt */
+(()=>{"use strict";var e={56:(e,t,r)=>{e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},72:e=>{var t=[];function r(e){for(var r=-1,o=0;o<t.length;o++)if(t[o].identifier===e){r=o;break}return r}function o(e,o){for(var i={},n=[],s=0;s<e.length;s++){var c=e[s],l=o.base?c[0]+o.base:c[0],d=i[l]||0,p="".concat(l," ").concat(d);i[l]=d+1;var u=r(p),v={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==u)t[u].references++,t[u].updater(v);else{var f=a(v,o);o.byIndex=s,t.splice(s,0,{identifier:p,updater:f,references:1})}n.push(p)}return n}function a(e,t){var r=t.domAPI(t);return r.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;r.update(e=t)}else r.remove()}}e.exports=function(e,a){var i=o(e=e||[],a=a||{});return function(e){e=e||[];for(var n=0;n<i.length;n++){var s=r(i[n]);t[s].references--}for(var c=o(e,a),l=0;l<i.length;l++){var d=r(i[l]);0===t[d].references&&(t[d].updater(),t.splice(d,1))}i=c}}},100:(e,t,r)=>{r.d(t,{A:()=>s});var o=r(601),a=r.n(o),i=r(314),n=r.n(i)()(a());n.push([e.id,'.skool-stream-layout{background-color:#131314;color:#fff}.skool-stream-layout .str-video__paginated-grid-layout{padding-top:16px}.skool-stream-layout .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{padding-inline:16px 0}.skool-stream-layout .str-chat__channel .str-chat__container{flex-direction:column}.skool-stream-layout .str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar .str-video__speaker-layout__participant-tile{min-width:215px}.skool-stream-layout .str-video__participant-view--speaking{outline:2px solid #f1d07c}.skool-stream-layout .str-video__video-placeholder .str-video__video-placeholder__avatar{width:auto;height:88px;max-height:40%;aspect-ratio:1}.skool-stream-layout .str-video__video-placeholder{background:#343537}.skool-stream-layout .str-video__paginated-grid-layout__wrapper .str-video__video{aspect-ratio:4/3}.skool-stream-layout .str-video__paginated-grid-layout__wrapper .str-video__participant-view--no-video .str-video__video-placeholder{aspect-ratio:4/3;position:unset !important}.skool-stream-layout .str-video__paginated-grid-layout__wrapper .str-video__participant-view{aspect-ratio:unset}.skool-stream-layout .str-video__video.str-video__video--screen-share{object-fit:contain}.participant-label{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:normal;font-style:normal;font-size:14;line-height:1.5;position:absolute;bottom:8px;left:8px;display:flex;align-items:center;gap:4px;border-radius:8px;background:rgba(19,19,20,.66);padding:4px 8px;color:#fff}.mute-icon{width:1rem;height:1rem;mask-size:1rem;-webkit-mask-size:1rem;background-color:var(--str-video__text-color1);mask-image:var(--str-video__icon--mic-off);-webkit-mask-image:var(--str-video__icon--mic-off)}.pin-icon{width:1rem;height:1rem;mask-size:1rem;-webkit-mask-size:1rem;background-color:var(--str-video__text-color1);mask-image:var(--str-video__icon--pin);-webkit-mask-image:var(--str-video__icon--pin)}',""]);const s=n},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r="",o=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),o&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),o&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r}).join("")},t.i=function(e,r,o,a,i){"string"==typeof e&&(e=[[null,e,void 0]]);var n={};if(o)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(n[c]=!0)}for(var l=0;l<e.length;l++){var d=[].concat(e[l]);o&&n[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),r&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=r):d[2]=r),a&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=a):d[4]="".concat(a)),t.push(d))}},t}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},601:e=>{e.exports=function(e){return e[1]}},659:e=>{var t={};e.exports=function(e,r){var o=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(r)}},698:(e,t)=>{var r=Symbol.for("react.transitional.element");function o(e,t,o){var a=null;if(void 0!==o&&(a=""+o),void 0!==t.key&&(a=""+t.key),"key"in t)for(var i in o={},t)"key"!==i&&(o[i]=t[i]);else o=t;return t=o.ref,{$$typeof:r,type:e,key:a,ref:void 0!==t?t:null,props:o}}Symbol.for("react.fragment"),t.jsx=o,t.jsxs=o},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var o="";r.supports&&(o+="@supports (".concat(r.supports,") {")),r.media&&(o+="@media ".concat(r.media," {"));var a=void 0!==r.layer;a&&(o+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),o+=r.css,a&&(o+="}"),r.media&&(o+="}"),r.supports&&(o+="}");var i=r.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(o,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},848:(e,t,r)=>{e.exports=r(698)}},t={};function r(o){var a=t[o];if(void 0!==a)return a.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};r.r(o),r.d(o,{SkoolStreamLayout:()=>b});var a=r(848);const i=require("react"),n=require("@stream-io/video-react-sdk");var s=r(72),c=r.n(s),l=r(825),d=r.n(l),p=r(659),u=r.n(p),v=r(56),f=r.n(v),m=r(540),_=r.n(m),y=r(113),h=r.n(y),g=r(100),k={};k.styleTagTransform=h(),k.setAttributes=f(),k.insert=u().bind(null,"head"),k.domAPI=d(),k.insertStyleElement=_(),c()(g.A,k),g.A&&g.A.locals&&g.A.locals;const x=()=>{const e=null===n.useParticipantViewContext||void 0===n.useParticipantViewContext?void 0:(0,n.useParticipantViewContext)(),{participant:t}=e,r=(0,i.useMemo)(()=>{var e;return!!(null===(e=t.pausedTracks)||void 0===e?void 0:e.includes(n.SfuModels.TrackType.VIDEO))},[t]);return(0,a.jsxs)("div",{className:"participant-label",children:[(0,a.jsx)("span",{children:t.name}),!(0,n.hasAudio)(t)&&(0,a.jsx)("span",{className:"mute-icon"}),(0,n.isPinned)(t)&&(0,a.jsx)("span",{className:"pin-icon"}),r&&(0,a.jsx)(n.Icon,{icon:"low-bandwidth"})]})},b=(0,i.memo)(()=>{const e=(0,n.useCall)(),{useParticipants:t,useHasOngoingScreenShare:r}=(0,n.useCallStateHooks)(),o=t(),s=r(),c="livestream"===(null==e?void 0:e.type),l=(0,i.useMemo)(()=>!!o.find(e=>(0,n.isPinned)(e)),[o]),d=(0,i.useMemo)(()=>{const e=c?{$or:[{hasVideo:!0},{hasScreenShare:!0}]}:void 0;return s||o.length>2&&l?(0,a.jsx)(n.SpeakerLayout,{ParticipantViewUIBar:x,ParticipantViewUISpotlight:x,filterParticipants:e}):(0,a.jsx)(n.PaginatedGridLayout,{groupSize:12,ParticipantViewUI:x,filterParticipants:e})},[s,o,l,c]);return(0,a.jsx)("div",{className:"skool-stream-layout",children:d})});module.exports=o})();

package/dist/index.cjs.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./styles.scss";
+export declare const SkoolStreamLayout: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@skooldev/skool-stream-layout",
+  "version": "1.0.0",
+  "description": "Skool Stream Layout",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "webpack --mode production",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@stream-io/video-react-sdk": "^1.25.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "mini-css-extract-plugin": "^2.9.4",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "sass": "^1.80.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skooldev/skool-stream-layout"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "author": "Skool Dev Team"
+}