gajus / scream Goto Github PK

Hi,

I've been using this awesome util library for a while now and was wondering if you're planning to add Typescript support at some point. I'm happy to help out if needed.

--
Gio

IPhone X in landscape mode detects isMinimalView when window is in full view
Please help

This ticket is open in case _getMinimalViewHeight encounters dimensions of an unknown device.

Noticed the build has failed for the new merge. Something seems to have broken in the build and so it is not updating on NPM.

Hi,

We've just updated to latest version of scream with the Iphone X specs but it doesn't seem to work. The screen never unlocks when entering full screen-mode. Has anyone else tried this on the actual phone and gotten it to work?

Thanks guys!

Seems like with iOS14 coming out that the library is doing checks specifically for iOS13 versions. Is there planned updates to allow for ios 14?

I am building one web app and it need to calculate the height of the visible part when in the minimal view, when I look at the scream demo, I found the height of viewport didn't change at portrait or landscape dynamic.

plz advise how to solve this. thx!

Scream doesn't work on iOS 13. The expected minimal height is 1 pixel off from what the actual device outputs. Seems like they've somehow increased the viewport by 1 pixel.

Suggested workaround is to get rid of exact number checking and allow 1 pixel error in isMinimalView function here:

I'll file a pull request for the change and let's continue discussion there.

Remove "jshint" dev dependency from package.json and the gulp task.

sh:

npm install gulp-eslint --save-dev

gulpfile.js:

var eslint = require('gulp-eslint');

gulp.task('lint', function () {
    return gulp
        .src(['./src/*.js', './src/cinemas/*/*.js', './tests/*.js'])
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failOnError());
});

.eslintrc:

{
    "rules": {
        "no-console": 0,
        "no-extra-parens": 2,
        "no-reserved-keys": 2,
        "no-eq-null": 2,
        "no-extend-native": 2,
        "no-process-env": 2,
        "no-self-compare": 2,
        "no-void": 2,
        "no-warning-comments": [1, { "terms": ["todo", "@toto"], "location": "start" }],
        "vars-on-top": 2,
        "wrap-iife": [2, "inside"],
        "global-strict": [2, "always"],
        "new-cap": 0,
        "no-shadow": 0,
        "no-mixed-requires": 0,
        "no-new-require": 2,
        "brace-style": [2, "1tbs"],
        "comma-style": [2, "last"],
        "func-style": [2, "expression"],
        "no-inline-comments": 2,
        "no-lonely-if": 2,
        "no-multiple-empty-lines": 2,
        "no-nested-ternary": 2,
        "one-var": 2,
        "operator-assignment": [2, "always"],
        "padded-blocks": [2, "never"],
        "quote-props": [2, "as-needed"],
        "quotes": [2, "single"],
        "space-after-keywords": [2, "always"],
        "space-before-blocks": [2, "always"],
        "space-in-brackets": [2, "never"],
        "space-in-parens": [2, "never"],
        "space-unary-ops": [2, { "words": true, "nonwords": false }],
        "spaced-line-comment": [2, "always"],
    },
    "env":{
        "mocha": true,
        "node": true
    }
}

Instead of always having to update with new IOS devices, couldn't the measurements be calculated dynamically the same way the rules.js (https://github.com/gajus/scream/blob/master/.spec/ruler.js) script does it?

Is there something I'm missing why they have to be hard-coded?

In this https://github.com/gajus/scream/blob/master/src/scream.js file, we have specifications up to 11 Pro max.
It would be helpful if you provide more info on how to calculate these specs for iPhone 12 versions.

For example,
[1560, 2656, 3376, 1560, 390, 844, 3, 'iPhone 12/12 Pro (iOS 14)'],
[1712, 2984, 3704, 1712, 428, 926, 3, 'iPhone 12 Pro Max (iOS 14)'],

Curious if there is a demo anywhere.

Is it possible to detect the necessary widths from the device and pass them to the:

var scream = Scream({
    width: {
        portrait: 320,
        landscape: 640
    }
});

startup code?

Hi, I have seen that when we have the iPad in portrait format but with the home button at the top, the scream js not detected correctly interprets it as landscape. Therefore changes the width of the window in the viewport ... there any way to fix this?

Thank You.

I am working on an application where I wanted to integrate brim and scream together as illustrated here: https://github.com/gajus/brim#brim-setup

I installed brim through npm, but there was no gajus.Scream() when importing based on the example found on https://github.com/gajus/brim#brim-setup. So, I installed scream through npm. The current scream library is not meant for the browser, so I set up both npm packages to be compiled in webpack. After compiling the app and trying to run it, the following server side error is thrown. See below.

I am using:

• Rails 5.1.6
• React on Rails 7
• webpack 2.7.0
• npm 5.6.0
• node v8.10.0
• yarn 1.5.1

Client side dependencies:

"dependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "7",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-styled-components": "^1.1.4",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "brim": "^1.0.13",
    "downshift": "^2.2.3",
    "ellipsize": "^0.0.3",
    "es5-shim": "^4.5.9",
    "expose-loader": "^0.7.3",
    "fetch-ponyfill": "^4.0.0",
    "grid-styled": "^1.0.1",
    "humps": "^2.0.0",
    "imports-loader": "^0.7.1",
    "lodash": "^4.17.4",
    "moment": "^2.22.2",
    "normalizr": "^3.2.2",
    "number-to-words": "^1.2.3",
    "prop-types": "^15.5.8",
    "react": "^15.6.2",
    "react-copy-to-clipboard": "^5.0.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.13.1",
    "react-facebook-pixel": "^0.1.0",
    "react-ga": "^2.2.0",
    "react-gtm-module": "^1.0.4",
    "react-helmet": "^5.2.1",
    "react-instagram-embed": "^1.5.0",
    "react-lazy-load": "^3.0.13",
    "react-on-rails": "7.0.4",
    "react-player": "^1.11.0",
    "react-redux": "^5.0.4",
    "react-responsive-carousel": "^3.1.21",
    "react-responsive-image": "^3.4.3",
    "react-responsive-modal": "^2.1.0",
    "react-router-dom": "^4.1.1",
    "react-scroll": "^1.7.10",
    "react-share": "^2.4.0",
    "react-slick": "^0.23.1",
    "react-spinners": "^0.1.9",
    "react-svg-loader": "^1.1.1",
    "react-tweet-embed": "^1.2.2",
    "redux": "^3.6.0",
    "redux-saga": "^0.15.3",
    "scream": "^2.5.0",
    "scroll-depth": "^1.0.0",
    "slick-carousel": "^1.8.1",
    "storybook-router": "^0.2.8",
    "styled-components": "^2.0.0",
    "uuid": "^3.0.1",
    "webpack": "^2.3.3",
    "yarn": "^1.3.2"
  },
  "devDependencies": {
    "@storybook/react": "^3.1.5",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-15": "^1.3.0",
    "enzyme-to-json": "^3.3.5",
    "eslint-config-prettier": "^3.3.0",
    "eslint-plugin-prettier": "^3.0.0",
    "file-loader": "^0.11.2",
    "jest": "^20.0.4",
    "prettier": "^1.15.2",
    "react": "^15.5.4",
    "react-scripts": "^0.9.5",
    "react-test-renderer": "^15.5.0",
    "redux-devtools": "^3.3.1",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.0.11",
    "redux-logger": "^3.0.0"
  }

ActionView::Template::Error (ERROR in SERVER PRERENDERING
Encountered error: "TypeError: global.addEventListener is not a function"
when prerendering 

Hello,

trying to using it in a browser, via npm install, give this error

scream.js:3 Uncaught ReferenceError: exports is not defined

there are some requirements that need to be added? (requirejs, or whatever, if so what version?)
what other things need to be installed?

there is a demo page that work? sandbox seem broken

Since the update to Scream, here:

df2ad69

Brim is no longer compatible with Scream. The call to instanceOf(gajus.Scream) fails in the assertion checking here:

https://github.com/gajus/brim/blob/master/src/brim.js#L19-L21

I need support for Chrome in IOS. Many thanks

hi, firstly I wanted to thank you for the effort your putting in this project. I've noticed that I also had the problem I couldn't kill the event listeners when using the version 2.0.8. Since I've added that feature recently I want to include it in my project. But that seems to be a problem since I'm using bower for the dependencies and the project requires ES5. How can I include the latest version and make it work?

Hi,

I'm having trouble using scream when configuring the dimensions of the viewport.
I'd like to use the defaults (device-width) for all different devices. But the viewport meta tag generated has a 1.775 scale.

<meta name="viewport" content="width=320, initial-scale=1.775, minimum-scale=1.775, maximum-scale=1.775, user-scalable=0">

...white it should be:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">

Any workaround to keep the initial/minimum/maximum/scale to 1.0?

Thanks!

impossible to use the newest 2.2.1 via npm install scream since the dist folder with the scream.js does not make its way into the project

the previous version 2.2.0 works correctly so for now we must do npm install [email protected] to get it to work