@viewlift/player-backup 1.0.2-lighteningjs → 1.0.3-lighteningjs
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.css +1 -1
- package/dist/index.cjs.css.map +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.d.ts +11 -32
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +2 -2
- package/package.json +4 -1
- package/src/index.ts +28 -196
- package/src/player-components/player-buttons/playerButtons.js +4 -2
- package/src/player-components/player-title/playerTitle.js +1 -0
- package/src/player-ui/player-ui.js +61 -11
- package/src/playerControls/playerControls.css +10 -0
- package/src/playerControls/playerControls.js +501 -0
- package/src/styles/index.css +7 -3
- package/tsconfig.json +1 -0
package/dist/index.cjs.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
body{background-color:#000;box-sizing:border-box;margin:0;padding:0}.vl-player-container .seekbar-container{background:#444;border-radius:6px;bottom:50px;cursor:pointer;height:12px;left:50%;margin:0;position:absolute;transform:translateX(-50%);user-select:none;width:90%;z-index:20}.vl-player-container .seekbar-buffer{background:#888;border-radius:6px;height:100%;position:absolute;width:0;z-index:1}.vl-player-container .seekbar-progress{background
|
|
1
|
+
body{background-color:#000;box-sizing:border-box;margin:0;padding:0}.vl-player-container .seekbar-container{background:#444;border-radius:6px;bottom:50px;cursor:pointer;height:12px;left:50%;margin:0;position:absolute;transform:translateX(-50%);user-select:none;width:90%;z-index:20}.vl-player-container .seekbar-buffer{background:#888;border-radius:6px;height:100%;position:absolute;width:0;z-index:1}.vl-player-container .seekbar-progress{background:rgba(254,253,255,.7);border-radius:6px;height:100%;position:absolute;transition:width .1s linear;width:0;z-index:2}.vl-player-container .seekbar-thumb{background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background .2s;width:16px;z-index:3}.vl-player-container .seekbar-thumb:hover{background:#ffeaea}.vl-player-container .seekbar-tooltip{background:#222;border-radius:4px;bottom:24px;color:#fff;font-size:12px;left:0;padding:2px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:10}.vl-player-container .seekbar-duration-label,.vl-player-container .seekbar-time-label{color:#eee;font-size:13px;margin-right:4px;position:relative;top:18px;z-index:5}.vl-player-container .play-pause-btn{background:hsla(0,0%,100%,.5);border-radius:50%;cursor:pointer;height:70px;left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%);width:70px;z-index:20}.vl-player-container .play-pause-btn img{height:50px;left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.vl-player-container .left-side-container{bottom:77px;display:flex;left:5%;position:absolute!important}.vl-player-container .right-side-container{bottom:77px;display:flex;position:absolute!important;right:5%}.vl-player-container .settings-btn{background:hsla(0,0%,100%,.5);border-radius:5px;bottom:100px;cursor:pointer;height:40px;margin:0 5px;padding:5px;width:50px;z-index:20}.vl-player-container .settings-btn img{height:100%}.vl-player-container .restart-btn{border:2px solid #fff;border-radius:8px;bottom:100px;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-size:20px;font-weight:700;justify-content:center;margin:0 5px;padding:5px;right:2%;z-index:20}.vl-player-container .default-option-wrapper{align-items:center;background:#525760;border-radius:2px;box-shadow:0 10px 15px rgba(0,0,0,.1);color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;height:50px;justify-content:space-between;margin:20px 0;padding:5px 10px;text-transform:capitalize;width:95%}.vl-player-container .default-option-wrapper span{height:40px}.vl-player-container .default-option-wrapper span>img{height:100%}.vl-player-container .default-sidebar{background-color:rgba(30,30,30,.75);color:#fff;display:flex;flex-direction:column;height:100%;min-height:720px;padding:50px 20px 0;position:absolute;right:0;top:0;width:400px;z-index:30}.vl-player-container .focused{outline:2px solid #fff}
|
|
2
2
|
/*# sourceMappingURL=index.cjs.css.map */
|
package/dist/index.cjs.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.css"],"names":[],"mappings":"AACE,KAIE,qBAAsB,CADtB,qBAAsB,CAFtB,QAAS,CACT,SAGF,CACF,wCAMI,eAAgB,CAGhB,iBAAkB,CALlB,WAAY,CAIZ,cAAe,CAHf,WAAY,CAHZ,QAAS,CAQT,QAAS,CATT,iBAAkB,CAElB,0BAA2B,CAQ3B,gBAAiB,CAJjB,SAAU,CAKV,UACF,CAEF,qCAGI,eAAgB,CAEhB,iBAAkB,CAHlB,WAAY,CADZ,iBAAkB,CAGlB,OAAQ,CAER,SACF,CAEF,uCAGI,
|
|
1
|
+
{"version":3,"sources":["index.css"],"names":[],"mappings":"AACE,KAIE,qBAAsB,CADtB,qBAAsB,CAFtB,QAAS,CACT,SAGF,CACF,wCAMI,eAAgB,CAGhB,iBAAkB,CALlB,WAAY,CAIZ,cAAe,CAHf,WAAY,CAHZ,QAAS,CAQT,QAAS,CATT,iBAAkB,CAElB,0BAA2B,CAQ3B,gBAAiB,CAJjB,SAAU,CAKV,UACF,CAEF,qCAGI,eAAgB,CAEhB,iBAAkB,CAHlB,WAAY,CADZ,iBAAkB,CAGlB,OAAQ,CAER,SACF,CAEF,uCAGI,+BAAoC,CAEpC,iBAAkB,CAHlB,WAAY,CADZ,iBAAkB,CAMlB,2BAA6B,CAH7B,OAAQ,CAER,SAEF,CAEF,oCAMI,eAAgB,CAChB,iBAAkB,CAGlB,mCAAqC,CACrC,cAAe,CANf,WAAY,CAJZ,iBAAkB,CAClB,OAAQ,CACR,8BAAgC,CAShC,yBAA2B,CAR3B,UAAW,CAKX,SAIF,CACD,0CACG,kBACF,CAED,sCAKG,eAAgB,CAGhB,iBAAkB,CANlB,WAAY,CAIZ,UAAW,CAGX,cAAe,CANf,MAAO,CAIP,eAAgB,CAIhB,mBAAoB,CAVpB,iBAAkB,CAGlB,0BAA2B,CAM3B,kBAAmB,CAEnB,UACF,CAEF,sFAII,UAAW,CADX,cAAe,CAEf,gBAAiB,CAJjB,iBAAkB,CAClB,QAAS,CAIT,SACF,CAOF,qCASE,6BAAiC,CADjC,iBAAkB,CAElB,cAAe,CAHf,WAAY,CALZ,QAAS,CADT,2BAA6B,CAE7B,OAAQ,CACR,8BAAgC,CAEhC,UAAW,CADX,UAMF,CAEA,yCAKE,WAAY,CAHZ,QAAS,CADT,2BAA6B,CAE7B,OAAQ,CACR,8BAEF,CAGA,0CAIE,WAAY,CAFZ,YAAa,CACb,OAAQ,CAFR,2BAIF,CAEA,2CAIE,WAAY,CAFZ,YAAa,CADb,2BAA6B,CAE7B,QAEF,CAEA,mCAOE,6BAAkC,CANlC,iBAAkB,CAElB,YAAa,CAKb,cAAe,CAHf,WAAY,CACZ,YAAa,CAJb,WAAY,CAEZ,UAAW,CAKX,UACF,CAEA,uCACE,WACF,CAEA,kCAKE,qBAAsB,CAHtB,iBAAkB,CAElB,YAAa,CAEb,UAAW,CAOX,cAAe,CAJf,YAAa,CACb,qBAAsB,CAHtB,cAAe,CACf,eAAgB,CAGhB,sBAAuB,CACvB,YAAa,CATb,WAAY,CAFZ,QAAS,CAaT,UACF,CAIA,6CAGE,kBAAmB,CAGnB,kBAAmB,CAKnB,iBAAkB,CAClB,qCAAyC,CALzC,UAAW,CAQX,cAAe,CAdf,YAAa,CASb,cAAe,CADf,eAAgB,CAJhB,WAAY,CAHZ,6BAA8B,CAW9B,aAAgB,CALhB,gBAAiB,CAMjB,yBAA0B,CAV1B,SAYF,CACA,kDACE,WACF,CAEA,sDACE,WACF,CAGA,sCAME,mCAAuC,CAHvC,UAAW,CACX,YAAa,CACb,qBAAsB,CAEtB,WAAY,CACZ,gBAAiB,CAEjB,mBAAyB,CATzB,iBAAkB,CAUlB,OAAU,CATV,KAAM,CAON,WAAY,CAGZ,UAEF,CAEA,8BACI,sBACJ","file":"index.cjs.css","sourcesContent":["/*************** playerSeekbar.css ***************/\n body {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n background-color: #000;\n }\n.vl-player-container .seekbar-container {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: 50px;\n height: 12px;\n background: #444;\n width: 90%;\n cursor: pointer;\n border-radius: 6px;\n margin: 0;\n user-select: none;\n z-index: 20;\n }\n \n.vl-player-container .seekbar-buffer {\n position: absolute;\n height: 100%;\n background: #888;\n width: 0;\n border-radius: 6px;\n z-index: 1;\n }\n \n.vl-player-container .seekbar-progress {\n position: absolute;\n height: 100%;\n background: rgba(254, 253, 255, 0.7);\n width: 0;\n border-radius: 6px;\n z-index: 2;\n transition: width 0.1s linear;\n }\n \n.vl-player-container .seekbar-thumb {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 50%;\n /* border: 2px solid #4169E1; */\n z-index: 3;\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n cursor: pointer;\n transition: background 0.2s;\n }\n .vl-player-container .seekbar-thumb:hover {\n background: #ffeaea;\n }\n \n .vl-player-container .seekbar-tooltip {\n position: absolute;\n bottom: 24px;\n left: 0;\n transform: translateX(-50%);\n background: #222;\n color: #fff;\n padding: 2px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n }\n \n.vl-player-container .seekbar-time-label, .vl-player-container .seekbar-duration-label {\n position: relative;\n top: 18px;\n font-size: 13px;\n color: #eee;\n margin-right: 4px;\n z-index: 5;\n }\n \n\n\n\n/*************** playerButtons.css ***************/\n\n.vl-player-container .play-pause-btn {\n position: absolute !important;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 20;\n width: 70px;\n height: 70px;\n border-radius: 50%;\n background: rgba(255,255,255, .5);\n cursor: pointer;\n} \n\n.vl-player-container .play-pause-btn img {\n position: absolute !important;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n height: 50px;\n}\n\n\n.vl-player-container .left-side-container {\n position: absolute !important;\n display: flex;\n left: 5%;\n bottom: 77px;\n}\n\n.vl-player-container .right-side-container {\n position: absolute !important;\n display: flex;\n right: 5%;\n bottom: 77px;\n}\n\n.vl-player-container .settings-btn {\n border-radius: 5px;\n padding: 5px;\n bottom: 100px;\n width: 50px;\n height: 40px;\n margin: 0 5px;\n background: rgba(255,255,255, 0.5);\n cursor: pointer;\n z-index: 20;\n}\n\n.vl-player-container .settings-btn img{\n height: 100%;\n}\n\n.vl-player-container .restart-btn {\n right: 2%;\n border-radius: 8px;\n padding: 5px;\n bottom: 100px;\n border: 2px solid #fff;\n color: #fff;\n font-size: 20px;\n font-weight: 700;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 5px;\n cursor: pointer;\n z-index: 20;\n}\n\n\n/*************** player-setting-option-wrapper ***************/\n.vl-player-container .default-option-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 95%;\n height: 50px;\n background: #525760;\n color: #fff;\n padding: 5px 10px;\n font-weight: 700;\n font-size: 18px;\n border-radius: 2px;\n box-shadow: 0 10px 15px rgba(0, 0, 0, .1);\n margin: 20px 0px;\n text-transform: capitalize;\n cursor: pointer;\n}\n.vl-player-container .default-option-wrapper span {\n height: 40px;\n}\n\n.vl-player-container .default-option-wrapper span > img{\n height: 100%;\n}\n\n\n.vl-player-container .default-sidebar {\n position: absolute;\n top: 0;\n color: #fff;\n display: flex;\n flex-direction: column;\n background-color: rgba(30, 30, 30, .75);\n height: 100%;\n min-height: 720px;\n width: 400px;\n padding: 50px 20px 0 20px;\n right: 0px;\n z-index: 30;\n /* right: -450px; */\n}\n\n.vl-player-container .focused{\n outline: 2px solid #ffffff;\n}"]}
|